diff --git a/index.html b/index.html new file mode 100644 index 0000000..eb30566 --- /dev/null +++ b/index.html @@ -0,0 +1,136 @@ + + + + + + + Zomato + + + + + + + +
+
+
+

Get The App

+
+ +
+
+ +

Discover the best food & drinks in Delhi NCR

+
+
+ +

Hapur Road, Ghaziabad

+
+
+ + +
+
+
+
+ +
+
+ + +
+
+

Order Food Online

+ +
+
+

Dining Out

+ +
+
+

Nightlife & Club

+ +
+
+ + +
+
+

Popular localities in and around Delhi NCR

+
+
+
+
+

Cannaught Place

+

388 Places

+
+
+

Cannaught Place

+

388 Places

+
+
+

Cannaught Place

+

388 Places

+
+
+

Cannaught Place

+

388 Places

+
+
+

Cannaught Place

+

388 Places

+
+
+

Cannaught Place

+

388 Places

+
+
+

Cannaught Place

+

388 Places

+
+
+

Cannaught Place

+

388 Places

+
+
+

Cannaught Place

+

388 Places

+
+
+
+
+ + +
+
+
+ +
+
+

Get the Zomato App

+

+ Download the app from +

+
+ + +
+
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..58e82a1 --- /dev/null +++ b/style.css @@ -0,0 +1,227 @@ +/* *{ + margin: 0; +} */ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); + +body{ + margin: 0; + padding: 0; + text-decoration: none; + font-family: 'Poppins', sans-serif; +} + +header { + width: 100%; + height: 70vh; + overflow: hidden; + position: relative; + object-fit: cover; + margin-bottom: 2rem; +} +.header-image { + width: 100%; + position: absolute; + top: -20vh; + z-index: -1; +} +.header-image img { + width: 100%; +} + +.nav { + display: flex; + justify-content: space-between; + align-items: center; + color: white; + font-size: 1rem; + margin: 0 40px; +} +.nav-bar { + list-style: none; + font-weight: lighter; + display: flex; + gap: 1.5rem; +} +.head { + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 7vh; + align-items: center; +} +.logo { + width: 20vw; +} +.head h3 { + font-size: 2.1rem; + color: whitesmoke; + font-weight: 400; +} +.search { + display: flex; + width: 55vw; + /* justify-content: center; */ + align-items: center; + border-radius: 10px; + background: white; + padding: 5px 4px +} +.search .search-item{ + display: flex; + align-items: center; + margin-left: 10px; +} +.search .search-item p { + color: gray; + border-right: 1px solide gray; + font-size: 15px; + margin-right: 10px; + padding-left: 10px; +} +.search .search-item input { + outline: none; + border: none; + width: 200%; + padding-left: 10px; + font-size: 15px; +} +.search .search-item:first-child{ + width: 30%; + color: rgb(255, 126, 139); +} +.search .search-item:last-child{ + width: 70%; + color: gray; +} + +/* SECTION 1 */ +.section-1 { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 4rem; +} +.section-1 .section-1-item { + position: relative; + /* width: 300px; */ + width: 15rem; + margin: 3px 5px; + overflow: hidden; + border-radius: 10px; + background: white; + border: 1px solid rgb(228, 228, 228); +} +.section-1 .section-1-item img { + width: 100%; + border: 1px solid rgb(228, 228, 228); + border-radius: 15px; + z-index: -1; +} +.section-1 .section-1-item .items-details { + position: absolute; + bottom: 3px; + align-items: center; + border-radius: 0 0 15px 15px; + background-color: white; + width: 100%; + height: 25%; + z-index: 2; +} +.section-1 .section-1-item .items-details p { + text-align: center; + font-size: 1.2rem; + letter-spacing: 0.7px; +} +.section-1 .section-1-item:hover { + box-shadow: 0px 1px 2px rgba(207, 207, 207, 0.5); + transition: all 0.1s; +} + + +/* SECTION 2 */ +.section-2 { + width: 1080px; + margin: 0 auto; + margin-bottom: 4rem; +} +.section-2-heading { + font-size: 2rem; + line-height: 1.2; + font-weight: 400; +} +.section-2 .section-2-container .section-2-items { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.section-2 .section-2-container .section-2-items .section-2-item { + width: 100%; + max-width: 26%; + margin-bottom: 20px; +} +.section-2-item { + border-radius: 10px; + box-shadow: 0 2px 4px rgb(236, 236, 236); + padding: 20px; +} +.section-2-item .item-head { + font-size: 1.2rem; + color: rgb(28, 28, 28); + margin: 0; + margin-bottom: 5px; +} +.section-2-item .item-subhead { + font-weight: lighter; + color: rgb(51, 51, 51); + margin: 0; +} + +/* SECTION 3 */ +.section-3 { + height: 620px; + background-color: rgb(255, 251, 247); +} +.section-3-container{ + width: 1080px; + height: 100%; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; +} +.section-3-img { + width: 40%; +} +.section-3-img img { + width: 400px; +} +.section-3-content { + +} +.section-3-content h1 { + font-size: 2.5rem; + font-weight: lighter; + margin-bottom: 0; + margin: 0; + margin-bottom: 15px; +} +.section-3-content p{ + font-size: 1.2rem; + font-weight: lighter; + margin: 0; + margin-bottom: 15px; +} +.section-3-download img{ + width: 40%; +} + +/* FOOTER */ +footer { + width: 100%; + height: 120px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file