Home / Project / Make a Responsive Landing page using HTML and CSS

Make a Responsive Landing page using HTML and CSS

-

in this tutorial, I will show you how to make a beautiful and responsive Landing Page using HTML& CSS.
you can download the project folder directly from the link at the end of the article,

Video Tutorial






Source Code

HTML Code



 <!DOCTYPE HTML>


<html>
    <head>
        <link rel="stylesheet" href="main.css">
        <meta name="viewport" content="width=device-width , initial-scale=1.0">
    </head>
    
    
    <body>
        
        <div class="filter">
        </div>
        <div class="nav">
               <div class="container">
                   <h1>Logo</h1>
               
               </div>
                
        </div>       
        <div class="description">
            <h1>Welcome to our website</h1>
            <p>discover our amazing website with our amazing services and contact us </p>
        </div> 
    </body>
</html>

CSS Code


 @import url('https://fonts.googleapis.com/css?family=Dancing+Script|Marck+Script|Nunito|Oleo+Script&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background-image: url(https://images.unsplash.com/photo-1489252614717-e24ec918e368?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.nav{
    width: 100%;
    height: 80px;
    position: relative;
    z-index: 9;
}
.container{
    width: 80%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

.nav h1{
    color: #fafafa;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Marck Script",cursive;
    font-size: 38px;
}


.filter{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

.description{
    
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fafafa;
}
.description h1{
    font-size: 60px;
    text-transform: uppercase;
    font-family: 'Oleo Script', cursive;
}
.description p{
    font-size: 40px;
    font-family: 'Oleo Script', cursive;
}
@media screen and (max-width:700px){
    .container{
        width: 100%;
    }
    
    .nav h1{
        
        left: 50%;
        transform: translateX(-50%);
    }
    
    .description{
        z-index: 0;
        
    }
    .description h1{
        font-size: 1.8rem;
    }
    .description p{
        font-size: .9rem;
    }
}

if you liked this project and you want to see more you can Subscribe to our channel
Download link : Download
Make a Responsive Landing page using HTML and CSS Make a Responsive Landing page using HTML and CSS Reviewed by Medics on August 03, 2019 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
-->
Powered by Blogger.