{% extends "layout.html" %}

{% set title = 'Store Page' %}

{% block content %}

<section class="sec-pad-sm npt">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="search">
                    <form action="">
                        <div class="row">
                            <div class="col-md-9 col-sm-8">
                                <input type="text" class="pull-left" placeholder="Search by doctor name, speciality, medicine...">
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <button class="btn text-upper pull-right">
                                    <i class="fas fa-search mrsm"></i> Search
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="">
    <div class="container">
        <div class="blocks-con">
            <div class="v-block">
                <div class="sponsor">
                    <a href="#" class="d-block">
                        <img src="_assets/img/ads/ad-v.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="h-block">
                <a href="#" class="d-block">
                    <img src="_assets/img/ads/ad-h.jpg" alt="">
                </a>
                <a href="#" class="d-block">
                    <img src="_assets/img/ads/ad-h.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad doctors">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper">deals</h2>
            <a href="#" class="pull-right mtsm">
                View all deals
                <img src="_assets/img/icons/arrow-right-black.png" class="mlsm" alt="">
            </a>
        </div>
        <div class="slider mbxxlg">
            <div class="product-slider">
                {% for i in range(0, 2) -%}
                    <div class="doctor-card service-card product-card">
                        <a href="#">
                            <figure class="doctor-img product-img">
                                <img src="_assets/img/products/01.jpg" alt="">
                            </figure>
                        </a>
                        <div class="doctor-info product-info">
                            <h3 class="text-center text-bold">
                                <a href="product.html">Product name</a>
                            </h3>
                            <p class="text-center">Product description</p>
                            <p class="text-bold text-center price">
                                80 EGP <sub>98 EGP</sub>
                            </p>
                        </div>
                        <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                            <i class="fas fa-shopping-cart mrsm"></i>
                            Add to Cart
                        </a>
                    </div>
                    <div class="doctor-card service-card product-card">
                        <a href="#">
                            <figure class="doctor-img product-img">
                                <img src="_assets/img/products/02.jpg" alt="">
                            </figure>
                        </a>
                        <div class="doctor-info product-info">
                            <h3 class="text-center text-bold">
                                <a href="product.html">Product name</a>
                            </h3>
                            <p class="text-center">Product description</p>
                            <p class="text-bold text-center price">
                                80 EGP <sub>98 EGP</sub>
                            </p>
                        </div>
                        <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                            <i class="fas fa-shopping-cart mrsm"></i>
                            Add to Cart
                        </a>
                    </div>
                    <div class="doctor-card service-card product-card">
                        <a href="#">
                            <figure class="doctor-img product-img">
                                <img src="_assets/img/products/03.jpg" alt="">
                            </figure>
                        </a>
                        <div class="doctor-info product-info">
                            <h3 class="text-center text-bold">
                                <a href="product.html">Product name</a>
                            </h3>
                            <p class="text-center">Product description</p>
                            <p class="text-bold text-center price">
                                80 EGP <sub>98 EGP</sub>
                            </p>
                        </div>
                        <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                            <i class="fas fa-shopping-cart mrsm"></i>
                            Add to Cart
                        </a>
                    </div>
                    <div class="doctor-card service-card product-card">
                        <a href="#">
                            <figure class="doctor-img product-img">
                                <img src="_assets/img/products/04.jpg" alt="">
                            </figure>
                        </a>
                        <div class="doctor-info product-info">
                            <h3 class="text-center text-bold">
                                <a href="product.html">Product name</a>
                            </h3>
                            <p class="text-center">Product description</p>
                            <p class="text-bold text-center price">
                                80 EGP <sub>98 EGP</sub>
                            </p>
                        </div>
                        <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                            <i class="fas fa-shopping-cart mrsm"></i>
                            Add to Cart
                        </a>
                    </div>
                    <div class="doctor-card service-card product-card">
                        <a href="#">
                            <figure class="doctor-img product-img">
                                <img src="_assets/img/products/05.jpg" alt="">
                            </figure>
                        </a>
                        <div class="doctor-info product-info">
                            <h3 class="text-center text-bold">
                                <a href="product.html">Product name</a>
                            </h3>
                            <p class="text-center">Product description</p>
                            <p class="text-bold text-center price">
                                80 EGP <sub>98 EGP</sub>
                            </p>
                        </div>
                        <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                            <i class="fas fa-shopping-cart mrsm"></i>
                            Add to Cart
                        </a>
                    </div>
                {%- endfor %}
            </div>
        </div>
    </div>
</section>

<section class="sec-pad doctors">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper">trending</h2>
            <a href="#" class="pull-right mtsm">
                View all trending items
                <img src="_assets/img/icons/arrow-right-black.png" class="mlsm" alt="">
            </a>
        </div>
        <div class="slider mbxxlg">
            <div class="product-slider">
                {% for i in range(0, 2) -%}
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/01.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/02.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/03.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/04.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/05.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="shopping.html" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                {%- endfor %}
            </div>
        </div>
    </div>
</section>

<section class="sec-pad services">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper">categories for you</h2>
            <a href="#" class="pull-right mtsm">
                View all categories
                <img src="_assets/img/icons/arrow-right-black.png" class="mlsm" alt="">
            </a>
        </div>
        <div class="slider mbxxlg">
            <div class="service-slider">
                {% for i in range(0, 2) -%}
                <div class="doctor-card service-card">
                    <a href="#">
                        <figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/14.jpg')"></figure>
                    </a>
                    <div class="doctor-info">
                        <h3 class="text-center text-bold"><a href="#">Hair Care</a></h3>
                    </div>
                </div>
                <div class="doctor-card service-card">
                    <a href="#">
                        <figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/15.jpg')"></figure>
                    </a>
                    <div class="doctor-info">
                        <h3 class="text-center text-bold"><a href="#">Dental Care</a></h3>
                    </div>
                </div>
                <div class="doctor-card service-card">
                    <a href="#">
                        <figure class="cover doctor-img" style="background-image: url('_assets/img/gallery/16.jpg')"></figure>
                    </a>
                    <div class="doctor-info">
                        <h3 class="text-center text-bold"><a href="#">Makeup</a></h3>
                    </div>
                </div>
                {%- endfor %}
            </div>
        </div>
    </div>
</section>

<section class="sec-pad doctors">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper">top brands</h2>
            <a href="#" class="pull-right mtsm">
                View all brands
                <img src="_assets/img/icons/arrow-right-black.png" class="mlsm" alt="">
            </a>
        </div>
        <div class="slider">
            <div class="doctor-slider brand-slider">
                {% for i in range(0, 2) -%}
                    <div class="d-block brand-name">
                        <div class="vcenter">
                            <a href="#">
                                <img src="_assets/img/brands/01.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div href="#" class="d-block brand-name">
                        <div class="vcenter">
                            <a href="#">
                                <img src="_assets/img/brands/02.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div href="#" class="d-block brand-name">
                        <div class="vcenter">
                            <a href="#">
                                <img src="_assets/img/brands/03.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div href="#" class="d-block brand-name">
                        <div class="vcenter">
                            <a href="#">
                                <img src="_assets/img/brands/04.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div href="#" class="d-block brand-name">
                        <div class="vcenter">
                            <a href="#">
                                <img src="_assets/img/brands/05.jpg" alt="">
                            </a>
                        </div>
                    </div>
                {%- endfor %}
            </div>
        </div>
    </div>
</section>


{% endblock content %}