80s Mod

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>

The organization of the CSS is one of our priorities.

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

 

/assets/
  /css/
    /header.css            - (Headers CSS file)
    /normolize.css         - (CSS Reset file)
    /style.css             - (Main CSS file)                    

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/main-jquery/jquery-2.2.4.min.js"></script>   
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>        
<script src="assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/plugins/owl.carousel.2/owl.carousel.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>    
<script src="assets/plugins/Swiper-3.3.1/dist/js/swiper.jquery.min.js"></script>
<script src="assets/plugins/prettyphoto-master/js/jquery.prettyPhoto.js"></script>
<script src="assets/plugins/subscribe-better-master/jquery.subscribe-better.min.js"></script>
<script src="assets/plugins/malihu-custom-scrollbar-plugin-master/js/minified/jquery.mCustomScrollbar.min.js"></script>

<!-- Custom JS --> 
<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=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);

.font-2, .section-title, .title-1, .widget-title { font-family: 'Oswald', sans-serif; }
.font-1 { font-family: "Roboto",sans-serif; }

 

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:

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

 

All sliders work on owlcarousel and initialized in assets/assets/theme.js

To make it easier to find sliders divided by commented line with slider name.

 

/*------------------- Product  Slider -------------------*/
if (jQuery('.deal-slider, .prod-featured-slider').length > 0) {
    jQuery(".deal-slider, .prod-featured-slider").owlCarousel({
        ...
    });
}

/*------------------- Testimonial Slider -------------------*/
if (jQuery('.testimonial-1').length > 0) {
    jQuery(".testimonial-1").owlCarousel({
        ...
    });
}

/*------------------- Brand Slider -------------------*/
if (jQuery('.brand-slider').length > 0) {
    jQuery(".brand-slider").owlCarousel({
        ...
    });
}

/*------------------- Blog Slider -------------------*/
if (jQuery('.blog-slider-1').length > 0) {
    jQuery(".blog-slider-1").owlCarousel({
        ...
    });
}

/*------------------- Realated Blog Slider -------------------*/
if (jQuery('.rel-blog-slider').length > 0) {
    jQuery(".rel-blog-slider").owlCarousel({
        ...
    });
}

Theme use the PrettyPhoto script and initialization of prettyphoto you can find in assets/js/theme.js

// prettyPhoto
// ---------------------------------------------------------------------------------------    
if (jQuery('.caption-link').length > 0) {
    jQuery("a[data-gal^='prettyPhoto']").prettyPhoto({
        theme: 'facebook',
        slideshow: 5000,
        autoplay_slideshow: true
    });
}

 

For more information check the documentation

 

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

 

From June 22nd, 2016 google map required a key. How to get a key and fix "MissingKeyMapError" error explained here

https://www.latecnosfera.com/2016/06/google-maps-api-error-missing-keymap-error-solved.html

 

After your get your api key your need to add a "&key=YOUR_API_KEY" at the bottom of index.html where plugged in google map script

 

change 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>

to

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;key=YOUR_API_KEY"></script>

center: new google.maps.LatLng(40.6700, -73.9400) // map coordinates

center: new google.maps.LatLng(your coordinates goes here)

position: new google.maps.LatLng(40.6700, -73.9400), // marker coordinates

position: new google.maps.LatLng(your coordinates goes here)

 

If you wont change icon for marker replace path to your image for 'image' var in google map options initialization

var image = 'assets/img/logo/logo-black.png'; // marker icon

 

 

 

The countdown is driven by the jQuery Countdown script

 

You can set you date by open assets/js/theme.js file and change it this code below

 

newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);

 

A note on Date - the JavaScript Date constructor expects the year, month, and day as parameters. However, the month ranges from 0 to 11. To make explicit what date is intended (does a month of 3 mean March or April?) I specify the month from 1 to 12 and manually subtract the 1. Thus the following denotes 25 December, 2016.

 

newYear = new Date(2016, 12-1, 25);

 

For more information check the documentation

Fonts:

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

 

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 2 - http://owlgraphic.com/owlcarousel/

animate.css - http://daneden.me/animate

Isotope - http://isotope.metafizzy.co/

wow.js - http://mynameismatthieu.com/WOW/

jquery.sticky.js - http://stickyjs.com/