To customize this template you need to have basic Bootstrap knowledge, you can find Bootstrap documentation over here http://getbootstrap.com/
The basic page is index.html
Here is the general structure
Hello,
I'am Tom Smith
Recent Works
bootstrap.min.css
Bootstrap base css file. You can find Bootstrap CSS documentation over here http://getbootstrap.com/css
font-awesome.min.css
Base styles for FontAwesome icon fonts.
magnific-popup.css
CSS for Magnific Popup.
style.css
Common css styles for this template.
responsive.css
Responsive css styles for this template.
stylesheets contain Table of content for easy navigation, for instance style.css:
/* Wrapper Styles Starts */
#wrapper {
width: 100%;
}
#wrapper > .container-fluid > .row {
margin-left: 0;
margin-right: 0;
}
/* Navigation Styles Starts */
.navbar-default {
border: none;
margin-left: -6px;
}
.navbar-default,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background: none;
}
/* Welcome Text Styles */
.main-head {
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 3px solid #fff;
}
/* Quotes Styles Starts */
.quotes {
margin: 50px 0;
padding: 0;
border: none;
}
/* Recent Works Styles Starts */
.recent-works {
margin-bottom: 50px;
}
/* About Page Styles Starts */
.content-area {
margin: 20px 0 50px;
}
.about-img {
margin-top: 20px;
margin-bottom: 20px;
border: 4px solid #fff;
}
/* Skills Set Progress Bar Styles Starts */
.skillsbar {
margin-top: 50px;
}
.skillsbar h2 {
margin: 2px 0 0 0;
text-transform: uppercase;
}
.skillsbar .progress {
background-color: #1a1a1a;
padding: 2px;
height: 26px;
}
.skillsbar .progress-bar-danger {
background-color: #a3272b;
}
/* Services List Styles Starts */
.services-list {
text-align: center;
}
.services-list h4 {
text-transform: uppercase;
}
.services-list span.fa {
padding-top: 30px;
font-size: 42px;
}
/* Works Page Styles Starts */
ul#works-filter {
margin: 0 0 20px;
}
ul#works-filter li {
padding-top: 15px;
padding-bottom: 15px;
}
/* Social Media Links Styles Starts */
.sm-links {
list-style: none;
margin: 20px 0;
padding: 0;
}
.sm-links li {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #fff;
}
/* Contact Info Bar Styles Starts */
.contact-info-bar {
padding-top: 35px;
padding-bottom: 35px;
background-color: #1a1a1a;
position: relative;
}
/* Request Quote Styles Starts */
#request-quote {
display: none;
position: relative;
}
.request-quote {
padding-top: 30px;
padding-bottom: 50px;
background-color: #262626;
}
This template uses 12 Javascript files.
jQuery JavaScript Library
Twitter Bootstrap framework
jQuery Plugin for equal column height.
jQuery Plugin for background image slideshow.
Plugin for filtering grid of items.
Light Box Plugin.
Displaying Google Map.
Has initialisation of many plugins here. Please follow comments so you can make changes easy.
(function($) {
"use strict";
// REMOVE # FROM URL
$('a[href="#"]').click( function(e) {
e.preventDefault();
});
// Equal Height
$(".item").matchHeight();
// Backstretch
$(".main-img").backstretch([
'images/main-img1.jpg',
'images/main-img2.jpg'
], {duration: 3000, fade: 750});
// Request Quote Slide Down
$("#quote-btn").click( function() {
$("#request-quote").slideToggle(function() {
if($("#request-quote").is(":visible")){
$("html, body").animate({
scrollTop: $(".contact-info-bar").offset().top
}, 1000);
}
});
});
//MAGNIFIC POPUP
$('#works-grid, .recent-works').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
}
});
// Works FILTERS
var $grid = $('#works-grid');
$grid.shuffle({
itemSelector: '.works-grid', // the selector for the items in the grid
speed: 500 // Transition/animation speed (milliseconds)
});
/* reshuffle when user clicks a filter item */
$('#works-filter li a').click(function (e) {
// set active class
$('#works-filter li a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName );
});
//AJAX CONTACT FORM
$(".request-quote-form").submit(function() {
var rd = this;
var url = "sendemail.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $(".request-quote-form").serialize(), // serializes the form's elements.
success: function(data)
{
//alert("Mail sent!"); // show response from the php script.
$(rd).prev().text(data.message).fadeIn().delay(3000).fadeOut();
}
});
return false; // avoid to execute the actual submit of the form.
});
// GOOGLE MAP
$(".map").height(250);
function initialize($) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(17.421306, 78.457553),
disableDefaultUI: true
};
var map = new google.maps.Map(document.querySelector('.map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
})(jQuery);
Has 1 php files.
sendemail.php
Go to line 14 you will see below code, please change it with your email id.
// Enter the email where you want to receive the notification when someone submit form $email_to = 'youremail@example.com';
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.