Menu

user_mobilelogo

To create a Jumbotron as in the demo simply do the following.
1: Create a custom html module in module position Jumbotron add the code shown below to the modules Html.
2: To style go to the templates parameters. Click on the Jumbotron parameters tab and style as required.

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" style="font-color: #ffffff;">
<div class="container">
<h1 class="animate fadeInDown" style="text-align: center; font-size: 40px;">Lets Talk Nano</h1>
<p class="animate fadeIn" style="text-align: center;">Nano is a slick new design with some cool new features to give your site that cutting edge look. Features include OffCanvas sidebar Menu, Image Hover Effects, Full-width slideshow, Updated Css only Drop-down menu, Jumbotron module position, Font awesome, Css animations, Thumbnails Gallery and much more. Nano lets you create any color site layout you want using the template parameters. Enjoy!</p>
<p style="text-align: center;"> </p>
<p class="animate fadeInUp" style="text-align: center;"><a class="jumbotron-btn fade">Lorem Ipsum »</a></p>
</div>
</div>

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nano comes with 6 nice image hover effects for your images.  See all 6 examples below by hovering over each image.  To use an image effect of your choice simply copy the code snippet under the image into the Html of your article or custom html module.  Edit the src path to your image and edit the Href tag to point to the page you want to link too in your site.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Animations classes allow you to add nice effects to most elements in your template. As you scroll and an element enters the viewport the animation is applied.

 

1: How to add class to any element.

Simply add the class to the element. In this example we are adding the animate fadeIn class to a paragraph

animate example

 

2: How to add class to a menu item.

Simply add the class to the menu Link Css Style in the menu item Advanced Options. In this example we are adding the animate fadeIn class to a menu item

animate example menu item

 

3: How to add class to a Module or Module head.

Simply add the class to the Header Classor the Module Class Suffix in the menu item Advanced Options. See example below.

animate example module

Example Animations
animate fadeIn
animate fadeInDown
animate fadeInDownBig
animate fadeInUp
animate fadeInUpBig
animate fadeInLeft
animate fadeInLeftBig
animate fadeInRight
animate fadeInRightBig
animate flip
animate flipInX
animate flipInY
animate lightSpeedIn
animate rotateIn
animate rotateInDownLeft
animate rotateInDownRight
animate rotateInUpLeft
animate rotateInUpRight
animate slideInDown
animate slideInRight
animate slideInLeft
animate rollIn
animate bounce
animate flash
animate shake
animate swing
animate wobble

Offcanvas Menu

Image Hovers

Any Color Style

Create a site your visitors will love

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Get Nano Today!

Demo Content

All content and images used in this demo are for demonstration purposes only, copyright their original owners.

For High Quality images shutterstock.com

For Free Stock images stock.xchng

Connect with Us

This email address is being protected from spambots. You need JavaScript enabled to view it.

http://www.joomlage.com

Like Us on Facebook

Join Us on Googleplus