<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ola cabs</title>
<link rel="stylesheet" href="./ola.css">
</head>
<body>
<main>
<nav>
<div id="nav1">
<ol>
<li>
<img src="./Assests/ola-white-logo.svg" alt=""
title="olacabs logo">
</li>
<li><br>Ola Electric</li>
<li><br>Krutrim</li>
<li><br>Outstation</li>
</ol>
</div>
<div id="nav2">
<ol>
<li>
<button id="btn1">Book an ola cab</button>
</li>
<li>
<button>Free s1 Test Ride</button>
</li>
<li>
<br>
<img src="./Assests/hamburger.svg" alt="">
</li>
</ol>
</div>
</nav>
<br><br><br>
<aside>
<section>
<h1>Moving people, <br> and the world</h1>
<div>
<ol>
<li id="da">Daily</li>
<li>Rent</li>
<li>Outstation</li>
</ol>
</div>
</section>
</aside>
</main>
<article>
<div>
<br>
<input type="text" name="" id="">
<input type="text" name="" id="">
<button>
<span> SEARCH</span>
<span>OLA CABS</span>
<span> →</span>
</button>
</div>
</article>
</body>
</html>
--------------------------
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
main{
/* border: 2px solid red; */
height: 400px;
background-image: url('./Assests/hero-banner.webp');
background-size:90%;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}
main nav{
/* border: 2px solid green; */
height: 65px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
#nav1{
/* border: 2px solid green; */
height: 60px;
width: 55%;
}
#nav1 li:hover{
cursor: pointer;
}
#nav2{
/* border: 2px solid red; */
width: 30%;
}
#nav1 ol{
display: flex;
/* justify-content: center; */
color: white;
list-style: none;
gap: 3%;
/* align-items: center; */
}
#nav1 img{
/* border: 2px solid green; */
height: 50px;
width: 50px;
}
#nav2 ol{
display: flex;
justify-content:flex-end;
gap: 5%;
}
#nav2 ol li:hover{
cursor: pointer;
}
#nav2 ol button:hover{
cursor: pointer;
}
#nav2 button{
height: 45px;
width: 120px;
}
#btn1{
background-color:rgba(255, 255, 255, 0.17);
color: white;
border: none;
}
main section{
border: 2px solid green;
height: 300px;
width: 70%;
}
main aside{
border: 2px solid;
display: flex;
justify-content: center;
}
main h1{
color: white;
font-size: 40px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
/* border: 2px solid red; */
}
main section div{
/* position: absolute;
top: 30%; */
/* border: 2px solid red; */
height: 200px;
width: 30%;
background-color: white;
}
article{
/* border: 2px solid green; */
height: 100px;
position: absolute;
top: 35%;
width: 68%;
background-color: aliceblue;
left: 15.3%;
}
main section ol{
/* border: 2px solid blue; */
display: flex;
justify-content: center;
list-style: none;
align-items: center;
height: 40px;
gap: 50px;
}
#da{
border-bottom: 3px solid;
height: 39px;
width: 50px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
article input{
width: 27%;
height: 50px;
}
article button{
/* border: 2px solid red; */
width: 37%;
height: 50px;
background-image: url('./Assests/ola_cabs_back.svg');
background-repeat: no-repeat;
filter: drop-shadow(-3px 3px green);
background-color: rgb(152, 144, 144);
text-align: left;
}
article button span{
color: white;
font-size: 20px;
}
article button span+span{
color:#3CEF83;
font-size: 20px;
}
article button span+span+span{
color:#3CEF83;
font-size: 20px;
float: right;
}
article div{
display: flex;
/* border: 2px solid red; */
height: 80px;
justify-content: center;
gap: 20px;
align-items: center;
}
