<div class="container" style="padding:0 15px 20px 15px;">
    <div class="row" style="margin:0 -10px;">
        <div class="col-md-9 md-f-right" style="padding:0 10px; margin-top: 20px;">
            <div id="banner-slider-demo-2" class="owl-carousel owl-bottom-absolute-narrow owl-border-radius-7 owl-banner-carousel sm-xs-margin-bottom">
                <div class="item">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/slide1.jpg"}}" alt="" />
                </div>
                <div class="item">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/slide2.jpg"}}" alt="" />
                </div>
            </div>
            <script type="text/javascript">
                require([
                    'jquery',
                    'owl.carousel/owl.carousel.min'
                ], function ($) {
                    $("#banner-slider-demo-2").owlCarousel({
                        items: 1,
                        autoplay: true,
                        autoplayTimeout: 5000,
                        autoplayHoverPause: true,
                        dots: true,
                        navRewind: true,
                        animateIn: 'fadeIn',
                        animateOut: 'fadeOut',
                        loop: true,
                        nav: false
                    });
                });
            </script>
        </div>
        <div class="col-md-3" style="padding:0 10px; margin-top: 20px;">
            <div class="row"><div class="col-md-12 col-sm-6">
            <div class="side-custom-menu" style="margin-bottom:11px;">
                <h2><em class="porto-icon-menu"></em> TOP CATEGORIES</h2>
                <ul>
                    <li><a href="#">Fashion</a></li>
                    <li><a href="#">Electronics</a></li>
                    <li><a href="#">Gifts</a></li>
                    <li><a href="#">Home & Garden</a></li>
                    <li><a href="#">Music</a></li>
                    <li><a href="#">Sports</a></li>
                </ul>
            </div>
            </div>
            <div class="col-md-12 col-sm-6">
            <div class="side-custom-menu">
                <h2><em class="porto-icon-menu"></em> TRENDING</h2>
                <ul>
                    <li><a href="#">Huge Sale - 70% Off</a></li>
                    <li><a href="#">New Arrivals</a></li>
                </ul>
            </div>
            </div></div>
        </div>
    </div>
</div>
<div style="background-color:#f0f0ed;">
    <div class="container">
        <div class="homepage-bar" style="border:1px solid #e1e1e1;border-radius:5px;margin:20px 0;">
            <div class="row">
                <div class="col-md-4" style="text-align:center;">
                    <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;">
                    <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;">
                    <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="padding-bottom:10px;margin:0 -10px;">
            <div class="col-sm-3 col-xs-6" style="padding:0 10px;padding-bottom:20px;">
                <div style="margin-bottom:15px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image01.jpg"}}" alt="" /></a>
                </div>
                <div style="margin-bottom:15px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image02.jpg"}}" alt="" /></a>
                </div>
                <div style="margin-bottom:0px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image03.jpg"}}" alt="" /></a>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 sm-f-right" style="padding:0 10px;padding-bottom:20px;">
                <div style="margin-bottom:10px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image11.jpg"}}" alt="" /></a>
                </div>
                <div style="margin-bottom:11px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image12.jpg"}}" alt="" /></a>
                </div>
                <div style="margin-bottom:0px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image13.jpg"}}" alt="" /></a>
                </div>
            </div>
            <div class="sm-clearer"></div>
            <div class="col-sm-6" style="padding:0 10px;padding-bottom:20px;">
                <div style="margin-bottom:28px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image21.jpg"}}" alt="" /></a>
                </div>
                <div style="margin-bottom:28px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image22.jpg"}}" alt="" /></a>
                </div>
                <div style="margin-bottom:0px;">
                    <a class="image-link" href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/02/slider/image23.jpg"}}" alt="" /></a>
                </div>
            </div>
        </div>
    </div>
</div>