.logo {
height: 40px;
width: 40px;
}
.location {
display: flex;
margin-left: 30px;
align-items: center;
cursor: pointer;
}
.city {
color: #3d4152;
display: flex;
flex-direction: column;
}
.underline_Pune {
height: 2px;
left: 0;
bottom: -5px;
width: 100%;
margin-top: 5px;
background-color: #3d4152;
}
.city:hover {
color: orange;
}
.underline_Pune:hover {
background-color: orange;
}
.state {
margin-left: 7px;
margin-bottom: 3px;
font-weight: 200;
width: 200px;
}
.navbar {
max-height: 80px;
background-color: white;
padding: 20px;
}
.container {
position: relative;
min-width: 1200px;
max-width: 1200px;
margin: auto;
display: flex;
}
.navbar-options {
display: flex;
flex-direction: row-reverse;
width: 100%;
}
.navbar-option {
display: flex;
align-items: center;
margin-left: 60px;
cursor: pointer;
max-width: 200px;
color: #3d4152;
}
.navbar-option:hover {
color: orange;
}
.offers {
background-color: #171a29;
height: 340px;
width: 100%;
}
.offer {
width: 260px;
height: 260px;
padding: 30px;
cursor: pointer;
}
.offer:hover {
transform: scale(1.05);
}
.restaurants-header {
margin-top: 60px;
display: flex;
}
.restaurant-count {
font-size: 30px;
font-weight: 700;
}
.divider {
display: flex;
margin-top: 10px;
border-top: 1px solid #e9e9e9;
height: 1px;
}
.restaurants {
display: flex;
flex-wrap: wrap;
}
.restaurant {
width: 254px;
height: fit-content;
display: flex;
flex-direction: column;
margin-top: 10px;
padding: 10px;
cursor: pointer;
}
.restaurant:hover {
box-shadow: 0 2px 4px 0 rgb(48, 56, 97);
border: 0.2px solid rgb(211, 207, 207);
}
.restaurant-image {
width: 254px;
height: 160px;
}
.restaurant-name {
margin-top: 14px;
font-size: 17px;
font-weight: 500;
}
.restaurant-dishes {
font-size: 13px;
margin-top: 5px;
font-weight: 300;
}
.restaurant-info {
display: flex;
margin-top: 10px;
justify-content: space-between;
align-items: center;
}
.restaurant-ratings {
background-color: #48c479;
color: white;
padding: 2px 5px 2px 0;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
}
.star-icon {
transform: scale(0.7);
}
.restaurant-delivery-time {
color: #686b78;
font-size: 13px;
text-transform: uppercase;
}
.restaurant-cost-for-two {
color: #686b78;
font-size: 13px;
text-transform: uppercase;
}
.restaurant-discount {
padding-top: 14px;
padding-bottom: 14px;
display: flex;
align-items: center;
color: #8a584b;
}
.restaurant-discount-text {
padding-left: 10px;
}
</style>
Pune
Maharashtra , India
shopping_bag
Cart
person
Sign In
support
Help
<div class="navbar-option">
<span class="material-icons">search
</span>
Search
</div>
</div>
</div>
</div>
<div class="offers">
<div class="container">
<img class="offer" src="https://raw.githubusercontent.com/riteshf/files/main/offer1.jpeg" />
<img class="offer" src="https://raw.githubusercontent.com/riteshf/files/main/offer2.jpeg" />
<img class="offer" src="https://raw.githubusercontent.com/riteshf/files/main/offer3.jpeg" />
<img class="offer" src="https://raw.githubusercontent.com/riteshf/files/main/offer4.jpeg" />
</div>
</div>
<div class="container">
<div class="restaurants-header">
<div class="restaurant-count">50 Restaurants</div>
<div class="navbar-options">
<div class="navbar-option">
<p>
<label for="cuisines">Filters</label>
<select name="cuisines" id="cuisines">
<option value="north-india">North India</option>
<option value="chinese">Chinese</option>
<option value="italian">italian</option>
</select>
</p>
</div>
<div class="navbar-option">
Cost:High to Low
</div>
<div class="navbar-option">
Cost:Low to High
</div>
<div class="navbar-option">
Ratings
</div>
<div class="navbar-option">
Delivery Time
</div>
<div class="navbar-option">
Relevance
</div>
</div>
</div>
</div>
<div class="container divider">
<div class="restaurants">
<div class="restaurant">
<div>
<img src="https://raw.githubusercontent.com/riteshf/files/main/restaurant1.jpeg"
class="restaurant-image" />
<div class="restaurant-name">Chaitanya Parathas</div>
<div class="restaurant-dishes">
North India ,Punjabi ,Chinese ,Thalis ,Combo
</div>
</div>
<div class="restaurant-info">
<div class="restaurant-ratings">
<span class="material-icons star-icon">star</span>
4.3
</div>
.
<div class="restaurant-delivery-time">33 mins</div>
.
<div class="restaurant-cost-for-two">₹200 for two</div>
</div>
<div class="restaurant-discount divider">
<span class="material-icons">local_offer</span>
<div class="restaurant-discount-text">20% off | use TRYNEW</div>
</div>
</div>
</div>
</div>