@extends('layouts.frontend.master')
@section('title')
@endsection
@section('keyword')
@endsection
@section('description')
@endsection
@section('head')
@endsection
@section('content')
    <!-- INNER BANNER STARTS
			========================================================================= -->
            <div class="inner-banner title-area text-center image-6">
                <div class="container title-area-content">
                  <h1 class="animated" data-animation="fadeInUp" data-animation-delay="200">Shop</h1>
                  <h2 class="animated" data-animation="fadeInDown" data-animation-delay="200">Browse all Delicious Foods Category</h2>
                  <div class="line animated" data-animation="fadeInDown" data-animation-delay="400"></div>
                  <div class="bread-crumb"><a href="#">Home</a> <span>Shop</span></div>
                </div>
              </div>
              <!-- /. INNER BANNER STARTS
                      ========================================================================= -->
              <div class="white-bg">
                <!-- LATEST NEWS STARTS
                          ========================================================================= -->
                <div class="menu-grid">
                  <div class="container">
                    <div class="row">
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="400">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg" class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="600">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="800">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg" class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="400">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg" class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="600">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg" class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="800">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg" class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="400">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg" class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="600">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg" class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                      <!-- Block Starts -->
                      <div class="col-lg-4 col-md-4 col-sm-6 animated" data-animation="fadeInUp" data-animation-delay="800">
                        <div class="picture">
                          <img src="https://miraclestudio.design/html/delicieux/images/related-recipies/3.jpg" class="img-responsive" alt="" />
                          <!-- Picture Overlay Starts -->
                          <div class="portfolio-overlay-2">
                            <div class="icons">
                              <div>
                                <h1>Food Name</h1>
                                <p class="line"></p>
                                <p class="price-item">
                                  <span>35<sup>$</sup></span>
                                </p>
                                <p class="rating">
                                  <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                  <i class="fa fa-star-half-empty"></i>
                                </p>
                                <span class="icon"><a class="#">Add to cart</a> | <a class="#">Detail</a></span>
                              </div>
                            </div>
                          </div>
                          <!-- Picture Overlay Ends -->
                        </div>
                      </div>
                      <!-- Block Ends -->
                    </div>
                    <!-- Pagging Starts -->
                    <div class="row pagging animated" data-animation="fadeInUp" data-animation-delay="200">
                      <div class="col-lg-6 col-md-6 col-sm-6">
                        <ul class="pagination pull-left">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">Previous</span>
                            </a>
                          </li>
          
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">Next</span>
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="col-lg-6 col-md-6 col-sm-6">
                        <ul class="pagination pull-right">
                          <li><a href="#">1</a></li>
                          <li class="active"><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                        </ul>
                      </div>
                    </div>
                    <!-- Pagging Ends -->
                  </div>
                </div>
                <!-- /. LATEST NEWS ENDS
                          ========================================================================= -->
              </div>
@endsection
@section('scripts')
    <script></script>
@endsection