# Soonweb Template Documentation

Created: 06 February 2015
Last modified: 10 January 2018
By: Sergi Ruiz - webnovant.com - info@webnovant.com
Updates & Download

# 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/YTPlayer.css" />
            <link rel="stylesheet" type="text/css" href="css/supersized.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/supersized.min.js"></script>
            <script src="js/jquery.mb.YTPlayer.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>

Differences between versions:

background_color.html

    <html lang="en-US" class="backgroundColor">

background_image.html

    <html lang="en-US" class="backgroundImage">

background_slider.html

    <html lang="en-US" class="backgroundSlider">

background_video.html

    <html lang="en-US" class="backgroundVideo">

This class affects some properties of the css/styles.css and js/scripts.js files.

# 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/YTPlayer.css" /> <!-- Only for background video -->
    <link rel="stylesheet" type="text/css" href="css/supersized.css" /> <!-- Only for background images slider -->
    <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 */
    }

Set background image on background_image.html

    .backgroundImage body
    {
        /* Full background image */
        background: url('../images/bg1.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

Set background gradient on footer. Only this versions: background_image.html, background_slider.html, background_video.html

    .backgroundImage #footer,
    .backgroundSlider #footer,
    .backgroundVideo #footer
    {
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */

    }

# 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/supersized.min.js"></script> <!-- Only for background images slider -->
    <script src="js/jquery.cycle.min.js"></script>
    <script src="js/jquery.mb.YTPlayer.js"></script> <!-- Only for background video -->
    <script src="js/scripts.js"></script>

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

    $(function () {

        //Background images slider
        $('.backgroundSlider #backgroundImages').supersized({
            slide_interval : 4000, // Length between transitions
            transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed : 900, // Speed of transition
            slide_links : false, // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides : [
                {image : 'images/bg1.jpg', title : '', thumb : '', url : ''},
                {image : 'images/bg2.jpg', title : '', thumb : '', url : ''},
                {image : 'images/bg3.jpg', title : '', thumb : '', url : ''},
                {image : 'images/bg4.jpg', title : '', thumb : '', url : ''},
            ]
        });

        //Background video
        //See all setting options here: http://pupunzi.com/
        var autoplay = false;
        if($(window).width() >= 992)
        {
            autoplay = true;
            $("#bgndVideo").mb_YTPlayer();
        }

        //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.

- jQuery - By jQuery Foundation, Inc - jquery.org - Licensed under MIT
- Animate.css - By Daniel Eden - daneden.me/animate - Licensed under MIT
- Bootstrap - getbootstrap.com - Licensed under MIT
- Font Awesome - By @davegandy - fontawesome.io - License
- Supersized - Fullscreen Slideshow jQuery Plugin - Author: Sam Dunn - Company : One Mighty Roar (www.onemightyroar.com) - www.buildinternet.com/project/supersized - Licensed under MIT / GPL
- Countdown for jQuery - By Keith Wood - keith-wood.name/countdown.html - Licensed under MIT
- jquery.plugin.js - Simple JavaScript Inheritance - By John Resig - ejohn.org - Licensed under MIT
- jQuery Cycle2 - By M. Alsup - jquery.malsup.com/cycle2 - Licences: MIT/GPL
- jquery.mb.YTPlayer.js - By Open Lab s.r.l. - pupunzi.com - Licensed under MIT/GPL
- Images bg1.jpg, bg2.jpg, bg3.jpg, bg4.jpg from unsplash.com - Licensed under CC0 - Public Domain Dedication
- Video by Justin Ng - Original video here: youtube.com/watch?v=UNs7TkFvK-4 - Creative Commons License

# License

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