Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "preview" folder.
You will find the the index.html,index-1.html,index-2.html,index-3,index-4,index-5,index-6.html file on the root that will be edited.
Also you will see 4 directories, css, js, fonts, img.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.

    extra-html/
    ├── css/
    │   ├── reset.css
    │   ├── bootstrap.min.css
    │   ├── font-awesome.min.css 
    │   ├── slick.css
    │   ├── animate.css
    │   ├── owl-carousel.css
    │   ├── jquery.mb.YTPlayer.min.css
    │   └── style.css
	│   └── responsive.css
    ├── fonts
    ├── img
    ├── js/
    │   ├── jQuery.min.js
    │   ├── bootstrap.min.js
    │   ├── jquery.sticky.js
    │   ├── jquery.nav.js
    │   ├── jquery.mb.YTPlayer.min.js
    │   ├── slick.min.js
    │   ├── waypoints.min.js
    │   ├── jquery.counterup.min.js
    │   ├── main.js
    |
    ├── index.html
    ├── index-1.html
    ├── index-2.html
    ├── index-3.html
    ├── index-4.html
    ├── index-5.html
    ├── style.css

HTML Structure

		<section class="price-area" id="price">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="content"></div>
					</div>
				</div>
			</div>
		</section>

CSS Structure

    
    <!--  bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!--  font Awesome Css  -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <!--    stylesheet for fonts-->
    <link href="fonts/stylesheet.css" rel="stylesheet">
    <!-- Reset css-->
    <link href="css/reset.css" rel="stylesheet">
    <!--slick css-->
    <link href="css/slick.css" rel="stylesheet">
    <!--  owl-carousel css -->
    <link href="css/owl.carousel.css" rel="stylesheet">
    <!--  owl-carousel css -->
    <link href="css/animate.css" rel="stylesheet">
    <!--  YTPlayer css For Background Video -->
    <link href="css/jquery.mb.YTPlayer.min.css" rel="stylesheet">
    <!--  style css  -->
    <link href="css/version-5-slider.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <!--  Responsive Css  -->
    <link href="css/responsive.css" rel="stylesheet">
    

    
     <!--  jquery.min.js  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <!--    bootstrap.min.js-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!--    jquery.sticky.js-->
    <script src="js/jquery.sticky.js"></script>
    <!--  owl.carousel.min.js  -->
    <script src="js/owl.carousel.min.js"></script>
    <!--  jquery.mb.YTPlayer.min.js   -->
    <script src="js/jquery.mb.YTPlayer.min.js"></script>
    <!--    slick.min.js-->
    <script src="js/slick.min.js"></script>
    <!--    jquery.nav.js-->
    <script src="js/jquery.nav.js"></script>
    <!--jquery waypoints js-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
    <!--    jquery counterup js-->
    <script src="js/jquery.counterup.min.js"></script>
    <!--    main.js-->
    <script src="js/main.js"></script>
    

Sliders Structure

    
      <!-- SINGLE ITEM -->
    <div class="item active">
		<div class="hero-area-content">
			<div class="hero-area-table">
				<div class="hero-area-tablecell">
					<p class="animation animated-item-1">Welcome to extra</p>
					<h1 class="animation animated-item-2">Creative <span>minimal</span> design</h1>
					<p class="animation animated-item-3">we design your thyinking minimally</p>
				</div>
			</div>
		</div>
	</div>
	<div class="item">
	<div class="hero-area-bg slide-1"></div>
	<div class="hero-area-content">
		<div class="hero-area-table">
			<div class="hero-area-tablecell">
				<p class="animation animated-item-1">Welcome to extra</p>
				<h1 class="animation animated-item-2">Creative <span>minimal</span> design</h1>
				<p class="animation animated-item-3">we design your thinking minimally</p>
			</div>
		</div>
	</div>
</div>
      <!-- /.SINGLE ITEM END -->
    

Sources & Credits

• Fonts Google Fonts
• Icons
  • FontAwesome
• Images GoogleGoogle
• Sliders
  • Bootstrap Carousel
  • Slick slider
  • owl-carousel slider

Supports

Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.

Sliders Structure

    
    <!-- code will be here -->