Create Website Header
1- HTML file (site.html).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<title>Cars</title>
</head>
<body>
<div class="container">
<div class="nav">
<h1 id="logo">Cars</h1>
<nav>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CARS</a></li>
</ul>
</nav>
</div>
<div class="content">
<div class="columan">
<h2>Cars</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt porro distinctio, ex molestias consequatur illo veniam assumenda qui nulla, animi doloremque ad exercitationem reiciendis ipsam hic ratione nesciunt suscipit deleniti?</p>
<button type="button">Show More</button>
</div>
<div class="columan">
<div class="cars car1">
<h1>SPORTS</h1>
</div>
<div class="cars car2">
<h1>SUV</h1>
</div>
<div class="cars car3">
<h1>CONVERT</h1>
</div>
<div class="cars car4">
<h1>TRUCK</h1>
</div>
</div>
</div>
</div>
</body>
</html>
2- CSS file (site.css).
*{
padding: 0;
margin: 0;
color: white;
}
.container{
width: 100%;
height: 100vh;
background-image: url(back.jpg);
background-position: center;
background-size: cover;
}
.nav{
height: 10%;
display: flex;
align-items: center;
width: 100%;
background-color: rgba(255, 255, 255, 0.048);
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box;
}
#logo{
width: 60px;
cursor: pointer;
}
nav{
flex: 1;
text-align: right;
}
nav ul li{
list-style: none;
display: inline-block;
margin: 0px 35px;
}
nav ul li a{
text-decoration: none;
font-weight: bold;
}
.content{
display: flex;
height: 85%;
align-items: center;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box;
}
h2{
font-size: 115px;
}
p{
font-size: 20px;
line-height: 20px;
}
.columan{
flex-basis: 50%;
}
button{
width: 165px;
color: black;
font-size: 20px;
padding: 12px 0px;
margin-top: 30px;
border: 1px solid wheat;
border-radius: 20px;
}
button:hover{
background-color: rgba(101, 105, 101, 0.822);
color: white;
}
.cars{
width: 200px;
height: 210px;
display: inline-block;
border-radius: 10px;
padding: 15px 25px;
box-sizing: border-box;
cursor: pointer;
margin: 10px 15px;
background-position: center;
background-size: cover;
}
.cars h1{
background-size: rgba(233, 228, 218, 0.068);
}
.car1{
background-image: url(back4.jpg);
}
.car2{
background-image: url(back2.jpg);
}
.car3{
background-image: url(back3.jpg);
}
.car4{
background-image: url(back1.jpg);
}
.cars:hover{
transform: translateY(-12px);
transition: 0.8s;
}
channel link :- https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g
Add your comment
Signature :- Ayoub Shindi (Dev AAS).
Comments
Post a Comment