fren

  • Vous êtes ici :  

joomla

  • All Modules

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris sit amet nibh nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut lectus felis, facilisis nec erat at, pretium pellentesque lectus. Donec sit amet nibh est. Morbi augue libero, pretium vitae nulla ac, malesuada ultricies neque. Donec eget neque erat. Nam dictum justo sit amet placerat consectetur. Maecenas laoreet, ligula vel scelerisque ultricies, lorem urna luctus odio, eget convallis. Quisque vestibulum tempus felis. Nulla interdum varius arcu nec. Duis id erat nunc.

  • Buttons and Inputs

    In this section you will find mos used styles like: tabs, buttons, inputs, nav bars, tables and many more...

    Button Group

    Button Group with drop down

    Default Tabs

    Default Pills

    Stacked Tabs

    Stacked Pills

    Default Nav List

    Tabbable Tabs

    I'm in Section 1.

    Howdy, I'm in Section 2.

    Tabbable Tabs Below

    I'm in Section A.

    Howdy, I'm in Section B.

    What up girl, this is Section C.

    Tabbable Tabs Left

    I'm in Section A.

    Howdy, I'm in Section B.

    What up girl, this is Section C.

    Tabbable Tabs Right

    I'm in Section A.

    Howdy, I'm in Section B.

    What up girl, this is Section C.

    Default Form

    Default Form With Place holder


    Nav Bar

    Title

    Labels

    Default Success Warning Important Info Inverse

    Badges

    1 2 4 6 8 10

    Thumbnails Grids of images, videos, text, and more

    • 300x200

      Thumbnail label

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      Action

    • 300x200

      Thumbnail label

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      Action

    • 300x200

      Thumbnail label

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      Action


    Progress Bar

    Table

    # First Name Last Name Username
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter

    Inline Form

    Sample Form

    Horizontal Form

    Selects

    Prepended and appended inputs

    @
    .00

    Search with button

    Inputs

    Inputs with warnings

    Something may have gone wrong
    Please correct the error
    Username is already taken
    Woohoo!

    Buttons

    Button class="" Description
    btn Standard gray button with gradient
    btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
    btn btn-info Used as an alternative to the default styles
    btn btn-success Indicates a successful or positive action
    btn btn-warning Indicates caution should be taken with this action
    btn btn-danger Indicates a dangerous or potentially negative action
    btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
    btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

    Link

  • Typography

    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>

    CHECK OUR
    NEW OFFER!

    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>
     

    CHECK OUR
    NEW OFFER!

    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>
     

    CHECK OUR
    NEW OFFER!

    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>
    Video
     Watch the Video

     

    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>
     Information
    Center      Parking
    Locked      Hotels

      Restaurant
    Center      Post
    Office      Disco
    Pubs

     

    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