Copyright © 2016. CrazyCafe All Rights Reserved.

Space - HTML Landing Template.

This is a Space HTML Landing Template for many purposes.

Created: 12/07/2017
Latest Update: 14/08/2017
By: CrazyCafe
Email: CrazyCafe@gmail.com

Thank you for purchasing our Template. Space HTML Landing 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 "SPACE-HTML" folder.
You will find the index.html file on the root that will be edited.
you will see 1 directories Folder assets
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 main js -->
    <script src="assets/js/jquery.min.js"></script>
    
    <!--  jquery-migrate js -->
    <script src="assets/js/jquery-migrate.min.js"></script>
    
    <!--  bootstrap js -->
    <script src="assets/js/bootstrap.min.js"></script>
    
    <!--  wow.min animation js -->
    <script src="assets/js/wow.min.js"></script>
    
    <!--  coundown js -->
    <script src="assets/js/coundown.js"></script>
    
    <!--  slicks slider js -->
    <script src="assets/js/slick.min.js"></script>
    
    <!--  modernizr js -->
    <script src="assets/js/modernizr.js"></script>
    
    <!--  jquery.slicknav js -->
    <script src="assets/js/jquery.slicknav.min.js"></script>
    
    <!--  main.animation js -->
    <script src="assets/js/main.animation.js"></script>
    
    <!--  jquery.sticky js -->
    <script src="assets/js/jquery.sticky.js"></script>
    
    <!--  main js -->
    <script src="assets/js/main.js"></script>
        
        
  Expert-html/
    ├── css/
    │   ├── bootstrap.min.css
    │   ├── owl.carousel.css
    │   ├── icofont.css
    │   ├── animate.css
    │   ├── slick.css
    │   ├── slider-style.css
    │   ├── font-awesome.min.css
    │   ├── magnific-popup.css
    │   ├── animate-min.css
    │   ├── style.css
    │   ├── responsive.css
    ├── fonts
    ├── images
    ├── js/
    │   ├── jquery-3.1.0.min.js
    │   ├── bootstrap.min.js 
    │   ├── owl.carousel.min.js 
    │   ├── wow.min.js 
    │   ├── slick.js
    │   ├── animation.js
    │   ├── sticky.js
    │   ├── jquery.migrate.js
    │   ├── jquery.countdown.min.js
    │   ├── jQuery-modernizr.js
    │   ├── magnific-popup.min.js
    │   └── main.js

    │   └── index.html
    │   └── home-2.html
    │   └── home-3.html
    │   └── home-4.html
    │   └── home-5.html
    │   └── home-6.html
    │   └── home-7.html
    │   └── home-8.html
    │   └── home-9.html
    │   └── home-10.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 *** ======================= -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,700i" rel="stylesheet">
     
    <!-- bootstrap css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- font-awesome css -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- font-slick slider css -->
    <link href="assets/css/slick.css" rel="stylesheet">
    
    <!-- font-animate css -->
    <link href="assets/css/animate.min.css" rel="stylesheet">
    
    <!-- font-slicknav mobile menu css -->
    <link href="assets/css/slicknav.min.css" rel="stylesheet">
    
    <!-- font-slider style css -->
    <link href="assets/css/slider-style.css" rel="stylesheet">
    
    <!-- font-main style css -->
    <link href="style.css" rel="stylesheet">
    
    <!-- font-responsive css -->
    <link href="assets/css/responsive.css" rel="stylesheet">

JS Files 

    
<!--==================================================
***Js Files*** 
===================================================-->
   <!--  jquery-min js -->
    <script src="assets/js/jquery.min.js"></script>
    <!--  jquery-migrate js -->
    
    <script src="assets/js/jquery-migrate.min.js"></script>
    <!--  bootstrap js -->
    
    <script src="assets/js/bootstrap.min.js"></script>
    <!--  wow.min animation js -->
    
    <script src="assets/js/wow.min.js"></script>
    <!--  coundown js -->
    
    <script src="assets/js/coundown.js"></script>
    <!--  slicks slider js -->
    
    <script src="assets/js/slick.min.js"></script>
    <!--  modernizr js -->
    
    <script src="assets/js/modernizr.js"></script>
    <!--  jquery.slicknav js -->
    
    <script src="assets/js/jquery.slicknav.min.js"></script>
    <!--  main.animation js -->
    
    <script src="assets/js/main.animation.js"></script>
    <!--  jquery.sticky js -->
    
    <script src="assets/js/jquery.sticky.js"></script>
    <!--  main js -->
    
    <script src="assets/js/main.js"></script>

Sliders Structure

The base structure was organized by row, col-** class 
    
<!-- ==========================================================
2.*Hero_area start
============================================================ -->

    <div class="home-3-hero-area">
        <div class="home-3-homepage-slider">
            <div class="home-3-single-page" style="background-image: url(assets/img/home-3-hero-bg.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 col-xs-12 text-center">
                            <div class="home-3-slider-text wow fadeInUp">
                                <h2>We are most</h2>
                                <h1>Creative <span class="home-3-hero-title"> Agency</span></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--   Single Slider One End-->

            <div class="home-3-single-page" style="background-image: url(assets/img/home-4-hero-bg-1.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 col-xs-12 text-center">
                            <div class="home-3-slider-text wow fadeInUp">
                                <h2>Welcome To our</h2>
                                <h1>Agency <span class="home-3-hero-title"> Policy</span></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--   Single Slider Two End -->

            <div class="home-3-single-page" style="background-image: url(assets/img/home-3-home.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 col-xs-12 text-center">
                            <div class="home-3-slider-text wow fadeInUp">
                                <h2>We are most</h2>
                                <h1>Creative <span class="home-3-hero-title"> Agency</span></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--   Single Slider Three End -->
        </div>
    </div>
<!-- HeroSlider area end -->

<!-- ==========================================================
8.*Home-3-slider-area start
============================================================ -->
    <div class="home-3-work-area-slide">
        <div class="home-3-home-slide">
            <div class="home-3-single-slide">
                <div class="home-3-slide">
                    <img src="assets/img/home-3-work-area-slider-img-1.jpg" alt="">
                </div>
            </div>
            
            <!-- home-3 single slide start -->
            <div class="home-3-single-slide">
                <div class="home-3-slide">
                    <img src="assets/img/home-3-slider-img-5.png" alt="">
                </div>
            </div>

            <div class="home-3-single-slide">
                <div class="home-3-slide">
                    <img src="assets/img/home-3-slider-img-2.png" alt="">
                </div>
            </div>

            <div class="home-3-single-slide">
                <div class="home-3-slide">
                    <img src="assets/img/home-3-slider-img-5.png" alt="">
                </div>
            </div>

            <div class="home-3-single-slide">
                <div class="home-3-slide">
                    <img src="assets/img/home-3-work-area-slider-img-1.jpg" alt="">
                </div>
            </div>

            <div class="home-3-single-slide">
                <div class="home-3-slide">
                    <img src="assets/img/home-3-slider-img-2.png" alt="">
                </div>
            </div>
            <!-- home-3 single slide end -->
        </div>
    </div>
    <!--   work area Start -->

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