diff --git a/index.html b/index.html
new file mode 100644
index 0000000..bb60760
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1291 @@
+<!--
+Author: W3layouts
+Author URL: http://w3layouts.com
+-->
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Foodyuppie a Restaurant Category Bootstrap Responsive Website Template - Home : W3Layouts</title>
+    <link href="//fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
+    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
+
+    <!-- Template CSS -->
+    <link rel="stylesheet" href="assets/css/style-starter.css">
+</head>
+
+<body>
+    <header id="site-header" class="fixed-top">
+        <section class="w3l-header-4">
+            <div class="container">
+                <nav class="navbar navbar-expand-lg navbar-light">
+                    <h1><a class="navbar-brand" href="index.html">
+                            <span>Food</span>yuppie
+                        </a></h1>
+                    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
+                        data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
+                        aria-label="Toggle navigation">
+                        <span class="fa icon-expand fa-bars"></span>
+                        <span class="fa icon-close fa-times"></span>
+                    </button>
+
+                    <div class="collapse navbar-collapse" id="navbarNav">
+                        <ul class="navbar-nav mx-lg-auto">
+                            <li class="nav-item active">
+                                <a class="nav-link" href="index.html">Home </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="about.html">About</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="services.html">Services</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="contact.html">Contact</a>
+                            </li>
+                        </ul>
+                        <ul class="navbar-nav search-right mt-lg-0 mt-2">
+                            <li class="nav-item mr-3" title="Search"><a href="#search" class="btn search-search">
+                                    <span class="fa fa-search" aria-hidden="true"></span></a></li>
+                            <li class="nav-item"><a href="tel:+(12)234-11-24"
+                                    class="btn btn-primary btn-style d-none d-lg-block btn-style mr-2"><span
+                                        class="fa fa-phone mr-3" aria-hidden="true"></span> (32)234-14-94</a>
+                            </li>
+                        </ul>
+
+                        <!-- //toggle switch for light and dark theme -->
+                        <!-- search popup -->
+                        <div id="search" class="pop-overlay">
+                            <div class="popup">
+                                <form action="#" method="GET" class="d-sm-flex">
+                                    <input type="search" placeholder="Search.." name="search" required="required"
+                                        autofocus>
+                                    <button type="submit">Search</button>
+                                    <a class="close" href="#url">&times;</a>
+                                </form>
+                            </div>
+                        </div>
+                        <!-- /search popup -->
+                    </div>
+                    <!-- toggle switch for light and dark theme -->
+                    <div class="mobile-position">
+                        <nav class="navigation">
+                            <div class="theme-switch-wrapper">
+                                <label class="theme-switch" for="checkbox">
+                                    <input type="checkbox" id="checkbox">
+                                    <div class="mode-container">
+                                        <i class="gg-sun"></i>
+                                        <i class="gg-moon"></i>
+                                    </div>
+                                </label>
+                            </div>
+                        </nav>
+                    </div>
+                </nav>
+            </div>
+        </section>
+    </header>
+
+    <!-- banner section -->
+    <section id="home" class="w3l-banner py-5">
+        <div class="container py-lg-5 py-md-4">
+            <div class="row align-items-center">
+                <div class="col-lg-6 col-sm-12 mt-lg-0 mt-4">
+                    <span class="subhny-title mb-2">Fast and Easy</span>
+                    <h3 class="mb-4">Express<br>
+                        Home Delivery</h3>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, excepturi.
+                        Distinctio accusantium fugit odit? Fugit ipsam. Sed ac fringilla ex. Nam mauris velit, ac
+                        cursus quis, non leo.</p>
+                    <div class="mt-sm-5 mt-4">
+                        <a class="btn btn-outline-primary btn-style mr-2" href="about.html"> Read More <span
+                                class="fa fa-chevron-right"></span></a>
+                        <a class="btn btn-primary btn-style" href="contact.html"> Order Now <span
+                                class="fa fa-chevron-right"></span></a>
+                    </div>
+                </div>
+                <div class="col-lg-6 col-md-8 col-sm-10 mt-lg-0 mt-5">
+                    <div class="img-effect text-lg-center">
+                        <img src="assets/images/pic1.png" alt="banner" class="img-fluid">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- //banner section -->
+    <section class="w3l-products py-5" id="projects">
+        <div class="container py-lg-3">
+            <div class="header-section text-center mx-auto">
+                <span class="subhny-title text-center mb-2">Quick Pick</span>
+                <h3 class="hny-title text-center mb-5">Popular Goods</h3>
+            </div>
+            <div class="mt-5">
+                <div class="mx-auto">
+                    <!--Horizontal Tab-->
+                    <div id="parentHorizontalTab">
+                        <ul class="resp-tabs-list hor_1">
+                            <li>Fast Food</li>
+                            <li>Hot Pizza</li>
+                            <li>Raw Meet</li>
+                            <div class="clear"></div>
+                        </ul>
+                        <div class="resp-tabs-container hor_1">
+                            <div class="products-content">
+                                <div class="row">
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/1.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Cheeseburger with
+                                                        Salad</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>19.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/2.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Cheeseburger with Bacon</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>29.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/3.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Classic Bacon Hamburger</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/1.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Cheeseburger with
+                                                        Salad</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>19.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="products-content">
+                                <div class="row">
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/4.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Classic Seafood Pizza</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/5.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Shrimp &amp; Olive Pizza</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/6.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Thin Cheese Pizza</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/4.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Classic Seafood Pizza</h4>
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="products-content">
+                                <div class="row">
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/7.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Herb Chicken Fillet</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/8.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Chicken Fillet with Salad</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/9.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Boiled Pork with Spices</h4>
+
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3 col-sm-6 mt-4">
+                                        <div class="content">
+                                            <a href="#url">
+                                                <img src="assets/images/7.png" class="img-fluid" alt="">
+                                                <div class="lte-item-descr text-center">
+                                                    <ul class="star-rating d-flex justify-content-center">
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">
+                                                                <span class="fa fa-star  mr-1"
+                                                                    aria-hidden="true"></span>
+
+                                                            </a>
+                                                        </li>
+
+
+                                                    </ul>
+                                                    <h4 class="product-title">Herb Chicken Fillet</h4>
+                                                    <p class="mb-4">Sed ut perspiciatis unde omnis iste natus
+                                                        error sit voluptatem</p>
+                                                    <span class="price"><span class="amount"><span
+                                                                class="price-currency=">$</span>30.00</span></span>
+
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- //our products -->
+    <!-- /bottom-grids-->
+    <section class="w3l-bottom-grids-6 py-5">
+        <div class="container py-lg-5 py-md-4">
+            <span class="subhny-title text-center mb-2">Online Order</span>
+            <h3 class="hny-title text-center mb-5">How it works?</h3>
+            <div class="grids-area-hny main-cont-wthree-fea row">
+                <div class="col-lg-4 col-md-6 grids-feature">
+                    <div class="area-box">
+                        <span class="fa fa-mobile"></span>
+                        <h4><a href="#feature" class="title-head">Online Food Ordering</a></h4>
+                        <p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor amet ipsum primis in faucibus
+                            orci.</p>
+                    </div>
+                </div>
+                <div class="col-lg-4 col-md-6 grids-feature mt-md-0 mt-4">
+                    <div class="area-box box-active">
+                        <span class="fa fa-gift"></span>
+                        <h4><a href="#feature" class="title-head">Food Delivery</a></h4>
+                        <p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor amet ipsum primis in faucibus
+                            orci.</p>
+                    </div>
+                </div>
+                <div class="col-lg-4 col-md-6 grids-feature mt-lg-0 mt-4">
+                    <div class="area-box">
+                        <span class="fa fa-building-o"></span>
+                        <h4><a href="#feature" class="title-head">Drive in Restaurant</a></h4>
+                        <p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor amet ipsum primis in faucibus
+                            orci.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- //bottom-grids-->
+    <!-- home page block2 grids -->
+    <section class="w3l-grids-3 py-5">
+        <div class="container py-lg-5 py-md-4">
+            <div class="row bottom-ab-grids">
+                <div class="col-lg-6 bottom-ab-left pr-lg-5">
+                    <span class="subhny-title mb-2">Faster than light</span>
+                    <h3 class="hny-title mb-4">Giving your Hunger a new Option</h3>
+                    <p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio
+                        voluptatem
+                        tenetur consequatur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+                        cubilia. </p>
+                    <ul class="cont-4 mt-4">
+                        <li><span class="fa fa-check"></span>Pharetra massa init ultricies labore dolor amet</li>
+                        <li><span class="fa fa-check"></span>Dolore magna aliqua init sodales tempor</li>
+                        <li><span class="fa fa-check"></span>Incididunt ut labore et, pharetra massa</li>
+                    </ul>
+                    <a href="about.html" class="btn btn-style btn-primary mt-lg-5 mt-4">Read More <span
+                            class="fa fa-chevron-right"></span></a>
+                </div>
+                <div class="col-lg-6 bottom-right-grids mt-lg-0 mt-5">
+                    <img src="assets/images/pic3.png" alt="" class="img-fluid" />
+                </div>
+            </div>
+        </div>
+        </div>
+    </section>
+    <!-- //home page block2 grids -->
+    <!-- stats -->
+    <section class="w3l-stats py-lg-5 py-4" id="stats">
+        <div class="container py-md-5 py-4">
+            <span class="subhny-title mb-2 text-center">Faster is better.</span>
+            <h3 class="hny-title mb-md-4 mb-2 text-center">
+                Get More With Our Application</h3>
+            <div class="row stats-con">
+                <div class="col-lg-4 col-md-6 stats_info counter_grid">
+
+                    <p class="counter">35+</p>
+                    <h4>Free Online Ordering System
+                        For Restaurants</h4>
+                </div>
+                <div class="col-lg-4 col-md-6 stats_info counter_grid1">
+                    <p class="counter">500+</p>
+                    <h4>500+ Free delivery to customers. Get your order with trusted people</h4>
+                </div>
+                <div class="col-lg-4 col-md-6 stats_info counter_grid mt-md-0 mt-5">
+
+                    <p class="counter">26+</p>
+                    <h4>26+ years of experience.Benefit’s of working with us.</h4>
+                </div>
+
+            </div>
+        </div>
+    </section>
+    <!-- //stats -->
+    <!-- services page block 2 -->
+    <section class="w3l-features py-5" id="work">
+        <div class="call-w3 py-lg-5 py-md-4">
+            <div class="container">
+                <div class="row main-cont-wthree-2">
+                    <div class="col-lg-5 feature-grid-left pr-lg-5">
+                        <span class="subhny-title mb-2">Faster is better.</span>
+                        <h3 class="hny-title mb-md-4 mb-2">Sit at Home
+                            We Will Take Care</h3>
+                        <p class="text-para">Curabitur id gravida risus. Fusce eget ex fermentum, ultricies nisi ac sed,
+                            lacinia dolor eget.
+                        </p>
+                        <a href="#url" class="btn btn-primary btn-style mt-lg-5 mt-4">Discover More</a>
+                    </div>
+                    <div class="col-lg-7 feature-grid-right mt-lg-0 mt-5">
+                        <div class="call-grids-w3 d-grid">
+                            <div class="grids-1 box-wrap">
+                                <div class="icon">
+                                    <span class="fa fa-clock-o" aria-hidden="true"></span>
+                                </div>
+                                <h4><a href="#feature" class="title-head">Fast Delivery
+                                        in 1 Hour</a></h4>
+                            </div>
+                            <div class="grids-1 box-wrap">
+                                <div class="icon">
+                                    <span class="fa fa-mobile" aria-hidden="true"></span>
+                                </div>
+                                <h4><a href="#feature" class="title-head">Amazing
+                                        Mobile App</a></h4>
+                            </div>
+                            <div class="grids-1 box-wrap">
+                                <div class="icon">
+                                    <span class="fa fa-map-marker" aria-hidden="true"></span>
+                                </div>
+                                <h4><a href="#feature" class="title-head">Wide
+                                        (Location) Map</a></h4>
+                            </div>
+                            <div class="grids-1 box-wrap">
+                                <div class="icon">
+                                    <span class="fa fa-user-circle-o" aria-hidden="true"></span>
+                                </div>
+                                <h4><a href="#feature" class="title-head">More Than
+                                        150 Couriers</a></h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- //services page block 2 -->
+    <!-- /w3l-content-with-photo-4-->
+    <section class="w3l-content-with-photo-4">
+        <!-- /content-grids-->
+        <div class="content-photo-info py-5">
+            <div class="container py-md-5">
+                <!-- /row-->
+                <div class="content-photo-grids row">
+
+                    <div class="photo-6-inf-right col-lg-7 text-left pr-lg-5 mb-lg-0 mb-5">
+                        <span class="subhny-title mb-2">Faster is better.</span>
+                        <h3 class="hny-title mb-md-4 mb-2">
+                            Get More With Our Application</h3>
+                        <p class="mt-3 pr-lg-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+                            tempor
+                            incididunt ut labore et dolore.</p>
+                        <div class="servehny-1">
+                            <div class="ser-sub">
+
+                                <a href="#link" class="ser1"><span class="fa fa-check"></span> Follow Delivery Status
+                                </a>
+                                <a href="#link" class="ser1"><span class="fa fa-check"></span> Order From Any Location
+                                </a>
+                                <a href="#link" class="ser1"><span class="fa fa-check"></span> Get Important Notices</a>
+                            </div>
+
+                        </div>
+                        <div class="read-buttons mt-lg-5">
+
+                            <a class="btn btn-outline-primary btn-style mr-2" href="#"><span
+                                    class="fa fa-play-circle-o mr-2"></span> <span class="prim_text">PlayStore </a>
+                            <a class="btn btn-primary btn-style" href="#"><span class="fa fa-apple mr-2"></span> <span
+                                    class="prim_text">App Store</span></a>
+
+                        </div>
+                    </div>
+                    <div class="photo-6-inf-left col-lg-5 pr-lg-4 text-lg-right text-center">
+                        <a href="#"><img src="assets/images/pic4.png" class="img-fluid" alt=""></a>
+                    </div>
+                </div>
+                <!-- //row-->
+            </div>
+        </div>
+    </section>
+    <!-- /w3l-content-with-photo-4-->
+    <!-- testimonials -->
+    <section class="w3l-clients-1" id="testimonials">
+        <!-- /grids -->
+        <div class="cusrtomer-layout py-5">
+            <div class="container py-md-4">
+                <div class="heading align-self text-center">
+                    <span class="subhny-title mb-2">Testimonials</span>
+                        <h3 class="hny-title mb-md-4 mb-2">
+                            Story of our customers</h3>
+                </div>
+                <!-- /grids -->
+                <div class="testimonial-row">
+                    <div id="owl-demo1" class="owl-two owl-carousel owl-theme mb-md-3 mb-sm-5 mb-4">
+                        <div class="item">
+                            <div class="testimonial-content">
+                                <div class="testimonial">
+                                    <div class="test-img">
+                                        <img src="assets/images/team1.jpg" class="img-fluid" alt="client-img">
+                                    </div>
+                                    <blockquote>
+                                        <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita beatae
+                                            laudantium Quas minima sunt natus tempore, maiores aliquid modi felis vitae
+                                            facere aperiam sequi optio lacinia id ipsum non velit, culpa.
+                                            voluptate rem ullam dolore nisi est quasi, doloribus tempora.</q>
+                                    </blockquote>
+                                    <div class="testi-des">
+                                        <div class="peopl align-self">
+                                            <h3>Gloria Parker</h3>
+                                            <p class="indentity">Customer </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="testimonial-content">
+                                <div class="testimonial">
+                                    <div class="test-img"><img src="assets/images/team2.jpg" class="img-fluid"
+                                            alt="client-img">
+                                    </div>
+                                    <blockquote>
+                                        <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita beatae
+                                            laudantium Quas minima sunt natus tempore, maiores aliquid modi felis vitae
+                                            facere aperiam sequi optio lacinia id ipsum non velit, culpa.
+                                            voluptate rem ullam dolore nisi est quasi, doloribus tempora.</q>
+                                    </blockquote>
+                                    <div class="testi-des">
+                                        <div class="peopl align-self">
+                                            <h3>Tommy sakura</h3>
+                                            <p class="indentity">Customer </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="testimonial-content">
+                                <div class="testimonial">
+                                    <div class="test-img"><img src="assets/images/team3.jpg" class="img-fluid"
+                                            alt="client-img">
+                                    </div>
+                                    <blockquote>
+                                        <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita beatae
+                                            laudantium Quas minima sunt natus tempore, maiores aliquid modi felis vitae
+                                            facere aperiam sequi optio lacinia id ipsum non velit, culpa.
+                                            voluptate rem ullam dolore nisi est quasi, doloribus tempora.</q>
+                                    </blockquote>
+                                    <div class="testi-des">
+                                        <div class="peopl align-self">
+                                            <h3>Bruce Bailey </h3>
+                                            <p class="indentity">Customer </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="testimonial-content">
+                                <div class="testimonial">
+                                    <div class="test-img"><img src="assets/images/team4.jpg" class="img-fluid"
+                                            alt="client-img">
+                                    </div>
+                                    <blockquote>
+                                        <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita beatae
+                                            laudantium Quas minima sunt natus tempore, maiores aliquid modi felis vitae
+                                            facere aperiam sequi optio lacinia id ipsum non velit, culpa.
+                                            voluptate rem ullam dolore nisi est quasi, doloribus tempora.</q>
+                                    </blockquote>
+                                    <div class="testi-des">
+                                        <div class="peopl align-self">
+                                            <h3>Ruth Edwards</h3>
+                                            <p class="indentity">Customer </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- /grids -->
+        </div>
+        <!-- //grids -->
+    </section>
+    <!-- //testimonials -->
+    <!-- footer-28 block -->
+    <section class="w3l-footer">
+        <footer class="footer-28 py-5">
+            <div class="container py-md-5">
+                <div class="footer-top-28 text-center">
+                    <div class="row foothny-grids mb-lg-5 mb-4">
+                        <div class="col-lg-6 fotter-gd-left px-0">
+                            <a href="#"><img src="assets/images/footer.jpg" class="img-fluid" alt=""></a>
+                        </div>
+                        <div class="col-lg-6 fotter-gd-right">
+                            <div class="ft-grid">
+                                <h5><span class="text-content"> Call us to make order now </span>
+
+                                    <span class="fa fa-phone mr-3" aria-hidden="true"></span>21-600-28-499</span>
+                                </h5>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <h2><a class="navbar-brand" href="index.html">
+                            Food<span>yuppie</span>
+                        </a></h2>
+                    <p class="f-para mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic
+                        odio
+                        voluptatem
+                        tenetur consequatur.Curabitur id gravida risus. Fusce eget ex fermentum</p>
+                </div>
+                <div class="footer-social-accounts text-center mt-lg-5 mt-4">
+
+                    <ul class="social-icons mt-4">
+                        <li class="facebook">
+                            <a href="#link" title="Facebook">
+                                <span class="fa fa-facebook" aria-hidden="true"></span>
+                            </a>
+                        </li>
+                        <li class="twitter">
+                            <a href="#link" title="Twitter">
+                                <span class="fa fa-twitter" aria-hidden="true"></span>
+                            </a>
+                        </li>
+                        <li class="dribbble">
+                            <a href="#link" title="Dribbble">
+                                <span class="fa fa-dribbble" aria-hidden="true"></span>
+                            </a>
+                        </li>
+                        <li class="google mr-0">
+                            <a href="#link" title="Google">
+                                <span class="fa fa-google" aria-hidden="true"></span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+
+            <div class="midd-footer-28 align-center mt-lg-0 mt-4">
+                <p class="copy-footer-28 text-center"> &copy; 2020 Foodyuppie. All Rights Reserved. Design by <a
+                        href="https://w3layouts.com/">W3Layouts</a></p>
+
+            </div>
+            <!-- move top -->
+            <button onclick="topFunction()" id="movetop" title="Go to top">
+                <span class="fa fa-angle-up"></span>
+            </button>
+            <script>
+                // When the user scrolls down 20px from the top of the document, show the button
+                window.onscroll = function () {
+                    scrollFunction()
+                };
+
+                function scrollFunction() {
+                    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                        document.getElementById("movetop").style.display = "block";
+                    } else {
+                        document.getElementById("movetop").style.display = "none";
+                    }
+                }
+
+                // When the user clicks on the button, scroll to the top of the document
+                function topFunction() {
+                    document.body.scrollTop = 0;
+                    document.documentElement.scrollTop = 0;
+                }
+            </script>
+            <!-- /move top -->
+        </footer>
+
+        <script src="assets/js/jquery-3.3.1.min.js"></script> <!-- Common jquery plugin -->
+
+        <script src="assets/js/theme-change.js"></script><!-- theme switch js (light and dark)-->
+        <!-- responsive tabs -->
+        <script src="assets/js/jquery-1.9.1.min.js"></script>
+
+        <script src="assets/js/easyResponsiveTabs.js"></script>
+
+        <!--Plug-in Initialisation-->
+        <script type="text/javascript">
+            $(document).ready(function () {
+                //Horizontal Tab
+                $('#parentHorizontalTab').easyResponsiveTabs({
+                    type: 'default', //Types: default, vertical, accordion
+                    width: 'auto', //auto or any width like 600px
+                    fit: true, // 100% fit in a container
+                    tabidentify: 'hor_1', // The tab groups identifier
+                    activate: function (event) { // Callback function if tab is switched
+                        var $tab = $(this);
+                        var $info = $('#nested-tabInfo');
+                        var $name = $('span', $info);
+                        $name.text($tab.text());
+                        $info.show();
+                    }
+                });
+            });
+        </script>
+       <!-- //counter-->
+    <script src="assets/js/owl.carousel.js"></script><!-- owl carousel -->
+    <!-- script for tesimonials carousel slider -->
+    <script>
+        $(document).ready(function () {
+            $("#owl-demo1").owlCarousel({
+                loop: true,
+                margin: 20,
+                nav: false,
+                responsiveClass: true,
+                responsive: {
+                    0: {
+                        items: 1,
+                        nav: false
+                    },
+                    1000: {
+                        items: 1,
+                        nav: false,
+                        loop: false
+                    }
+                }
+            })
+        })
+    </script>
+    <!-- //script for tesimonials carousel slider -->
+        <!--/MENU-JS-->
+        <script>
+            $(window).on("scroll", function () {
+                var scroll = $(window).scrollTop();
+
+                if (scroll >= 80) {
+                    $("#site-header").addClass("nav-fixed");
+                } else {
+                    $("#site-header").removeClass("nav-fixed");
+                }
+            });
+
+            //Main navigation Active Class Add Remove
+            $(".navbar-toggler").on("click", function () {
+                $("header").toggleClass("active");
+            });
+            $(document).on("ready", function () {
+                if ($(window).width() > 991) {
+                    $("header").removeClass("active");
+                }
+                $(window).on("resize", function () {
+                    if ($(window).width() > 991) {
+                        $("header").removeClass("active");
+                    }
+                });
+            });
+        </script>
+        <!--//MENU-JS-->
+
+        <!-- disable body scroll which navbar is in active -->
+        <script>
+            $(function () {
+                $('.navbar-toggler').click(function () {
+                    $('body').toggleClass('noscroll');
+                })
+            });
+        </script>
+        <!-- //disable body scroll which navbar is in active -->
+
+        <!--bootstrap-->
+        <script src="assets/js/bootstrap.min.js"></script>
+        <!-- //bootstrap-->
+
+</body>
+
+</html>
\ No newline at end of file
