Merge pull request pranjay-poddar#83 from rsachdeva1020/main

food website
anmolm07 · Oct 25, 2021 · e85282c · e85282c
2 parents 70a6f68 + 425e680
commit e85282c
Show file tree

Hide file tree

Showing 13 changed files with 434 additions and 0 deletions.
diff --git a/Frontend-Projects/food-website/image/GitHub-Mark.png b/Frontend-Projects/food-website/image/GitHub-Mark.png
diff --git a/Frontend-Projects/food-website/image/HackerRank_logo.png b/Frontend-Projects/food-website/image/HackerRank_logo.png
diff --git a/Frontend-Projects/food-website/image/bg-food.jpg b/Frontend-Projects/food-website/image/bg-food.jpg
diff --git a/Frontend-Projects/food-website/image/bg-food2.jpg b/Frontend-Projects/food-website/image/bg-food2.jpg
diff --git a/Frontend-Projects/food-website/image/contact-us-4193523_1920.jpg b/Frontend-Projects/food-website/image/contact-us-4193523_1920.jpg
diff --git a/Frontend-Projects/food-website/image/delivery.jpg b/Frontend-Projects/food-website/image/delivery.jpg
diff --git a/Frontend-Projects/food-website/image/linkedin.png b/Frontend-Projects/food-website/image/linkedin.png
diff --git a/Frontend-Projects/food-website/image/logo.jpg b/Frontend-Projects/food-website/image/logo.jpg
diff --git a/Frontend-Projects/food-website/image/pizza-3007395_1920.jpg b/Frontend-Projects/food-website/image/pizza-3007395_1920.jpg
diff --git a/Frontend-Projects/food-website/image/plate.jpg b/Frontend-Projects/food-website/image/plate.jpg
diff --git a/Frontend-Projects/food-website/index.html b/Frontend-Projects/food-website/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Food delivery</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <!-- google fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" media="screen and (max-width:1100px)" href="phone.css">
+</head>
+
+<body>
+    <nav id="navbar">
+        <div id="logo">
+            <img src="image/logo.jpg" alt="my reataurant" title="order food">
+        </div>
+        <ul>
+            <li class="item"><a href="#home">Home</a></li>
+            <li class="item"><a href="#section">Services</a></li>
+            <li class="item"><a href="#client_section">Our Clients</a></li>
+            <li class="item"><a href="#contact">Contact us</a></li>
+        </ul>
+    </nav>
+    <section id="home">
+        <h1 class="h_primary">
+            Welcome
+        </h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dicta autem ullam doloribus magnam!</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi nesciunt ab dolore deserunt! Quia.</p>
+        <button class="btn">Order now</button>
+    </section>
+
+    <section class="services_container" id="section">
+        <h1 class="center h_primary">
+            Our Services
+        </h1>
+        <div id="services">
+            <div class="box">
+                <img src="image/pizza-3007395_1920.jpg" alt="">
+                <h2 class="h_secondary center">Food Ordering</h2>
+                <p class="center">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo ea cupiditate incidunt quibusdam aliquam recusandae eum maxime totam voluptatum quae illo et ut possimus saepe harum inventore, sed temporibus alias at. Laboriosam, ipsa optio.
+                </p>
+            </div>
+            <div class="box">
+                <img src="image/plate.jpg" alt="">
+                <h2 class="h_secondary center">Food Catering</h2>
+                <p class="center">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo ea cupiditate incidunt quibusdam aliquam recusandae eum maxime totam voluptatum quae illo et ut possimus saepe harum inventore, sed temporibus alias at. Laboriosam, ipsa optio.
+                </p>
+            </div>
+            <div class="box">
+                <img src="image/delivery.jpg" alt="">
+                <h2 class="h_secondary center">Food Ordering</h2>
+                <p class="center">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo ea cupiditate incidunt quibusdam aliquam recusandae eum maxime totam voluptatum quae illo et ut possimus saepe harum inventore, sed temporibus alias at. Laboriosam, ipsa optio.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <section id="client_section">
+        <h1 class="h_primary center">
+            Our Clients
+        </h1>
+        <div class="clients">
+            <div class="client_item">
+                <img src="image/GitHub-Mark.png" alt="">
+            </div>
+            <div class="client_item">
+                <img src="image/linkedin.png" alt="">
+            </div>
+            <div class="client_item">
+                <img src="image/HackerRank_logo.png" alt="">
+            </div>
+            <div class="client_item">
+                <img src="image/GitHub-Mark.png" alt="">
+            </div>
+            <div class="client_item">
+                <img src="image/linkedin.png" alt="">
+            </div>
+        </div>
+    </section>
+
+    <section id="contact">
+        <h1 class="center h_primary">
+            Contact us
+        </h1>
+        <div id="contact_box">
+            <form action="">
+                <div class="form_group">
+                    <label for="name">Name:</label>
+                    <input type="text" name="name" id="name" placeholder="Name">
+                </div>
+                <div class="form_group">
+                    <label for="email">Email:</label>
+                    <input type="email" name="name" id="email" placeholder="Email">
+                </div>
+                <div class="form_group">
+                    <label for="phone">Phone:</label>
+                    <input type="phone" name="name" id="phone" placeholder="Phone">
+                </div>
+                <div class="form_group">
+                    <label for="message">Message:</label>
+                    <textarea name="message" id="message" cols="30" rows="5"></textarea>
+                </div>
+                <div class="submit center">
+                    <button>Submit</button>
+                </div>
+            </form>
+        </div>
+
+    </section>
+
+    <footer>
+        <div class="center">
+            Copyright &copy; www.orderfood.com All Rights Reserved!
+        </div>
+    </footer>
+
+</body>
+
+</html>
diff --git a/Frontend-Projects/food-website/phone.css b/Frontend-Projects/food-website/phone.css
@@ -0,0 +1,48 @@
+#navbar{
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* height: auto; */
+
+}
+#navbar ul li a{
+    padding: 0px 15px;
+
+}
+#logo img{
+    margin: auto;
+}
+#home{
+    height: 450px;
+    padding: 0;
+}
+#home::before{
+    height: 454px;
+}
+#home p{
+    font-size: 15px;
+}
+
+#services{
+    flex-direction: column;
+}
+#services .box{
+    margin: 10px 0;
+}
+#services .box img {
+    /* height: auto; */
+    height: 100px;
+
+    /* width: auto; */
+}
+
+.clients{
+    flex-wrap: wrap;
+}
+#contact_box{
+    margin: auto;
+}
+#contact_box form {
+    width: 70%;
+}
+