## 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 ;)