Banner

MyTravel has seven different version of banners.

Banner #v1

RESULT
HTML

Travel Tips

Northern Ireland’s is now contingent. Britain is getting a divorce Northern Ireland is being offered a trial separation for Britain there is a one

Get Inspired

                                            
                                                <!--Banner v1-->
                                                <div class="bg-img-hero space-3" style="background-image: url(../../assets/img/1920x500/img1.jpg);">
                                                    <div class="col-md-11 col-lg-8 col-xl-6 mx-auto text-center mt-xl-5 mb-xl-2">
                                                        <h6 class="text-white font-size-40 font-weight-bold mb-1">Travel Tips</h6>
                                                        <p class="text-white font-size-18 font-weight-normal mb-4 pb-1 px-md-3 px-lg-0">Northern Ireland’s is now contingent. Britain is getting a divorce Northern Ireland is being offered a trial separation for Britain there is a one</p>
                                                        <a class="btn btn-outline-white border-width-2 rounded-xs min-width-200 font-weight-normal transition-3d-hover" href="#">Get Inspired</a>
                                                    </div>
                                                </div>
                                                <!--End Banner v1-->

Banner #v2

RESULT
HTML

Download & Enjoy

Northern Ireland’s is now contingent. Britain is getting a divorce Northern Ireland is being offered a trial separation for Britain there is a one

                                            
                                                <!--Banner v2-->
                                                <div class="banner-block banner-v2 bg-color-1">
                                                    <div class="container space-2 space-lg-3 space-top-xl-2 space-bottom-xl-0">
                                                        <div class="row align-items-lg-center align-items-xl-start mt-xl-4 pt-1">
                                                            <div class="col mb-7 mb-lg-0 mt-xl-9">
                                                                <h5 class="font-size-xs-30 font-size-40 font-weight-bold text-white mb-2">Download & Enjoy</h5>
                                                                <p class="font-size-18 font-weight-normal text-white mb-4 mb-md-5 pb-lg-2">Northern Ireland’s is now contingent. Britain is getting a divorce Northern Ireland is being offered a trial separation for Britain there is a one</p>
                                                                <button type="button" class="btn btn-wide rounded-xs transition-3d-hover btn-outline-white border-width-2 py-1 pl-lg-4 text-left mb-4 mb-md-0 mr-md-2 mr-lg-4">
                                                                    <span class="media align-items-center ml-1">
                                                                        <span class="flaticon-apple font-size-35 mr-3"></span>
                                                                        <span class="media-body">
                                                                          <strong class="font-weight-bold">App Store</strong>
                                                                          <span class="d-block font-weight-normal font-size-14">Available now on the</span>
                                                                        </span>
                                                                    </span>
                                                                </button>
                                                                <button type="button" class="btn btn-wide rounded-xs transition-3d-hover btn-outline-white border-width-2 py-1 pl-lg-4 text-left">
                                                                    <span class="media align-items-center ml-1">
                                                                        <span class="flaticon-google-play font-size-35 mr-3"></span>
                                                                        <span class="media-body">
                                                                           <strong class="font-weight-bold">Google Play</strong>
                                                                          <span class="d-block font-weight-normal font-size-14">Get in on</span>
                                                                        </span>
                                                                    </span>
                                                                </button>
                                                            </div>
                                                            <div class="col-lg-5 col-xl-6dot5 text-right mr-xl-n2">
                                                                <img class="img-fluid" src="../../assets/img/709x457/img1.png" alt="Image-Description">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v2-->

Banner #v3

Enjoy Summer Deals

Up to 40% Discount!

Learn more

                                            
                                                <!--Banner v3-->
                                                <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
                                                    <!-- Apply your Parallax background image here -->
                                                    <div class="divimage dzsparallaxer--target bg-img-hero" style="height: 130%; background-image: url(../../assets/img/1920x500/img4.jpg);"></div>
                                                    <div class="text-center space-3">
                                                        <div class="pt-xl-2 pb-xl-5 mb-xl-1">
                                                            <h6 class="text-gray-4 font-size-30 font-weight-bold mb-1 opacity-6">Enjoy Summer Deals</h6>
                                                            <h5 class="text-white font-size-40 font-weight-bold mb-5 pb-xl-1">Up to 40% Discount!</h5>
                                                            <a class="btn btn-outline-white border-width-2 min-width-200 font-weight-normal transition-3d-hover" href="#">Learn more</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v3-->

                                            
                                                <!-- CSS Implementing Plugins -->
                                                <link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">

                                            
                                                <!-- JS Implementing Plugins -->
                                                <script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>

Banner #v4

Travelling Highlights

Your New Travelling Idea

                                            
                                                <!--Banner v4-->
                                                <div class="gradient-overlay-half-bg-blue-light bg-img-hero space-3 space-top-lg-4 space-bottom-lg-3" style="background-image: url(../../assets/img/1920x500/img5.jpg);">
                                                    <div class="text-center mt-xl-2">
                                                        <h5 class="text-white font-size-41 font-weight-bold mb-2">Travelling Highlights</h5>
                                                        <h6 class="text-white font-size-21 font-weight-bold mb-3 mb-lg-5 opacity-7">Your New Travelling Idea</h6>
                                                        <!-- Fancybox -->
                                                        <a class="js-fancybox d-inline-block u-media-player" href="javascript:;"
                                                        data-src="//vimeo.com/167434033" data-speed="700" data-animate-in="zoomIn" data-animate-out="zoomOut" data-caption="MyTravel - Responsive Website Template">
                                                            <span class="u-media-player__icon u-media-player__icon--lg bg-transparent text-white">
                                                                <span class="flaticon-multimedia font-size-60 u-media-player__icon-inner"></span>
                                                            </span>
                                                        </a>
                                                        <!-- End Fancybox -->
                                                    </div>
                                                </div>
                                                <!--End Banner v4-->

                                            
                                                <!-- CSS Implementing Plugins -->
                                                <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">

                                            
                                                <!-- JS Implementing Plugins -->
                                                <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>

                                                <!-- JS MyTravel -->
                                                <script src="../../assets/js/components/hs.fancybox.js"></script>

                                                <!-- JS Plugins Init. -->
                                                <script>
                                                    $(document).on('ready', function () {}
                                                        // initialization of popups
                                                        $.HSCore.components.HSFancyBox.init('.js-fancybox');
                                                    });
                                                </script>

Who is the Local Expert?

Morbi semper fames lobortis ac hac penatibus

Become Local Expert

                                            
                                                <!--Banner v5-->
                                                <div class="gradient-overlay-half-bg-orange bg-img-hero space-3 space-bottom-xl-2" style="background-image: url(../../assets/img/1920x500/img6.jpg);">
                                                    <div class="container">
                                                        <div class="text-center mt-xl-4 mb-xl-7">
                                                            <h6 class="text-white font-size-40 font-weight-bold mb-2">Who is the Local Expert?</h6>
                                                            <p class="text-white font-weight-normal mb-5 pb-xl-2">Morbi semper fames lobortis ac hac penatibus</p>
                                                            <a class="btn btn-outline-white border-width-2 rounded-xs min-width-200 font-weight-normal transition-3d-hover" href="#">Become Local Expert</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v5-->

Banner #v6

Airbnb plus places to stay

A selection of places to stay verified for quality and design

Explore Stays

                                            
                                                 <!--Banner v6-->
                                                <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
                                                    <!-- Apply your Parallax background image here -->
                                                    <div class="divimage dzsparallaxer--target" style="height: 130%; background-image: url(../../assets/img/1920x500/img7.jpg);"></div>
                                                    <div class="text-center space-top-3 space-bottom-xl-2">
                                                        <div class="pt-xl-6 pb-xl-11">
                                                            <h5 class="text-white font-size-40 font-weight-bold mb-1">Airbnb plus places to stay</h5>
                                                            <p class="text-white font-weight-normal mb-3 mb-lg-6">A selection of places to stay verified for quality and design</p>
                                                            <a class="btn btn-outline-white border-width-2 rounded-xs min-width-200 font-weight-normal transition-3d-hover" href="#">Explore Stays</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v6-->

                                            
                                                <!-- CSS Implementing Plugins -->
                                                <link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">

                                            
                                                <!-- JS Implementing Plugins -->
                                                <script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>

Banner #v7

RESULT
HTML

Tell us where you would like to go.

3,000+ VIP Transport Options!

Search Options

                                            
                                                <!--Banner v7-->
                                                <div class="gradient-overlay-half-bg-dark bg-img-hero space-3 space-top-lg-4 space-bottom-lg-3" style="background-image: url(../../assets/img/1920x500/img8.jpg);">
                                                    <div class="container">
                                                        <div class="text-center px-1 px-md-3 px-xl-0 mb-xl-6">
                                                            <h5 class="text-white font-size-40 font-weight-bold mb-2">Tell us where you would like to go.</h5>
                                                            <p class="text-white font-weight-normal mb-4 mb-lg-6">3,000+ VIP Transport Options!</p>
                                                            <a class="btn btn-outline-white border-width-2 rounded-xs min-width-200 font-weight-normal transition-3d-hover" href="#">Search Options</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End Banner v7-->