Responsive Landing Page Using HTML CSS

Responsive Landing Page Using HTML, CSS

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.

Responsive landing page video tutorial

View 10 Best Web Development Books

<!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>

reecry