Full-Screen Homepage Design HTML CSS

byCodingFlicks -October 24, 2020

0

Hi there. Today I will be sharing another simple HTML CSS snippet based on how to create a Full-Screen Homepage using HTML and CSS. In this project, I made a simple full-screen banner with some text animation in it. Later I CSS media queries to make this snippet looks responsive on small devices. For making the text animation, I took the help of CSS keyframes animation animations. For making the text exactly in the middle of the homepage, I used CSS flex property and some CSS basic styling. Previously I have shared some CSS animation examples. Check those out if you want. Without explaining any further, I am providing you the code below to do some experiments with the codes.

Copy and paste the following code to your HTML and CSS file and save it. Run the project to your favorite browser and make some styling changes to see how it looks.

HTML

<!doctype html>
<!--code by codingflicks.com-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Full-Screen Homepage Design HTML CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <nav>
           <a href="#">Home</a>
           <a href="#">About</a>
           <a href="#">Portfolio</a>
           <a href="#">Services</a>
           <a href="#">Contact</a>
       </nav> 
    <div class="banner-area">
       
        <h2>Banner Text</h2>  
        <a href="#" class="btn">Contact us</a>
    </div>
</body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
}
nav {
    position: absolute;
    width: 1000px;
    left: 100px;
    top: 30px;
}
nav a {
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-family: poppins;
    margin-right: 25px; 
}
.banner-area h2 {
    font-family: poppins;
    font-size: 65px;
    margin: 0 0 25px; 
}
.banner-area{
    width: 100%;
    height: 100vh;
    background: url(https://images.pexels.com/photos/358528/pexels-photo-358528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); 
    background-position: center;
    -webkit-background-size:cover;
    background-size:cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 2vw;
    color: #fff;
}
.btn{
    text-decoration: none;
    padding: 10px 50px;
    color: #fff;
    border:3px solid #fff;
    transition: 0.6s ease;
    animation: animate 2s 1;
    font-size: 15px;
    font-weight: 900;
}
.btn:hover{
    background-color: #fff;
    color: #000;
}
@keyframes animate {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
h2{
    animation: animate 2s 1;
}


@media (max-width: 600px){
    nav {
width: 100%;
left: 10px;
}
    nav a {
font-size: 11px;
margin-right: 7px;
}
    .banner-area h2 {
font-size: 28px;
}
}

Thank you for visiting, and follow our social media profiles to stay connected.

Please do not enter any spam link in the comment box.