-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (132 loc) · 7.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!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="style.css">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e6d4ec4d14.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body class="">
<header class="w-full relative " style="height:75vh;">
<nav class="float-right mr-20 text-xl font-thin mt-6 ">
<ul class="flex ">
<li class="mx-5 text-white hover:underline underline-offset-8 decoration-white hover:cursor-pointer ">Add restaurant</li>
<li class="mx-5 text-white hover:underline underline-offset-8 decoration-white hover:cursor-pointer ">Log in</li>
<li class="mx-5 text-white hover:underline underline-offset-8 decoration-white hover:cursor-pointer ">Sign up</li>
</ul>
</nav>
<div class="header_image ">
<img class="w-full h-auto absolute " style="top:-20vh; z-index:-1;" src="https://b.zmtcdn.com/web_assets/81f3ff974d82520780078ba1cfbd453a1583259680.png" alt="">
</div>
<div class="flex flex-col items-center w-full ">
<img class="justify-center h-14 mt-28 relative " src="images/ZOmato-logo.png" alt="">
<h1 class="text-white text-4xl justify-center mt-8"> Discover the best food & drinks in Delhi NCR</h1>
</div>
<div class="flex bg-white justify-center m-auto mt-10 w-7/12 py-3 rounded-md ">
<i class="fa-solid fa-location-dot text-pink-400 bg-white mt-1 pr-2"></i>
<p>Ywca,1,Ashoka Rd</p>
<i class="fa-solid fa-sort-down text-gray-500"></i>
<i class="fa-solid fa-magnifying-glass text-gray-400 mt-1 px-2"></i>
<input class="search w-1/2 " type="text" placeholder="Search restaurant,cuisines or a dish">
</div>
</header>
<div class="layer-2 w-full overflow-hidden mt-28">
<ul class="flex justify-evenly">
<li><img class="w-80 h-60 rounded-xl" src="images/img-layer2-1a.png" alt="">
<div class="bg-white relative bottom-16 rounded-t-none rounded-b-xl px-5 py-5 outline outline-gray-300 outline-1">
<h1 class="text-xl">Order Online</h1>
<p class="text-gray-600">Stay home and to your door step</p>
</div>
</li>
<li><img class="w-80 h-60 rounded-xl" src="images/img-layer2-3.png" alt="">
<div class="bg-white relative bottom-16 rounded-t-none rounded-b-xl px-5 py-5 outline outline-gray-300 outline-1">
<h1 class="text-xl">Dining Out</h1>
<p class="text-gray-600">Stay home and to your door step</p>
</div>
</li>
<li><img class=" w-80 h-60 rounded-xl" src="images/img-layer2-2.png" alt="">
<div class="bg-white relative bottom-16 rounded-t-none rounded-b-xl px-5 py-5 outline outline-gray-300 outline-1">
<h1 class="text-xl">Nightlife & Club</h1>
<p class="text-gray-600">Stay home and to your door step</p>
</div>
</li>
</ul>
</div>
<div class="collection">
<div class="up mx-20 my-10">
<header class="text-4xl font-semibold">Collections</header>
<div class="flex ">
<p class="text-lg text-gray-600 ">Explore curated lists of top restaurants, cafes, pubs, and bars in Delhi NCR, based on trends</p>
<a href="#" class="font-thin text-pink-400 ml-40 font hover:text-pink-500" style="font-family: 'Rubik', sans-serif;">All collections in Delhi NCR<i class="fa-solid fa-play text-pink-400 ml-2 text-xs"></i></a>
</div>
</div>
</div>
<div class="img-colection">
<ul class="flex justify-evenly mx-16">
<li><img class="w-64 h-72 rounded-md" src="images/colection_1.png" alt="">
<div class="text-white relative bottom-16 mx-5">
<header class="text-xl">Newly Opened</header>
<p>19 Places</p>
</div>
</li>
<li><img class="w-64 h-72 rounded-md " src="images/colection_2.png" alt="">
<div class="text-white relative bottom-16 mx-5 ">
<header class="text-xl">Trending This Week</header>
<p>29 Places</p>
</div>
</li>
<li><img class="w-64 h-72 rounded-md" src="images/colection_6.png" alt="">
<div class="text-white relative bottom-16 mx-5 ">
<header class="text-xl">Best of Delhi NCR</header>
<p>148 Places</p>
</div>
</li>
<li><img class="w-64 h-72 rounded-md " src="images/colection_5.png" alt="">
<div class="text-white relative bottom-16 mx-5">
<header class="text-xl">Where's The Party</header>
<p>28 Places</p>
</div></li>
</ul>
</div>
<!-- Popular localities in and around Delhi NCR -->
<div class="popular_1">
<div class="header text-4xl flex mx-20 my-10" style="font-family: 'Rubik', sans-serif;">Popular localities in and around <p class="font-semibold ">Delhi NCR</p> </div>
<div class="popular_locality grid grid-cols-3 gap-x-4 gap-y-4 mx-20 ">
<a href="#" class="bg-white shadow-sm hover:shadow-md border border-gray-300 rounded-lg">
<div class="flex m-2 ">
<div>Connaught Place <p>388 places</p></div>
<div><i class="fa-solid fa-angle-right ml-60 mt-6"></i></div>
</div>
</a>
<a href="#" class="bg-white shadow-sm hover:shadow-md border border-gray-300 rounded-lg "><div class="flex m-2"><div>Sector 29 <p>388 places</p></div> <div><i class="fa-solid fa-angle-right ml-60 mt-6"></i></div></div></a>
<a href="#" class="bg-white shadow-sm hover:shadow-md border border-gray-300 rounded-lg "><div class="flex m-2"><div>Sector 18,Noida <p>388 places</p></div> <div><i class="fa-solid fa-angle-right ml-60 mt-6"></i></div></div></a>
<a href="#" class="bg-white shadow-sm hover:shadow-md border border-gray-300 rounded-lg "><div class="flex m-2"><div>Rajouri Garden <p>388 places</p></div> <div><i class="fa-solid fa-angle-right ml-60 mt-6"></i></div></div></a>
<a href="#" class="bg-white shadow-sm hover:shadow-md border border-gray-300 rounded-lg "><div class="flex m-2"><div>Saket <p>388 places</p></div> <div><i class="fa-solid fa-angle-right ml-60 mt-6"></i></div></div></a>
<a href="#" class="bg-white shadow-sm hover:shadow-md border border-gray-300 rounded-lg "><div class="flex m-2"><div>DLF Cyber City <p>388 places</p></div> <div><i class="fa-solid fa-angle-right ml-60 mt-6"></i></div></div></a>
<a href="#" class="bg-white shadow-sm hover:shadow-md border border-gray-300 rounded-lg "><div class="flex m-2"><div>Golf Course Road <p>388 places</p></div> <div><i class="fa-solid fa-angle-right ml-60 mt-6"></i></div></div></a>
<a href="#" class="bg-white shadow-sm hover:shadow-md border border-gray-300 rounded-lg "><div class="flex m-2"><div>DLF Phase 4 <p>388 places</p></div> <div><i class="fa-solid fa-angle-right ml-60 mt-6"></i></div></div></a>
<a href="#" class="bg-white shadow-sm border border-gray-300 rounded-lg"><div class=""><div >see more</div><div><i class="fa-solid fa-angle-down ml-20 "></i></div></div></a>
</div>
</div>
<!-- Get Zomato App (image + form) -->
<div class="flex ">
<div class="w-2/5 my-28">
<div class="w-60 float-right"><img src="images/phone_img.png" alt="phone"></div>
</div>
<div class="right_form">
<div class="ml-10 mt-40">
<h1 class="text-5xl my-2">Get the Zomato app</h1>
<p class="my-2">Download the app from</p>
<div class="flex">
<img class="w-32" src="images/plystore.png" alt="">
<img class="w-32 mx-5" src="images/appstore.png" alt="">
</div>
</div>
</div>
</div>
<footer class="flex justify-center">Made with ❤️ By Bhaskar Chand.</footer>
</body>
</html>