Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Flattern Under Construction is HTML template so there's no really "installation" required just unzip the main file you've downloaded from themeforest and after unziping you have your all template ready to be used. Inside the main item file you will get 5 variations and 1 elements file.

Here is the general structure :

<!-- Header -->
  <section id="header" class="wet-asphalt">

  	<div class="top-header container">
  	  <div class="row">
  	    <div class="span6">
		  <a class="logo" href="#">Flattern</a>
	  	</div>

	  	<div class="span6">
	  	  <a class="pull-right" href="mailto:#">hello@flattern.com</a>
	  	</div>
  	 </div>
  	</div> <!--/ .top-header -->

  	<div class="banner container">
  	  <div class="row">
  	    <div class="span7 left-marketing">

  		  <h1 class="uppercase txt-yellow">Something big is coming</h1>
  		  <p class="lead">Our apps will be in private beta soon, distributing invites first come, first serve. Sign up before:</p>
  		  <!-- #Countdown -->
  		  <ul id="countdown">
  		  <li>
  		    <span class="days">00</span>
			<p class="timeDays">days</p>
		  </li>
		  <li>
		    <span class="hours">00</span>
			<p class="timeHours">hours</p>
		  </li>
		  <li>
		    <span class="minutes">00</span>
			<p class="timeMinutes">minutes</p>
		  </li>
		  <li>
		    <span class="seconds">00</span>
		    <p class="timeSeconds">seconds</p>
		  </li>
		  </ul>
		  <!--/ #Countdown -->

  	    </div>
  		<div class="span5">
  		  <a href="#" class="hidden-section-link">
  		  <span class="rollover-play" style="margin-top:145px; margin-left:92px;"></span>
  		  <img src="img/iphone-mockup.png" alt="Mockup" />
  		  </a>
  		</div>
  		</div>
  </div><!--/ .banner -->

</section>
<!--/ #Header -->

I personally called this theme semi-framework-template because I want to make this for faster and easier template customization. There are some CSS Files used in this theme. And here are the short explanations about them :

1. bootstrap.css - The Twitter Bootstrap Framework, do not edit this file.
2. bootstrap-responsive.css - The Twitter Bootstrap Framework for Responsive layout, do not edit this file.
3. flattern.css - The presets style of the whole layout(just like the bootstrap.css), I think you don't need to edit this file
4. flattern-responsive.css - The responsive style for flattern.css
5. style.css - This is the main CSS file that controls almost everything on the layouts
6. style-responsive.css - The resposive style for style.css
7. flexslider.css - The style for jQuery Flexslider plugin Please note that this theme has a bit custom flexslider style on the header of each layout
8. prettyPhoto.css - The style for jQuery Pretty Photo lightbox plugin

Here is the presets of the template (Flattern.css):

/**********************************************************************************

	Project Name: Presets Style for Flattern Landing Page
	Project Description: Flattern is a flat design landing page for your apps, product, or portfolio
	Author: xWisnux
	Author URI: http://www.worksofwisnu.com
	Version: 1.0.0

**********************************************************************************/
/* General */

body, list, paragraph, headings,.uppercase, .lead, .centered, .title, .tagline, section, .jumbotron, hr, .large-desktop-visible

/* Text Color Variations */

.txt-white,.txt-dark-purple,.txt-turqoise, .txt-bright-pink, .txt-bluish, .txt-wet-asphalt, .txt-dark-sky, .txt-dark-night

/* Background Color Variations */

.whitey, .black, .dark-purple, .turqoise, .bright-pink, .bluish, .wet-asphalt, .dark-sky, .dark-night, .light-yellow

/* Link Style */

a, a:hover, a.turqoise:hover, a.dark-purple:hover, a.bright-pink:hover, a.bluish:hover, a.wet-asphalt:hover, a.dark-sky:hover, a.dark-night:hover, .rounded

/* Top Header or Nav Customized*/

.top-header a, a.logo, .navbar-inverse .navbar-inner, .navbar-inverse .brand, .navbar-inverse .nav > li > a, .flattern-nav .nav, .flattern-nav .nav > li, .flattern-nav .nav > li > a, .flattern-nav .nav > li.current > a, .flattern-nav .nav > li > a > span.nav-icon > img, .flattern-nav .nav > li > a:hover > span.nav-icon > img, .fixed

/* Buttons Style */

.button, .button-small, .button-large, .button:hover, .button-small:hover, .button-large:hover, .button-small, .button, .button-large, .store-button, .cta, .two-side-cta, .left-side-cta, .right-side-cta, .two-side-cta a:hover

/* Scroll to Top Button */

.toTop, .toTop a

/* Input Style */

textarea, input .uneditable-input, select

/* Progress Bar */

.progress, .small-progress, .large-progress, .progress .bar, .small-progress .bar, .large-progress .bar

/* Blockquote */

blockquote, blockquote.turqoise-blockquote, blockquote.bluish-blockquote, blockquote.bright-pink-blockquote, blockquote.dark-purple-blockquote

/* Dropcaps */

.dropcap

/* Highlight */

.highlight

/* Accordion */

a.accordion-toggle, .accordion-heading a.accordion-toggle h5, .accordion-inner

/* Toggle */

.toggle-group, .toggle-heading .toggle-button, a.toggle-button, .toggle-inner

/* Tabs */

.nav.nav-tabs, .nav-tabs > li > a, .nav-pills > li > a , .nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .tab-content

/* Tabs Left */

.tabs-left .nav-tabs, .tabs-left .nav-tabs > li > a, .tabs-left .nav-tabs > li > a:hover, .tabs-left .nav-tabs > li > a:focus,.tabs-left .nav-tabs > .active > a, .tabs-left .nav-tabs > .active > a:hover, .tabs-left .nav-tabs > .active > a:focus, .tabs-left .tab-content

/* Alerts */

.alert .alert-icon, .alert.alert-success .alert-icon, .alert.alert-info .alert-icon, .alert.alert-error .alert-icon

/* Pricing Plans Section
-------------------------- */
.pricing-table, .pricing-head p span.superscript, .pricing-content, ul.pricing-content li.pricing-table-button a, .bluish-pricing

The seventh file contains all of the specific stylings for the page. The file is separated into sections using:

/**********************************************************************************

	Project Name: Layout Style for Flattern Landing Page
	Project Description: Flattern is a flat design landing page for your apps, product, or portfolio
	Author: xWisnux
	Author URI: http://www.worksofwisnu.com
	Version: 1.0.0

**********************************************************************************/
@font-face

/* Header Section
-------------------------------*/

#header, #header .left-marketing

/* Countdown Timer
------------------------------ */

ul#countdown, ul#countdown li, ul#countdown li span, ul#countdown li p.timeDays, ul#countdown li p.timeHours, ul#countdown li p.timeMinutes, ul#countdown li p.timeSeconds

/* Content Section
------------------------- */

#content h4.tagline

/* Tab Content */

.tab-content-wrapper, .tab-content, .nav-tabs, .nav-tabs > li > a

/* Features */

.feature-container, .feature-icon, .feature-desc

/* Screenshots */

.ss-container, .ss-container img

/* Location Section */

#location, #location .map, .contact-info, ul.contact-info-icon, .contact-info-icon .phone, .contact-info-icon .email

/* Contact Form Section */

.contact-form-container .row-fluid, .contact-form-container input,.contact-form-container textarea, input[type="submit"].send-button, .form-error-message

/* Subscribe Form Section
-------------------------------*/

.subscribe-content-wrapper, .subscribe, input.subscribe-input, .subscribe-icon-submit, .subscribe-submit, .subscribe.subscribe-open, .no-js .subscribe, .subscribe-text

/* Footer Section
-------------------------------*/
#footer, .footer-icons, .social-icons a, .copyright p, .copyright a

4.1. Text Color Variations

4.2. Background Color Variations

4.3. Buttons

And so on, you just need to add the background class to define the button color. And add rounded class to make it rounded. It's easy,isn't it?

4.4 Progress Bar

Basic

Degault progress bar

<div class="progress small-progress">
  <div class="bar" style="width: 40%;">Small Progress Bar</div>
</div>

<div class="progress large-progress">
  <div class="bar" style="width: 60%;">Large Progress Bar</div>
</div>

Additional Colros

<div class="progress small-progress">
  <div class="bar dark-purple" style="width: 70%;">Web Design 70%</div>
</div>

<div class="progress small-progress">
  <div class="bar turqoise" style="width: 100%;">Logo and Branding 100%</div>
</div>

<div class="progress small-progress">
  <div class="bar bluish" style="width: 60%;">PHP and MySQL 60%</div>
</div>

<div class="progress small-progress">
  <div class="bar bright-pink" style="width: 85%;">HTML5 and CSS3 85%</div>
</div>

4.5. Blockquote

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

<blockquote class="turqoise-blockquote">
  <p>This is class="turqoise-blockquote"</p>
</blockquote>

<blockquote class="bluish-blockquote">
  <p>This is class="bluish-blockquote"</p>
</blockquote>

<blockquote class="bright-pink-blockquote">
  <p>This is class="bright-pink-blockquote"</p>
</blockquote>

<blockquote class="dark-purple-blockquote">
  <p>This is class="dark-purple-blockquote"</p>
</blockquote>;

4.6. Dropcap & Highlight

<p><span class="dropcap">C</span> urabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, <span class="highlight"> vestibulum at eros</span> . .... </p>

<p><span class="dropcap turqoise">A</span>enean eu leo quam. <span class="highlight turqoise">Pellentesque </span> ornare sem lacinia quam venenatis vestibulum. ....</p>

<p><span class="dropcap bluish">D</span>uis mollis, est non commodo luctus, nisi erat porttitor ligula, <span class="highlight bluish">eget lacinia</span> odio sem nec elit. ....</p>

<p><span class="dropcap bright-pink">C</span>um sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante <span class="highlight bright-pink">venenatis dapibus</span>....</p>

4.7. Accordion

<div class="accordion" id="accordion">
<div class="accordion-group">
  <div class="accordion-heading">
  	<a class="accordion-toggle bright-pink" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
	  <h5>Accordion-toggle with class="bright-pink"</h5>
	</a>
  </div>

  <div id="collapseOne" class="accordion-body collapse in">
  	<div class="accordion-inner">
	  <p>Your content.</p>
	</div>
  </div>
</div> <!--/ .accordion-group 1 -->

<div class="accordion-group">
  <div class="accordion-heading">
  	<a class="accordion-toggle turqoise" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
  	  <h5>This with class="turqoise"</h5>
  	</a>
</div>

  <div id="collapseTwo" class="accordion-body collapse">
  	<div class="accordion-inner">
	  <p>Your content.</p>
	</div>
  </div>
</div> <!--/ .accordion-group 2 -->

...
..
.

</div> <!--/ #Accordion -->

4.8. Toggle

<div class="toggle-group">
  <div class="toggle-heading">
	<a class="toggle-button" href="#"><h5>Toggle-1</h5></a>
  </div>
  <div class="toggle-inner collapse">
  	<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
  </div>
</div> <!--/ .toggle-group 1 -->

<div class="toggle-group">
  <div class="toggle-heading">
  	<a class="toggle-button bluish" href="#"><h5>Toggle-2</h5></a>
  </div>
  <div class="toggle-inner collapse">
  	<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div> <!--/ .toggle-group 2 -->
 ...
 ..

In order to use Toggle element, you need some line of JS:

$('.toggle-button').on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var $collapse = $this.closest('.toggle-group').find('.toggle-inner');
  $collapse.collapse('toggle');
});

4.9. Tabs

<div class="tabbable">
  <ul class="nav nav-tabs">
  	<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
	<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
	<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
  </ul> <!--/ .nav-tabs -->

  <div class="tab-content">

  	<div class="tab-pane active" id="tab1">
	  <p>Your Content.</p>
	 </div>

	<div class="tab-pane" id="tab2">
	  <p>Your Content.</p>
	</div>
...
..
  </div> <!--/ .tab-content -->
</div> <!--/ .tabbable -->

4.10. Left Tabs

For Left Tabs basically you just need to put class tabs-left on div class="tabbable"

<div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
  	<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
	<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
	<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
  </ul> <!--/ .nav-tabs -->

  <div class="tab-content">

  	<div class="tab-pane active" id="tab1">
	  <p>Your Content.</p>
	 </div>

	<div class="tab-pane" id="tab2">
	  <p>Your Content.</p>
	</div>
...
..
  </div> <!--/ .tab-content -->
</div> <!--/ .tabbable -->

4.11. Alerts

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <span class="alert-icon"><i class="icon-bullhorn icon-white"></i></span>
  <strong>Warning!</strong> Your message goes here.
</div>

<div class="alert alert-success">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <span class="alert-icon"><i class="icon-thumbs-up icon-white"></i></span>
  <strong>Success!</strong> Your message goes here.
</div>

<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <span class="alert-icon"><i class="icon-info-sign icon-white"></i></span>
  <strong>Info!</strong> Your message goes here.
</div>

<div class="alert alert-error">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <span class="alert-icon"><i class="icon-fire icon-white"></i></span>
  <strong>Error!</strong> Your message goes here.
</div>

4.11. Pricing Table

<div class="pricing-table bluish-pricing">
  <div class="pricing-head txt-white">
  	<h4>Bronze</h4>
	<p><span class="superscript">$</span>8</p>
  </div> <!--/ .pricing-head -->

  <ul class="pricing-content txt-bluish">
	<li>Content 1</li>
	<li>Content 2</li>
	<li>Content 3</li>
	<li>Content ~</li>
	<li class="pricing-table-button"><a href="#">Buy Now</a></li>
  </ul>
</div> <!--/ .pricing-table -->

This theme uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.

1. jQuery
2. bootstrap.min.js - Minified version of Bootstrap jQuery plugins
3. classie.js - jQuery class helper function
4. modernizr.custom.js - JavaScript library that detects HTML5 and CSS3 features in the user’s browser
5. validation.js - jQuery Form Validation
6. Gmap3 - jQuery Google Map
7. jQuery Easing
8. Flexslider
9. prettyPhoto
10. jCounter Script v0.1.4 (beta)

All those jQuery plugins controled under Flattern.js, except the classie.js(take a look at the javascript code before the closing of body tags).

There are 3 PHP files included in this theme, they are dateandtime.php, subscribe.php, and contact.php. Subscribe and contact need validation.js file in order to be worked

Date and Time

Below is the explanation that I found from the authors page.

"jCounter uses the dateandtime.php file that needs to be on a PHP-supported server, to retrieve an accurate current time to display exact countdowns with timezone support.

By default, jCounter assumes the dateandtime.php file is on the same server in the web root directory (where the main index page is usually located), if you placed it somewhere else, just specify the location when calling jCounter with serverDateSource: “http://my-domain.com/path/to/dateandtime.php”

If jCounter can’t find the dateandtime.php or if something simply goes wrong, it will use the client-side time as fallback. To avoid this, when first installing/running jCounter, use it with debugLog: true and check your Console Log for errors."

Subscribe

subscribe.php will make a list of subscriber email into a text file called list.txt, this file will placed in your server folder. Below is the example code to make a subscribe form :

<div id="subscribe" class="subscribe">

<form id="subscribe_form" action="subscribe.php" method="post">
  <input id="subscribe_email" class="subscribe-input" placeholder="Enter your email address..." type="email" value="" name="search" id="search">
  <input id="subscribe_btn" class="subscribe-submit" type="submit" value="">
  <span class="subscribe-icon-submit"></span>
 </form>
</div> <!--/ .subscribe -->

<h5 class="subscribe-text txt-white">Click the mailplane button on the right and see... </h5>

<!-- Alert Message for Subscribe Form -->
<div class="row-fluid">
  <div class="span12 subscribe-alert">

    <div class="alert alert-error form-error-message" id="subscribe_error">
	  <button type="button" class="close" data-dismiss="alert">×</button>
	  <span class="alert-icon"><i class="icon-fire icon-white"></i></span>
	  <strong>Error!</strong> Please enter your valid email address.
	</div>

	<div class="alert alert-success form-error-message" id="subscribe_success">
	  <button type="button" class="close" data-dismiss="alert">×</button>
	  <span class="alert-icon"><i class="icon-thumbs-up icon-white"></i></span>
	  <strong>Success!</strong>You've been subscribed.
	</div>

	<div class="alert form-error-message" id="subscribe_fail">
	  <button type="button" class="close" data-dismiss="alert">×</button>
	  <span class="alert-icon"><i class="icon-bullhorn icon-white"></i></span>
	  <strong>Sorry!</strong> An error occured this time subscribing your email address.
	</div>
</div>
</div>
<!-- END Alert Message for Subscribe Form -->

Contact

The contact.php is a php file to send a message from the contact form. Open the file and see this line of codes

$subject = $_REQUEST['subject'] . ' Flattern Under Construction Page : Demo'; // Subject of your email
$to = 'your_email@address.here';  //Recipient's or Your E-mail

You can change Subject of the first line into anything which you want. And please change the address your_email@address.here into your email address

I've included 1 psd file with this theme. The PSD file is well documented on the groups and layered

I've used the following images, icons or other files as listed.

1. iPhone and Macbook mockup
2. Flat Icons
3. Social Icons
4. Icon Fonts (Linecons and Entypo)
5. Atmosphere Apps background