Responsive Coming Soon Page With Time Counter

Coming soon page full-size background image, jQuery countdown, email subscription and social links

Below you can find an example of coming soon page with jQuery counter. Example uses counter plugin from Keith Wood. Check out plugin documentation for more settings.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="content-wrapper">
<header class="header">
<div class="logo">
<i class="icon-traffic-cone"></i>
</div>
<h1 class="header-message">
We are coming soon
</h1>
<div class="time-left">
Time left until launch:
</div>
</header>
<div class="countdown"></div>
<footer class="subscribe">
<div class="label">Notify when ready</div>
<form class="submit-mail-form">
<div class="input-container">
<input type="email" class="email-input" placeholder="Email" name="subscribe-input">
<button class="submit-mail" type="submit"></button>
</div>
</form>
<div class="social">
<span class="social-label">Follow us:</span>
<a href="#"><i class="social-icon icon-facebook-square"></i></a>
<a href="#"><i class="social-icon icon-twitter-square"></i></a>
<a href="#"><i class="social-icon icon-google-plus-square"></i></a>
<a href="#"><i class="social-icon icon-instagram"></i></a>
</div>
</footer>
</div>
</div>
HTML
@charset "UTF-8";

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
height: 100%;
}

body {
background: url(/images/full-size-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
position: relative;
min-height: 500px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

body:after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}

/* Fonts */

@font-face {
font-family: 'League Gothic';
src: url('/fonts/leaguegothic-regular-webfont.eot');
src: url('/fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/leaguegothic-regular-webfont.woff2') format('woff2'),
url('/fonts/leaguegothic-regular-webfont.woff') format('woff'),
url('/fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
url('/fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Montserrat';
src: url('/fonts/Montserrat-Regular-webfont.eot');
src: url('/fonts/Montserrat-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Montserrat-Regular-webfont.woff') format('woff'),
url('/fonts/Montserrat-Regular-webfont.ttf') format('truetype'),
url('/fonts/Montserrat-Regular-webfont.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}

/* Icon Font */

@font-face {
font-family: "coming-soon";
src:url("/fonts/coming-soon.eot");
src:url("/fonts/coming-soon.eot?#iefix") format("embedded-opentype"),
url("/fonts/coming-soon.woff") format("woff"),
url("/fonts/coming-soon.ttf") format("truetype"),
url("/fonts/coming-soon.svg#coming-soon") format("svg");
font-weight: normal;
font-style: normal;

}

[data-icon]:before {
font-family: "coming-soon" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "coming-soon" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-traffic-cone:before {
content: "\61";
}

.icon-facebook-square:before {
content: "\62";
}

.icon-twitter-square:before {
content: "\63";
}

.icon-instagram:before {
content: "\64";
}

.icon-google-plus-square:before {
content: "\65";
}

.icon-paper-plane:before {
content: "\66";
}

/* Layout */

.container {
margin: -225px auto 0;
position: absolute;
z-index: 1;
text-align: center;
overflow: hidden;
top: 50%;
width: 100%;
}

.content-wrapper {
max-width: 600px;
margin: 0 auto;
}

/* Header */

.header {
margin-bottom: 40px;
}

.logo {
font-size: 70px;
color: #fff;
text-align: center;
margin-bottom: 20px;
height: 67px;
}

.header-message {
color: #fff;
margin: 0 0 10px 0;
font-size: 23px;
text-transform: uppercase;
font-weight: normal;
}

.time-left {
color: #ffeb3b;
}

/* Countdown */
.countdown {
overflow: hidden;
margin-bottom: 20px;
padding: 0 30px;
}

.countdown-col {
float: left;
width: 25%;
font-family: 'League Gothic', sans-serif;
font-size: 70px;
color: #fff;
}

.countdown-col .label {
font-size: 20px;
color: #ffeb3b;
text-transform: uppercase;
}

/* Footer */
.subscribe .label {
color: #ffeb3b;
margin-bottom: 12px;
}

.input-container {
height: 50px;
width: 280px;
background: #fff;
padding: 10px 0;
margin: 0 auto 18px;
}

.email-input {
height: 30px;
width: 235px;
padding: 12px 15px 8px 15px;
font-size: 16px;
color: #666;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
border-radius: 0;
border: none;
border-right: 1px solid #ddd;
-webkit-appearance: none;
background: #fff;
float: left;
}

.email-input:focus {
outline: none;
}

.submit-mail {
display: inline-block;
vertical-align: middle;
background: none;
border: none;
padding: 7px 12px;
float: left;
display: block;
cursor: pointer;
}

.submit-mail:focus {
outline: none;
}

.submit-mail:before {
content: "\66";
display: inline-block;
font-family: "coming-soon";
font-size: 18px;
color: #666;
cursor: pointer;
}

::input-placeholder {
font-size: 16px;
color: #999;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size: 16px;
color: #999;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
}

::-moz-placeholder { /* Firefox 19+ */
font-size: 16px;
color: #999;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
}

:-ms-input-placeholder { /* IE 10+ */
font-size: 16px;
color: #999;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
}

:-moz-placeholder { /* Firefox 18- */
font-size: 16px;
color: #999;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
}

.social a {
color: #fff;
text-decoration: none;
font-size: 28px;
vertical-align: middle;
}

.social a:hover {
color: #f1f1f1;
}

.social-label {
color: #ffeb3b;
display: inline-block;
vertical-align: top;
margin: 2px 10px 0 0;
}

@media (min-width: 768px) {
body {
font-size: 18px;
min-height: 700px;
}

.container {
margin: -315px auto 0;
}

/* Header */

.header {
margin-bottom: 80px;
}

.logo {
margin-bottom: 45px;
font-size: 80px;
height: 75px;
}

.header-message {
font-size: 25px;
margin: 0 0 20px 0;
}

/* Countdown */
.countdown {
margin-bottom: 50px;
}

.countdown-col {
font-size: 100px;
}

.countdown-col .label {
font-size: 25px;
}

/* Footer */

.input-container {
width: 365px;
margin-bottom: 35px;
}

.email-input {
width: 320px;
}

.subscribe .label {
margin-bottom: 25px;
}
}
CSS
$(document).ready(function(){
/* Use variable below to set exact date. Use format: new Date(year, mth - 1, day, hr, min, sec)
var austDay = new Date(2017, 1 - 1, 12, 12, 0, 0); */
var austDay = new Date(new Date().getFullYear() + 1, 1 - 1, 26); /* For demonstration purposes */
$('.countdown').countdown({
until: austDay,
layout: '<div class="countdown-col"><div class="label">{dl}</div>{dn}</div>\
<div class="countdown-col"><div class="label">{hl}</div>{hn}</div>\
<div class="countdown-col"><div class="label">{ml}</div>{mn}</div>\
<div class="countdown-col"><div class="label">{sl}</div>{sn}</div>'
});
});
JavaScript/jQuery 1.x
Plugins used:
jQuery Apache 2.0 license
jQuery Countdown MIT license
Browser support:
           
9+          

Hey!

Thanks a lot for this snippet - this coming soon page looks amazing. I was just wondering if you could make date selection (i mean setting date in code) a bit easier. Like date = "2017-08-26", or something like that?

Keep up with great work,

Alex.

Thanks!

Unfortunately, no. According to the author of the plugin you can use only following formatting:  

$(selector).countdown({ 
    until: new Date(2012, 8 - 1, 8), timezone: +10
});

The month ranges from 0 to 11, so it's suggested to specify the month from 1 to 12 and manually subtract the 1.

In reply to by Vadim

Well probably one can just use parse like this:

$(selector).countdown({ until: Date.parse("2012-08-08"), timezone: +10 });