From 1926c6e2733fe356dff52ef40a4790bdb540632a Mon Sep 17 00:00:00 2001 From: Nazneen Date: Mon, 8 Jun 2026 00:18:44 +0530 Subject: [PATCH 1/5] Updated Zomato UI layout and improved design --- public/zomato-clone/app.css | 4 + public/zomato-clone/index.html | 654 ++++++++++++++++++++++++--------- public/zomato-clone/main.css | 75 ++-- public/zomato-clone/style.css | 2 +- 4 files changed, 529 insertions(+), 206 deletions(-) diff --git a/public/zomato-clone/app.css b/public/zomato-clone/app.css index 5a05e8315..21b56f397 100644 --- a/public/zomato-clone/app.css +++ b/public/zomato-clone/app.css @@ -71,6 +71,9 @@ body.dark-mode .app-section { font-size: 1.65rem; font-weight: 300; line-height: 1.7; + +} + body.dark-mode .explore-options .heading { color: white; } @@ -236,6 +239,7 @@ body.dark-mode .app-section .caption { .app-section .option-selector { font-size: 1.5rem; } +} @media (max-width: 800px) { .content { diff --git a/public/zomato-clone/index.html b/public/zomato-clone/index.html index 973a3daa4..932f29ead 100644 --- a/public/zomato-clone/index.html +++ b/public/zomato-clone/index.html @@ -1,204 +1,510 @@ - - - - Document - - - + + + Zomato – Discover the best food & drinks + + + + -
-
-
- zomato - India's #1
- Food Delivery App
- Experience fast & easy online ordering
- on the Zomato app -
-
-
- -
- Get it onGoogle Play -
-
-
- -
- Download on theApp Store -
-
-
-
Scroll Down  
-
-
-
-
-
-
-
-
Better food for
- more people
-
For over a decade, we’ve enabled our
customers to discover new tastes,
- delivered right to their doorstep
-
-
-
-
- 3,00,000+ - restaurants -
-
-
-
-
- 800+ - cities + + +
+ + Free delivery on your first 3 orders  ·  Use code WELCOME50 for 50% off + +
+ + + + + +
+
+
+
+
🍽️ Food delivery & dining
+

Discover the best
food & drinks in
Delhi NCR

+

Order online, explore restaurants, and enjoy
the city's best culinary experiences.

+ +
+
+ +
-
-
-
-
- 3 - Billion+ - orders delivered +
+ +
-
+
-
-
-
-
-
- -
-
- POWERING INDIA’S
- CHANGING LIFESTYLES +
+ 🍕 Pizza + 🍔 Burgers + 🍜 Chinese + 🍛 Biryani + 🥟 Momos + 🧁 Desserts
-
-
-
-
-
zomato
-
Get the app now to start to start
ordering your favourite
dishes!
-
Check it out >
+ +
+
+
+
Orders today
12,450+
-
-
-
blinkit
-
Choose from 30,000+
products & get them
delivered at your
doorstep
-
Check it out >
+
+
+
Avg delivery
~30 mins
-
-
-
district
-
The best of events,
movies , dining, and
everything you love!
-
Check it out >
+
+ Food
-
-
-
hyperpure
-
Offering complete supply
chain solution for your
restaurant
-
Check it out >
+
+
+
Restaurants
5,000+ nearby
+
+
+
+ +
+
+ +
+
Nightlife and Clubs
+
Explore the city's top nightlife outlets
-
-
-
zomato
-
-
- Eternal - Zomato - Blinkit - District - Hyperpure - Feeding India - Investor Relations -
-
- For Restaurants - Partner With Us - Apps For You - Restaurant Consulting -
-
- For Delivery
Partners - Partner With Us - Apps For You -
-
Learn More - Privacy - Security - Terms of Service - Help & Support - Report a Fraud - Blog -
-
- -
-
-
-
-
-
-
-
- -
-
-
- -
-
- Google Play -
-
-
-
- -
-
App Store -
-
+
-
+ +
+
+

What's on your mind?

+

Browse by cuisine or category

+
+
+
🍕
Pizza
+
🍔
Burgers
+
🍜
Chinese
+
🍛
Biryani
+
🥗
Healthy
+
🍣
Sushi
+
🧁
Desserts
+
☕
Cafes
+
🍱
South Indian
+
🥩
Kebabs
+
🌮
Rolls
+
🥟
Momos
+
+
+ +
+
+
+

Collections

+

Explore curated lists of top restaurants, cafes, pubs, and bars in Delhi NCR, based on trends

+
+ All collections in Delhi NCR → +
+
+
+ +
+
Winners of Zomato Restaurant Awards
+
32 Places ›
+
+
+ +
+
22 Best Insta-worthy Places
+
22 Places ›
+
+
+
+ +
+
21 Romantic Dining Places
+
21 Places ›
+
+
+
+ +
+
18 Thrilling Live Cricket Screenings
+
18 Places ›
+
+
+
+
+ +
+
+

Popular localities in and around Delhi NCR

+

Find the best restaurants in your neighbourhood

+
+
+
Connaught Place
252 Places
›
+
Sector 29
144 Places
›
+
Sector 18, Noida
205 Places
›
+
Rajouri Garden
296 Places
›
+
Saket
307 Places
›
+
DLF Cyber City
153 Places
›
+
Golf Course Road
154 Places
›
+
DLF Phase 4
221 Places
›
+
+
- + +
+
+

eternal

+

Powering India's Changing Lifestyles

+
+
+
+ Zomato +

zomato

+

Get the app now to start ordering your favorite dishes!

+ Check it out →
-
- -
-
- By continuing past this page, you agree to our Terms of Service, Cookie Policy, Privacy Policy and - Content Policies. All trademarks are properties of their respective owners - 2008-2026 © Zomato™ Ltd. All rights reserved. +
+ Blinkit +

blinkit

+

Choose from 30,000+ products delivered to your doorstep.

+ Check it out → +
+
+ District +

district

+

The best of events, movies, dining, and everything you love!

+ Check it out → +
+
+ Hyperpure +

hyperpure

+

Offering complete supply chain solution for your restaurant.

+ Check it out →
-
+
+ +
+
+

Get the Zomato app

+

We will send you a link, open it on your phone to download the app

+
+ App Store + Google Play +
+
+
+ App +
+
+ +
+
+
+ Zomato +

Discover the best food & drinks in your city. Delivering joy, one meal at a time.

+
+ in + ig + tw + yt + fb +
+
+
+

About Zomato

+
  • Who we are
  • Blog
  • Work with us
  • Investor Relations
  • Report Fraud
  • Contact us
+
+
+

Zomaverse

+
  • Zomato
  • Blinkit
  • Feeding India
  • Hyperpure
  • Zomaland
+
+
+

For Restaurants

+
  • Partner With Us
  • Apps for you
+

For Enterprises

+
  • Zomato For Enterprises
+

Learn More

+
  • Privacy
  • Security
  • Terms
  • Sitemap
+
+
+

Download App

+ + +
+
+
+ By continuing past this page, you agree to our Terms of Service, Cookie Policy, Privacy Policy and Content Policies. All trademarks are properties of their respective owners. 2008-2023 © Zomato™ Ltd. All rights reserved. +
+
+ - - + \ No newline at end of file diff --git a/public/zomato-clone/main.css b/public/zomato-clone/main.css index 611eabe5a..2289e770e 100644 --- a/public/zomato-clone/main.css +++ b/public/zomato-clone/main.css @@ -134,87 +134,99 @@ gap: 2rem; } +/* ===== COLLECTIONS ===== */ /* ===== COLLECTIONS ===== */ .collections { + margin-top: 6rem; /* spacing from above section */ margin-bottom: 7rem; } .collections-list { display: flex; gap: 14px; - margin-top: 0; } +/* CARD */ .collection { position: relative; flex: 1; height: 32rem; + border-radius: var(--radius-md); + overflow: hidden; /* 🔥 VERY IMPORTANT */ transition: transform 0.25s ease, box-shadow 0.25s ease; } +/* HOVER */ .collection:hover { - transform: translateY(-5px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); - border-radius: var(--radius-md); - overflow: hidden; + transform: translateY(-6px); + box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); cursor: pointer; - transition: - transform 0.28s ease, - box-shadow 0.28s ease; - box-shadow: var(--shadow-sm); } -.collection:hover { - transform: translateY(-6px); - box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); +/* IMAGE */ +.collection .image { + width: 100%; + height: 100%; } -.collection:hover .image img { - transform: scale(1.07); +.collection .image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.4s ease; } -.collection .image { - height: 32rem; - border-radius: var(--radius-md); +/* IMAGE ZOOM */ +.collection:hover .image img { + transform: scale(1.07); } +/* OVERLAY */ .overlay { position: absolute; inset: 0; border-radius: var(--radius-md); background: linear-gradient( 0deg, - rgba(0, 0, 0, 0.88) 0%, - rgba(0, 0, 0, 0.15) 50%, - rgba(0, 0, 0, 0.04) 100% + rgba(0, 0, 0, 0.85) 0%, + rgba(0, 0, 0, 0.2) 50%, + rgba(0, 0, 0, 0.05) 100% ); - pointer-events: none; } +/* TEXT */ .overlay-info { position: absolute; bottom: 0; left: 0; right: 0; + + padding: 1.5rem; color: #fff; - padding: 0 1.8rem 1.6rem; - font-size: 1.75rem; + + font-size: 1.4rem; font-weight: 600; line-height: 1.3; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + + display: flex; + flex-direction: column; + gap: 4px; + + /* ❌ REMOVE THESE */ + /* overflow: hidden; */ + /* text-overflow: ellipsis; */ + /* white-space: nowrap; */ } +/* SUB TEXT */ .places { - font-size: 1.3rem; - font-weight: 300; - margin: 0.4rem 0 0; - opacity: 0.85; + font-size: 1.1rem; + font-weight: 400; + opacity: 0.9; } - /* ===== POPULAR LOCALITIES ===== */ .popular-localities { + margin-top: 130px; margin-bottom: 8rem; } @@ -224,6 +236,7 @@ font-size: 3.2rem; line-height: 1.25; font-weight: 300; + margin-top: 70px !important; } .popular-localities .title .city-name { diff --git a/public/zomato-clone/style.css b/public/zomato-clone/style.css index db7dac1ff..edc0a8e8a 100644 --- a/public/zomato-clone/style.css +++ b/public/zomato-clone/style.css @@ -13,7 +13,7 @@ body { display: flex; justify-content: start; align-items: start; - background-image: url("Images/96ee551279c55efe9f0ff247d369ec97.jpg"); + background-image: url("images/96ee551279c55efe9f0ff247d369ec97.jpg"); background-size: cover; } From 945c32fced72613bdbd2c66ac9533efd35bf1112 Mon Sep 17 00:00:00 2001 From: Nazneen Date: Mon, 8 Jun 2026 00:34:26 +0530 Subject: [PATCH 2/5] Added dark mode and improved Zomato UI layout --- public/zomato-clone/index.html | 299 ++++++++++++++++++--------------- 1 file changed, 166 insertions(+), 133 deletions(-) diff --git a/public/zomato-clone/index.html b/public/zomato-clone/index.html index 932f29ead..c30b5eb40 100644 --- a/public/zomato-clone/index.html +++ b/public/zomato-clone/index.html @@ -1,5 +1,5 @@ - + @@ -8,44 +8,67 @@ @@ -243,15 +256,20 @@ Zomato
- Get the app - Add restaurant - Investor Relations + Get the app + Add restaurant + Investor Relations + +
- +
@@ -259,7 +277,6 @@
🍽️ Food delivery & dining

Discover the best
food & drinks in
Delhi NCR

Order online, explore restaurants, and enjoy
the city's best culinary experiences.

-
@@ -271,7 +288,6 @@

Discover the best
food & drinks in
Delhi NCR

-
🍕 Pizza 🍔 Burgers @@ -281,7 +297,6 @@

Discover the best
food & drinks in
Delhi NCR

🧁 Desserts
-
@@ -302,8 +317,8 @@

Discover the best
food & drinks in
Delhi NCR

- -
+ +
@@ -335,49 +350,37 @@

What's on your mind?

- +
-
+

Collections

Explore curated lists of top restaurants, cafes, pubs, and bars in Delhi NCR, based on trends

- All collections in Delhi NCR → + All collections in Delhi NCR →
-
-
Winners of Zomato Restaurant Awards
-
32 Places ›
-
+
Winners of Zomato Restaurant Awards
32 Places ›
-
-
22 Best Insta-worthy Places
-
22 Places ›
-
+
22 Best Insta-worthy Places
22 Places ›
-
-
21 Romantic Dining Places
-
21 Places ›
-
+
21 Romantic Dining Places
21 Places ›
-
-
18 Thrilling Live Cricket Screenings
-
18 Places ›
-
+
18 Thrilling Live Cricket Screenings
18 Places ›
- -
+ +

Popular localities in and around Delhi NCR

Find the best restaurants in your neighbourhood

@@ -394,7 +397,7 @@

Popular localities in and around Delhi NCR

- +

eternal

@@ -428,7 +431,7 @@

hyperpure

- +

Get the Zomato app

@@ -443,7 +446,7 @@

Get the Zomato app

- +
@@ -484,7 +487,35 @@

Download App

+ +
+ - - diff --git a/public/zomato-clone/main.css b/public/zomato-clone/main.css deleted file mode 100644 index 2289e770e..000000000 --- a/public/zomato-clone/main.css +++ /dev/null @@ -1,479 +0,0 @@ -/* ===== MAIN BODY ===== */ -.main-body { - position: relative; - max-width: 112rem; - margin: 0 auto; - padding: 5rem 2rem 0; -} - -/* ===== DINING OPTIONS GRID ===== */ -.options { - margin: 0 auto 6rem; - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 14px; -} - -.option { - position: relative; - flex: 1; - border-radius: var(--radius-md); - overflow: hidden; - height: 24rem; - transition: transform 0.25s ease, box-shadow 0.25s ease; -} - -.option:hover { - transform: translateY(-5px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); - height: 25rem; - cursor: pointer; - transition: - transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.28s ease; - box-shadow: var(--shadow-sm); -} - -.option:hover { - transform: translateY(-6px); - box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14); -} - -.option:hover .image img { - transform: scale(1.06); -} - -.image { - border-radius: var(--radius-md); - overflow: hidden; - position: relative; - width: 100%; - height: 25rem; -} - -.image img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.4s ease; - border-radius: inherit; -} - -.info { - padding: 1.1rem 1.8rem 1.5rem; - width: 100%; - position: absolute; - bottom: 0; - left: 0; - background: var(--bg-white); - border: 1px solid var(--border); - border-radius: 0 0 var(--radius-md) var(--radius-md); - transition: background var(--transition); -} - -.info .title { - text-align: left; - font-weight: 600; - font-size: 1.9rem; - line-height: 1.3; - color: var(--text-primary); -} - -.info .description { - color: var(--text-secondary); - font-weight: 300; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - font-size: 1.4rem; - line-height: 1.5; - margin: 0.3rem 0 0; -} - -/* ===== SECTION HEADER ===== */ -.heading-2 { - font-weight: 700; - font-size: 3.2rem; - color: var(--text-primary); - letter-spacing: -0.02em; -} - -.heading-6 { - font-size: 1.65rem; - font-weight: 300; - color: var(--text-secondary); - line-height: 1.6; -} - -.see-more { - background: transparent; - border: none; - font-weight: 500; - color: var(--red); - font-size: 1.5rem; - padding: 0.8rem 1.2rem; - cursor: pointer; - white-space: nowrap; - border-radius: var(--radius-sm); - transition: background var(--transition); - font-family: "Outfit", sans-serif; -} -.see-more:hover { - background: var(--red-light); -} -.see-more i { - margin-left: 4px; -} - -.desc-see-more { - display: flex; - justify-content: space-between; - align-items: center; - margin: 0.8rem 0 2rem; - gap: 2rem; -} - -/* ===== COLLECTIONS ===== */ -/* ===== COLLECTIONS ===== */ -.collections { - margin-top: 6rem; /* spacing from above section */ - margin-bottom: 7rem; -} - -.collections-list { - display: flex; - gap: 14px; -} - -/* CARD */ -.collection { - position: relative; - flex: 1; - height: 32rem; - border-radius: var(--radius-md); - overflow: hidden; /* 🔥 VERY IMPORTANT */ - transition: transform 0.25s ease, box-shadow 0.25s ease; -} - -/* HOVER */ -.collection:hover { - transform: translateY(-6px); - box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); - cursor: pointer; -} - -/* IMAGE */ -.collection .image { - width: 100%; - height: 100%; -} - -.collection .image img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.4s ease; -} - -/* IMAGE ZOOM */ -.collection:hover .image img { - transform: scale(1.07); -} - -/* OVERLAY */ -.overlay { - position: absolute; - inset: 0; - border-radius: var(--radius-md); - background: linear-gradient( - 0deg, - rgba(0, 0, 0, 0.85) 0%, - rgba(0, 0, 0, 0.2) 50%, - rgba(0, 0, 0, 0.05) 100% - ); -} - -/* TEXT */ -.overlay-info { - position: absolute; - bottom: 0; - left: 0; - right: 0; - - padding: 1.5rem; - color: #fff; - - font-size: 1.4rem; - font-weight: 600; - line-height: 1.3; - - display: flex; - flex-direction: column; - gap: 4px; - - /* ❌ REMOVE THESE */ - /* overflow: hidden; */ - /* text-overflow: ellipsis; */ - /* white-space: nowrap; */ -} - -/* SUB TEXT */ -.places { - font-size: 1.1rem; - font-weight: 400; - opacity: 0.9; -} -/* ===== POPULAR LOCALITIES ===== */ -.popular-localities { - margin-top: 130px; - margin-bottom: 8rem; -} - -.popular-localities .title { - margin: 0 0 3rem; - color: var(--text-secondary); - font-size: 3.2rem; - line-height: 1.25; - font-weight: 300; - margin-top: 70px !important; -} - -.popular-localities .title .city-name { - font-weight: 700; - color: var(--text-primary); -} - -.localities { - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 14px; - margin-bottom: 0; -} - -.locality { - padding: 1.4rem 1.8rem; - border-radius: var(--radius-sm); - background: var(--bg-white); - border: 1.5px solid var(--border); - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - box-shadow: var(--shadow-sm); - width: calc(33.33% - 10px); - font-size: 1.4rem; - transition: - box-shadow 0.22s ease, - transform 0.22s ease, - border-color 0.22s ease; -} - -.locality:hover { - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); - transform: translateY(-2px); - border-color: var(--red); -} - -.locality:hover .locality-title { - color: var(--red); -} - -.locality-title { - font-size: 1.75rem; - font-weight: 500; - color: var(--text-primary); - margin: 0 0 0.3rem; - transition: color var(--transition); -} - -.locality-description { - font-size: 1.3rem; - color: var(--text-muted); - font-weight: 300; -} - -.locality .center { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - font-size: 1.5rem; - font-weight: 500; - color: var(--red); - gap: 6px; -} - -.locality i { - color: var(--text-muted); - font-size: 1.3rem; - transition: color var(--transition); -} -.locality:hover i { - color: var(--red); -} - -/* ===== RESPONSIVE ===== */ -@media (max-width: 800px) { - .main-body { - padding: 3rem 2rem 0; - } - - .option { - height: auto; - } - .image { - height: 18rem; - } - .collection { - height: 18rem; - } - .collection .image { - height: 18rem; - } - - .info .title { - font-size: 1.5rem; - } - .info .description { - font-size: 1.2rem; - } - - .heading-2 { - font-size: 2.4rem; - } - .heading-6 { - font-size: 1.4rem; - } - - .desc-see-more { - flex-direction: column; - align-items: flex-start; - gap: 0.6rem; - } - - .locality { - width: calc(50% - 8px); - } -} - -@media (max-width: 500px) { - .option { - max-width: 46%; - flex: auto; - } - .see-more { - display: none; - } - .heading-2 { - font-size: 2rem; - } - .desc-see-more h6 { - font-size: 1.3rem; - } - .collections-list { - flex-wrap: wrap; - } - .collection { - max-width: 46%; - } - - .popular-localities .title { - font-size: 2rem; - margin-bottom: 2rem; - } - .locality { - width: 100%; - } -} - -.location-dropdown::-webkit-scrollbar { - width: 6px; -} -.location-dropdown { - position: absolute; - - top: 110%; - left: 0; - width: 100%; - background: white; - border-radius: 8px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - z-index: 1000; - overflow: hidden; - max-height: 200px; - overflow-y: auto; -} - -.dropdown-item { - padding: 10px; - cursor: pointer; - transition: background 0.2s ease; -} - -.dropdown-item:hover { - background: #f5f5f5; -} - -.hidden { - display: none; -} - -/* ================= DARK MODE - POPULAR LOCALITIES ================= */ - -body.dark-mode .popular-localities .title { - color: #ffffff; -} - -body.dark-mode .popular-localities .city-name { - color: #ffffff; -} - -body.dark-mode .locality { - background-color: #1e1e1e; - border: 1px solid #444; - box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 4px; -} - -body.dark-mode .locality-title { - color: #ffffff; -} - -body.dark-mode .locality-description { - color: #cccccc; -} - -body.dark-mode .locality i { - color: #ffffff; -} - -body.dark-mode .locality:hover { - background-color: #2a2a2a; -} - - /* ================= DARK MODE - Cards ================= */ - body.dark-mode .zomato-card { - background: #2a0f14; - border:2px solid rgb(239, 79, 95,0.2); -} - -body.dark-mode .blinkit-card { - background: #342a0b; - border:2px solid rgba(236, 239, 79, 0.2); -} - -body.dark-mode .district-card { - background: #251c36; - border:2px solid rgba(106, 13, 132, 0.2); -} - -body.dark-mode .hyperpure-card { - background: #4c1e29; -color: #fff1f3; - border:2px solid rgb(239, 79, 95,0.2); -} - -body.dark-mode .brand-cards h3{ - color: grey; -} diff --git a/public/zomato-clone/nav.css b/public/zomato-clone/nav.css deleted file mode 100644 index 5e3f45718..000000000 --- a/public/zomato-clone/nav.css +++ /dev/null @@ -1,266 +0,0 @@ -/* ===== NAVBAR ===== */ -header { - position: absolute; - width: 100%; - z-index: 9999; -} - -nav { - width: 86%; - font-weight: 400; - flex-wrap: nowrap; - background: transparent; - display: flex; - align-items: center; - justify-content: space-between; - user-select: none; - padding: 1.8rem 0; - margin: auto; - color: #fff; - position: relative; - z-index: 9999; - transition: all var(--transition); -} - -nav .nav-item { - padding-bottom: 0.4rem; - border-bottom: 2px solid transparent; - display: flex; - align-items: center; - gap: 6px; - transition: border-color var(--transition); -} - -nav .nav-item:hover { - border-bottom-color: rgba(255, 255, 255, 0.6); -} - -nav .nav-item a { - font-size: 1.45rem; - text-decoration: none; - cursor: pointer; - white-space: nowrap; - display: flex; - align-items: center; - font-weight: 400; - color: rgba(255, 255, 255, 0.92); - letter-spacing: 0.01em; - transition: color var(--transition); -} - -nav .nav-item a:hover { - color: #fff; -} - -/* Left nav icon */ -nav .left .nav-item a { - font-size: 1.35rem; - gap: 6px; -} - -.right { - display: flex; - align-items: center; - gap: 0.6rem; -} - -.right .nav-item a { - font-size: 1.5rem; - font-weight: 300; - padding: 0.5rem 0.9rem; -} - -/* Login / Signup buttons */ -.login-nav a { - border: 1.5px solid rgba(255, 255, 255, 0.7); - border-radius: var(--radius-sm); - padding: 0.55rem 1.6rem !important; - font-weight: 500 !important; - transition: - background var(--transition), - border-color var(--transition), - transform var(--transition); -} -.login-nav a:hover { - background: rgba(255, 255, 255, 0.15); - border-color: #fff; - transform: translateY(-1px); -} - -.signup-nav a { - background: #fff; - color: var(--red) !important; - border-radius: var(--radius-sm); - padding: 0.55rem 1.6rem !important; - font-weight: 600 !important; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); - transition: - background var(--transition), - transform var(--transition), - box-shadow var(--transition); -} -.signup-nav a:hover { - background: #f5f5f5; - transform: translateY(-2px); - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); -} - -/* Dark mode toggle */ -#darkModeToggle { - background: rgba(255, 255, 255, 0.12); - border: 1.5px solid rgba(255, 255, 255, 0.35); - color: #fff; - font-size: 1.3rem; - font-weight: 500; - padding: 0.5rem 1.2rem; - border-radius: 99px; - cursor: pointer; - transition: - background var(--transition), - transform var(--transition); - white-space: nowrap; - backdrop-filter: blur(8px); -} -#darkModeToggle:hover { - background: rgba(255, 255, 255, 0.22); - transform: scale(1.04); -} - -/* User icon (mobile only) */ -.user-icon { - border: 1.5px solid rgba(255, 255, 255, 0.5); - height: 3.4rem; - width: 3.4rem; - justify-content: center; - align-items: center; - border-radius: 50%; - color: #fff; - display: none; - cursor: pointer; - transition: background var(--transition); -} -.user-icon:hover { - background: rgba(255, 255, 255, 0.15); -} - -/* Hamburger */ -.hamburger-btn { - display: none; - background: rgba(255, 255, 255, 0.12); - border: 1.5px solid rgba(255, 255, 255, 0.5); - color: #fff; - font-size: 1.9rem; - line-height: 1; - padding: 0.35rem 0.9rem; - border-radius: var(--radius-sm); - cursor: pointer; - transition: background var(--transition); - z-index: 100; - backdrop-filter: blur(6px); -} -.hamburger-btn.active, -.hamburger-btn:hover { - background: rgba(255, 255, 255, 0.22); -} - -/* ===== TABLET ===== */ -@media (max-width: 1024px) and (min-width: 801px) { - nav { - width: 95%; - padding: 1.3rem 0; - } - .right .nav-item a { - font-size: 1.35rem; - padding: 0.5rem 0.7rem; - } - #darkModeToggle { - font-size: 1.2rem; - padding: 0.45rem 1rem; - } -} - -/* ===== MOBILE ===== */ -@media (max-width: 800px) { - nav { - justify-content: space-between; - padding: 0 1.4rem; - width: 100%; - height: 5.8rem; - } - - .user-icon { - display: flex; - } - .left { - display: none; - } - .hamburger-btn { - display: flex; - align-items: center; - justify-content: center; - } - - .right { - display: none; - position: absolute; - top: 5.8rem; - right: 0; - left: 0; - background: rgba(15, 15, 15, 0.97); - flex-direction: column; - align-items: flex-start; - padding: 1.2rem 1.8rem 2rem; - gap: 0.2rem; - z-index: 999; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); - backdrop-filter: blur(12px); - border-top: 1px solid rgba(255, 255, 255, 0.08); - } - .right.mobile-open { - display: flex; - } - - .right .nav-item { - width: 100%; - padding: 0; - border: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.06); - } - .right .nav-item:last-child { - border-bottom: none; - } - - .right .nav-item a { - font-size: 1.55rem !important; - padding: 1rem 0.4rem !important; - width: 100%; - display: block; - } - - .login-nav a { - border: 1.5px solid rgba(255, 255, 255, 0.4) !important; - border-radius: var(--radius-sm) !important; - text-align: center; - margin-top: 0.5rem; - } - .signup-nav a { - text-align: center; - margin-top: 0.4rem; - } - - #darkModeToggle { - margin-top: 0.8rem; - width: 100%; - text-align: center; - } -} - -@media (max-width: 480px) { - nav { - padding: 0 1rem; - height: 5.2rem; - } - .right { - top: 5.2rem; - } -} diff --git a/public/zomato-clone/signup.html b/public/zomato-clone/signup.html deleted file mode 100644 index 94110e4e5..000000000 --- a/public/zomato-clone/signup.html +++ /dev/null @@ -1,658 +0,0 @@ - - - - - - Sign up – Zomato - - - - - - - - - -
-
-

Create account

-

or log in to your account

- -
- - -
-
-

Create your account 🍽️

-

or log in to your account

- -
- - -
- -
or sign up with email
- -
-
- - - -
- -
- - - -
- -
- -
- - -
-
-
-
- - -
- -
- -
- - -
- -
- - - - - - -
- -

- Already have an account? Log in -

-
-
- - - - diff --git a/public/zomato-clone/style.css b/public/zomato-clone/style.css deleted file mode 100644 index edc0a8e8a..000000000 --- a/public/zomato-clone/style.css +++ /dev/null @@ -1,654 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap'); - -body { - height: 100vh; - width: 100vw; - margin: 0; - padding: 0; -} - -.main { - height: 100vh; - width: 100vw; - display: flex; - justify-content: start; - align-items: start; - background-image: url("images/96ee551279c55efe9f0ff247d369ec97.jpg"); - background-size: cover; -} - -.container { - height: 100%; - width: 50%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - gap: 4%; - - -} - -.c1 { - height: 55%; - width: 70%; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - gap: 1.6rem; - padding: 20px; - box-sizing: border-box; - font-family: "Lexend", sans-serif; - color: rgba(18, 1, 1, 0.959); - font-size: 2rem; - font-weight: 800; - -} - -.c2 { - width: 70%; - height: auto; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 2rem; -} - -.google { - height: 100%; - width: 40%; - background-color: rgb(196, 54, 54); - display: flex; - justify-content: center; - align-items: center; - text-align: center; - flex-direction: row; - font-family: "Lexend", sans-serif; - background-color: rgb(0, 0, 0); - color: white; - padding: 1%; - border-radius: 0.5rem; - border: 1px white solid; - transition: 0.3s; - gap: 1.5rem; -} - - -.logo { - width: 10%; - height: 70%; - display: flex; - justify-content: center; - align-items: end; - font-size: 1.5rem; -} - -.text { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.google:hover { - transform: scale(1.15); - cursor: pointer; -} - -.app { - height: 100%; - width: 40%; - background-color: rgb(196, 54, 54); - display: flex; - justify-content: center; - align-items: center; - text-align: center; - flex-direction: row; - font-family: "Lexend", sans-serif; - background-color: rgb(0, 0, 0); - color: white; - padding: 1%; - border-radius: 0.5rem; - border: 1px white solid; - transition: 0.3s; - gap: 1.5rem; -} - -.app:hover { - transform: scale(1.15); - cursor: pointer; -} - -.c3 { - width: 20%; - height: 10%; - color: white; - display: flex; - justify-content: center; - align-items: end; - font-family: "Lexend", sans-serif; - animation: scroll 1s infinite; -} - -@keyframes scroll { - 0% { - transform: translateY(0); - } - - 50% { - transform: translateY(-10px); - } - -} - -.main2 { - height: 100vh; - width: 100vw; - position: relative; - background-color: rgb(255, 255, 255); -} - -.burger { - height: 35%; - width: 15%; - background-image: url("https://b.zmtcdn.com/data/o2_assets/110a09a9d81f0e5305041c1b507d0f391743058910.png"); - background-size: cover; - position: absolute; - top: 50%; - left: 20%; - transform: translate(-50%, -50%); - animation: float 3s ease-in-out infinite; -} - -.momo { - height: 35%; - width: 15%; - background-image: url("https://b.zmtcdn.com/data/o2_assets/b4f62434088b0ddfa9b370991f58ca601743060218.png"); - background-size: cover; - position: absolute; - top: 25%; - left: 80%; - transform: translate(-50%, -50%); - animation: float 3s ease-in-out infinite; - -} - -@keyframes float { - 0% { - transform: translate(-50%, -50%) translateY(0); - } - - 50% { - transform: translate(-50%, -50%) translateY(-20px); - } -} - -.pizza { - height: 35%; - width: 15%; - background-image: url("https://b.zmtcdn.com/data/o2_assets/316495f4ba2a9c9d9aa97fed9fe61cf71743059024.png"); - background-size: cover; - position: absolute; - top: 75%; - left: 80%; - transform: translate(-50%, -50%); - animation: float 3s ease-in-out infinite; -} - -@keyframes float { - 0% { - transform: translate(-50%, -50%) translateY(0); - } - - 50% { - transform: translate(-50%, -50%) translateY(-20px); - } -} - -.better { - height: 45%; - width: 35%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - justify-content: center; - align-items: center; - text-align: center; - flex-direction: column; - gap: 1rem; -} - -.food { - font-family: "Lexend", sans-serif; - color: rgb(239, 79, 95); - font-size: 3rem; - font-weight: 600; -} - -.decade { - font-family: "Lexend", sans-serif; - color: rgb(103, 101, 101); - font-size: 1.02rem; - font-weight: 300; -} - - -.city { - height: 15%; - width: 45%; - left: 50%; - top: 88%; - transform: translate(-50%, -50%); - position: absolute; - display: flex; - flex-direction: row; - border-radius: 0.5rem; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - gap: 0.5rem; - padding: 0.5rem; - - box-sizing: border-box; -} - -.restaurants { - height: 100%; - width: 35%; - display: flex; - flex-direction: row; - box-sizing: border-box; - font-family: "Lexend", "sans-serif"; - font-size: 0.8rem; - color: rgb(118, 124, 143); - gap: 5.5rem; - -} - -.cities { - height: 100%; - width: 25%; - display: flex; - flex-direction: row; - box-sizing: border-box; - font-family: "Lexend", "sans-serif"; - font-size: 0.8rem; - color: rgb(118, 124, 143); - gap: 2.6rem; -} - -.delivered { - height: 100%; - width: 35%; - display: flex; - flex-direction: row; - box-sizing: border-box; - font-family: "Lexend", "sans-serif"; - font-size: 0.8rem; - color: rgb(118, 124, 143); -} - -.res { - height: 100%; - width: 30%; - padding: 1rem; - box-sizing: border-box; - font-family: "Lexend", "sans-serif"; - font-size: 0.8rem; - color: rgb(118, 124, 143); - display: flex; - align-items: start; - text-align: center; - flex-direction: column; -} - -.logo2 { - width: 30%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.res2 { - height: 100%; - width: 60rem; - padding: 1rem; - box-sizing: border-box; - font-family: "Lexend", "sans-serif"; - font-size: 0.8rem; - color: rgb(118, 124, 143); - display: flex; - align-items: start; - flex-direction: column; -} - -.main3 { - height: 180vh; - width: 96.5vw; - background-color: rgb(255, 255, 255); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 2rem; - padding: 0.5rem; -} - -.data { - height: 33%; - width: 70%; - display: flex; - flex-direction: column; - gap: 1.5rem; - padding: 2rem; - box-sizing: border-box; - -} - - -.eternal { - width: 100%; - height: 35%; - font-family: "Lexend", sans-serif; - color: rgb(0, 0, 0); - font-size: 2rem; - font-weight: 800; - display: flex; - justify-content: center; - font-size: 3rem; - font-weight: 600; -} - -.power { - width: 100%; - height: 55%; - font-family: "Lexend", sans-serif; - color: rgb(118, 124, 143); - font-size: 2rem; - font-weight: 800; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - font-size: 1.5rem; - font-weight: 400; - -} - - -.cards { - height: 40%; - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - gap: 2.5rem; - padding: 0.5rem; - -} - -.zomato-card { - height: 100%; - width: 20%; - background-color: rgb(254, 226, 226); - border: 2px solid rgb(227, 136, 136); - border-radius: 2rem; - display: flex; - flex-direction: column; - padding: 1rem; - box-sizing: border-box; - align-items: center; - border-radius: 2rem; - gap: 1.2rem; - transition: 0.3s; -} - -.zomato-card:hover { - transform: scale(1.1); - cursor: pointer; -} - -.blinkit { - background-color: rgb(250, 236, 189); - border: 2px solid rgb(235, 213, 139); - -} - -.district { - background-color: rgb(223, 207, 255); - border: 2px solid rgb(201, 139, 235); - -} - -.hyperpure { - background-color: rgb(254 226 226); - border: 2px solid rgb(235, 139, 139); - -} - - -.card { - height: 40%; - width: 70%; - background-color: aliceblue; - border-radius: 1rem; - -} - -.ca1 { - background-image: url("https://b.zmtcdn.com/data/o2_assets/d1eee2be61cf47e2332cb7c49475c0981739777714.png"); - background-size: cover; -} - -.ca2 { - background-image: url("https://b.zmtcdn.com/data/o2_assets/071cb96db84f20eea3a39804e113bdee1739777655.png"); - background-size: cover; - -} - -.ca3 { - background-image: url("https://b.zmtcdn.com/data/o2_assets/b750e7c0113f10cc6b3cec658c7229d71770799109.png"); - background-size: cover; - -} - -.ca4 { - background-image: url("https://b.zmtcdn.com/data/o2_assets/9207cd0fc68c4ac55cfd3bfa00c02a351739777699.png"); - background-size: cover; - -} - -.t1 { - height: 10%; - width: 80%; - display: flex; - justify-content: center; - align-items: center; - font-family: "Lexend", sans-serif; - color: rgb(0, 0, 0); - font-size: 1.2rem; -} - -.t2 { - height: 25%; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - color: rgb(0, 0, 0); - font-family: "Lexend", sans-serif; - font-size: 0.83rem; -} - -.t4 { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - font-family: "Lexend", sans-serif; - font-size: 0.8rem; - color: black; -} - - -.main4 { - height: 100vh; - width: 100vw; - display: flex; - flex-direction: column; - text-align: center; - justify-content: center; - align-items: center; - padding: 2rem; - box-sizing: border-box; - color: white; - background-color: black; -} - -.end { - width: 90%; - height: 95%; - - display: flex; - flex-direction: column; - gap: 2.5rem; -} - -.heading { - width: 100%; - height: 15%; - box-sizing: border-box; - font-family: "Lexend", sans-serif; - display: flex; - text-align: start; - align-items: center; - font-size: 3.5rem; - font-style: italic; - font-weight: 800; -} - -.element { - width: 100%; - height: 60%; - display: flex; - flex-direction: row; - text-align: start; - justify-content: center; - gap: 2rem; - line-height: 2rem; - font-size: 1.1rem; - font-family: "Lexend", sans-serif; - color: rgb(56, 57, 57) -} - -.e1 span:hover { - color: white; - cursor: pointer; -} - -.e1 { - display: flex; - flex-direction: column; - width: 40%; - height: 100%; - gap: 1rem; -} - - -.social { - width: 100%; - height: 10%; -} - -.logos { - width: 100%; - height: 10%; - display: flex; - flex-direction: row; - gap: 0.2rem; - padding-left: 0.3rem; - padding-right: 2rem; - -} - -.l1 { - display: flex; - justify-content: center; - align-items: center; - width: 15%; - height: 100%; - background-color: white; - border-radius: 2rem; - font-size: 0.7rem; - color: black; -} - - -.google2 { - width: 80%; - background-color: rgb(196, 54, 54); - display: flex; - justify-content: center; - align-items: center; - text-align: center; - flex-direction: row; - font-family: "Lexend", sans-serif; - background-color: rgb(0, 0, 0); - color: white; - padding: 1.5%; - border-radius: 0.5rem; - border: 1px white solid; - transition: 0.3s; - gap: 1rem; -} - -.app2 { - width: 80%; - background-color: rgb(196, 54, 54); - display: flex; - justify-content: center; - align-items: center; - text-align: center; - flex-direction: row; - font-family: "Lexend", sans-serif; - background-color: rgb(0, 0, 0); - color: white; - padding: 1.5%; - border-radius: 0.5rem; - border: 1px white solid; - transition: 0.3s; - gap: 1.5rem; -} - -.google2:hover { - cursor: pointer; - transform: scale(1.1); -} - -.app2:hover { - cursor: pointer; - transform: scale(1.1); -} - -.text9 { - display: flex; - flex-direction: column; -} - -hr { - width: 100%; - background-color: rgb(56, 57, 57) -} - -.footer { - width: 100%; - height: 30%; - font-size: 0.9rem; - display: flex; - text-align: start; - flex-direction: column; - color: rgb(56, 57, 57) -} \ No newline at end of file diff --git a/public/zomato-clone/top.css b/public/zomato-clone/top.css deleted file mode 100644 index 6769c24a1..000000000 --- a/public/zomato-clone/top.css +++ /dev/null @@ -1,159 +0,0 @@ -/* ================= TOP SECTION FIX ================= */ - -.top { - position: relative; - margin-bottom: 4rem; - min-height: 100vh; /* important: allows full content flow */ -} - -/* Background image */ -/* ===== HERO / TOP SECTION ===== */ -.top { - position: relative; - height: 56rem; - min-height: 44rem; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; -} - -main .bg-image { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-height: 42rem; - z-index: -1; - object-fit: cover; -} - -/* Center content */ -main .center-content { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - text-align: center; -} - -/* Logo */ -main .main-logo { - height: 6rem; - width: 30rem; -} - -/* Heading */ -main h1 { - margin-top: 3rem; - color: white; - font-size: 3.6rem; - font-weight: 200; - text-align: center; -} - -main .place { - font-size: 3.6rem; - font-weight: 500; -} - -/* Search box */ -main .search_container { - margin-top: 3rem; - display: flex; - align-items: center; - border-radius: 0.8rem; - background-color: white; - box-shadow: rgba(28, 28, 28, 0.08) 0px 2px 8px; - border: 1px solid rgb(232, 232, 232); - height: 5.4rem; -} - -/* Location box */ -main .search_container .location { - padding: 0 1rem; - display: flex; - align-items: center; - width: 24rem; - justify-content: space-around; -} - -/* divider */ -main .search_container .line { - width: 1px; - height: 2rem; - background: rgb(207, 207, 207); -} - -/* search input area */ -main .search_container .search { - display: flex; - align-items: center; - width: 53rem; -} - -main .search_container input { - border: none; - outline: none; -} - -main .search_container .search_box { - width: 100%; - font-size: 1.4rem; -} - -/* ================= MOBILE ================= */ - -@media (max-width: 800px) { - - main .main-logo { - height: 3rem; - width: 16rem; - } - - main .search_container { - flex-direction: column; - width: calc(100% - 2.4rem); - height: auto; - padding: 1rem; - } - - main .search_container .location { - width: 100%; - justify-content: space-between; - margin-bottom: 1rem; - } - - main .search_container .search { - width: 100%; - } -} - height: 4.4rem; - border-bottom: 1px solid var(--border); - padding: 0 0.6rem; - } - - main .search_container .line { - display: none; - } - - main .search_container .search { - width: 100%; - padding: 0 0.6rem; - border-radius: var(--radius-sm); - } - - .search-btn { - width: 100%; - height: 4rem; - margin: 4px 0 0 0; - border-radius: var(--radius-sm); - font-size: 1.5rem; - } -} From d45acc124c4e5a223c044a977362b69f8f6f22e4 Mon Sep 17 00:00:00 2001 From: Nazneen Date: Mon, 8 Jun 2026 01:24:17 +0530 Subject: [PATCH 5/5] Added .gitignore and environment configuration setup --- public/zomato-clone/.gitignore | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 public/zomato-clone/.gitignore diff --git a/public/zomato-clone/.gitignore b/public/zomato-clone/.gitignore new file mode 100644 index 000000000..e69de29bb