- assets/css (Theme Styles) - assets/css/fonts/ (Theme Fonts) - assets/css/images/ (Theme plugins IMGS) - assets/css/plugins/ (Theme plugins CSS) - assets/ico (Favicon) - assets/img (Theme Images) - assets/js (Theme Scripts) - assets/js/plugins (Theme plugins JS)
<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
- assets/
- css/
- css/plugin/ - (Theme Plugins CSS)
- style.css - (Main CSS file)
<!-- JS Global --> <script src="assets/js/plugin/jquery-2.2.4.min.js"></script> <script src="assets/js/plugin/bootstrap.min.js"></script> <script src="assets/js/plugin/bootstrap-select.min.js"></script> <script src="assets/js/plugin/owl.carousel.min.js"></script> <script src="assets/js/plugin/jquery.plugin.min.js"></script> <script src="assets/js/plugin/jquery.countdown.js"></script> <script src="assets/js/plugin/jquery.subscribe-better.min.js"></script> <!-- Custom JS --> <script src="assets/js/theme.js"></script>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes&subset=latin-ext');
body {
font-family: 'Roboto', sans-serif;
font-weight: normal;
background-color: #ffffff;
color: #525252;
-webkit-font-kerning: auto;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: visible !important;
overflow-x: hidden;
}
.sort-range .value {
border: 1px solid #e5e5e4;
border-radius: 7px;
bottom: -25px;
color: #999999;
display: block;
font-family: "Roboto",sans-serif;
font-size: 9px;
font-weight: 900;
left: -5px;
line-height: 9px;
padding: 2px 8px;
position: absolute;
text-align: center;
width: 40px;
}
and
.font-2, p {
font-family: Helvetica-normal,Arial,sans-serif;
}
.prod-tag, .fontbold-2 {
font-family: Helvetica-bold,Arial,sans-serif;
font-weight: 900;
}
.font-3, .title-sec {font-family: 'Great Vibes', cursive;}
@font-face {
font-family: Helvetica-bold,Arial,sans-serif;
src: url(fonts/helvetica-bold.ttf);
font-weight: 900;
}
@font-face {
font-family: Helvetica-normal,Arial,sans-serif;
src: url(fonts/helvetica-normal.ttf);
font-weight: 400;
}
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.
<div class="main-logo">
<a href="index.html"> <strong>naturix <img src="assets/img/icons/logo-icon.png" /> </strong> <span class="light-font">farmfood</span> </a>
<span class="medium-font">ORGANIC STORE</span>
</div>
<div class="main-logo">
<a href="index.html"><strong> ... LOGO NAME PART 1 ... <img src="assets/img/icons/logo-icon.png" /> </strong> <span class="light-font"> ... LOGO NAME PART 2 ... </span> </a>
<span class="medium-font"> ... LOGO SLOGAN ... </span>
</div>
or remove text and paste your image logo
<div class="main-logo">
<a href="index.html"><img src="assets/img/icons/ ... PATH TO YOUR IMAGE LOGO ... " /></a>
<span class="medium-font">ORGANIC STORE</span>
</div>
<!-- Testimonials Starts-->
<section class="">
<div class="container">
<div class="testimonials">
<div id="testimonial-slider" class="testimonial-slider nav-1">
<div class="item">
<div class="testi-wrap">
<div class="testi-img">
<a href="#"> <img src="assets/img/extra/testi-1.jpg" alt="" /> </a>
</div>
<div class="testi-caption">
<p> <i>“Lorem ipsum dolor sit amet, consectetuer adipiscing elitsed the diam nonummy nibh euismod tincidunt.”</i> </p>
<a href="#"> <i class="fa fa-user clr-txt"></i> <strong> LUIS GARCHIA </strong> </a>
</div>
</div>
</div>
<div class="item">
...
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Ends -->
$("#testimonial-slider").owlCarousel({
dots: false,
loop: true,
autoplay: false,
autoplayHoverPause: true,
smartSpeed: 100,
nav: true,
margin: 30,
navText: [
"<i class='fa fa-long-arrow-left'></i>",
"<i class='fa fa-long-arrow-right'></i>"
],
responsive: {
0: {items: 1},
1500: {items: 2},
1200: {items: 2},
992: {items: 2},
600: {items: 2}
}
});
You can find more documentation here http://owlgraphic.com/owlcarousel/
<script src="https://maps.googleapis.com/maps/api/js?&callback=initMap" async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
To set your google marker coordinate open assets/js/theme.js and find code below. Then set your coordinates for each marker and remove unnecessary markers.
/*------------------- Map -------------------*/
var map;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 38.897957, lng: -77.036560} // google map coordinates
});
var image = 'assets/img/icons/map.png'; // marker icon
var beachMarker = new google.maps.Marker({
position: {lat: 38.897957, lng: -77.036560}, // marker position
map: map,
icon: image
});
}
The countdown is driven by the jQuery Countdown script
You can set you date by open assets/js/theme.js file and finde this code below and set your date for
/*------ Countdown --------*/
if ($().countdown) {
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({since: new Date(2017, 1 - 1, 5)});
}
The following code set countdown to 25 December, 2017.
$('#defaultCountdown').countdown({since: new Date(2017, 12-1, 25)});
/*------ Countdown --------*/
if ($().countdown) {
$('#defaultCountdown').countdown({since: new Date(2017, 12-1, 25)});
}
For more information click here http://hilios.github.io/jQuery.countdown/documentation.html