Valera is a one page HTML site template built with latest twitter bootstrap 3 and has responsive layout . This template coming with single custom color : 'orange' which stored in file 'color/default.css' in folder skin
We've separated the custom color (orange) in a single file : default.css to make you easy to understand and customize or overwrite with your own color/style
Since Valera template built with bootstrap so you can go to http://getbootstrap.com/ to learn more about Bootstrap.
Since it's HTML CSS based you can edit all text, content with HTML editor like notepad++ or anykind else. Quite easy for people with basic HTML-CSS knowledge :)
Valera is based on Twitter Bootstrap v3.1 grid system, so there are some additional files included. Please check out : http://getbootstrap.com/.
Valera template contains following files & directories:
HTML files:
index-slide.html --> home template with slider
index.html --> home template with youtube background video
css folder
Here you have css files used in this template, bootstrap files and Valera files. In order to corectly customise this template you should edit only style.css file. In this folder you can also find minimised bootstrap files, do not touch them unless you are advanced in html/css.
js folder
Here you can find all additional files used in Valera. Jquery and JavaScript files... I`ll refer to some of them later in this documentation. You propably should not edit most of those files :)
img folder
Here are all images used in this template stored.
fonts folder
contains halving fonts that coming from bootstrap & stroke icon fonts
font-awesome folder
contains all necessary files of Font-awesome icon font
Valera is equiped with cool preloader with css3 loading animation. After the page loads elements on tha homepage fade in an order. You can change the timing in custom.js file (see 'JS' part below).
HTML:
<!-- page loader --> <div id="page-loader"> <div class="loader"> <div class="spinner"> <div class="spinner-container con1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container con2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container con3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> </div> </div> <!-- /page loader -->
CSS:
/* loader */
#page-loader {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
z-index: 9999;
}
#page-loader img {
margin: 100px auto;
display: block;
}
.loader {
text-align: center;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 40px;
}
.loader { text-align: center; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 40px; }
.loader span { display: block; font: 14px "Roboto", sans-serif; text-transform: uppercase; margin-bottom: 20px; }
.spinner { margin: 0 auto; width: 40px; height: 40px; position: relative; }
.con1 > div, .con2 > div, .con3 > div { width: 7px; height: 7px; background-color: #191919; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.spinner .spinner-container { position: absolute; width: 100%; height: 100%; }
.con2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.con3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); }
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.con2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.con3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.con1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.con2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.con3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.con1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.con2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.con3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.con1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.con2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.con3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }
@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); }
40% { -webkit-transform: scale(1); } }
@keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0); -webkit-transform: scale(0); }
40% { transform: scale(1); -webkit-transform: scale(1); } }
JS:
$(window).load(function() {
$(".loader").delay(300).fadeOut();
$("#page-loader").delay(500).fadeOut("slow");
});
If you want to change the logo, the best way is to replace the logo-dark.png file in img folder.
You can also change the path for your logo. In index.html file code corresponding to logo looks like this:
<div class="site-logo"> <a href="index.html"><img src="img/logo-dark.png" alt="" /></a> </div>
The default color is 'orange'
#FE7A66
We've separated template color in 'default.css' file (in folder color) so you don't need to touch another file to change default orange color.
We use Youtube background script ( jquery.mb.YTPlayer.js ) from http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/
You can put any youtube video as element or page background. For example you can see index.html where we add youtube video as top/intro background
<!-- Section: home video -->
<section id="intro" class="home-video text-light">
<div class="home-video-wrapper">
<div class="homevideo-container">
<div id="P1" class="bg-player" style="display:block; margin: auto; background: rgba(0,0,0,0.5)" data-property="{videoURL:'http://youtu.be/8ShyrAhp8JQ',containment:'.homevideo-container', quality: 'hd720', showControls: false, autoPlay:true, mute:true, startAt:0, opacity:1}"></div>
</div>
<div class="overlay">
<div class="text-center video-caption">
<div class="wow bounceInDown" data-wow-offset="0" data-wow-delay="0.8s">
<h1 class="big-heading font-light"><span id="js-rotating">We are valera, Awesome Bootstrap theme, Get better appearance, Craft from pixel </span></h1>
</div>
<div class="wow bounceInUp" data-wow-offset="0" data-wow-delay="1s">
<div class="margintop-30">
<a href="#about" class="btn btn-skin" id="btn-scroll">Start here</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Section: intro -->
Here's the main part of HTML markup above which handle video background:
<div id="P1" class="bg-player" style="display:block; margin: auto; background: rgba(0,0,0,0.5)" data-property="{videoURL:'http://youtu.be/8ShyrAhp8JQ',containment:'.homevideo-container', quality: 'hd720', showControls: false, autoPlay:true, mute:true, startAt:0, opacity:1}"></div>
To change current video with your own youtube video, then put your youtube URL to change existing one on following line:
videoURL:'http://youtu.be/8ShyrAhp8JQ
Parallax function uses 'jquery stellar script' from http://markdalgleish.com/projects/stellar.js
It's easy when you want to create new parallax section, just like a regular section.. give an unique ID, set background image to the ID and add 'Stellar background ratio'
see example below:
on HTML
<!-- Section: parallax 1 --> <section id="parallax1" class="home-section parallax text-light" data-stellar-background-ratio="0.5"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-center"> <h2 class="big-heading highlight-dark wow bounceInDown" data-wow-delay="0.2s">We start from pixel perfect pattern</h2> </div> </div> </div> </div> </section>
To add your own map location, please open 'gmap.js' in folder js
Go to line 15-16 to add your own map langitude - latitude
first line for map location view & the 2nd for marker position
var folsom = new google.maps.LatLng(37.782393, -122.400618); var markerposition = new google.maps.LatLng(37.782393, -122.400618);
Squad uses animation effect from http://mynameismatthieu.com/WOW/
From the HTML code you can see some elements using Wow effect, example
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s"> <div class="section-heading text-center"> <h2 class="h-bold">Services</h2> <div class="divider-header"></div> <p>Lorem ipsum dolor sit amet, agam perfecto sensibus usu at duo ut iriure.</p> </div> </div>
You can follow tutorial from http://mynameismatthieu.com/WOW/docs.html to add effect on any element
Valera has 170 stroke icon set (from pixeden) http://www.pixeden.com/icon-fonts/stroke-7-icon-font-set
Specific documentation for stroke icons can be found at http://themes-pixeden.com/font-demos/7-stroke/documentation.html
Once again, thank you so much for purchasing this template. As we said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but we'll do the best to assist. If you have a more question regarding Valera template, you can drop us message through our profile contact form https://bootstrapmade.com/vendor/iwebstudio/