You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1291 lines
73 KiB

<!--
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.Benefits 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>