Special Headers
Predefined headers you can use by adding special class to header element (there is no difference which tag do you use : h1, h2 or h5),
for example :
|
1 2 3 4 5 6 7 |
<h1 class="hdr1">Example header 1</h1> <h2 class="hdr2">Example header 2</h2> <h3 class="hdr3">Example header 3</h3> <h5 class="hdr4">Example header 4</h5> <h1 class="hdr5">Example header 5</h1> <h2 class="hdr6">Example header 6</h2> <h3 class="hdr7">Example header 7</h3> |
Social Icons
You can use small, medium or big social icons.
We provided 24 icons
HTML MARKUP:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!-- Small Icons --> <ul class="soc_list soc-small list-unstyled clearfix"> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Bitbucket"><i class="fa fa-bitbucket"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Dribbble"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Dropbox"><i class="fa fa-dropbox"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Flickr"><i class="fa fa-flickr"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Foursquare"><i class="fa fa-foursquare"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="GitHub"><i class="fa fa-github-alt"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Gittip"><i class="fa fa-gittip"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Google+"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Instagram"><i class="fa fa-instagram"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Renren"><i class="fa fa-renren"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="RSS"><i class="fa fa-rss"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Skype"><i class="fa fa-skype"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Stack Exchange"><i class="fa fa-stack-exchange"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Stack Overflow"><i class="fa fa-stack-overflow"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Tumblr"><i class="fa fa-tumblr"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Vimeo"><i class="fa fa-vimeo-square"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="VKontakte"><i class="fa fa-vk"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Weibo"><i class="fa fa-weibo"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Xing"><i class="fa fa-xing"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="YouTube"><i class="fa fa-youtube-play"></i></a></li> </ul> <!-- Medium Icons --> <ul class="soc_list soc-medium list-unstyled clearfix"> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Bitbucket"><i class="fa fa-bitbucket"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Dribbble"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Dropbox"><i class="fa fa-dropbox"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Flickr"><i class="fa fa-flickr"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Foursquare"><i class="fa fa-foursquare"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="GitHub"><i class="fa fa-github-alt"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Gittip"><i class="fa fa-gittip"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Google+"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Instagram"><i class="fa fa-instagram"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Renren"><i class="fa fa-renren"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="RSS"><i class="fa fa-rss"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Skype"><i class="fa fa-skype"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Stack Exchange"><i class="fa fa-stack-exchange"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Stack Overflow"><i class="fa fa-stack-overflow"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Tumblr"><i class="fa fa-tumblr"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Vimeo"><i class="fa fa-vimeo-square"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="VKontakte"><i class="fa fa-vk"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Weibo"><i class="fa fa-weibo"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Xing"><i class="fa fa-xing"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="YouTube"><i class="fa fa-youtube-play"></i></a></li> </ul> <!-- Big Icons --> <ul class="soc_list soc-big list-unstyled clearfix"> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Bitbucket"><i class="fa fa-bitbucket"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Dribbble"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Dropbox"><i class="fa fa-dropbox"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Flickr"><i class="fa fa-flickr"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Foursquare"><i class="fa fa-foursquare"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="GitHub"><i class="fa fa-github-alt"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Gittip"><i class="fa fa-gittip"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Google+"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Instagram"><i class="fa fa-instagram"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Renren"><i class="fa fa-renren"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="RSS"><i class="fa fa-rss"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Skype"><i class="fa fa-skype"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Stack Exchange"><i class="fa fa-stack-exchange"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Stack Overflow"><i class="fa fa-stack-overflow"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Tumblr"><i class="fa fa-tumblr"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Vimeo"><i class="fa fa-vimeo-square"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="VKontakte"><i class="fa fa-vk"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Weibo"><i class="fa fa-weibo"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="Xing"><i class="fa fa-xing"></i></a></li> <li><a href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="YouTube"><i class="fa fa-youtube-play"></i></a></li> </ul> |
Rounded Image
Just paste img tag inside roundedImg div, and it will be circle shape.
- data-size – it is cicle radius
|
1 2 3 |
<div class="roundedImg" data-size="54"> <img class="media-object" src="images/content/product-small-1.jpg" alt=" "> </div> |
Buttons
We prepare 2 type of buttons. Example HTML markup:
|
1 2 3 |
<a href="#" class="btn btn-primary btn-sm">order now!</a> <input class="btn btn-default" type="submit" value="Submit"> |
menuBox
This is box to present menu from certain category. It is available in 4 types (different paper graphics). Just add type2, type3 or type4 class to change version.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class="menuBox type2"> <div class="top"> <img src="images/content/icon-1.png" alt=" "> <span>Starters</span> </div> <div class="inner"> <div class="media"> <a class="pull-left" href="images/content/product-small-1.jpg" data-rel="prettyPhoto[menu1]"> <div class="roundedImg" data-size="54"> <img class="media-object" src="images/content/product-small-1.jpg" alt=" "> </div> </a> <div class="media-body"> <span class="title">Fried Scallops</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <span class="price"> <em>$</em>7 </span> </div> </div> <!-- / item --> <hr> <div class="media"> [second item] </div> <!-- / item --> <div class="media"> [third item] </div> <!-- / item --> </div> </div> <!-- / menuBox --> |