Every section is divided with a "section" element, and has an ID. For example, home has "#home" as the section ID. This is used by the anchor links from the menu, where the "href" has the "#home" value. As long as the href value and the ID of the section match, the link will smoothly go to that section.
The home section is built using the Flexslider plugin. If you wish to extend the slider, please review the documentation on the Flexslider website.
Each slide has a ".slide" class. But it also contains a ".dark" or ".light" class. Use these classes according to the lightness of the background image.
The background images of the slider have two classes, ".fs" and ".fo". The ".fs" class needs to be there so the image will go fullscreen. The ".fo" class is used for the parallax effect.
As you might have noticed, the services section has a ".grey" class, which gives the entire section a light grey background.
A service consists of a column structure (see Bootstrap docs) and a ".service" class. Inside, you can find a another row with an icon and info.
The icons used for the services, as well as all the other icons used, are powered by FontAwesome. You can read all about FontAwesome here
The about section is actually plain simple. It consists of two columns and is filled with dummy content by default. You can edit this section the way you want it. It can even be a whole story!
Each team member starts with a '.member' element, which you can put inside a Bootstrap column. A member element looks like this:
<div class='member'> <div class='img'> <div class='social'> <div class='icons'> <a class='icon fa fa-twitter' href='#'></a> <a class='icon fa fa-facebook' href='#'></a> <a class='icon fa fa-instagram' href='#'></a> </div> </div> <img alt='' src='images/team1.jpg'> </div> <div class='info'> <h4>Jane Doe</h4> <h5>Graphic Designer</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div>
To link the social icons, simply replace the 'href' value with the social (profile) page URL.
The skills progress bars can be shown with the following code:
<div class='progress'> <div aria-valuemax='100' aria-valuemin='0' aria-valuenow='40' class='progress-bar progress-bar-success' role='progresssbar'> <span class='sr-only'> 40% Complete (success) </span> </div> </div>
Here, look for the 'aria-valuenow' value, which is 40. The bar will jump to 40% width after it's brought inside the viewport.
The projects portfolio starts with a container, which has the '.folio' class.
To activate a lightbox link, simply give the link item the class '.item', like here:
<a class='item' href='link/to/full/image'> <img src="link/to/thumbnail/image" /> <div class='caption'> <h4>Caption title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </a>
Make sure it links to a full image, using the 'href' value. The caption content will also be used with the lightbox.
This last section will cover the contact form and installation.
First of all; make sure you run your website on a PHP-enabled server. When all the template files are uploaded to the webserver, the PHP contactform works out-of-the-box. The only thing you will need to change is the receivers' e-mail address.
To do that, find the following line inside the email.php file from the php directory of your template folder:
$to = 'email@example.com'; //Your e-mail address
Found it? Great! Now the only thing you need to do is change the address between the single quotes. And you're done!