HTML Structure

The entire structure:

<!DOCTYPE html>
<html lang="en-US" class="backgroundColor">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="http://webnovant.com">

        <title>Coming soon Template - Designed by webnovant.com</title>

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Lemon' rel='stylesheet' type='text/css'>

        <link rel="shortcut icon" href="images/favicon.jpg">

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" href="css/animate.css" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />

    </head>
    <body>

        <!-- Container -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    <div class="section clearfix">
                        <h1 class="logo animated fadeInDown" >Company Name</h1>

                        <!-- Cycle text -->
                        <div id="text_slider">
                            <div class="slide clearfix">
                                <!-- First text -->
                                <h2>We are working on the new website</h2>
                            </div>
                            <div class="slide clearfix">
                                <!-- Second text -->
                                <h2>See you soon!</h2>
                            </div>
                        </div>
                        <!-- End Cycle text -->

                    </div>

                    <!-- Countdown -->
                    <div class="section clearfix animated fadeIn" id="countdown">
                        <!-- Days -->
                        <div class="countdown_group">
                            <span class="countdown_value">{dnn}</span> 
                            <span class="countdown_help">{dl}</span>
                        </div>

                        <!-- Hours --> 
                        <div class="countdown_group">
                            <span class="countdown_value">{hnn}</span> 
                            <span class="countdown_help">{hl}</span>
                        </div> 

                        <!-- Minutes -->
                        <div class="countdown_group">
                            <span class="countdown_value">{mnn}</span> 
                            <span class="countdown_help">{ml}</span> 
                        </div>

                        <!-- Seconds -->
                        <div class="countdown_group">
                            <span class="countdown_value">{snn}</span> 
                            <span class="countdown_help">{sl}</span>
                        </div>
                    </div>
                    <!-- End Countdown -->

                    <div class="section clearfix animated fadeIn">
                        <p>Want to be notified when the website is ready?</p>
                        <form id="form_newsletter">
                            <div class="row">
                                <div class="col-md-6 col-md-offset-3">
                                    <div class="input-group input-group-lg">
                                        <input type="email" name="email" class="form-control" placeholder="Enter your email" >
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="submit"><i class="fa fa-check"></i> Notify me!</button>
                                        </span>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div id="form_newsletter_result"></div>
                                </div>
                            </div>
                        </form>

                    </div>

                    <div class="section clearfix animated fadeIn" id="contact">
                        <a href="#"><i class="fa fa-envelope-o"></i> email@ycompany.com</a>
                        <a href="#"><i class="fa fa-phone"></i> (+00) 123 4567</a>
                    </div>


                    <div class="section clearfix">
                        <a href="#" class="btn btn-transparent btn-facebook">
                            <i class="fa fa-facebook fa-fw"></i>
                        </a>
                        <!-- Put here more social media links -->
                    </div>

                    <div class="section clearfix">
                        <a href="#" class="open_aboutus btn btn-transparent animated fadeInUp">
                            More about Our Company
                        </a>
                    </div>

                </div>
            </div>
        </div>
        <!-- End Container -->

        <!-- Footer -->
        <!-- Sticky footer -->
        <div id="footer">
            <p>
                Designed by <a href="http://webnovant.com" title="Webnovant">webnovant.com</a>
            </p>
        </div>
        <!-- End Footer -->


        <!-- About Us -->
        <!-- Not visible on page load -->
        <div id="about_us">

            <h1>About us</h1>

            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <p>
                            Here the text about us
                        </p>
                    </div>
                </div>
            </div>

            <a href="#" class="close_aboutus btn btn-default">
                <i class="fa fa-times-circle"></i> Close
            </a>

        </div>
        <!-- End About Us -->

		<!-- JS -->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.plugin.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.countdown.min.js"></script>
        <script src="js/jquery.cycle.min.js"></script>
        <script src="js/scripts.js"></script>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
		
    </body>
</html>

Simplified structure:

<!DOCTYPE html>
<html lang="en-US" class="backgroundColor">
    <head>
        <!-- HERE META TAGS, CSS/JS DEPENDENCIES... -->
    </head>
    <body>
        <!-- Container -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--HERE MAIN CONTENT -->
                </div>
            </div>
        </div>
        <!-- End Container -->

        <!-- Footer -->
        <!-- Sticky footer -->
        <div id="footer">
            <!--HERE CONTENT FOOTER -->
        </div>
        <!-- End Footer -->


        <!-- About Us -->
        <!-- Not visible on page load -->
        <div id="about_us">
            <!--HERE CONTENT ABOUT US -->
        </div>
        <!-- End About Us -->

    </body>
</html>

File structure

soonweb/
    │
    ├── index.html //Select version
    ├── background_color.html
    ├── background_image.html //Just in full version
    ├── background_slider.html //Just in full version
    ├── background_video.html //Just in full version
    │
    ├── docs/ //Documentation folder
    │
    ├── css/
    │   ├── YTPlayer.css //Only for background video
    │   ├── animate.css
    │   ├── bootstrap.min.css
    │   ├── font-awesome.min.css
    │   ├── styles.css
    │   └── supersized.css //Only for background images slider
    │
    ├── fonts/
    │   └── otf, eot, svg, ttf and woff files (fontawesome)
    │
    ├── images/
    │   └── bg1.jpg, bg2.jpg, bg3.jpg, bg4.jpg, favicon.jpg
    │
    └── js/
        ├── bootstrap.min.js
        ├── html5shiv.js
        ├── jquery.countdown.min.js
        ├── jquery.cycle.min.js
        ├── jquery.min.js
        ├── jquery.plugin.js
        ├── jquery.mb.YTPlayer.js //Only for background video
        ├── respond.min.js
        ├── scripts.js
        └── supersized.min.js //Only for background images slider

CSS

Inside <head> tag load dependencies:

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />

Our custom file is css/styles.css.

Some style properties depend on attribute class of HTML tag:

Set background color on background_color.html

.backgroundColor body 
{
    background: #16a085; /* Our flat color for background */
}

Javascript

Before close <body> tag, load dependencies:

<!-- JS -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/jquery.cycle.min.js"></script>
<script src="js/scripts.js"></script>

Our custom file is js/scripts.js, where you can set all plugins you need:

$(function () {
    
    //Countdown
    $("#countdown").countdown({
        until: someDate, 
        padZeroes: true,
        layout: $("#countdown").html()
    });

    //Submit Newsletter form to PHP file
    $("#form_newsletter").submit(function(event) {

            //stop form from submitting normally
            event.preventDefault();

            //get some values from elements on the page:
            var $form = $( this );

            $("#form_newsletter button").attr("disabled", "disabled");

            //Send the data using post
            var posting = $.post( 'process_form.php', $form.serialize() );

            //Show result
            posting.done(function( data ) {

                    $("#form_newsletter button").removeAttr('disabled');

                    $("#form_newsletter_result").hide().html(data).fadeIn();
            });
    });

    //About us (Open / Close)
    $(".open_aboutus").click(function() {
        $("#about_us").removeClass('animated fadeOut').addClass('animated fadeIn').fadeIn();
    });

    $(".close_aboutus").click(function() {
        $("#about_us").removeClass('animated fadeIn').addClass('animated fadeOut').fadeOut();
    });
		
});

//Countdown for demo. Always add 18 days
var someDate = new Date();
var numberOfDaysToAdd = 18;
someDate.setDate(someDate.getDate() + numberOfDaysToAdd); 

//Countdown with real date
//var someDate = new Date("November 13, 2015 23:59:59");
//someDate.setDate(someDate.getDate());

PSD Files

No PSD files included

PHP code explanation

File /process_form.php receives and process Newsletter Form, sended via AJAX from file /js/scripts.js

It must be completed with PHP code to save subscriber in a database, or send a confirmation email to subscriber, for example.

<?php
//PROCESS NEWSLETTER FORM HERE

if(!isset($_POST) || !isset($_POST['email']))
{ 
    $msg = 'No data has been received.';
    echo '<div class="alert alert-danger"><p><i class="fa fa-exclamation-triangle"></i> '.$msg.'</p></div>';
    return false;
}

if($_POST['email'] == '')
{
    //ERROR: FIELD "email" EMPTY
    $msg = 'Please enter a valid email.';
    echo '<div class="alert alert-danger"><p><i class="fa fa-exclamation-triangle"></i> '.$msg.'</p></div>';
    return false;
}

///////////////////////////////////////////////
//Now yo can save subscriber in your database//
//And send confirmation email if necessary...//
///////////////////////////////////////////////

//Option 1) Send confirmation email. More info here: http://php.net/manual/es/function.mail.php

/*
mail("my_email@exemple.com","New subscriber","Email: ".$_POST['email']);
*/

//Option 2) Save subscriber on TXT file. More info here: http://www.w3schools.com/php/php_file_create.asp

/*
$myfile = fopen("subscribers.txt", "a") or die("Unable to open file!");
$txt = $_POST['email']."\n";
fwrite($myfile, $txt);
fclose($myfile);
*/

//And send success message:
$msg = 'Your email has been saved successfully.';
echo '<div class="alert alert-success"><p><i class="fa fa-check"></i> '.$msg.'</p></div>';
return true;

?>

Sources and Credits

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

License

Soonweb: Coming Soon Template by Webnovant is licensed under Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).