Learn how to create responsive landing page design using html and css only, this design can be created by anyone who has knowledge of html and css (In case of css you must know what is Flexbox and Grid if you don’t know these topics still their is no problem you can follow my css tutorials to learn all these topics, My videos are in Hindi language link are given)
CSS TUTORIALS – CHECK OUT CSS TUTORIALS
HTML TUTORIALS – CHECK OUT HTML TUTORIALS
So now you know that this design is a intermediate level design so i have provided video tutorial too in case if you don’t understand the code okay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>By Reecry</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.main-container{
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: center;
}
.bg-image{
height: 100vh;
background: url("./images/background.png");
background-size: cover;
background-position: center;
position: sticky;
top: 0px;
}
.container-two{
background: linear-gradient(to bottom, #FFD7A7, #FF9B21);
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
padding: 3em;
}
.heading-container > h1 {
font-size: 3em;
text-transform: uppercase;
color: #864a00;
}
.heading-container > p{
font-size: 1em;
text-transform: uppercase;
color: white;
}
.input-container {
display: flex;
margin-top: 2em;
}
.input-container > input{
width: 100%;
padding: 1.5em;
outline: none;
border: none;
border-radius: 8px 0px 0px 8px;
-webkit-border-radius: 8px 0px 0px 8px;
-moz-border-radius: 8px 0px 0px 8px;
-ms-border-radius: 8px 0px 0px 8px;
-o-border-radius: 8px 0px 0px 8px;
font-size: 1em;
color: grey;
flex-basis: 125em;
}
.input-container > button {
width: 100%;
padding: 1.5em;
outline: none;
border: none;
border-radius: 0px 8px 8px 0px;
-webkit-border-radius: 0px 8px 8px 0px;
-moz-border-radius: 0px 8px 8px 0px;
-ms-border-radius: 0px 8px 8px 0px;
-o-border-radius: 0px 8px 8px 0px;
font-size: 1em;
color: white;
background-color: #ff9800;
}
.offer-container{
background-color: white;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
padding: 2em;
margin-top: 3em;
}
.offer-container > h1{
font-size: 1.7em;
text-transform: capitalize;
}
.signup-container{
display: flex;
align-content: center;
margin-top: 1em;
align-items: center;
}
.signup-container > button {
width: 10em;
padding: 1em;
outline: none;
border: none;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
font-size: 1em;
color: white;
background-color: #FF9800;
}
.signup-container > p{
color: black;
padding-left: 1em;
}
@media only screen and (max-width: 1300px){
.main-container{
grid-template-columns: 1fr 2fr;
}
}
@media only screen and (max-width: 800px){
.main-container{
display: grid;
grid-template-columns: 1fr;
}
.container-one{
display: none;
}
.container-two{
width: 100%;
padding: 2em;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="container-one">
<div class="bg-image">
</div>
</div>
<div class="container-two">
<div class="heading-container">
<h1>digital marketing club</h1>
<br/>
<p>Make Your Dreams Come True By joining
Digital Marketing Club online, Learn how to grow
your slow bussiness fast and efficently.
</p>
</div>
<div class="input-container">
<input type="text" placeholder="Join Email News letter">
<button>Subscribe</button>
</div>
<div class="offer-container">
<h1>
join us today get 50$ ads credit
</h1>
<div class="signup-container">
<button>Signup</button>
<p> & start promting your bussniess.</p>
</div>
</div>
</div>
</div>
</body>
</html>