...
JomHoliday search module with default Default layout set.
TOP-B
JomHoliday items module with clean Clean layout set.
TOP-C
Custom HTML module with content:
| Code Block |
|---|
<h1 class="uk-margin-remove">How it works?</h1>
<h3 class="uk-margin-small-top">3 easy steps and you're ready to go!</h3>
<div class="uk-grid uk-margin-large-top uk-how-it-works">
<div class="uk-width-1-3 uk-text-center">
<i class="fa fa-search" data-uk-scrollspy="{cls:'uk-animation-slide-top, delay:900'}"></i>
<h5 class="uk-text-primary"><strong>SEARCH</strong></h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="uk-width-1-3 uk-text-center">
<i class="fa fa-heart-o" data-uk-scrollspy="{cls:'uk-animation-slide-bottom, delay:1800'}"></i>
<h5 class="uk-text-primary"><strong>SELECT</strong> </h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="uk-width-1-3 uk-text-center">
<i class="fa fa-shopping-cart" data-uk-scrollspy="{cls:'uk-animation-slide-top, delay:1800'}"></i>
<h5 class="uk-text-primary"><strong>BOOK</strong> </h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div> |
...
JomHoliday Items module with default Default layout.
BOTTOM-A
Background image with parallax effect. Custom HTML module:
...
| Note |
|---|
background-image: url('images/parallax.jpg'); insert own image here. |
BOTTOM-C
Custom HTML module:
| Code Block |
|---|
<h1 class="uk-margin-large-top">Top Destinations</h1> <h4>Finest Selection of top destinations</h4> <div data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel', row:true}" class="uk-grid-width-1-1 uk-grid-width-medium-1-2 uk-grid-width-large-1-4 uk-grid uk-grid-match uk-grid-collapse uk-text-center"> <figure class="uk-overlay uk-overlay-hover" data-uk-scrollspy="{cls:'uk-animation-slide-left'}"> <a href="/popular-destinations/spain/29-poble-nou-holiday-villa" class="uk-position-cover uk-position-z-index"></a> <img src="images/destinations/tower.jpg" class="uk-overlay-scale" alt="tower"/> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> </figure> <div class="uk-panel uk-panel-box"> <h3>Romantic Getaway</h3> <h4 class="uk-text-primary"><i class="uk-icon-map-marker"></i> Paris</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue lobortis.</p> <h3 class="uk-display-block uk-text-right uk-text-success">$199 / room</h3> <a href="#" class="uk-button uk-button-primary uk-button-large" style="max-width: 150px;"><i class="uk-icon-chevron-left"></i> Book Now </a> </div> <figure class="uk-overlay uk-overlay-hover" data-uk-scrollspy="{cls:'uk-animation-slide-top, delay:900'}"> <a href="/popular-destinations/spain/29-poble-nou-holiday-villa" class="uk-position-cover uk-position-z-index"></a> <img src="images/destinations/img1.jpg" class="uk-overlay-scale" alt="beach"/> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> </figure> <div class="uk-panel uk-panel-box"> <h3>Beach Paradise</h3> <h4 class="uk-text-primary"><i class="uk-icon-map-marker"></i> Bahamas</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue lobortis.</p> <h3 class="uk-display-block uk-text-right uk-text-success">$399 / room</h3> <a href="#" class="uk-button uk-button-primary uk-button-large" style="max-width: 150px;"><i class="uk-icon-chevron-left"></i> Book Now </a> </div> <div class="uk-panel uk-panel-box"> <h3>Familly Fun</h3> <h4 class="uk-text-primary"><i class="uk-icon-map-marker"></i> Greece</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue lobortis.</p> <h3 class="uk-display-block uk-text-right uk-text-success">$220 / room</h3> <a href="#" class="uk-button uk-button-primary uk-button-large" style="max-width: 150px;">Book Now <i class="uk-icon-chevron-right"></i></a> </div> <figure class="uk-overlay uk-overlay-hover" data-uk-scrollspy="{cls:'uk-animation-slide-bottom, delay:1800'}"> <a href="/popular-destinations/spain/29-poble-nou-holiday-villa" class="uk-position-cover uk-position-z-index"></a> <img src="images/destinations/aqua.jpg" class="uk-overlay-scale" alt="familly"/> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> </figure> <div class="uk-panel uk-panel-box"> <h3>Friends</h3> <h4 class="uk-text-primary"><i class="uk-icon-map-marker"></i> Ibisa</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue lobortis.</p> <h3 class="uk-display-block uk-text-right uk-text-success">$99 / room</h3> <a href="#" class="uk-button uk-button-primary uk-button-large" style="max-width: 150px;">Book Now <i class="uk-icon-chevron-right"></i></a> </div> <figure class="uk-overlay uk-overlay-hover" data-uk-scrollspy="{cls:'uk-animation-slide-right, delay:2700'}"> <a href="/popular-destinations/spain/29-poble-nou-holiday-villa" class="uk-position-cover uk-position-z-index"></a> <img src="images/destinations/ibisa.jpg" class="uk-overlay-scale" alt="ibisa"/> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> </figure> </div> |
BOTTOM-D
Set of 4 menus linked under module MENU.
...