Full Screen Landing Page source code
HTML
<!DOCTYPE html>
<html>
<head>
<title>landing page </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Landing Page</h1>
<p>Using HTML & CSS</p>
</div>
</body>
</html>
css code
body{
margin: 0;
padding: 0;
height: 100%vh;
width: 100%;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
display: table;
}
.container{
margin-top: 220px;
}
h1{
color: white;
font-family: sans-serif;
font-weight: 300;
font-size: 500%;
text-transform: uppercase;
margin-bottom: 0;
text-align: center;
}
p{
color: white;
font-family: sans-serif;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 15px;
font-size:20px;
text-align: center;
margin-top: 10px;
}
@media(max-width: 768px){
h1{
font-size: 300%;
}
p{
font-size: 17px;
letter-spacing: 10px;
}
}
Full Screen Landing Page source code
Reviewed by easycoding
on
November 18, 2020
Rating:
Reviewed by easycoding
on
November 18, 2020
Rating:
No comments: