Fullscreen Banner for Desktop and Mobile
<div class="col-md-12"> <div class="wpb_wrapper vc_column-inner"> <div class="fullscreen-banner desktop"> <div class="row"> <div class="col-lg-6 aos-init aos-animate" data-aos="fade-right"> <img src="https://pyurvana.com/media/wysiwyg/homepage-model-a.png" alt="Model holding grapefruit essential oil" title="Model holding grapefruit essential oil"> </div> <div class="col-lg-3"> <div class="mid-top-img content mb-25 aos-init aos-animate" data-aos="fade-down"> <img src="https://pyurvana.com/media/wysiwyg/Rectangle-4.png" alt="female hand, three essential oils, and pyur pal logo for Pyurvana's affiliate program"> <div class="mid-top-content"> <h2>50% OFF</h2> <p>and free shipping on all orders <span>discount at checkout</span> </p> </div> </div> <div class="mid-bot-img aos-init aos-animate" data-aos="fade-up"> <img src="https://pyurvana.com/media/wysiwyg/homepage-model-b.png" alt="Model holding thyme essential oil" title="Model holding thyme essential oil"> </div> </div> <div class="col-lg-3"> <div class="right-top-img mb-25 aos-init aos-animate" data-aos="fade-left"> <img src="https://pyurvana.com/media/wysiwyg/homepage-model-c.png" alt="women smelling bottle of essential oil" title="women smelling bottle of essential oil"> </div> <div class="right-bot-img aos-init aos-animate" data-aos="fade-left"> <img src="https://pyurvana.com/media/wysiwyg/homepage-model-d.png" alt="Model holding ylang ylang essential oil" title="Model holding ylang ylang essential oil"> </div> </div> </div> </div> <div class="fullscreen-banner mobile"> <div class="row"> <div class="col-sm-12"> <img src="https://pyurvana.com/media/wysiwyg/Pyurvana-header.png" alt="female hand, three essential oils, and pyur pal logo for Pyurvana's affiliate program"> </div> <div class="col-sm-12"> <div class="mid-top-img content"> <img src="https://pyurvana.com/media/wysiwyg/Rectangle-4.png" alt="female hand, three essential oils, and pyur pal logo for Pyurvana's affiliate program"> <div class="mid-top-content"> <h2>50% OFF</h2> <p>and free shipping for all order <span>discount at checkout</span> </p> </div> </div> </div> <div class="col-sm-6"> <div class="mid-bot-img"> <img src="https://pyurvana.com/media/wysiwyg/Rectangle-6.png" alt="Description of the image"> </div> </div> <div class="col-sm-6"> <div class="right-bot-img"> <img src="https://pyurvana.com/media/wysiwyg/Rectangle-7.png" alt="Description of the image"> </div> </div> </div> </div> <script type="text/javascript"> require(['jquery', 'owl.carousel/owl.carousel.min'], function($) { $("#banner-slider-demo-11").owlCarousel({ items: 1, autoplay: false, autoplayTimeout: 5000, autoplayHoverPause: true, dots: false, navRewind: true, animateIn: 'fadeIn', animateOut: 'fadeOut', loop: true, nav: false }); }); </script> </div> </div>
