PROTO

Responsive Parallax Coming Soon Page

Coming Soon page built-up on Twitter Bootstrap v3.3.7

Table of Contents

  1. HTML Structure
  2. CSS Files
  3. JQuery Files
  4. PHP Code
  5. Sources & Credits
  6. Support

1. HTML Structure - top

PROTO is a responsive parallax coming soon page template built using HTML5 and Twitter Bootstrap framework v3.3.7

It is a well documented HTML5 template that can be customized easily.

The HTML page has the following sections:

  • Header Logo + text,
  • Countdown Timer
  • Progress bar
  • Working AJAX/PHP Subscribe form (MailChimp Ready)
  • Twitter Feed Slider
  • About Us section
  • Services section
  • Working AJAX/PHP Contact form
  • Social Icons

You can control the function of dynamic features by setting up few jQuery and PHP code variables.

2. CSS Files - top

CSS files have been placed inside the assets/css directory. The main CSS file is styles.css

3. jQuery Files - top

The assets/js/gg.variables.js file includes the parameters to setup the template features:

Have a looking on the foloowing parameters that you can set:

// set twitter username for tweets slider section
var twitter_username = 'gigagit';

// set tweets count
var tweets_count = 3;

// set countdown timer date-time
// DD MMMM YYYY, hh:mm:ss 
// 30 June 2013, 11:00:00'
var countdown_timer = '25 March 2015, 19:00:00';

// set progress status for your site
var progress_status = '70%';

// set any one of the following features to true/false
var show_slider = false;
var show_fixedbg = false;
var isHtmlVideo = false;
var isYoutubeVideo = false;

// add/remove the background slider images here
var slides_array = [
    { image: 'assets/slides/1.jpg' },
    { image: 'assets/slides/2.jpg' },
    { image: 'assets/slides/3.jpg' }
];

// set the youtube video URL
var youtube_video_url = 'http://www.youtube.com/watch?v=gQaDcIB43hI';
var html_video_url = 'http://vjs.zencdn.net/v/oceans.mp4';
var video_fallback_image = 'assets/images/1.jpg';

// show/hide the style switcher
var show_styleswitcher = true;

4. PHP Code - top

The php/variables.php file includes the parameters to setup the contact form, subscriber form and twitter feed feature:

Have a looking on the foloowing parameters that you can setup:

// contact form mail to field
$MailTo = 'your email address';

// MailChimp API Key
$MailChimpApiKey = 'MAILCHIMP API KEY';

// MailChimp Listing Id
$MailChimpListId = 'MAILCHIMP LISTING ID';

// Your Twitter App Consumer Key
$twitter_consumer_key = 'TWITTER CONSUMER KEY';

// Your Twitter App Consumer Secret
$twitter_consumer_secret = 'TWITTER CONSUMER SECRET';

// Your Twitter App Access Token
$twitter_user_token = 'TWITTER APP ACCESS TOKEN';

// Your Twitter App Access Token Secret
$twitter_user_secret = 'TWITTER ACCESS TOKEN SECRET';

You can generate your Twitter API keys from your twitter account here https://dev.twitter.com/

5. Sources & Credits - top

Special thanks to the developers and designers of following open-source jQuery plugins, Icons and Images which helped to make this template look awesome.

jQuery Plugins

  • http://www.ianlunn.co.uk/plugins/jquery-parallax/
  • http://areaaperta.com/nicescroll
  • https://github.com/kswedberg/jquery-smooth-scroll
  • http://detectmobilebrowser.com/
  • http://www.buildinternet.com/project/supersized
  • http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html
  • http://dfcb.github.io/BigVideo.js/
  • https://github.com/seaofclouds/tweet
  • https://github.com/woothemes/FlexSlider
  • https://github.com/jzaefferer/jquery-validation
  • https://github.com/matthieua/WOW
  • http://risq.github.io/jquery-advanced-news-ticker/

Icons

  • http://fortawesome.github.io/Font-Awesome/

Images

  • http://unsplash.com/
  • https://www.flickr.com/photos/colinlogan/

6. Support - top

Send us your message here ;)