<div style="padding:29px 0 36px;background-color:#f4f4f4;">
    <div class="container">
        <div class="slider-with-side">
            <div class="slider-area">
                <div id="banner-slider-demo-5" class="owl-carousel owl-bottom-narrow owl-banner-carousel">
                    <div class="item">
                        <img src="{{media url="wysiwyg/smartwave/porto/homepage/05/slider/slide2.jpg"}}" alt="" />
                    </div>
                    <div class="item">
                        <img src="{{media url="wysiwyg/smartwave/porto/homepage/05/slider/slide1.jpg"}}" alt="" />
                        <div class="content" style="position:absolute;width:100%;height:100%;left:0;top:0;">
                            <div class="ribbon" style="position:absolute;text-align:right;">
                                <em style="font-weight:300;line-height:1;color:#fff;font-style:normal;">FEEL</em>
                                <h3 style="font-weight:700;line-height:1;color:#fff;">The</h3>
                                <h5 style="font-weight:600;line-height:1;color:#fff;">Power!</h5>
                            </div>
                            <div class="text-area" style="left:3%;bottom:15%;position:absolute;text-align:left;">
                                <h2 style="font-weight:600;line-height:1;color:#fff;background-color:#202020;background-color:rgba(23,23,23,.9);">EXPLORE <b style="font-weight:800;">PORTO</b></h2><br/>
                                <p style="line-height:1.2;color:#fff;background-color:#444;background-color:rgba(23,23,23,.75);">With <b>PORTO</b> you can customize the<br/>banners and styles whithin minutes.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    require([
                        'jquery',
                        'owl.carousel/owl.carousel.min'
                    ], function ($) {
                        $("#banner-slider-demo-5").owlCarousel({
                            items: 1,
                            autoplay: true,
                            autoplayTimeout: 5000,
                            autoplayHoverPause: true,
                            dots: true,
                            nav: false,
                            navRewind: true,
                            animateIn: 'fadeIn',
                            animateOut: 'fadeOut',
                            loop: true
                        });
                    });
                </script>
            </div>
            <div class="side-area">
                <div class="item1">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/05/slider/right-banner1.jpg"}}" alt="" />
                    <div class="content">
                        <em  style="color:#fff;font-weight:400;font-style:italic;line-height:1;">fashion</em>
                        <h2 style="color:#fff;font-weight:700;line-height:1;">TRENDS</h2>
                        <a href="#" style="color:#000;font-weight:300;line-height:1;">Shop now &gt;</a>
                    </div>
                </div>
                <div class="item2">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/05/slider/right-banner2.jpg"}}" alt="" />
                    <div class="content">
                        <h2 style="color:#000;font-weight:300;line-height:1;"><b style="font-weight:600;font-style:italic;">Deals</b> + PROMOS</h2>
                        <p style="color:#777;font-weight:300;font-style:italic;vertical-align:bottom;line-height:1.2;float:left;">Limited sales in<br/>our categories.</p>
                        <a href="#" class="btn btn-default" style="color:#fff;font-weight:400;vertical-align:bottom;line-height:1;float:left;">SHOP NOW <i class="icon-right-dir"></i></a>
                        <div class="clearer"></div>
                    </div>
                </div>
                <div class="item3">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/05/slider/right-banner3.jpg"}}" alt="" />
                    <div class="content">
                        <h2  style="color:#fff;font-weight:600;line-height:1;">HUGE <b style="font-weight:800;">SALE</b></h2>
                        <p style="color:#b2b2b2;font-weight:300;line-height:1;">Now starting at <b style="font-weight:600;">$99</b></p>
                        <a href="#" style="font-weight:300;line-height:1;">Shop now &gt;</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="homepage-bar" style="background-color:#171717;border:0;padding:11px 0;text-align:center;line-height:1;">
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="border-color:#353535;">
                <em class="porto-icon-truck" style="font-size:36px;color:#fff;"></em><div class="text-area"><h3 style="color:#fff;">FREE SHIPPING & RETURN</h3><p style="color:#fff;">Free shipping on all orders over $99.</p></div>
            </div>
            <div class="col-md-4" style="border-color:#353535;">
                <em class="porto-icon-dollar" style="color:#fff;"></em><div class="text-area"><h3 style="color:#fff;">MONEY BACK GUARANTEE</h3><p style="color:#fff;">100% money back guarantee.</p></div>
            </div>
            <div class="col-md-4" style="border-color:#353535;">
                <em class="porto-icon-lifebuoy" style="font-size:32px;color:#fff;"></em><div class="text-area"><h3 style="color:#fff;">ONLINE SUPPORT 24/7</h3><p style="color:#fff;">Lorem ipsum dolor sit amet.</p></div>
            </div>
        </div>
    </div>
</div>