LOGITRANS HTML Documentation by Themes Awesome v1.0
LOGITRANS - Logistic and Transportation HTML Template
Created: 2 October 2015
By: Themes Awesome
Support: Ask support access HERE
Thank you for purchasing LOGITRANS HTML. If you have any questions that aren't covered in the documentation, then please send me a PM and I'll be happy to help. Thanks again!
Table of Contents
LOGITRANS HTML - top
LOGITRANS
LOGITRANS is
Tips
Use Firebug or Chrome Developer Tools.
Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
Getting an error message? Someone might have seen it too, try a google search for a quick fix.
Explore the live demo for pages ideas and sample code.
Files Structure
- css (Template CSS) - fonts (All Fonts & Icons) - img (All Images) - js (Template JS) - views (JS to run in specific pages. I.E: Home or Contact Us)
Html Structure
The template is based on Bootstrap Framework - http://twitter.github.com/bootstrap/
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
Create a .row and add the appropriate number of .span* columns.
HTML Markup
<div class="row"> <div class="span12"> Level 1 column <div class="row"> <div class="span6">Level 2</div> <div class="span6">Level 2</div> </div> </div> </div>
If you need more information, please visit this site: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
Head Script (Default)
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Google Fonts ============================================= --> <link href='https://fonts.googleapis.com/css?family=Lato:400,900,700,300' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <!-- Stylesheets ============================================= --> <link rel="stylesheet" href="css/plugin.css" type="text/css" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <link rel="stylesheet" href="css/responsive.css" type="text/css" /> <!-- JavaScripts ============================================= --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/formcalculations.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <!-- JavaScripts ============================================= --> <script type="text/javascript" src="js/jquery.js"></script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>Logitrans | Logistics & Transportation HTML Themes</title> </head>
Header Markup
<!-- HEADER
============================================= -->
<header id="header" class="clearfix">
<div class="site-header">
<div class="container">
<div class="row">
<div class="top-header clearfix">
<div class="logo col-md-4">
<a href="index.html">
<img src="img/logo.png" alt="" />
</a>
</div>
<div class="info col-md-8">
<ul>
<li>
<i class="fa fa-clock-o"></i>
<p>
<span class="heading">Opening Hours</span>
<span>Mon - Sat: 09.00 - 17.00</span>
</p>
</li>
<li>
<i class="fa fa-phone"></i>
<p>
<span class="heading">Call Us</span>
<span>(064) 234 54876</span>
</p>
</li>
<li class="last">
<i class="fa fa-envelope"></i>
<p>
<span class="heading">Email Us</span>
<span>logitrans@domain.com</span>
</p>
</li>
</ul>
</div>
<div class="slide-buttons">
<button id="slide-buttons" class="slide-button icon icon-navicon"></button>
</div>
</div>
<div class="navigation">
<div class="main-menu">
<ul class="menu">
<li class="has-sub"><a href="index.html">Home</a>
<ul>
<li><a href="index.html">Header Style 1</a></li>
<li><a href="header-style-2.html">Header Style 2</a></li>
</ul>
</li>
<li><a href="about-us.html">About Us</a></li>
<li class="has-sub"><a href="services.html">Services</a>
<ul>
<li><a href="single-services.html">Overland Network</a></li>
<li><a href="single-services.html">Ocean Netwok</a></li>
<li><a href="single-services.html">Air Freight</a></li>
<li><a href="single-services.html">Cargo</a></li>
<li><a href="single-services.html">Storage</a></li>
<li class="last"><a href="single-services.html">Warehousing</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="right-section">
<div class="search">
<i class="fa fa-search"></i>
</div>
<div class="quote-link">
<a href="contact.html">Request a Quote</a>
</div>
<div class="search-input">
<input type="text" name="s" placeholder="Type some text in here..." class="untouched">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Mobile
============================================= -->
<nav id="c-menu--slide-right" class="c-menu c-menu--slide-right">
<button class="c-menu__close icon icon-close"></button>
<div class="search-input">
<input type="text" name="s" placeholder="Type some text in here..." class="untouched">
<button><i class="fa fa-search"></i></button>
</div>
<ul class="slide-menu-items">
<li class="has-sub"><a href="index.html">Home</a>
<ul>
<li><a href="index.html">Header Style 1</a></li>
<li><a href="header-style-2.html">Header Style 2</a></li>
</ul>
</li>
<li><a href="about-us.html">About Us</a></li>
<li class="has-sub"><a href="services.html">Services</a>
<ul>
<li><a href="single-services.html">Overland Network</a></li>
<li><a href="single-services.html">Ocean Netwok</a></li>
<li><a href="single-services.html">Air Freight</a></li>
<li><a href="single-services.html">Cargo</a></li>
<li><a href="single-services.html">Storage</a></li>
<li><a href="single-services.html">Warehousing</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="info">
<ul>
<li>
<p>
<span class="heading">Opening Hours</span>
<span>Mon - Sat: 09.00 - 17.00</span>
</p>
</li>
<li>
<p>
<span class="heading">Call Us</span>
<span>(064) 234 54876</span>
</p>
</li>
<li class="last">
<p>
<span class="heading">Email Us</span>
<span>logitrans@domain.com</span>
</p>
</li>
</ul>
</div>
</nav>
<div id="slide-overlay" class="slide-overlay"></div>
<!-- Menu Mobile End -->
</header>
<!-- HEADER END -->
Template
LOGITRANS have 13 template
- Home
- Home 2
- About Us
- Blog
- Single Post
- Service
- Overland Network
- Ocean Network
- Air Freight
- Cargo
- Storage
- Warehouse
- Contact
Footer Script Markup
<!-- FOOTER START
============================================= -->
<footer id="footer" class="wrapper clearfix">
<div class="container">
<div class="row">
<div class="footer-wrap row">
<!-- WIDGET FOOTER 1 START
============================================= -->
<div class="widget-footer col-md-3 wow fadeIn" data-wow-delay="0.3s">
<div class="short-desc">
<div class="logo-footer">
<img src="img/logo-footer.png" alt="" />
</div>
<p>Phasellus et nisl tellus. Etiam facilisis eu nisi scelerisque faucibus. Proin semper suscipit magna, nec imperdiet lacus semper vitae.
Sed hendrerit enim non justo posuere placerat eget purus mauris.</p>
<p>Etiam facilisis eu nisi scelerisque fabus. Proin semper suscipit magna, nec pediet lacus semper.</p>
</div>
</div>
<!-- WIDGET FOOTER 1 END -->
<!-- WIDGET FOOTER 2 START
============================================= -->
<div class="widget-footer col-md-3 wow fadeIn" data-wow-delay="0.6s">
<div class="recent-post">
<h4 class="title">Recent Post</h4>
<div class="footer-content">
<div class="post-item">
<a href="single-post.html">
<div class="post-thumb">
<img src="img/content/recent-post-thumb-1.jpg" alt="" />
<div class="overlay"></div>
</div>
</a>
<div class="post-content">
<a href="single-post.html">
<h4>Your Blog Title Here</h4>
</a>
<p>Phasellus et nisl tellus. Etiam facilisis eu nisi scelerisque faucibus...</p>
<div class="meta">
<span class="date">02 August, 2015</span>
</div>
</div>
</div>
<div class="post-item">
<a href="single-post.html">
<div class="post-thumb">
<img src="img/content/recent-post-thumb-2.jpg" alt="" />
<div class="overlay"></div>
</div>
</a>
<div class="post-content">
<a href="single-post.html">
<h4>Your Blog Title Here</h4>
</a>
<p>Phasellus et nisl tellus. Etiam facilisis eu nisi scelerisque faucibus...</p>
<div class="meta">
<span class="date">02 August, 2015</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- WIDGET FOOTER 2 END -->
<!-- WIDGET FOOTER 3 START
============================================= -->
<div class="widget-footer col-md-3 wow fadeIn" data-wow-delay="0.9s">
<div class="contact-footer">
<h4 class="title">Contact Us</h4>
<div class="footer-content">
<div class="contact-section">
<h4>Our Office Address</h4>
<p>Boulevard des Capucines</p>
<p>356, Coffee Street</p>
<p>Paris, France</p>
<p>Telephone : + 1 555 356 876</p>
<p>Email : info@themesawesome.com</p>
</div>
<div class="contact-section">
<h4>Our Storage Address</h4>
<p>Boulevard des Capucines</p>
<p>356, Coffee Street</p>
<p>Paris, France</p>
</div>
</div>
</div>
</div>
<!-- WIDGET FOOTER 3 END -->
<!-- WIDGET FOOTER 4 START
============================================= -->
<div class="widget-footer col-md-3 wow fadeIn" data-wow-delay="1.2s">
<div class="buy-now">
<h4 class="title">Buy Now !</h4>
<div class="footer-content">
<p>Phasellus et nisl tellus. Etiam facilisis eu nisi scelerisque faucibus. Proin semper suscipit magna,
nec imperdiet lacus semper vitae. Sed hendrerit enim non justo posuere placerat eget purus mauris.</p>
<a href="#" class="button-normal white">Buy Now</a>
</div>
</div>
</div>
<!-- WIDGET FOOTER 4 END -->
</div>
</div>
</div>
<!-- COPYRIGHT START
============================================= -->
<div class="copyright text-center wow fadeIn" data-wow-delay="1s">
<div class="container">
<div class="social-icon">
<ul>
<li><a href="http://facebook.com"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://twitter.com"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://tumblr.com"><i class="fa fa-tumblr"></i></a></li>
<li><a href="http://vimeo.com"><i class="fa fa-vimeo"></i></a></li>
<li><a href="http://linkedin.com"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://dribbble.com"><i class="fa fa-dribbble"></i></a></li>
<li><a href="http://instagram.com"><i class="fa fa-instagram"></i></a></li>
<li><a href="http://rssfeed.com"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
<p>Copyright 2015 - 2016. All Rights Reserved. Powered by Themesawesome</p>
</div>
</div>
<!-- COPYRIGHT END -->
</footer>
<!-- FOOTER END -->
CSS Structure
The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:
- style.css - (Generic styles, resets & normalization) - bootstrap.min.css - (Responsive grid styles) - plugin.css - (This stylesheet contains any js plug-in.) - responsive.css ( for media query)
Javascript
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/
The initialization of the elements, libs and features is made by the file theme.js, in the JS folder.
Take a look at the "build" function to see what it does.
Customization & Styles
Fonts
To change the embedded font, please take a look in the head part of the website and you will find this tag:
We use oswald font family in LOGITRANS. You can check the font at root > css > fonts
To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code. Or install it manually with convert the download zipped font to fontsquirel.com
Slider
Flexslider is the slider you'll find in the content.
Flexslider is a simple slideshow script but with lots of options. You can find more documentation here http://www.woothemes.com/flexslider/
We included in the template CSS/JS a few customizations in order to show it's variations.
The variations of the slider is defined by the CSS Class and in the "data-plugin-options" attribute, which extends the default plugin options.
You can add the following classes:
- flexslider-simple
- flexslider-top-title
- flexslider.unstyled
HTML Markup: Home Slider
<!-- SLIDER START
============================================= -->
<section id="slider" class="home-slider clearfix">
<div class="slider-wrapper">
<div class="flexslider clearfix">
<ul class="slides">
<li class="slide-item clearfix" style="background-image: url(img/slider/slide1.jpg);">
<div class="flex-content">
<div class="container">
<div class="row">
<div class="caption-wrap">
<div class="caption wow fadeInUp" data-wow-delay="1s">
<h1>Passengers Transport</h1>
</div>
<div class="caption wow fadeIn" data-wow-delay="2s">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="caption wow fadeInUp" data-wow-delay="2.5s">
<a href="#" class="button-normal">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="slide-item clearfix" style="background-image: url(img/slider/slide2.jpg);">
<div class="flex-content">
<div class="container">
<div class="row">
<div class="caption-wrap">
<div class="caption wow fadeInUp" data-wow-delay="3s">
<h1>We Deliver Your Goods Fast</h1>
</div>
<div class="caption wow fadeIn" data-wow-delay="4s">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="caption wow fadeInUp" data-wow-delay="4.5s">
<a href="#" class="button-normal">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- SLIDER END -->
JS: Home Slider
$('.flexslider').flexslider({
animation: "fade"
});
var windowWidth = $(window).width();
function sliderEqualHeight() {
var slideHeight = $('#slider.home-slider ul li.slide-item');
var slideWrap = $('#slider.home-slider .caption-wrap').height();
slideHeight.css('min-height', slideWrap + 450);
}
function logisticsEqualHeight() {
if( windowWidth > 789 ) {
var postLeft = $('.services-calculator-wrap .form-section form');
var postRight = $('.services-calculator-wrap').height();
postLeft.css('height', postRight);
}
}
function pagetitleEqualHeight() {
var titleHeight = $('.page-title');
var titleWrap = $('.page-title .title-wrap').height();
titleHeight.css('min-height', titleWrap + 300);
}
window.onload = function() {
logisticsEqualHeight()
sliderEqualHeight()
pagetitleEqualHeight();
};
window.onresize = function() {
logisticsEqualHeight()
sliderEqualHeight()
pagetitleEqualHeight();
};
var siteHeaderHeight = $('.site-header').height(),
backgroundSlider = $('.home-slider'),
pageTitle = $('.page-title');
backgroundSlider.css('margin-top', -siteHeaderHeight);
pageTitle.css('margin-top', -siteHeaderHeight);
HTML Markup: Service Carousel
<!-- SERVICES START
============================================= -->
<div class="services with-bg">
<div class="container">
<div class="row">
<!-- Service Quote -->
<div class="email-quote clearfix">
<h4>Request a Quote</h4>
<form method="post">
<input class="col-md-6" type="text" placeholder="Your Email" name="search_query" value="">
<div class="category_filter col-md-6">
<select name="cate" id="cate">
<option value="">Services</option>
<option>Overland Network</option>
<option>Ocean Network</option>
<option>Air Freight</option>
<option>Cargo</option>
<option>Storage</option>
<option>Warehouse</option>
</select>
<button type="submit" class="button-normal"><span>send now</span></button>
</div>
</form>
</div>
<!-- Service Quote -->
</div>
</div>
<div class="section-title text-center wow fadeIn">
<h2>Our Services</h2>
</div>
<div class="services-wrap-carousel">
<div class="item">
<div class="services-content">
<div class="services-image" style="background-image: url(img/content/services-item-1.jpg);"></div>
<div class="services-text">
<h3 class="title">Overland Network</h3>
<p>As a leader in global air freight forwarding, OIA Global excels in providing tailored transportation</p>
<a href="#" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
<div class="overlay"></div>
</div>
</div>
<div class="item">
<div class="services-content">
<div class="services-image" style="background-image: url(img/content/services-item-2.jpg);"></div>
<div class="services-text">
<h3 class="title">Ocean Network</h3>
<p>As a leader in global air freight forwarding, OIA Global excels in providing tailored transportation</p>
<a href="#" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
<div class="overlay"></div>
</div>
</div>
<div class="item">
<div class="services-content">
<div class="services-image" style="background-image: url(img/content/services-item-3.jpg);"></div>
<div class="services-text">
<h3 class="title">Air Freight</h3>
<p>As a leader in global air freight forwarding, OIA Global excels in providing tailored transportation</p>
<a href="#" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
<div class="overlay"></div>
</div>
</div>
<div class="item">
<div class="services-content">
<div class="services-image" style="background-image: url(img/content/services-item-4.jpg);"></div>
<div class="services-text">
<h3 class="title">Cargo</h3>
<p>As a leader in global air freight forwarding, OIA Global excels in providing tailored transportation</p>
<a href="#" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
<div class="overlay"></div>
</div>
</div>
<div class="item">
<div class="services-content">
<div class="services-image" style="background-image: url(img/content/services-item-5.jpg);"></div>
<div class="services-text">
<h3 class="title">Storage</h3>
<p>As a leader in global air freight forwarding, OIA Global excels in providing tailored transportation</p>
<a href="#" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
<div class="overlay"></div>
</div>
</div>
<div class="item">
<div class="services-content">
<div class="services-image" style="background-image: url(img/content/services-item-6.jpg);"></div>
<div class="services-text">
<h3 class="title">Warehousing</h3>
<p>As a leader in global air freight forwarding, OIA Global excels in providing tailored transportation</p>
<a href="#" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
<div class="overlay"></div>
</div>
</div>
</div>
</div>
<!-- SERVICES END -->
JS: Service Carousel
$('.services-wrap-carousel').owlCarousel({
stagePadding: 50,
loop:true,
margin:10,
nav:true,
dots:false,
navText: [
"",
""
],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
},
1200:{
items:2
}
}
})
HTML Markup: Latest Post Carousel
<!-- LATEST NEWS START
============================================= -->
<div class="latest-post wrapper bg-color">
<div class="container">
<div class="row">
<div class="section-title text-center wow fadeIn">
<h2>Latest News</h2>
</div>
<div class="post-wrap wow fadeIn" data-wow-delay="0.5s">
<div class="post-item">
<div class="post-thumb">
<a href="single-post.html">
<img src="img/content/latest-post-thumb-1.jpg" alt="" />
<div class="overlay"></div>
</a>
</div>
<div class="post-content">
<div class="date">
<span>20</span>
<span>May</span>
</div>
<div class="content-wrap">
<h4>Transformtive Donation For Main Philanthropy</h4>
<div class="meta">
<span class="author"><i class="fa fa-user"></i> mochreza</span>
<span class="views"><i class="fa fa-eye"></i> 95 Views</span>
<span class="comments last"><i class="fa fa-comment"></i> 2 Comments</span>
</div>
<p class="excerpt">Etiamt vehicula elit.Vivauedaus rutrum mi ut aliquam In hac habitasse
platore dictum will Integer sagittis neque in porta semes.</p>
<a href="single-post.html" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="post-item">
<div class="post-thumb">
<a href="single-post.html">
<img src="img/content/latest-post-thumb-2.jpg" alt="" />
<div class="overlay"></div>
</a>
</div>
<div class="post-content">
<div class="date">
<span>26</span>
<span>May</span>
</div>
<div class="content-wrap">
<h4>Corporate Meeting Turns Into a Photo Shooting</h4>
<div class="meta">
<span class="author"><i class="fa fa-user"></i> mochreza</span>
<span class="views"><i class="fa fa-eye"></i> 95 Views</span>
<span class="comments last"><i class="fa fa-comment"></i> 2 Comments</span>
</div>
<p class="excerpt">Etiamt vehicula elit.Vivauedaus rutrum mi ut aliquam In hac habitasse
platore dictum will Integer sagittis neque in porta semes.</p>
<a href="single-post.html" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="post-item">
<div class="post-thumb">
<a href="single-post.html">
<img src="img/content/latest-post-thumb-3.jpg" alt="" />
<div class="overlay"></div>
</a>
</div>
<div class="post-content">
<div class="date">
<span>30</span>
<span>May</span>
</div>
<div class="content-wrap">
<h4>Statistics and Analysis The Key To Success</h4>
<div class="meta">
<span class="author"><i class="fa fa-user"></i> mochreza</span>
<span class="views"><i class="fa fa-eye"></i> 95 Views</span>
<span class="comments last"><i class="fa fa-comment"></i> 2 Comments</span>
</div>
<p class="excerpt">Etiamt vehicula elit.Vivauedaus rutrum mi ut aliquam In hac habitasse
platore dictum will Integer sagittis neque in porta semes.</p>
<a href="single-post.html" class="button-normal with-icon">
Read More
<i class="icon icon-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LATEST NEWS END -->
JS: Latest Post Carousel
$('.post-wrap, .team-wrap').owlCarousel({
loop:true,
margin:30,
nav:true,
navText: [
"",
""
],
dots:false,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:3
}
}
})
HTML Markup: Counter Number
<!-- COUNTER NUMBER START
============================================= -->
<div class="counter-section wrapper">
<div class="container">
<div class="row">
<div class="counter-wrap row">
<div class="counter-item col-md-15 wow fadeInUp" data-wow-delay="0.2s">
<h2 class="counter">1,273</h2>
<div class="counter-details">
<p class="heading">Delivered Packages</p>
<p>The core values are the guiding principles that dictate behavior and action.</p>
</div>
</div>
<div class="counter-item col-md-15 wow fadeInUp" data-wow-delay="0.4s">
<h2 class="counter">473,754</h2>
<div class="counter-details">
<p class="heading">KM Per Year</p>
<p>The core values are the guiding principles that dictate behavior and action.</p>
</div>
</div>
<div class="counter-item col-md-15 wow fadeInUp" data-wow-delay="0.6s">
<h2 class="counter">25</h2>
<div class="counter-details">
<p class="heading">Years of Experience</p>
<p>The core values are the guiding principles that dictate behavior and action.</p>
</div>
</div>
<div class="counter-item col-md-15 wow fadeInUp" data-wow-delay="0.8s">
<h2 class="counter">719</h2>
<div class="counter-details">
<p class="heading">Happy Clients</p>
<p>The core values are the guiding principles that dictate behavior and action.</p>
</div>
</div>
<div class="counter-item col-md-15 wow fadeInUp" data-wow-delay="1s">
<h2 class="counter">4,234</h2>
<div class="counter-details">
<p class="heading">Tons of Goods</p>
<p>The core values are the guiding principles that dictate behavior and action.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- COUNTER NUMBER END -->
JS: Counter Number
$('.counter').counterUp({
delay: 20,
time: 3000
});
Responsive
The template supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions.
Here's what's included:
Label: Large display
Layout width: 1200px and up
Column width: 70px
Gutter width: 30px
Label: Default
Layout width: 980px and up
Column width: 60px
Gutter width: 20px
Label: Portrait tablets
Layout width: 768px and above
Column width: 42px
Gutter width: 20px
Label: Phones to tablets
Layout width: 767px and below
Column width: Fluid columns, no fixed widths
Label: Phones
Layout width: 480px and below
Column width: Fluid columns, no fixed widths
If you need more information, please visit this site: http://twitter.github.com/bootstrap/scaffolding.html#responsive
Source & Credits
The images included in preview are for demonstration purposes and should always be replaced with your own work.
- Resources Used:
- Modernizr
- Respond
- WOW
- Flexslider (GPLv2 License)
- Owl Carousel 2
- Bootstrap v2.3.2 (Apache License v2.0)
- Waypoints MIT license and GPL license
- CounterUp GPL v2 License
- Slide Menu Right
Once again, thank you for purchasing this theme. Customer satisfaction is our #1 priority, which is why we always endeavour to provide the best service we can. We’re only an email away if you ever need us!
Themes Awesome Team