Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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:'&gt; div &gt; .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.

...