{% extends "layout.html" %}

{% set title = 'Homepage' %}

{% block content %}

<section class="home-slider">
    <div class="slide-item cover" style="background-image: url('_assets/img/slider_img_2.jpg')">
        <div class="container">
            <div class="vcenter">
                <div class="slide-content">
                    <h2 class="text-upper">Enjoy this summer collection</h2>
                    <p class="mtmd text-upper">Discover the latest collection</p>
                    <div class="btn-wrapper">
                        <a href="#" class="btn btn-main">Shop now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide-item cover" style="background-image: url('_assets/img/slider_img_1.jpg')">
        <div class="container">
            <div class="vcenter">
                <div class="slide-content">
                    <h2 class="text-upper">Enjoy this summer collection</h2>
                    <p class="mtmd text-upper">Discover the latest collection</p>
                    <div class="btn-wrapper">
                        <a href="#" class="btn btn-main">Shop now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide-item cover" style="background-image: url('_assets/img/slider_img_1.jpg')">
        <div class="container">
            <div class="vcenter">
                <div class="slide-content">
                    <h2 class="text-upper">Enjoy this summer collection</h2>
                    <p class="mtmd text-upper">Discover the latest collection</p>
                    <div class="btn-wrapper">
                        <a href="#" class="btn btn-main">Shop now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad">
    <div class="home-products">
        <nav>
            <a href="#" class="active">Best Sellers</a>
            <a href="#">New Arrivals</a>
            <a href="#">Seasonal Sale</a>
        </nav>
        <div class="products-slider">
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/01.jpg" alt="">
                    <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/03.jpg" alt="">
                    <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/02.jpg" alt="">
                    <img src="_assets/img/products/03.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/01.jpg" alt="">
                    <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/02.jpg" alt="">
                    <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/03.jpg" alt="">
                    <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/03.jpg" alt="">
                    <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/02.jpg" alt="">
                    <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/01.jpg" alt="">
                    <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/03.jpg" alt="">
                    <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/03.jpg" alt="">
                    <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
            <div class="product-item">
                <a href="#" class="product-img">
                    <img src="_assets/img/products/01.jpg" alt="">
                    <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                    <div class="sale">
                        25% Off
                    </div>
                </a>
                <div class="product-content">
                    <a href="#">
                        <h2 class="mtmd">
                            Puff Sleeves Puff Sleeves
                            Puff Sleeves
                        </h2>
                    </a>
                    <div class="product-footer">
                        <div class="price pull-left">
                            <span class="text-upper">800 egp</span>
                        </div>
                        {% include 'component/product-cta.html' %}
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center">
            <div class="btn-wrapper mtxxlg">
                <a href="#" class="btn btn-main text-capitalize">view all</a>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="home-news">
        <div class="news-slider mob-off">
            <div class="slide-item">
                <div class="two-equal">
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/01.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/02.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-item">
                <div class="one-big">
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/01.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-item">
                <div class="two-not-equal">
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/01.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/02.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-item">
                <div class="one-big">
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/01.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-item">
                <div class="two-equal">
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/01.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/02.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-item">
                <div class="one-big">
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/01.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-item">
                <div class="two-not-equal">
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/01.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block">
                        <div class="block-img cover" style="background-image: url('_assets/img/products/02.jpg')">
                            <div class="block-content">
                                <h2 class="mbsm">Puff Sleeves</h2>
                                <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                                <div class="clearfix">
                                    <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hom-mob-slider">
        <div class="mob-news-slider">
            <div class="slide-item">
                <div class="block">
                    <div class="block-img cover" style="background-image: url('_assets/img/products/01.jpg')"></div>
                    <div class="block-content">
                        <h2 class="mbsm">Puff Sleeves</h2>
                        <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                        <div class="clearfix">
                            <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-item">
                <div class="block">
                    <div class="block-img cover" style="background-image: url('_assets/img/products/02.jpg')"></div>
                    <div class="block-content">
                        <h2 class="mbsm">Puff Sleeves</h2>
                        <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                        <div class="clearfix">
                            <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-item">
                <div class="block">
                    <div class="block-img cover" style="background-image: url('_assets/img/products/03.jpg')"></div>
                    <div class="block-content">
                        <h2 class="mbsm">Puff Sleeves</h2>
                        <p>Dry Clean/Hand Wash Cold - Do Not Bleach.  Warm Iron/ steam if needed</p>
                        <div class="clearfix">
                            <a href="#" class="pull-right">Read More <i class="fas fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="categories sec-pad">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <a href="#" class="category">
                    <div class="category-img cover" style="background-image: url('_assets/img/home_infinity_img.jpg')"></div>
                    <div class="category-title vcenter black">
                        <h2 class="text-upper">Infinity</h2>
                    </div>
                </a>
            </div>
            <div class="col-sm-6">
                <a href="#" class="category">
                    <div class="category-img cover" style="background-image: url('_assets/img/home_momentous_img.jpg')"></div>
                    <div class="category-title vcenter right white">
                        <h2 class="text-upper">Momentous</h2>
                    </div>
                </a>
            </div>
            <div class="col-sm-6">
                <a href="#" class="category">
                    <div class="category-img cover" style="background-image: url('_assets/img/home_lavish_img.jpg')"></div>
                    <div class="category-title vcenter right black">
                        <h2 class="text-upper">lavish</h2>
                    </div>
                </a>
            </div>
            <div class="col-sm-6">
                <a href="#" class="category">
                    <div class="category-img cover" style="background-image: url('_assets/img/home_contrast_img.jpg')"></div>
                    <div class="category-title vcenter right black">
                        <h2 class="text-upper">contrast</h2>
                    </div>
                </a>
            </div>
            <div class="col-sm-6">
                <a href="#" class="category">
                    <div class="category-img cover" style="background-image: url('_assets/img/home_conscious_img.jpg')"></div>
                    <div class="category-title vcenter white">
                        <h2 class="text-upper">conscious</h2>
                    </div>
                </a>
            </div>
            <div class="col-sm-6">
                <a href="#" class="category">
                    <div class="category-img cover" style="background-image: url('_assets/img/home_gesture_img.jpg')"></div>
                    <div class="category-title vcenter black">
                        <h2 class="text-upper">gesture</h2>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

{% endblock content %}