### “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

1. Introduction
2. HTML Structure
3. CSS Files and Structure
4. JavaScript
5. PSD Files
6. PHP Files
7. 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.

1. Blue
2. Carmine
3. Green
4. Jungle Green
5. Navy Blue
6. Purple
7. 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.

1. subscribe.php
2. 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

- jQuery
- Bootstrap 3
- Backstretch
- DownCount
- jQuery gMap
- scrollReveal
- singlePageNav

##### Fonts

- Yanone Kaffeesatz

##### Images

- http://www.imcreator.com/images/caroline-says
- http://www.imcreator.com/free/business/movie-set

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

Go To Table of Contents