In this post, you will learn to make an amazing FullScreen Landing Page Using Only Html & CSS. Here is the video and source code. Enjoy! ☺
VIDEO :
SOURCE CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/82fb063a14.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Amazing Full Screen Landing Page</title>
</head>
<body>
<div class="header">
<div class="main">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<h1>Think Creative</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="buttons">
<button class="btn1"><i class="fas fa-play"></i> Play Video</button>
<button class="btn2"><i class="fas fa-download"></i> Download</button>
</div>
</div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
.header{
height: 100vh;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("bg.jpg")no-repeat;
background-size: cover;
}
.main{
margin: auto;
max-width: 1200px;
}
.main ul{
float: right;
list-style: none;
}
.main ul li{
display: inline-block;
}
.main ul li a{
color: #ffffff;
text-decoration: none;
padding: 10px 10px;
font-size: 25px;
}
.header h1{
color: #ffffff;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 50px;
font-weight: 500;
}
.header p{
color: #ffffff;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 25px;
}
.buttons{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn1{
border: none;
outline: none;
border-radius: 2px;
background: #e74c3c;
font-size: large;
padding: 10px 15px;
color: #ffffff;
font-family: Century Gothic;
cursor: pointer;
}
.btn2{
border: none;
outline: none;
border-radius: 2px;
background: #ffffff;
font-size: large;
padding: 10px 15px;
font-family: Century Gothic;
cursor: pointer;
}
Comments
Post a Comment