Themebox

Responsive HTML5 Template

created: 01/06/2016
latest update: 01/06/2016
by: jThemes Studio
email: jakjim@gmail.com

- assets/css                    (Template CSS)
- assets/fonts                  (Icon Fonts)
- assets/ico                    (Favivon)
- assets/img                    (All Images)
- assets/js                     (Template JS)
- assets/php                    (PHP files)
- assets/plugins                (Theme plugins)

The template is based on Bootstrap Framework - http://getbootstrap.com/

The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport.

Below 480px viewports, the columns become fluid and stack vertically.

Create a .row and add the appropriate number of .col-sm-* columns.

<div class="row">
    <div class="col-sm-12">
        
       { Level 1 column }

        <div class="row">
            <div class="col-sm-6"> { Level 2 } </div>
            <div class="col-sm-6"> { Level 2 } </div>
        </div>

    </div>
</div>

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

The organization of the CSS is one of our priorities.

These are the CSS file we're using in the template:

- assets
  - css
    - theme.css             - (Main CSS file)
                            - (Theme predefined colors)
    - theme-blue-1.css
    - theme-blue-2.css
    - theme-color.css
    - theme-cumin.css
    - theme-gold.css
    - theme-gray.css
    - theme-green-1.css
    - theme-green-2.css
    - theme-orange-1.css
    - theme-orange-2.css
    - theme-pink.css
    - theme-purple-1.css
    - theme-purple-2.css
    - theme-red-1.css
    - theme-red-2.css
    - theme-yellow-1.css
    - theme-yellow-2.css

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.

For more information, please visit http://www.jquery.com/

All the JavaScript libraries and files are included at the bottom of every HTML page like this:


<!-- JS Global -->
<script src="assets/plugins/jquery/jquery-1.11.1.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="assets/plugins/superfish/js/superfish.min.js"></script>
<script src="assets/plugins/jquery.sticky.min.js"></script>
<script src="assets/plugins/prettyphoto/js/jquery.prettyPhoto.js"></script>
<script src="assets/plugins/owl-carousel2/owl.carousel.min.js"></script>
<script src="assets/plugins/swiper/js/swiper.jquery.min.js"></script>

<!-- JS Page Level -->
<script src="assets/plugins/isotope/jquery.isotope.min.js"></script>
<script src="assets/js/theme-ajax-mail.js"></script>
<script src="assets/js/theme.js"></script>

The initializations and parameters (sliders, effects, etc.) are contained in assets/js/theme.js

To change the embedded font, please take a look in the head part of assets/css/theme.css:

@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700);
@import "../fonts/uni_sans_heavy-webfont.css";

To change the font, first go to http://www.google.com/webfonts choose a font and add the generated code to the top of theme.css.

Then edit font-family in

body {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 2;
  background: #ffffff;
  color: #a5a4a4;
  -webkit-font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: visible !important;
  position: relative;
  overflow-x: hidden;
}

and

.section-title span {
  font-family: 'uni_sansheavy_caps', 'Poppins', sans-serif;
  letter-spacing: 0.06em;
  display: inline-block;
}

Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.

If you need more information, please visit this site: http://fortawesome.github.io/Font-Awesome/

We are using FontAwesome for social media icons in this template. Insert icons like this:

<i class="fa fa-google-plus"></i>

Here's the complete list of available icons from FontAwesome docs:

Open index.html and find this part of code. Just change path to your image logo

<!-- Logo -->
<div class="logo">
    <a href="index.html"><img src="assets/img/... path to your image logo ..." alt="ThemeBox"/></a>
</div>
<!-- /Logo -->

Owl Carousel is the slider you'll find in the content. It's an easy to use lightweight carousel with some decent features.

Main slider has class 'main-slider' and each slide has '<div class="item">' wrapper for easy find where slide html code start. If you wont remove some slide just remove div with all content like this '<div class="item">'

<div class="main-slider">
    <div class="owl-carousel" id="main-slider">

        <!-- Slide 1 -->
        <div class="item slide1 jumbotron-section jb1 with-overlay">
            <div class="caption">
                <div class="container">
                    <div class="div-table">
                        <div class="div-cell">
                            <div class="caption-content">

                                <div class="jumbotron text-center">
                                    <h4 class="jumbotron-title-sub">Creativity is our passion</h4>
                                    <h1 class="jumbotron-title">WE ARE <span class="text-color">THEMEBOX</span></h1>
                                    <ul class="jumbotron-tags">
                                        <li>Creative</li>
                                        <li>Professional</li>
                                        <li>Fast</li>
                                    </ul>
                                    <p class="btn-row">
                                        <a class="btn btn-theme btn-rounded btn-theme-lg" href="#">BROWSE ALL TEMPLATES</a>
                                        <a class="btn btn-theme btn-rounded btn-theme-lg btn-theme-light" href="#">LEARN MORE</a>
                                    </p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Slide 1 -->

        <!-- Slide 2 -->
        { ... }
        <!-- /Slide 2 -->

    </div>
</div>

If you wont change option for main slider you need to open assets/js/theme.js and find '// Our Customers Slider Start' function and set true/false for option what you wont to change

autoplay: true, - set autoplay for slider

nav: false, - hide navigation arrow

// Main slider
if (mainSlider.length) {
    mainSlider.owlCarousel({
        //items: 1,
        autoplay: false,
        autoplayHoverPause: true,
        loop: true,
        margin: 0,
        dots: true,
        nav: true,
        navText: [
            "<i class='fa fa-angle-left'></i>",
            "<i class='fa fa-angle-right'></i>"
        ],
        responsiveRefreshRate: 100,
        responsive: {
            0: {items: 1},
            479: {items: 1},
            768: {items: 1},
            991: {items: 1},
            1024: {items: 1}
        }
    });
}

You can find more documentation here http://owlgraphic.com/owlcarousel/

Fonts:

Google Fonts - http://www.google.com/webfonts/

Icons Font-face - http://fortawesome.github.com/Font-Awesome/

Scripts:

jQuery - http://www.jquery.com/

Bootstrap Framework - http://getbootstrap.com/

Bootstrap Select - http://silviomoreto.github.io/bootstrap-select/

Font Awesome - http://fontawesome.io/

Owl Carousel - http://owlgraphic.com/owlcarousel/

HTML5shiv - http://code.google.com/p/html5shiv/

Respond.js - https://github.com/scottjehl/Respond/