New website home page design using Html and CSS with all files download
Preview:
HTML Code:
traval.html
<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<nav class="navbar">
<img class="logo" src="logo 1.png" alt="logo">
<ul class="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Book Trip</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div class="center">
<h1>Explore The Whole World</h1>
<p class="main">Book Your Trip Now and Enjoy with US</p>
<p class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laborum, omnis soluta quibusdam perspiciatis ducimus et, dolorum totam quod corrupt
libero nemo quam, culpa nam. Placeat officia atque quia nulla eos, suscipit excepturi
aspernatur, nobis, animi nemo maiores exercitationem? Labore, vero? In, eos similique
dicta maiores pariatur expedita eligendi unde suscipit?</p>
</div>
<div class="button">
<a href="#">Book Trip</a>
<a href="#">Contact Us</a>
</div>
<div class="footer">
<p>© This Web Page Created By CodeStudio</p>
</div>
</div>
</body>
</html>
CSS Code:
style.css
*{
margin: 0;
padding: 0;
}
.container{
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("background 2.jpg");
height: 100vh;
background-position: center;
background-size: cover;
position: relative;
}
.navbar{
width: 100%;
height: 10vh;
}
.navmenu{
float: right;
list-style: none;
margin: 28px 50px;
}
.logo{
width: 73px;
height: 70px;
margin: 18px 140px;
cursor: pointer;
transition: 0.4s;
}
.logo:hover{
width: 77px;
height: 74px;
}
.navmenu li{
display: inline-block;
margin: 15px;
height: 6vh;
}
.navmenu li a{
color: #fff;
text-decoration: none;
padding: 5px 20px;
border: 2px solid #fff;
border-radius: 15px;
font-size: 13px;
text-transform: uppercase;
transition: 0.4s;
}
.navmenu li a:hover{
background: #fff;
color: #000;
font-size: 16px;
}
.center {
position: absolute;
width: 1150px;
height: 300px;
margin: 13% 13%;
text-align: center;
cursor: default;
}
.center h1{
color: #fff;
text-transform: uppercase;
font-size: 70px;
transition: 0.5s;
}
.center h1:hover{
font-size: 65px;
color: rgb(8, 196, 230);
}
.main{
color: rgb(255, 255, 255);
font-size: 20px;
margin-top: 20px;
text-decoration: underline;
transition: 0.5s;
}
.main:hover{
color: rgb(47, 218, 248);
}
.info{
color: rgb(240, 240, 240);
font-size: 15px;
margin-top: 5px;
}
.button{
position: absolute;
text-align: center;
margin: 29% 27%;
width: 700px;
height: 100px;
}
.button a{
color: #fff;
font-size: 20px;
margin: 20px;
padding: 10px 30px;
text-decoration: none;
border: 4px solid #fff;
border-radius: 40px;
transition: 0.5s;
}
.button a:hover{
color: #000;
background: #fff;
font-size: 15px;
}
.footer{
position: absolute;
text-align: center;
margin: 40% 40%;
width: 300px;
height: 30px;
color: rgb(177, 176, 176);
font-size: 15px;
text-decoration: underline;
cursor: default;
}
All Fils Download link:
https://drive.google.com/file/d/13bhS3nTs2G05pxe6cy2DhgVwTPW7VHVX/view?usp=sharing
-By CodeStudio