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.
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
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; }
This template uses 8 Javascript files.
jQuery JavaScript Library
Twitter Bootstrap framework
Plugin for resizing background images.
Plugin for animating elements when scroll down. Paste below code in side body tag to activate plugin.
jQuery Plugin for one page nav.
jQuery Plugin count down.
jQuery Plugin displaying google map.
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(); });
The PSD folder contains two psd files.
Has 2 php files.
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";