<div class="homepage-bar" style="border:1px solid #e1e1e1;border-radius:5px;margin:0 0 20px 0;">
    <div class="row">
        <div class="col-md-4" style="text-align:center;height:70px;padding-top:10px;padding-bottom:10px;">
            <em class="porto-icon-truck" style="font-size:36px;"></em><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
        </div>
        <div class="col-md-4" style="text-align:center;height:70px;padding-top:10px;padding-bottom:10px;">
            <em class="porto-icon-dollar"></em><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
        </div>
        <div class="col-md-4" style="text-align:center;height:70px;padding-top:10px;padding-bottom:10px;">
            <em class="porto-icon-lifebuoy" style="font-size:32px;"></em><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>
        </div>
    </div>
</div>
<div class="row" style="margin: 0 -10px;">
    <div class="col-md-3" style="padding: 0 10px;">
        <div class="home-side-menu">
            <h2 class="side-menu-title">CATEGORIES</h2>
            {{block class="Smartwave\Megamenu\Block\Topmenu" name="sw.sidenav" template="Smartwave_Megamenu::sidemenu.phtml" ttl="3600"}}
        </div>
    </div>
    <div class="col-md-9" style="padding: 0 10px;">
        <div id="banner-slider-demo-9" class="owl-carousel owl-banner-carousel owl-bottom-narrow">
            <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/09/content/01_bg.png"}}) repeat;border-radius:5px;">
                <div style="position:relative">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/01.png"}}" alt="" />
                    <div class="content type1" style="position:absolute;top:30%;left:10%;text-align:right">
                        <h2 style="font-weight:600;line-height:1;color:#08c">HUGE <b style="font-weight:800">SALE</b></h2>
                        <p style="color:#777;font-weight:300;line-height:1;margin-bottom:15px">Now starting at <span style="color:#535353;font-weight:400">$99</span></p>
                        <a href="#" style="font-weight:300;">Shop now &gt;</a>
                    </div>
                </div>
            </div>
            <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/09/content/02_bg.png"}}) center center no-repeat;background-size:cover;border-radius:5px;">
                <div style="position:relative">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/02.png"}}" alt="" />
                </div>
            </div>
            <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/09/content/03_bg.png"}}) center center no-repeat;background-size:cover;border-radius:5px;">
                <div style="position:relative">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/03.png"}}" alt="" />
                </div>
            </div>
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#banner-slider-demo-9").owlCarousel({
                    items: 1,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    dots: true,
                    nav: false,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true
                });
            });
        </script>
    </div>
</div>
<div class="row" style="margin: 0 -10px;">
    <div class="col-md-3" style="padding: 0 10px;">
        <div id="ads-slider-demo-9" class="owl-carousel">
            <div class="item" style="text-align:center;">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/ad2.png"}}" alt="" style="display:inline-block;"/>
            </div>
            <div class="item" style="text-align:center;">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/ad1.png"}}" alt="" style="display:inline-block;" />
            </div>
            <div class="item" style="text-align:center;">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/ad2.png"}}" alt="" style="display:inline-block;" />
            </div>
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#ads-slider-demo-9").owlCarousel({
                    items: 1,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    dots: true,
                    nav: false,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true
                });
            });
        </script>
        <div class="block block-subscribe home-sidebar-block" style="margin-top:40px;margin-bottom:30px;">
            <div class="block-title">
                <strong><span>Be the First to Know</span></strong>
            </div>
            <div class="block-content">
                <p>Keep up on our always evolving product features and technology.<br>Enter your e-mail and subscribe to our newsletter.</p>
                {{block class="Magento\Newsletter\Block\Subscribe" name="home.newsletter" template="subscribe_form.phtml"}}
            </div>
        </div>
        <h2 class="filterproduct-title" style="margin-top:40px;margin-bottom: 5px;"><span class="content"><strong>TESTIMONIALS</strong></span></h2>
        <div id="testimonials-slider-demo-9" class="owl-carousel">
            <div class="item">
                <blockquote class="testimonial">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est.</p>
                </blockquote>
                <div class="testimonial-arrow-down"></div>
                <div class="testimonial-author">
                    <div class="img-thumbnail img-thumbnail-small"><img width="60" height="60" src="{{media url="wysiwyg/smartwave/porto/testimonials/client-1-11.jpg"}}" alt=""></div>
                    <p><strong>John Smith</strong><span>CEO &amp; Founder - Okler</span></p>
                </div>
            </div>
            <div class="item">
                <blockquote class="testimonial">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est.</p>
                </blockquote>
                <div class="testimonial-arrow-down"></div>
                <div class="testimonial-author">
                    <div class="img-thumbnail img-thumbnail-small"><img width="60" height="60" src="{{media url="wysiwyg/smartwave/porto/testimonials/client-1-11.jpg"}}" alt=""></div>
                    <p><strong>John Smith</strong><span>CEO &amp; Founder - Okler</span></p>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#testimonials-slider-demo-9").owlCarousel({
                    items: 1,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    dots: true,
                    nav: false,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true
                });
            });
        </script>
        <h2 class="filterproduct-title" style="margin-top:40px;margin-bottom: 5px;"><span class="content"><strong>FROM THE BLOG</strong></span></h2>
        <div id="latest_news" class="custom-block">
            <div class="recent-posts">
                <div class="owl-carousel">
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="post-image">
                                    <img src="{{media url="wysiwyg/smartwave/porto/blog/03.jpg"}}" alt="" />
                                </div>
                            </div>
                            <div class="col-sm-7">
                                <div class="post-date">
                                    <span class="day">08</span>
                                    <span class="month">Dec</span>
                                </div>
                                <div class="postTitle">
                                    <h2><a href="#">Post Format – Video</a></h2>
                                </div>
                                <div class="postContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non placerat mi…</p></div>
                                <a class="readmore" href="#">Read more &gt;</a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="post-image">
                                    <img src="{{media url="wysiwyg/smartwave/porto/blog/04.jpg"}}" alt="" />
                                </div>
                            </div>
                            <div class="col-sm-7">
                                <div class="post-date">
                                    <span class="day">08</span>
                                    <span class="month">Dec</span>
                                </div>
                                <div class="postTitle">
                                    <h2><a href="#">Post Format – Image Gallery</a></h2>
                                </div>
                                <div class="postContent"><p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent…</p></div>
                                <a class="readmore" href="#">Read more &gt;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                require([
                    'jquery',
                    'owl.carousel/owl.carousel.min'
                ], function ($) {
                    $("#latest_news .owl-carousel").owlCarousel({
                        items: 1,
                        loop: true,
                        nav: false,
                        dots: true
                    });
                });
            </script>
            <style type="text/css">.recent-posts .item .col-sm-5, .recent-posts .item .col-sm-7{width:100%;}</style>
        </div>
    </div>
    <div class="col-md-9" style="padding: 0 10px;">
        <div class="single-images" style="padding-top: 15px;">
            <div class="row" style="margin-left:-10px;margin-right:-10px;">
                <div class="col-sm-4" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
                    <a class="image-link" href="#">
                        <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/img1.jpg"}}" alt="" />
                    </a>
                </div>
                <div class="col-sm-4" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
                    <a class="image-link" href="#">
                        <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/img2.jpg"}}" alt="" />
                    </a>
                </div>
                <div class="col-sm-4" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
                    <a class="image-link" href="#">
                        <img src="{{media url="wysiwyg/smartwave/porto/homepage/09/content/img3.jpg"}}" alt="" />
                    </a>
                </div>
             </div>
        </div>
        <h2 class="filterproduct-title"><span class="content"><strong>FEATURED FASHION DRESS</strong></span></h2>
        <div id="featured_product" class="owl-top-narrow">
            {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="0" image_width="212" image_height="263" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#featured_product .owl-carousel").owlCarousel({
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    loop: true,
                    navRewind: true,
                    margin: 10,
                    nav: true,
                    navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
                    dots: false,
                    responsive: {
                        0: {
                            items:2
                        },
                        768: {
                            items:3
                        },
                        992: {
                            items:3
                        },
                        1200: {
                            items:4
                        }
                    }
                });
            });
        </script>
        <hr style="background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent);border: 0;height: 1px;margin: 30px 0 0;">
        <div class="row">
            <div class="col-sm-4">
                <h2 class="filterproduct-title" style="background-image:none;margin-top:20px;margin-bottom:5px;"><span class="content"><strong>New</strong></span></h2>
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_small_list" product_count="3" aspect_ratio="0" image_width="212" image_height="212" template="small_list.phtml"}}
            </div>
            <div class="col-sm-4">
                <h2 class="filterproduct-title" style="background-image:none;margin-top:20px;margin-bottom:5px;"><span class="content"><strong>Hot</strong></span></h2>
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_small_list" product_count="3" aspect_ratio="0" image_width="212" image_height="212" template="small_list.phtml"}}
            </div>
            <div class="col-sm-4">
                <h2 class="filterproduct-title" style="background-image:none;margin-top:20px;margin-bottom:5px;"><span class="content"><strong>Sale</strong></span></h2>
                {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_small_list" product_count="3" aspect_ratio="0" image_width="212" image_height="212" template="small_list.phtml"}}
            </div>
        </div>
        <div class="shop-features" style="background-color:#fff; margin-top:13px;">
            <h2 class="shop-features-title"><span>WHY SHOP WITH US?</span></h2>
            <div class="row">
                <div class="col-sm-4">
                    <em class="porto-icon-star"></em>
                    <h3>DEDICATED SERVICE</h3>
                    <p>Consult our specialists for help with an order, customization, or design advice.</p>
                    <a href="#">Get in Touch &gt;</a>
                </div>
                <div class="col-sm-4">
                    <em class="porto-icon-reply"></em>
                    <h3>FREE RETURNS</h3>
                    <p>We stand behind our goods and services and want you to be satisfied with them.</p>
                    <a href="#">Returns Policy &gt;</a>
                </div>
                <div class="col-sm-4">
                    <em class="porto-icon-paper-plane"></em>
                    <h3>INTERNATIONAL SHIPPING</h3>
                    <p>Currently over 50 countries qualify for express international shipping.</p>
                    <a href="#">Learn More &gt;</a>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
@media (min-width: 768px) {
    .page-header .nav-sections {
        display: none;
    }
}
</style>