Coming Soon Template Documentation.

“Coming Soon Template” Documentation v1.0

Introduction
HTML Structure
CSS Files and Structure
JavaScript
PSD Files
PHP Files

Sources and Credits

A) Introduction - top

Saturnix 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 = "yourEmail@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 = "yourEmail@hotmail.com";