article:
Website: HTML5 Design for Photo Site (HTML5, CSS3, JS, PSD)
article:
UI: This Looks Great UI Kit (PSD)

Website: TimeLog - Coming Soon Website Template (HTML5, CSS3, JS)

Advertisement

When someone lands on your Coming soon page, they should get an idea of what your website will be about and why it might be useful to them.

Coming soon pages are a great way for websites to engage and connect with visitors, even before the actual site is published. - ... “Coming Soon” Web Pages

A Coming Soon/Teaser page is used to get the attention, and ideally the email address of your visitors, and let them know that pretty soon you are going to be launching your fantastic new web site, product, game or application. It is similar to putting up a poster, ... - Design A Successful Coming Soon Page

... some things you might want to consider putting on your coming soon page: - ... Coming Soon Pages And How To Create Yours

  • Newsletter/mailing list sign-up form;
  • Social media profiles - buttons and links;
  • Recent tweets or comments about your new project (hype);
  • Testimonials (if you have some - from beta testing for example);
  • Development news;
  • Contact, Copyright notice and the usual legal stuff;

TimeLog - Coming Soon Website Template is a free coming soon template, perfect for your coming soon websites! Its purpose is to create a bound and make a lasting impression to your website visitors. It can be used as an under construction/coming soon template, but also as a maintenance mode page. - TimeLog – Free Coming Soon Template


Implement



JavaScript
     <header>
   ...
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" >
   <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
   <script type="text/javascript" src="js/jquery.countdown.js"></script>

   ...

   <script type="text/javascript">
    $(window).load(function() { // makes sure the whole site is loaded
        $("#status").fadeOut(); // will first fade out the loading animation
        $("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
    })

    jQuery(function($){
        $.supersized({
        
            // Functionality
            slide_interval      :   10000,    // 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    :    700,    // Speed of transition
                                                       
            slides         :      [            // Slideshow Images - make sure the last item doesn`t have a comma after it. It might ruin your day :)
                            {image : 'images/slide1.jpg'},
                            {image : 'images/slide2.jpg'}
                            ]
            
        });
    });

    jQuery(document).ready(function() {            
    // cowntdown function. Set the date by modifying the date in next line (June 1, 2012 00:00:00):
        var austDay = new Date("May 06, 2014 00:00:00");
            
            $('#countdown').countdown({
                until: austDay,
                layout: '<div class="cd-item"><span class="cd-number">{dn}</span> <span class="cd-word">{dl}</span></div> <div class="cd-item"><span class="cd-number">{hn}</span> <span class="cd-word">{hl}</span></div><div class="cd-item"><span class="cd-number">{mn}</span> <span class="cd-word">{ml}</span></div> <div class="cd-item last-cd"><span class="cd-number">{sn}</span> <span class="cd-word">{sl}</span></div>'
            });
            
            $('#year').text(austDay.getFullYear());
    });    
  </script>
  ...
    </header>

HTML

    <header>
        ...
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        ...
    </header>

    <body>
    ...
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

    <div id="wrapper"></div>

    <div class="content-wrapper">
        ... // information presented to the front
    </div>
    ...
    </body>



Preview



Website: TimeLog - Coming Soon Website Template (HTML5, CSS3, JS)


Created by Madalin Tudose.

We would appreciate it if you credit our resources and help us to spread this work and name.

Download, share and enjoy!



download
demo
source

Advertisement
Tags: coming soon website template, html5, css3, js, website, coming soon, plugins, supersized, fullscreen slideshow jquery plugin, countdown for jquery

Leave a Comment

No Comment

© Creative3x Ltd.