Assign modules on offcanvas module position to make them visible in the sidebar.

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sandro Rosell
FC Barcelona President

joomla

  • Animated hover CSS3 effects for images

    This code allows you to display an image and its description with animated CSS3 effect.
    Note: If you would like to add your own text into the image description, just modify the code below or edit an existing code in the custom module of the demo template.

     

    Example 1

    <div class="ch-item ch-first" style="background: url('/images/modules/animated1.jpg') no-repeat;"> <div class="ch-info"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="#">CHECK OUR<br /><span class="smaller">NEW OFFER!</span></a></p> </div> </div> </div> </div> </div>

    Example 2

    <div class="ch-item ch-second" style="background: url('/images/modules/animated2.jpg') no-repeat;"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front"> </div> <div class="ch-info-back"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="#">CHECK OUR<br /><span class="smaller">NEW OFFER!</span></a></p> </div> </div> </div> </div> </div> </div> </div>

    Example 3

    <div class="ch-item ch-third"> <div class="ch-info"> <div class="ch-info-front" style="background: url('/images/modules/animated3.jpg') no-repeat;"> </div> <div class="ch-info-back"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="#">CHECK OUR<br /><span class="smaller">NEW OFFER!</span></a></p> </div> </div> </div> </div> </div> </div>

    Video

    <div class="view view-video"><img src="/images/modules/video.jpg" border="0" alt="Video" /> <div class="mask"> <span class="space"> &nbsp; </span> <a class="modal readmore" href="/#" rel="{handler: 'iframe', size: {x: 800, y: 600}}"><span>Watch the Video</span></a></div>

     

    Image Borders

    <img class="border_img1" src="/image.jpg" />
    Typography
    <img class="border_img2" src="/image.jpg" />
    <img class="border_img3" src="/image.jpg" />
    Typography

     

    Icons

    <div class="jm-icon-wrap"> <a class="jm-link info" href="#"><span class="jm-icon">&nbsp;</span><span class="jm-icon-title">Information<br />Center</span></a> <a class="jm-link parking" href="#"><span class="jm-icon">&nbsp;</span><span class="jm-icon-title">Parking<br />Locked</span></a> <a class="jm-link hotel" href="#"><span class="jm-icon">&nbsp;</span><span class="jm-icon-title">Hotels<br /><br /></span></a> <a class="jm-link restaurant" href="#"><span class="jm-icon">&nbsp;</span><span class="jm-icon-title">Restaurant<br />Center</span></a> <a class="jm-link office" href="#"><span class="jm-icon">&nbsp;</span><span class="jm-icon-title">Post<br />Office</span></a> <a class="jm-link disco" href="#"><span class="jm-icon">&nbsp;</span><span class="jm-icon-title">Disco<br />Pubs</span></a> </div>

     

    Contact Us!

    <p class="jm-custom-header-mod"><a href="#"><img src="/images/modules/contact-us.png" border="0" alt="Contact Us!" /></a></p>

    Contact Us!

     

    Headings

    This is Heading One (h1)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.


    This is Heading Two (h2)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.


    This is Heading Three (h3)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.

    This is Heading Four (h4)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.


    This is Heading Five (h5)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.


    This is Heading Six (h6)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.

     

    Numered blocks

    <p class="jm-block"><span class="jm">01</span>Text goes here</p>

    01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

    02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

    03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

    <p class="jm-block second"><span class="jm">a</span>Text goes here</p>

    aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

    bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

    cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

     

    Colored blocks

    this is a paragraph with the class "blue"
    <p class="blue" > Text goes here</p>

     

    this is a paragraph with the class "green"
    <p class="green" > Text goes here</p>

     

    this is a paragraph with the class "red"
    <p class="red" > Text goes here</p>

    this is a paragraph with the class "bluefill"
    <p class="bluefill" > Text goes here</p>

    this is a paragraph with the class "greenfill"
    <p class="greenfill" > Text goes here</p>

    this is a paragraph with the class "redfill"
    <p class="redfill" > Text goes here</p>

     

    Quote blocks

    this is a paragraph with the class "quote-left"
    <p class="quote-left" > Text goes here</p>

    this is a paragraph with the class "quote-right"
    <p class="quote-right" > Text goes here</p>

     

    Testimonials

    <div class="jm-testimonials"> <div class="jm-testimonials-text"> <div class="quote-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> <div class="jm-testimonials-author">Sandro Rosell</div> <div class="jm-testimonials-author2">FC Barcelona President</div> </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Sandro Rosell
    FC Barcelona President

     

    Icon blocks

    this is a paragraph with the class "jmbadge"
    <p class="jmbadge" > Text goes here</p>

    this is a paragraph with the class "jmcalendar"
    <p class="jmcalendar" > Text goes here</p>

    this is a paragraph with the class "jmchat"
    <p class="jmchat" > Text goes here</p>

    this is a paragraph with the class "jmcheck"
    <p class="jmcheck" > Text goes here</p>

    this is a paragraph with the class "jmcloud"
    <p class="jmcloud" > Text goes here</p>

    this is a paragraph with the class "jmdirection"
    <p class="jmdirection" > Text goes here</p>

    this is a paragraph with the class "jmdivide"
    <p class="jmdivide" > Text goes here</p>

    this is a paragraph with the class "jmerror"
    <p class="jmerror" > Text goes here</p>

    this is a paragraph with the class "jmfire"
    <p class="jmfire" > Text goes here</p>

    this is a paragraph with the class "jmflag"
    <p class="jmflag" > Text goes here</p>

    this is a paragraph with the class "jmheart"
    <p class="jmheart" > Text goes here</p>

    this is a paragraph with the class "jmhome"
    <p class="jmhome" > Text goes here</p>

    this is a paragraph with the class "jminfo"
    <p class="jminfo" > Text goes here</p>

    this is a paragraph with the class "jmlist"
    <p class="jmlist" > Text goes here</p>

    this is a paragraph with the class "jmmail"
    <p class="jmmail" > Text goes here</p>

    this is a paragraph with the class "jmpeople"
    <p class="jmpeople" > Text goes here</p>

    this is a paragraph with the class "jmstar"
    <p class="jmstar" > Text goes here</p>

    this is a paragraph with the class "jmstat"
    <p class="jmstat" > Text goes here</p>

     

    Glyphicon Font

    <span class="icon-joomla">&nbsp</span>
    icon-asterisk
    icon-plus
    icon-euro
    icon-minus
    icon-cloud
    icon-envelope
    icon-pencil
    icon-glass
    icon-music
    icon-search
    icon-heart
    icon-star
    icon-star-empty
    icon-user
    icon-film
    icon-th-large
    icon-th
    icon-th-list
    icon-ok
    icon-remove
    icon-zoom-in
    icon-zoom-out
    icon-off
    icon-signal
    icon-cog
    icon-trash
    icon-home
    icon-file
    icon-time
    icon-road
    icon-download-alt
    icon-download
    icon-upload
    icon-inbox
    icon-play-circle
    icon-repeat
    icon-refresh
    icon-list-alt
    icon-lock
    icon-flag
    icon-headphones
    icon-volume-off
    icon-volume-down
    icon-volume-up
    icon-qrcode
    icon-barcode
    icon-tag
    icon-tags
    icon-book
    icon-bookmark
    icon-print
    icon-camera
    icon-font
    icon-bold
    icon-italic
    icon-text-height
    icon-text-width
    icon-align-left
    icon-align-center
    icon-align-right
    icon-align-justify
    icon-list
    icon-indent-left
    icon-indent-right
    icon-facetime-video
    icon-picture
    icon-map-marker
    icon-adjust
    icon-tint
    icon-edit
    icon-share
    icon-check
    icon-move
    icon-step-backward
    icon-fast-backward
    icon-backward
    icon-play
    icon-pause
    icon-stop
    icon-forward
    icon-fast-forward
    icon-step-forward
    icon-eject
    icon-chevron-left
    icon-chevron-right
    icon-plus-sign
    icon-minus-sign
    icon-remove-sign
    icon-ok-sign
    icon-question-sign
    icon-info-sign
    icon-screenshot
    icon-remove-circle
    icon-ok-circle
    icon-ban-circle
    icon-arrow-left
    icon-arrow-right
    icon-arrow-up
    icon-arrow-down
    icon-share-alt
    icon-resize-full
    icon-resize-small
    icon-exclamation-sign
    icon-gift
    icon-leaf
    icon-fire
    icon-eye-open
    icon-eye-close
    icon-warning-sign
    icon-plane
    icon-calendar
    icon-random
    icon-comment
    icon-magnet
    icon-chevron-up
    icon-chevron-down
    icon-retweet
    icon-shopping-cart
    icon-folder-close
    icon-folder-open
    icon-resize-vertical
    icon-resize-horizontal
    icon-hdd
    icon-bullhorn
    icon-bell
    icon-certificate
    icon-thumbs-up
    icon-thumbs-down
    icon-hand-right
    icon-hand-left
    icon-hand-up
    icon-hand-down
    icon-circle-arrow-right
    icon-circle-arrow-left
    icon-circle-arrow-up
    icon-circle-arrow-down
    icon-globe
    icon-wrench
    icon-tasks
    icon-filter
    icon-briefcase
    icon-fullscreen
    icon-dashboard
    icon-paperclip
    icon-heart-empty
    icon-link
    icon-phone
    icon-pushpin
    icon-usd
    icon-gbp
    icon-sort
    icon-sort-by-alphabet
    icon-sort-by-alphabet-alt
    icon-sort-by-order
    icon-sort-by-order-alt
    icon-sort-by-attributes
    icon-sort-by-attributes-alt
    icon-unchecked
    icon-expand
    icon-collapse-down
    icon-collapse-up
    icon-log-in
    icon-flash
    icon-log-out
    icon-new-window
    icon-record
    icon-save
    icon-open
    icon-saved
    icon-import
    icon-export
    icon-send
    icon-floppy-disk
    icon-floppy-saved
    icon-floppy-remove
    icon-floppy-save
    icon-floppy-open
    icon-credit-card
    icon-transfer
    icon-cutlery
    icon-header
    icon-compressed
    icon-earphone
    icon-phone-alt
    icon-tower
    icon-stats
    icon-sd-video
    icon-hd-video
    icon-subtitles
    icon-sound-stereo
    icon-sound-dolby
    icon-sound-5-1
    icon-sound-6-1
    icon-sound-7-1
    icon-copyright-mark
    icon-registration-mark
    icon-cloud-download
    icon-cloud-upload
    icon-tree-conifer
    icon-tree-deciduous

     

    Unordered lists


    Default list
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
    This is a list with the class "jm-color"
    Enter the class name to ul tag <ul class="jm-color">
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
    This is a list with the class "jm-gray"
    Enter the class name to ul tag <ul class="jm-gray">
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum
        • Duis tincidunt nunc sit amet ipsum

     

    Ordered lists


    Default list
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
    3. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
        1. Duis tincidunt nunc sit amet ipsum
        2. Duis tincidunt nunc sit amet ipsum
        3. Duis tincidunt nunc sit amet ipsum
    This is a list with the class "jm-roman"
    Enter the class name to ol tag <ol class="jm-roman">
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
    3. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
        1. Duis tincidunt nunc sit amet ipsum
        2. Duis tincidunt nunc sit amet ipsum
        3. Duis tincidunt nunc sit amet ipsum
    This is a list with the class "jm-alpha"
    Enter the class name to ol tag <ol class="jm-alpha">
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
    3. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
        1. Duis tincidunt nunc sit amet ipsum
        2. Duis tincidunt nunc sit amet ipsum
        3. Duis tincidunt nunc sit amet ipsum

     

    Social icons

    <p class="jm-icons"> <a class="jm-facebook" href="#"><span class="jm">&nbsp;</span></a> <a class="jm-twitter" href="#"><span class="jm">&nbsp;</span></a> <a class="jm-google" href="#"><span class="jm">&nbsp;</span></a> <a class="jm-rss" href="#"><span class="jm">&nbsp;</span></a> <a class="jm-vimeo" href="#"><span class="jm">&nbsp;</span></a> </p>

     

     

    Read More Button

    This is a read more link with the class "readmore"
    Enter the class name to a tag <a class="readmore" />

    Read more