Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Appiyan-HTML" folder.
You will find the index.html file on the root that will be edited.
Also you will see 4 directories, css, js, fonts and img
In the first folder Content only 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.

   
<!-- ==================================================
        ***Js Files*** 
=================================================== -->
  
    <!-- jquery.js -->
    <script src="assets/js/jquery.js"></script>
    <!-- jquery.popper.min.js -->
    <script src="assets/js/popper.min.js"></script>
    <!-- bootstrap.min.js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- jquery.slicknav.min.js -->
    <script src="assets/js/jquery.slicknav.min.js"></script>
    <!-- nice select.js -->
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <!-- jquery.magnific.min.js -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <!-- jquery.is sticky.min.js -->
    <script src="assets/js/jquery.sticky.js"></script>
    <!-- jquery.owl.min.js -->
    <script src="assets/js/owl.carousel.min.js"></script>
    <!-- jquery.wow.min.js -->
    <script src="assets/js/wow.min.js"></script>
    <!-- main.js -->
    <script src="assets/js/main.js"></script>
              
                    
                          
                                
                                      
                                                  
  Expert-html/
    ├── css/
    │   ├── bootstrap.min.css
    │   ├── material-font.min.css
    │   ├── slicknav.min.css
    │   ├── animate.min.css
    │   ├── owl.carousel.min.css
    │   ├── style.css
    │   ├── nice-select.css
    │   ├── magnific-popup.css
    │   ├── responsive.css
    ├── fonts
    ├── images
    ├── js/
    │   ├── jquery-v1.12.4 js
    │   ├── bootstrap.min.js 
    │   ├── jquery.slicknav.min.js
    │   ├── owl.carousel.min.js
    │   ├── wow.min.js
    │   ├── animationCounter.min.js
    │   └── main.js
    │   └── sticky.js
    │   └── magnific-popup.js
    │   └── jquery.nice-select.js

    │   └── index.html
    │   └── home1.html
    │   └── home2.html
    │   └── home3.html
    │   └── home4.html
    │   └── home5.html
    │   └── home6.html
    │   └── home7.html
    │   └── home8.html
    │   └── blog.html
    │   └── single-blog.html

HTML Structure

   <!--  contact form  -->
     <div class="contact-form">
        <form action="contact.php">
            <div class="row">
                <div class="col-lg-6">
                    <input type="text" placeholder="Full Name">
                </div>
                <div class="col-lg-6">
                    <input type="email" placeholder="Email">
                </div>
                <div class="col-lg-12">
                    <input type="text" placeholder="Subject">
                </div>
                <div class="col-lg-12">
                    <textarea placeholder="Message"></textarea>
                </div>
                <div class="col-lg-12">
                    <input type="submit" value="Send message">
                </div>
            </div>
        </form>
    </div> <!-- contact form end -->

CSS Structure

    
    
    <!-- =================================================
                 ***CSS Files***
    ================================================== -->
    <!-- ================= *** Google Font-Poppins *** ======================= -->
    
    @import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,500i,600,700,700i,800,900,900i|Poppins:300,400,500,500i,600,700,800,800i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i");


    <!-- bootstrap.min.css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- font-awesome.min.css -->
    <link href="assets/css/material-design-iconic-font.min.css" rel="stylesheet">
    <!-- slicknav.min.css -->
    <link href="assets/css/slicknav.min.css" rel="stylesheet">
    <!-- nice select -->
    <link href="assets/css/nice-select.css" rel="stylesheet">
    <!-- magnific popup.css -->
    <link href="assets/css/magnific-popup.css" rel="stylesheet">
    <!-- owl.css -->
    <link href="assets/css/owl.carousel.css" rel="stylesheet">
    <!-- animate.min.css -->
    <link href="assets/css/animate.min.css" rel="stylesheet">
    <!-- style.css -->
    <link href="style.css" rel="stylesheet">
    <!-- responsive.css -->
    <link href="assets/css/responsive.css" rel="stylesheet">
    

JS Files

    
<!--==================================================
***Js Files*** 
===================================================-->
  
       <!-- === Jquery=== -->
        <script src="assets/js/jquery-2.1.4.min.js"></script>
        <!-- === bootsrap poper js=== -->
        <script src="assets/js/popper.min.js"></script>
        <!-- === bootsrap=== -->
        <script src="assets/js/bootstrap.min.js"></script>
        <!-- === owl-carousel=== -->
        <script src="assets/js/owl.carousel.min.js"></script>
        <!-- === owl-slicknav=== -->
        <script src="assets/js/jquery.slicknav.min.js"></script>
        <!-- === wow js=== -->
        <script src="assets/js/wow.min.js"></script>
        <!-- === isotop js=== -->
        <script src="assets/js/jquery.magnific-popup.min.js"></script>
        <!-- === masonry js=== -->
        <script src="assets/js/masonary.js"></script>
        <!-- === active js=== -->
        <script src="assets/js/active.js"></script>
    

Sliders Structure

    
<!-- ==========================================================
2.*testimonial area Slider
============================================================ -->

    
    <!-- testimonial slide area start -->
    <div class="testimonial-slide">
        <div class="testimonial-single-slide">
            <div class="testimonial-slide-content">
                <p>“Developing apps for mobile devices requires considering the constraints and features of these devices. Mobile devices run on battery and have less powerful processors.”</p>
            </div>
            <div class="testimonial-slide-meta">
                <img src="assets/img/testimonial-slide-meta1.png" alt="">
                <span class="testimonial-meta">
                    <span class="meta-title">Elijah Terry</span><br>
                    <span class="meta-content">CEO, Imagine Dragon Inc.</span>
                </span>
            </div>
        </div>
        <div class="testimonial-single-slide">
            <div class="testimonial-slide-content">
                <p>“Developing apps for mobile devices requires considering the constraints and features of these devices. Mobile devices run on battery and have less powerful processors.”</p>
            </div>
            <div class="testimonial-slide-meta">
                <img src="assets/img/testimonial-slide-meta2.png" alt="">
                <span class="testimonial-meta">
                    <span class="meta-title">Daniel Wells</span><br>
                    <span class="meta-content">Android Developer, SW&Z</span>
                </span>
            </div>
        </div>
        <div class="testimonial-single-slide">
            <div class="testimonial-slide-content">
                <p>“Developing apps for mobile devices requires considering the constraints and features of these devices. Mobile devices run on battery and have less powerful processors.”</p>
            </div>
            <div class="testimonial-slide-meta">
                <img src="assets/img/testimonial-slide-meta3.png" alt="">
                <span class="testimonial-meta">
                    <span class="meta-title">Android Developer, SW&Z</span><br>
                    <span class="meta-content">SEO Specialist, Singleappel</span>
                </span>
            </div>
        </div>
        <div class="testimonial-single-slide">
            <div class="testimonial-slide-content">
                <p>“Developing apps for mobile devices requires considering the constraints and features of these devices. Mobile devices run on battery and have less powerful processors.”</p>
            </div>
            <div class="testimonial-slide-meta">
                <img src="assets/img/testimonial-slide-meta2.png" alt="">
                <span class="testimonial-meta">
                    <span class="meta-title">Daniel Wells</span><br>
                    <span class="meta-content">Android Developer, SW&Z</span>
                </span>
            </div>
        </div>
    </div>
    <!-- testimonial slide end -->

    

Sources & Credits

• Fonts Muli Fonts
• Icons
  • icofont
• Images Google
• Sliders
  • Owl Carousel

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 -->