First, you will need an HTML editor such as Notepad ++ (free). Download it to your computer, install it and open the index.html file with it.
Layana is based on Bootstrap's grid:
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
Each of the row should be wrapper within a container
. Our template is divided in sections so each of this container is also wrapped in section
. Here is an example for a section with half columns:
<section id="about"> <div class="container"> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> </div> </div> </div> </div>
For equal columns (as in after "about" section), wrap the col-md-4
columns with equal-heights w-middle
. Example:
<div class="equal-heights w-middle"> <div class="col-md-4 bg-primary"> Content here </div> <div class="col-md-4 bg-dark"> Content here </div> <div class="col-md-4 bg-primary"> Content here </div> </div>
In our template we also wrap the content with a box
class for padding.
The intro slider as well as testimonial slider are based on Bootstrap's carousel. Please, view the detailed documentation here.
You can assign to each class an animation. View all supported animations here. You must add wow
class before any animation, example: wow bounceInLeft
. Full example:
<div class="col-md-6 wow bounceInLeft"> My animated text here </div>
You can use any of the icons listed here
The contact form is functional, but you will have to replace the current e-mail address (wowthemesnet@gmail.com) with your own. Open contact.php file and find the line 23.Don't forget to include the necessary script (contact.js) at the bottom of the document as it already is in index.html
© Bootstrap HTML Template by WowThemes.net