Follow the steps below to get started with your Site Template:

• asset/CSS - Main Stylesheet Folder
• asset/images - Images Folder
• asset/js - Javacripts Folder
• asset/less- Less Folder
• index.html - Index File/Homepage

The Logo Container can be found in the Header Container <Header>

<div class="logo">
    <a href="index.html"><img src="assets/images/logo.png" alt="Specie - Restaurant Template"></a>
</div>
            

Note:The Logo Image's maximum height can be 75px. Also make sure you also add the Dark Logo which provides even more intuitiveness when you switch between Light/Dark Scheme. However, it is optional.

Main Header

You can use class .main-header while creating your Pages

<header class="main-header"> <div class="top-bar-wrap"> ... </div><!-- /.top-bar --> <div class="navigation"> <div class="container"> ... </div> </div><!-- /.navigation --> </header><!-- /.main-header -->

Meta Menu

You can start using the Mega Menu. Try using the Following code:

<nav class="menu"> <ul> <li> <span class="describe-menu">front page</span> <a href="index.html">home</a> </li> <li class="has-sub"> <span class="describe-menu">our menu</span> <a href="">menu <i class="fa fa-angle-down"></i></a> <ul class="menu-child"> <li>...</li> <li>...</li> </ul> </li> </ul> <div class="feature-menu"> </div><!-- /.feature-menu --> </nav><!-- /.menu -->

Usage:

Here is the HTML Code for the Specie Slider:

<div id="main-slider"> <!--first slider--> <div class="slider-wrap owl-carousel owl-theme" data-plugin-options='{"items":1,"nav": true}'> <div class="slider"></div> </div> <!--second slider--> <div class="slider-wrap owl-carousel owl-theme" data-plugin-options='{"items":1,"nav": true}'> <div class="slider"></div> </div> <!--third slider--> <div class="slider-wrap owl-carousel owl-theme" data-plugin-options='{"items":1,"nav": true}'> <div class="slider"></div> </div> <!--fourth slider--> <div class="slider-wrap owl-carousel owl-theme" data-plugin-options='{"items":1,"nav": true}'> <div class="slider"></div> </div> </div><!-- /#main-slider -->

Javascript:

<script> $('.owl-carousel:not(.manual):not(.owl-loaded)').each(function () { var slider = $(this); var defaults = { items: 4, nav: false, navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'], dots: true, loop: false, center: false, mouseDrag: true, touchDrag: true, pullDrag: true, freeDrag: false, margin: 0, stagePadding: 0, merge: false, mergeFit: true, autoWidth: false, startPosition: 0, rtl: false, smartSpeed: 250, fluidSpeed: false, dragEndSpeed: false, autoplayHoverPause: true, }; var config = $.extend({}, defaults, slider.data("plugin-options")); // Initialize Slider slider.owlCarousel(config); }); </script>

Option:

<i class="fa fa-angle-left"></i>', 
'<i class="fa fa-angle-right"></i>

Page Titles

<!--page-title--> <section class="page-title" style="background-image: url('...');"> <span>Subtitle Here</span> <h1>Page title Here</h1> </section>

Columns & Grid

Bootstrap Grid

<div class="post-wrap"> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="post-listing"><!-- /.post-listing--> ... </div><!--end post-listing--> <div id="pagination"><!--/.pagination--> <nav> <ul class="pagination"> <li>...</li> <li>...</li> </ul> </nav> </div> </div> <div class="col-md-3"> <div class="sidebar-right"> ... </div> </div> </div> </div> </div>

Widgets are simple & easy to setup, completely flexible & can be used anywhere on a page. Here's a sample code:

<div class="widget clearfix">
 <h4>Widget Title</h4>
 ...
</div>

List of Included Widgets:

• Search
• Categories
• Last News
• Tweets

You have a lot of awesome and creative javscript libraries You will find the main.js files after the end of go up it will be like that.

<!-- JQuery -->
<script src="vendors/jquery/jquery.min.js"></script>
</head>
            

<!-- Vendors Scripts -->
<script src="vendors/stickyjs/jquery.sticky.js"></script>
<script src="vendors/owl.carousel/owl.carousel.min.js"></script>
<script src="vendors/light-gallery/js/lightgallery-all.min.js"></script>
<script src="vendors/isotope-docs/isotope-docs.min.js"></script>
<!-- Template Script -->
<script src="assets/js/main.js"></script>
</body>
</html>
            

• Bootstrap
• Flaticon
• Font-awesome-4.6.3
• Isotope-docs
• Jquery
• Lessjs
• Light-gallery
• Matchmedia
• Owl.carousel
• Stickyjs
• Themify