Zomato Landing Page (Responsive) by Sohail

sid-am-ahd935 · Oct 26, 2022 · 7462f71 · 7462f71
2 parents 4c6d377 + c72ce57
commit 7462f71
Show file tree

Hide file tree

Showing 14 changed files with 296 additions and 0 deletions.
diff --git a/JavaScript/Zomato_Landing_Page/img/1.png b/JavaScript/Zomato_Landing_Page/img/1.png
diff --git a/JavaScript/Zomato_Landing_Page/img/2.png b/JavaScript/Zomato_Landing_Page/img/2.png
diff --git a/JavaScript/Zomato_Landing_Page/img/3.png b/JavaScript/Zomato_Landing_Page/img/3.png
diff --git a/JavaScript/Zomato_Landing_Page/img/4.png b/JavaScript/Zomato_Landing_Page/img/4.png
diff --git a/JavaScript/Zomato_Landing_Page/img/5.png b/JavaScript/Zomato_Landing_Page/img/5.png
diff --git a/JavaScript/Zomato_Landing_Page/img/6.png b/JavaScript/Zomato_Landing_Page/img/6.png
diff --git a/JavaScript/Zomato_Landing_Page/img/Screenshot 1.png b/JavaScript/Zomato_Landing_Page/img/Screenshot 1.png
diff --git a/JavaScript/Zomato_Landing_Page/img/Screenshot 2.png b/JavaScript/Zomato_Landing_Page/img/Screenshot 2.png
diff --git a/JavaScript/Zomato_Landing_Page/img/Screenshot 3.png b/JavaScript/Zomato_Landing_Page/img/Screenshot 3.png
diff --git a/JavaScript/Zomato_Landing_Page/img/Screenshot 4.png b/JavaScript/Zomato_Landing_Page/img/Screenshot 4.png
diff --git a/JavaScript/Zomato_Landing_Page/img/header-bg-2.png b/JavaScript/Zomato_Landing_Page/img/header-bg-2.png
diff --git a/JavaScript/Zomato_Landing_Page/img/mHeader-bg.jpg b/JavaScript/Zomato_Landing_Page/img/mHeader-bg.jpg
diff --git a/JavaScript/Zomato_Landing_Page/index.html b/JavaScript/Zomato_Landing_Page/index.html
@@ -0,0 +1,123 @@
+<!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">
+
+    <!-- Bootstrap CSS CDN  -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+    <!-- Google Font Link  -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
+
+    <!-- CSS CND  -->
+    <link rel="stylesheet" href="style.css">
+
+    <title>Zomato Home Page</title>
+</head>
+
+<body>
+    <!----------------------- Header Section  ----------------->
+
+    <header>
+
+        <!-- Header Inner Div -->
+        <div class="header-container">
+
+            <!-- nav button  -->
+            <div class="nav-bar">
+                <button class="btn text-light">Login</button>
+                <button class="btn btn-outline-light">Sign Up</button>
+            </div>
+
+            <!-- header main containt  -->
+            <div class="main-header-content">
+                <div class="logo">
+                    <span id="logo-span">o!</span>
+                </div>
+
+                <h1>Find the best restaurants, cafés, and bars</h1>
+
+                <!-- Restaurent Search Input  -->
+                <div class="restaurants-search-section row form">
+                    <input  class="col-lg-6 col-md-6 col-sm-12 form-control"  type="text" name="" id="" placeholder="Please type a location">
+                    <input  class="col-lg-6 col-md-6 col-sm-12 form-control"  type="text" name="" id="" placeholder="Search for restaurants">
+                </div>
+            </div>
+
+        </div>
+
+    </header>
+
+<!------------------------------- Container Section  -------------------------->
+
+    <section class="container-fluide">
+        <h2>Quick Searches</h2>
+        <p>Discover restaurants by type of meal</p>
+
+        <!-------------------- Quick Search Items ------------------>
+
+        <div class="container-menu">
+
+            <!---------- Items ---------->
+            <div class="container-menu-items row">
+
+
+                <div class="item col-lg-4 col-md-12 shadow p-3 mb-5 bg-body rounded">
+                    <img src="./img/4.png" alt="">
+                    <div class="descp-item">
+                        <h4>Drinks</h4>
+                        <p>Start your day with exclusive breakfast options</p>
+                    </div>
+                </div>
+
+                <div class="item col-lg-4 col-md-12 shadow p-3 mb-5 bg-body rounded">
+                    <img src="./img/5.png" alt="">
+                    <div class="descp-item">
+                        <h4>Dinner</h4>
+                        <p>Start your day with exclusive breakfast options</p>
+                    </div>
+                </div>
+
+                <div class="item col-lg-4 col-md-12 shadow p-3 mb-5 bg-body rounded">
+                    <img src="./img/6.png" alt="">
+                    <div class="descp-item">
+                        <h4>Nightlife</h4>
+                        <p>Start your day with exclusive breakfast options</p>
+                    </div>
+                </div>
+                <div class="item col-lg-4 col-md-12 shadow p-3 mb-5 bg-body rounded">
+                    <img src="./img/1.png" alt="">
+                    <div class="descp-item">
+                        <h4>Breakfast</h4>
+                        <p>Start your day with exclusive breakfast options</p>
+                    </div>
+                </div>
+
+                <div class="item col-lg-4 col-md-12 shadow p-3 mb-5 bg-body rounded">
+                    <img src="./img/2.png" alt="">
+                    <div class="descp-item">
+                        <h4>Snacks</h4>
+                        <p>Start your day with exclusive breakfast options</p>
+                    </div>
+                </div>
+
+                <div class="item col-lg-4 col-md-12 shadow p-3 mb-5 bg-body rounded">
+                    <img src="./img/3.png" alt="">
+                    <div class="descp-item">
+                        <h4>Lunch</h4>
+                        <p>Start your day with exclusive breakfast options</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/JavaScript/Zomato_Landing_Page/style.css b/JavaScript/Zomato_Landing_Page/style.css
@@ -0,0 +1,173 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+
+}
+
+/* --------- Header Section  ---------- */
+header {
+    background-image: linear-gradient(transparent, #000000c4), url(img/header-bg-2.png);
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-bottom: 6%;
+    height: 50vh;
+}
+
+.header-container {
+    width: 90%;
+    margin: 0 auto;
+}
+
+/* --------- nav button  ------- */
+
+.nav-bar {
+    display: flex;
+    justify-content: flex-end;
+    padding: 3% 0;
+}
+
+.nav-bar button {
+    margin-left: 2%;
+}
+
+/* ------ header containt -------- */
+.logo {}
+
+.logo-span-upper-div {}
+
+#logo-span {
+    background-color: white;
+    font-size: 50px;
+    padding: 0 13px;
+    border-radius: 37px;
+    color: red;
+    font-weight: bold;
+}
+
+.main-header-content {
+    width: 90%;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.main-header-content h1 {
+    color: white;
+}
+
+.restaurants-search-section {
+
+    gap: 3%;
+    justify-content: center;
+}
+.main-header-content .row{
+    --bs-gutter-x: 0rem;
+}
+
+/* .restaurants-search-section input {
+
+} */
+.restaurants-search-section .form-control{
+    width: 32%;
+}
+
+
+/* ---------------------------------Container Section --------------------------- */
+
+.container-fluide {
+    width: 90%;
+    margin: 0 auto;
+    color: #192F60;
+}
+.container-fluide h2{
+    font-size: 2rem;
+    font-weight: 700;
+}
+.container-fluide p{
+    font-size: 1.2rem;
+
+}
+
+/* <!-------------------- Quick Search Items ------------------> */
+.container-menu-items {
+    display: flex;
+}
+.container-menu .row{
+    --bs-gutter-x: 0;
+}
+
+.item {
+    display: flex;
+    gap: 4%;
+
+}
+
+.item img {
+    width: 15vh;
+    height: auto;
+}
+
+.descp-item {
+    text-align: left;
+}
+
+
+/*------------------------ Responsive Code ------------------- */
+
+@media only screen and (max-width: 800px){
+    .nav-bar{
+        display: none;
+    }
+    .restaurants-search-section .form-control{
+        width: 86%;
+        margin: 13px;
+    }
+    header {
+        height: auto;
+    }
+    .header-container {
+        padding-top: 25px;
+        padding-bottom: 12px;
+    }
+    .container-fluide{
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 461px){
+    header {
+        background-image: linear-gradient(transparent, #000000c4), url(img/mHeader-bg.jpg);
+         /* background-size: 100%;
+        background-position: 100%; 
+        background-repeat: no-repeat;
+        margin-bottom: 6%;
+        height: auto  */
+        height: auto;
+    }
+}
+
+@media only screen and (max-width: 456px){
+    header {
+        background-image: linear-gradient(transparent, #000000c4), url(img/mHeader-bg.jpg);
+        /* background-size: 100%;
+        background-position: 100%; 
+        background-repeat: no-repeat;
+        margin-bottom: 6%;
+        height: auto  */
+        height: auto;
+    }
+    .restaurants-search-section .form-control{
+        width: 86%;
+        margin: 3px auto;
+    }
+    .main-header-content h1 {
+        font-size: 1rem;
+    }
+}
+
+@media only screen and (max-width: 660px){
+    .descp-item p{
+        font-size: 1rem;
+    }
+}