Table of Contents
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/