{% extends "layout.html" %}

{% set title = 'Homepage' %}

{% block content %}

<section class="sec-pad hero-img cover hero-border" style="background-image: url('_assets/img/cover/homepage.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-12">
                <div class="hero-text">
                    <h2 class="no-margin mbmd">
                        Order Your Favorite<br>
                        Food Online Now
                    </h2>
                    <p>
                        <span>Select your location</span>, so you can enjoy choosing from various types of meals and cusines online
                    </p>
                    <form class="hero-form mtxlg" action="">
                        <div class="checkbox-custom">
                            <input type="radio" name="location" value="jeddah" id="jeddah" class="form-radio"><label class="mrlg" for="jeddah">Jeddah</label>
                            <input type="radio" name="location" value="madina" id="madina" class="form-radio"><label for="madina">Al Madina</label>
                        </div>
                        <div class="select-container mtxlg">
                            <div class="custom-select" for="category">
                                <select id="category" name="category">
                                    <option value="">
                                        Categories:
                                    </option>
                                    <option value="1">
                                        Option 1
                                    </option>
                                    <option value="2">
                                        Option 2
                                    </option>
                                    <option value="3">
                                        Option 3
                                    </option>
                                    <option value="4">
                                        Option 4
                                    </option>
                                </select>
                            </div>
                            <a class="btn btn-green btn-search" href="search.html">
                                <i class="fas fa-search"></i>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sec-pad hero-img cover" style="background-image: url('_assets/img/cover/homepage-1.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-12">
                <div class="hero-text hero-black">
                    <h2 class="no-margin mbmd">
                        Order Your Favorite <br>
                        Food Online Now
                    </h2>
                    <p class="mbxxlg">
                        <span>Select your location</span>, so you can enjoy choosing from various types of meals and cusines online
                    </p>
                    <a href="" class="btn btn-green text-upper">order now</a>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sec-pad ball">
    <div class="container">
        <div class="features">
            <div class="row">
                <div class="col-sm-3 br">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/quality.svg" alt="">
                        </div>
                        <h3>Quality</h3>
                        <p>
                            Choose a transfer price from a wide selection of offers.
                        </p>
                    </div>
                </div>
                <div class="col-sm-3 br">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/fast.svg" alt="">
                        </div>
                        <h3>Fast Delivery</h3>
                        <p>
                            Choose a transfer price from a wide selection of offers.
                        </p>
                    </div>
                </div>
                <div class="col-sm-3 br">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/plate.svg" alt="">
                        </div>
                        <h3>Various Cusines</h3>
                        <p>
                            Choose a transfer price from a wide selection of offers.
                        </p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/chat.svg" alt="">
                        </div>
                        <h3>Live Chat</h3>
                        <p>
                            Choose a transfer price from a wide selection of offers.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad">
    <div class="container">
        <div class="category">
            <div class="section-title mbxxlg">
                <h2 class="text-capitalize text-center no-margin">new meals</h2>
            </div>
            <div class="row">
                <div class="product-slider">
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad hero-img cover overlay back-fixed" style="background-image: url('_assets/img/cover/deals.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="hero-text text-center">
                    <h2 class="no-margin mbmd">
                        WEEKLY<br>
                        Deals
                    </h2>
                    <p class="mbxxlg text-center">
                        Weekly deals from our restaurants
                        so we can adjust deliver your meal at time
                        you want .
                    </p>
                    <a href="" class="btn btn-green text-upper d-inline">Learn more</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad">
    <div class="container">
        <div class="category">
            <div class="section-title mbxxlg">
                <h2 class="text-capitalize text-center no-margin">Popular  Meals</h2>
            </div>
            <div class="row">
                <div class="product-slider">
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product.html' %}</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad hero-img cover back-fixed" style="background-image: url('_assets/img/cover/homepage.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="hero-text text-center">
                    <h2 class="no-margin mbmd">
                        Subscribe
                    </h2>
                    <p class="mbxxlg text-center">
                        Receive deals from our restaurants
                        via e-mail
                    </p>
                    <form class="hero-form hero-subscribe mtxlg" action="">
                        <div class="checkbox-custom">
                            <input type="radio" name="location" value="jeddah-1" id="jeddah-1" class="form-radio"><label class="mrlg" for="jeddah-1">Jeddah</label>
                            <input type="radio" name="location" value="madina-1" id="madina-1" class="form-radio"><label for="madina-1">Al Madina</label>
                        </div>
                        <div class="input-group mtxlg">
                            <input type="email" class="form-control" placeholder="Write your e-mail here">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button"><i class="fa fa-paper-plane"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>



<section class="sec-pad">
    <div class="container">
        <div class="category">
            <div class="section-title mbxxlg">
                <h2 class="text-capitalize text-center no-margin">Brands</h2>
            </div>
            <div class="row">
                <div class="brands-slider">
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/1.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">Restaurant</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/2.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">Restaurant</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/3.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">Restaurant</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/4.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">Restaurant</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/5.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">Restaurant</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/1.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">Restaurant</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/2.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">Restaurant</h3>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="sec-pad hero-img cover app">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="hero-text hero-black">
                    <h2 class="no-margin mbmd text-upper">
                        Get our app
                    </h2>
                    <p>
                        it's the fastest way to
                        order food on the go.
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="download">
                    <a href="#" class="mbmd">
                        <img src="_assets/img/icons/app_store.svg" alt="">
                    </a>
                    <a href="#">
                        <img src="_assets/img/icons/play_store.svg" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="hand">
            <img src="_assets/img/hand.png" alt="">
        </div>
    </div>
</section>

{% include 'component/product-model.html' %}

{% endblock content %}