“Saturn Designers” Documentation by “Sainath Chillapuram” v1.0
“Saturn Designers” - shared on weidea.net
Created: 22/05/2014
By: Sainath Chillapuram
Email: sainath.chillapuram@hotmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form or mail me at sainath.chillapuram@hotmail.com. Thanks so much!
Table of Contents
- Introduction
- HTML Structure
- CSS Files and Structure
- JavaScript
- PSD Files
- PHP Files
- Sources and Credits
A) Introduction - top
Saturn Designers Coming Soon Page Template built on Bootstrap version 3.1.1. Template available in 7 color's.
You can find all 7 color's html files in html-files folder.
- Blue
- Carmine
- Green
- Jungle Green
- Navy Blue
- Purple
- Tenne
B) HTML Structure - top
The basic page is index.html
Here is the general structure
The template uses Bootstrap framework, you can find Bootstrap documentation over here http://getbootstrap.com/css
C) CSS Files and Structure - top
bootstrap.min.css
Bootstrap base css file.
font-awesome.min.css
Base styles for FontAwesome icon fonts.
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:
/* Header Style Starts */
#header{
}
.header-overlay{
background:rgba(0, 0, 0, 0.6);
padding:30px 0;
}
.logo{
text-align:center;
padding:0 0 30px;
}
#header .main-head h2, #header .main-head h4{
font-weight:300;
}
#header .main-head h4{
line-height:40px;
}
/* Countdown Style Starts */
#countdown-area{
background:rgba(11, 11, 11, 0.8);
padding:40px 0;
margin:0 0 40px;
}
ul.countdown{
list-style:none;
margin:0;
padding:0;
display:block;
text-align:center;
}
ul.countdown li{
display:inline-block;
margin:0 20px;
padding:0;
}
ul.countdown li span{
width:100px;
height:100px;
display:block;
font-size:48px;
font-weight:300;
line-height:100px;
border:2px solid #fff;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
ul.countdown li.seperator{
font-size:80px;
line-height:70px;
vertical-align:top;
}
ul.countdown li p{
color:#fff;
font-size:24px;
text-transform:capitalize;
margin:0;
padding:15px 0 0 0;
}
/* Scroll Down Styles Starts */
.top-arrow{
text-align:center;
font-size:90px;
padding:20px 0;
}
/* Main Heading Style Starts */
.main-head{
text-align:center;
padding:0 0 40px;
}
.main-head h2, .main-head p{
}
.main-head h2{
padding:0 0 20px;
}
.main-head p{
font-size:24px;
line-height:36px;
}
/* Subcribe Styles Starts */
#subcribe{
background:#1ba0e1;
padding:60px 0;
}
#subscribe-form{
text-align:center;
}
#subcribe .form-group{
}
#subcribe .form-control{
background:#f3f3f3;
font-size:18px;
font-weight:400;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 5px 5px 5px #ccc;
-moz-box-shadow:inset 5px 5px 5px #ccc;
box-shadow:inset 5px 5px 5px #ccc;
}
#subcribe .form-control:focus{
border-color:#f0f0f0;
}
#subcribe input.form-control{
height:50px;
line-height:50px !important;
padding:3px 20px 0;
}
#subcribe .btn-default{
background:#292d2c;
color:#fff;
font-size:24px;
text-transform:uppercase;
padding:7px 30px;
border:none;
outline:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-transition: all 0.5s ease;
-webkit-transition-delay: 0.45s;
-moz-transition: all 0.5s ease;
-moz-transition-delay: 0.45s;
-o-transition: all 0.5s ease;
-o-transition-delay: 0.45s;
}
#subcribe .btn-default:hover{
background:#121413;
}
D) JavaScript - top
This template uses 8 Javascript files.
jquery-1.11.1.min.js
jQuery JavaScript Library
bootstrap.min.js
Twitter Bootstrap framework
jquery.backstretch.min.js
Plugin for resizing background images.
scrollReveal.js
Plugin for animating elements when scroll down. Paste below code in side body tag to activate plugin.
singlepagenav.jquery.js
jQuery Plugin for one page nav.
jquery.downCount.js
jQuery Plugin count down.
jquery.gmap.min.js
jQuery Plugin displaying google map.
custom.js
Has initialisation of many plugins here. Please follow comments so you can make changes easy.
$(function() {
"use strict";
// PreLoader
$(window).load(function() {
$(".loader").fadeOut(400);
});
// Backstretchs
$("#header").backstretch("images/bg1.jpg");
$("#services").backstretch("images/bg2.jpg");
// Countdown
$('.countdown').downCount({
date: '09/09/2014 12:00:00',
offset: +10
});
// Google Map
function initialize($) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(17.421306, 78.457553),
disableDefaultUI: false
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
//Scroll Down
$('#top-arrow').singlePageNav();
});
E) PSD Files - top
The PSD folder contains two psd files.
F) PHP Files - top
Has 2 php files.
- subscribe.php
- contact.php
subscribe.php
Go to line 9 you will see below code, please change it with your email id.
// Enter the email where you want to receive the notification when someone subscribes $recipient = "sainath.chillapuram@hotmail.com";
contact.php
Go to line 10 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 $recipient = "sainath.chillapuram@hotmail.com";
G) Sources and Credits - top
JavaScripts
Fonts
Images
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. If you have a more general question relating to the themes just drop me a mail me at sainath.chillapuram@hotmail.com, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Sainath Chillapuram