HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>car website design</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@300;400;900&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<nav>
<img src="images/menu.png">
<ul>
<li><img src="images/car_icon.png" </li>
<li>Engines</li>
<li>Tyres</li>
<li>Break</li>
<li>Gear box</li>
<li>Cooling</li>
</ul>
</nav>
<div class="content">
<h1>Accelerating The future.</h1>
<p>sport lamborghini sint amet. Officiis, incidunt! Perferendis!
Ipsum neque ipsam, anumquam totam, ut eius deleniti deserunt nostrum ab
quibusdam sint amet. Officiis, incidunt! Perferendis!
Ipsum neque ipsam, anumquam totam, ut eius deleniti deserunt nostrum ab,</p>
<button type="button">Data Sheet</button>
</div>
<img src="images/car.png" class="car-image">
<div class="bottom-menu">
<div>
<img src="images/icon1.png"><p>252 mph</p>
</div>
<div>
<img src="images/icon2.png"><p>1001 HP</p>
</div>
<div>
<img src="images/icon3.png"><p>922 lbf.ft</p>
</div>
<div>
<img src="images/icon4.png"><p>1.7 Million</p>
</div>
</div>
</div>
</body>
</html>
CSS:
*{ margin:0 ;
padding:0 ;
font-family: "Roboto",sans-serif;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(#fff,#f9ffd6);
position: relative;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box;
}
nav{
display: flex;
align-items: center;
height: 80px;
position: relative;
}
nav img{
width: 30px;
cursor: pointer;
}
nav ul{
position: absolute;
top: 40px;
right: 0;
}
nav ul li{
list-style: none;
color: #alalal;
font-size: 12px;
margin-bottom: 15px;
cursor: pointer;
}
nav ul::after{
content: '';
width: 1px;
height: 130px;
background: #d0d0d0;
position: absolute;
top: 20px;
left: -10px;
}
.content{
max-width: 600px;
margin-top: 100px;
}
.content h1{
font-size: 60px;
}
.content p{
max-width:450px;
color: #alalal;
font-size: 15px;
font-weight: 300;
line-height: 22px;
margin: 40px 0;
}
.content button{
width: 160px;
padding: 10px 0;
border: none;
outline: none;
font-size: 16px;
font-weight: 300;
background: #ffff70;
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
cursor: pointer;
}
.car-image{
width: 55%;
position: absolute;
right: 70px;
bottom: 60px;
animation: run 2s linear 1;
}
.bottom-menu{
display: flex;
position: absolute;
bottom: 50px;
}
.bottom-menu div{
display: flex;
align-items: center;
font size: 14px;
margin-right: 50px;
}
.bottom-menu img{
width: 25px;
margin-right: 15px;
}
@keyframes run{
0%{
transform: transelate(-100px,-100px) ;
}
100%{
transform: translate(0px,0px);
}
}
Comments
Post a Comment