Basic Template Structure
The template has a responsive layout and is based on the Bootstrap V3+ Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.
HTML Structure
The general HTML structure is the same throughout the template. Here is the general HTML structure of the template:
<!DOCTYPE html>
<html lang="en">
<head>
[Page meta, page css, page title etc...]
</head>
<body>
<!-- preloader -->
<div id="loading"> [LOADER CONTENT] </div>
<!--preloader -->
<!--header -->
<header id="header" class="default">
<div class="topbar">
[TOP BAR CONTENT]
</div>
<div class="menu">
<nav id="menu" class="mega-menu">
[MENU CONTENT]
</nav>
</div>
</header>
<!--header -->
<!--Section 1 -->
<section>
[SECTION 1 CONTENT]
</section>
<!--Section 1 -->
<!--Section 2 -->
<section>
[SECTION 2 CONTENT]
</section>
<!--Section 2 -->
<!--footer -->
<footer class="footer">
[FOOTER_CONTENT]
</footer>
<!--footer -->
[PAGE JAVASCRIPTS HERE]
</body>
</html>
CSS Structure
The general CSS structure is the same throughout the template. Here is the general CSS structure of the template:
<!-- bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- mega menu --> <link href="css/mega-menu/mega_menu.css" rel="stylesheet" type="text/css" /> <!-- font-awesome --> <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <!-- Skills --> <link href="css/skills-graph/jqbar.css" rel="stylesheet" type="text/css" /> <!-- Flaticon --> <link href="css/flaticon.css" rel="stylesheet" type="text/css" /> <!-- owl-carousel --> <link href="css/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css" /> <!-- General style --> <link href="css/general.css" rel="stylesheet" type="text/css" /> <!-- main style --> <link href="css/style.css" rel="stylesheet" type="text/css" />
Javascript Structure
The general Javascript structure is the same throughout the template. Here is the general Javascript structure of the template:
<!-- jquery --> <script type="text/javascript" src="js/jquery.min.js"></script> <!-- bootstrap --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- appear --> <script type="text/javascript" src="js/jquery.appear.js"></script> <!-- Menu --> <script type="text/javascript" src="js/mega-menu/mega_menu.js"></script> <!-- owl-carousel --> <script type="text/javascript" src="js/owl-carousel/owl.carousel.min.js"></script> <!-- counter --> <script type="text/javascript" src="js/counter/jquery.countTo.js"></script> <!-- skills --> <script type="text/javascript" src="js/skills-graph/jqbar.js"></script> <!-- custom --> <script type="text/javascript" src="js/custom.js"></script>