<div class="row" style="background-color:#fff;margin-top:-20px;">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-9">
                <div id="banner-slider-demo-12" class="owl-carousel owl-banner-carousel owl-bottom-narrow">
                    <div class="item">
                        <img src="{{media url="wysiwyg/smartwave/porto/homepage/12/slider/slide01.jpg"}}" alt="" />
                        <div class="content">
                            <span style="font-weight:300;color:#303030;display:inline-block;vertical-align:middle">Now starting at <b style="font-weight:600;">$99</b></span>
                            <a class="btn btn-default" style="background-color:#303030;color:#fff;position:inline-block;vertical-align:middle;font-weight:600">SHOP NOW <i class="icon-right-dir"></i></a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="{{media url="wysiwyg/smartwave/porto/homepage/12/slider/slide02.jpg"}}" alt="" />
                    </div>
                </div>
                <script type="text/javascript">
                    require([
                        'jquery',
                        'owl.carousel/owl.carousel.min'
                    ], function ($) {
                        $("#banner-slider-demo-12").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">
            <div class="homepage-bar">
                <div class="col-md-4">
                    <em class="porto-icon-truck"></em><div class="text-area"><h3>FREE SHIPPING &amp; FREE RETURNS</h3><p>Free shipping on all orders over $99.</p></div>
                </div>
                <div class="col-md-4">
                    <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">
                    <em class="porto-icon-lifebuoy"></em><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="background-color:#fff;margin-top:10px;">
    <div class="col-md-12">
        {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" product_count="8" column_count="4" aspect_ratio="1" image_width="300" template="grid.phtml"}}
    </div>
</div>
<div class="row" style="background-color:#fff;margin:10px -15px;">
    <a href="#" style="display:block;"><img src="http://192.168.0.143/magento/porto/media/wysiwyg/porto/homepage/content/12/huge_sale.jpg" alt="" style="width: 100%;"></a>
</div>
<div class="row" style="margin: 15px -23px 0 -23px;">
    <div class="col-sm-4 one-product" style="padding-left: 8px; padding-right: 8px;">
        <h4 class="filterproduct-title">FEATURED</h4>
        <div id="featured_product" class="hide-addtocart hide-addtolinks">
            {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="3" aspect_ratio="0" image_width="350" image_height="350" 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,
                    nav: false,
                    dots: true,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true,
                    items: 1
                });
            });
        </script>
    </div>
    <div class="col-sm-4 one-product" style="padding-left: 8px; padding-right: 8px;">
        <h4 class="filterproduct-title">SALES</h4>
        <div id="sales_product" class="hide-addtocart hide-addtolinks">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_count="3" aspect_ratio="0" image_width="350" image_height="350" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#sales_product .owl-carousel").owlCarousel({
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    nav: false,
                    dots: true,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true,
                    items: 1
                });
            });
        </script>
    </div>
    <div class="col-sm-4 one-product" style="padding-left: 8px; padding-right: 8px;">
        <h4 class="filterproduct-title">NEW ARRIVALS</h4>
        <div id="new_product" class="hide-addtocart hide-addtolinks">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_count="3" aspect_ratio="0" image_width="350" image_height="350" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#new_product .owl-carousel").owlCarousel({
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    nav: false,
                    dots: true,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true,
                    items: 1
                });
            });
        </script>
    </div>
</div>
<div class="row" style="background-color:#fff;margin-top:15px;padding:15px 0;">
    <div class="col-md-12">
        <h2 class="filterproduct-title" style="background:none;"><span class="content" style="background:none;"><strong>FASHION SELECTION</strong></span></h2>
        <div id="featured_product_list" class="owl-top-narrow">
            {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="1" image_width="272" image_height="337" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#featured_product_list .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>
    </div>
</div>
<style type="text/css">
.page-main {
    background-color: transparent;
    padding-bottom: 0;
}
.homepage-bar {
    border-color: #f5f5f5;
    border-top: 0;
}
.homepage-bar p {
    font-size: 11px;
    margin-left: 5px;
}
.homepage-bar h3 {
    font-size: 13px;
}
.homepage-bar .col-md-4 em {
    font-size: 20px;
    margin-top: -10px;
}
.homepage-bar .col-md-4 {
    text-align: center;
    border-color: #f5f5f5;
}
.product-item-photo {
    padding: 0;
}
</style>