Homepage

Full Width Layout

Boxed Layout

Homepage variation

There are 8 types of Homepage variation in our bundle pack. You can use any one. Just rename the file name and write "index.html"

Topbar Variation

To change topbar color you need to add dark-bar or color-bar right after top-bar class.

Example: <div class="topbar dark-bar">

Example: <div class="topbar color-bar">

Homepage Color variation

In our package we arrange 12 color preset. You can use which one you like. For using one of these colors you have to add only one line code in head section.

<!-- COLORS -->

<link rel="stylesheet" href="assets/css/colors/red.css"> <!-- DEFAULT COLOR/ CURRENTLY USING -->

<!-- <link rel="stylesheet" href="assets/css/colors/jade.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/green.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/blue.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/beige.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/cyan.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/orange.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/peach.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/pink.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/purple.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/sky-blue.css"> -->

<!-- <link rel="stylesheet" href="assets/css/colors/yellow.css"> -->

 

Slider

To change the slider images and text just find tp-banner and then find li . From there you can change slider image and text.

Service Section

There are two types of service variation in our package. Service variations are:

Service

<div class="col-md-4 col-sm-6" data-animation="fadeIn" data-animation-delay="01"> <div class="service-box"> <div class="service-icon"> <i class="icon-diamond icon-large icon-effect"></i> </div> <div class="service-content"> <h4>Smooth to get started</h4> <p>Sed libero. Phasellus leo dolor, tempus non, tempus non, auctoret, hendreit quis, nisi. Nunc egestas, augue at pellentesque.</p> </div> </div> </div>

Service

<div class="col-md-3 col-sm-6 service-box service-center"> <div class="service-icon"> <i class="fa fa-code icon-medium icon-effect-2"></i> </div> <div class="service-content"> <h4>Clean Modern Code</h4> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor.</p> </div> </div>

Service

<div class="col-md-3 col-sm-6 service-box service-center"> <div class="service-icon"> <i class="fa fa-heart icon-large"></i> </div> <div class="service-content"> <h4>High Quality Theme</h4> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor.</p> </div> </div>

Service

<div class="col-md-4 col-sm-4 service-box service-icon-left-more"> <div class="service-icon"> <i class="fa fa-globe fa-4x"></i> </div> <div class="service-content"> <h4>Web Hosting</h4> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div>

Service

<div class="col-md-3 col-sm-6 service-box service-circle"> <div class="service-boxed"> <div class="service-icon"> <i class="fa fa-eye icon-effect-2"></i> </div> <div class="service-content"> <h4>Retina Display Ready</h4> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p> </div> </div> </div>

Service

<div class="col-md-3 col-sm-6 service-box service-center"> <div class="service-icon"> <i class="fa fa-heart icon-large"></i> </div> <div class="service-content"> <h4>High Quality Theme</h4> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor.</p> </div> </div>

service

<div class="col-md-3 col-sm-6 service-box service-center"> <div class="service-icon"> <i class="fa fa-magic icon-large-effect icon-effect-1"></i> </div> <div class="service-content"> <h4>High Quality Theme</h4> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor.</p> </div> </div>

Service

<div class="col-md-4 col-sm-6 service-box service-icon-left"> <div class="service-icon"> <i class="fa fa-magic icon-mini-effect icon-effect-2 gray-icon"></i> </div> <div class="service-content"> <h4>High Quality Theme</h4> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut <strong class="accent-color"> odit aut </strong>fugit, sed quia dolores.</p> </div> </div>

Team Member

Here is our Team Member code.

<div class="col-md-3 col-sm-6"> <div class="tema-member"> <div class="team-thumbnail"> <img src="assets/img/team/team-02.jpg" alt=""> <div class="overlay"> <div class="social-media"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a> </div> </div> </div> <div class="info"> <h4>Darrell S.Allen</h4> <p>Software Enginner</p> </div> </div> </div>

Contact form configuration:

open form-process.php file from assets->php folder and add your own email address (line 35) You’re Done!

Map

In the contact page you can change your location map. For this you have to change latitude & longitude

In contact.html you will find data-position-latitude="30.044300" and you can change the value

and also you will find data-position-longitude="31.235700" and you can change the value.

Thank You

---

Once again, thank you so much for purchasing this theme. I'd be glad to help you if you have any questions relating to this theme. If you have a more general question relating to the themes, feel free to ask on our forum http://graygrids.com/support