Copyright © 2016. CrazyCafe All Rights Reserved.

CARRER PATH - HTML5 TEMPLATE.

This is a Carrer path HTML5 Template for many purposes.

Created: 23/08/2017
Latest Update: 24/08/2017
By: CrazyCafe
Email: CrazyCafe@gmail.com

Thank you for purchasing our Template. Carrer path HTML5 Tempalate, HTML theme for many purposes. If you have any question, please feel free to contact us.

Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Carrer-path-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 images
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.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>
    <!-- jquery.inview.js -->
    <script src="assets/js/inview.js"></script>
    <!-- jquery.counter.js -->
    <script src="assets/js/counter.js"></script>
    <!-- jquery.nice select.js -->
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <!-- jquery.slicknav.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/active.js"></script> 
              
                    
                          
                                
                                      
                                                  
  Expert-html/
    ├── css/
    │   ├── bootstrap.min.css
    │   ├── material-font.min.css
    │   ├── slicknav.min.css
    │   ├── animate.min.css
    │   ├── owl.carousel.min.css
    │   ├── style.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
    │   ├── jquery.countdown.min.js
    │   └── active.js

    │   └── index.html
    │   └── about.html
    │   └── service.html
    │   └── single-service.html
    │   └── blog.html
    │   └── blog-details.html
    │   └── course.html
    │   └── course-details.html
    │   └── 404.html
    │   └── registration.html
    │   └── contact.html

HTML Structure

The base structure was organized by row, col-** class 

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="logo">
                    <a href="index.html">
                        <img src="images/logo.png" alt="">
                    </a>
                </div>
            </div><!-- column end -->
        </div> <!-- row end -->
    </div> <!-- container end -->

CSS Structure 

    
    
    <!-- =================================================
                 ***CSS Files***
    ================================================== -->
    <!-- ================= *** Google Font-Poppins *** ======================= -->
    
    @import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,600,700,800,900');


        <!-- 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">
        <!-- hover.css -->
        <link href="assets/css/hover.min.css" rel="stylesheet">
        <!-- owl carousell.css -->
        <link href="assets/css/owl.carousel.css" rel="stylesheet">
        <!-- nice select.css -->
        <link href="assets/css/nice-select.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.js -->
    <script src="assets/js/jquery.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>
    <!-- jquery.inview.js -->
    <script src="assets/js/inview.js"></script>
    <!-- jquery.counter.js -->
    <script src="assets/js/counter.js"></script>
    <!-- jquery.nice select.js -->
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <!-- jquery.slicknav.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/active.js"></script>

Sliders Structure

The base structure was organized by row, col-** class 
    
<!-- ==========================================================
2.*Hero area Slider
============================================================ -->

    
    <!-- hero area start -->
    <div class="hero-area">
        <div class="hero-slide">
            <div class="hero-single-slide"><!--single slider-area Start-->
                <div class="hero-bg">
                    <img src="assets/img/hero-bg-1.png" alt="">
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <h1>Build your <br>
                                career with <br>
                                expert advisors.</h1>
                                <h4>Lorem ipsum dolor sit amet consectetuer adipiscing <br>
                                elit sed diam nonummy euismod tincidunt ut laoreet dolore <br>
                                magna aliquam erat volutpat.</h4>
                                <a href="#" class="slide-btn global-hover">Get a free advice</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hero-single-slide"><!--single slider-area Start-->
                <div class="hero-bg">
                    <img src="assets/img/hero-bg-1.png" alt="">
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <h1>Build your <br>
                                career with <br>
                                expert advisors.</h1>
                                <h4>Lorem ipsum dolor sit amet consectetuer adipiscing <br>
                                elit sed diam nonummy euismod tincidunt ut laoreet dolore <br>
                                magna aliquam erat volutpat.</h4>
                                <a href="#" class="slide-btn global-hover">Get a free advice</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hero-single-slide"><!--single slider-area Start-->
                <div class="hero-bg">
                    <img src="assets/img/hero-bg-1.png" alt="">
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <h1>Build your <br>
                                career with <br>
                                expert advisors.</h1>
                                <h4>Lorem ipsum dolor sit amet consectetuer adipiscing <br>
                                elit sed diam nonummy euismod tincidunt ut laoreet dolore <br>
                                magna aliquam erat volutpat.</h4>
                                <a href="#" class="slide-btn global-hover">Get a free advice</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- hero area end -->
    <!-- slider-area End -->

<!-- ==========================================================
8.* Client Area Slider
============================================================ -->

Sources & Credits

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.

CrazyCafe

Sliders Structure

The base structure was organized by row, col-** class 
    
    <!-- code will be here -->