Free Template Erine: Bootstrap Coming Soon Page

Published on: Aug 02 2014 by Anli

Free Template Erine: Bootstrap Coming Soon Page

Today’s freebie is another responsive Coming Soon Template made with Twitter Bootstrap, named Erine. If you’re searching for a coming soon page for your new product launch, Erine is for you.

Some of its main features include: a responsive layout, fullscreen background, countdown timer and AJAX subscription form with validation. I’ve also used some big and colorful social icons from the Gradient Social Icons Set. The template is simple and easy to use and customize.

Below you’ll find the full list of features, the preview & download links and a quick guide of how to use it. Enjoy! 


Features

  • Responsive Layout (Bootstrap framework)
  • Fullscreen background (slideshow available)
  • Countdown Timer
  • AJAX Subscription Form (you receive the subscribers in your email)
  • Social Icons from the Gradient Social Icons Set
  • Very easy to use and customize

Image Preview

Free Template Erine: Bootstrap Coming Soon Page

Demo, Download and License

VIEW DEMO

DOWNLOAD TEMPLATE: Erine: Bootstrap Coming Soon Page (3543)

LICENSE:

You can use this template in personal and commercial projects, but you can’t sell or distribute it directly, “as is”. If you plan to use it, a link to this page or any form of spreading the word will be much appreciated.

Photo by: paul bica

How To Use It

Installation

To install the Erine template just extract the zip file you downloaded above and upload it in your server.

Fullscreen background

To set up the fullscreen background, open the “scripts.js” file (/assets/js/scripts.js) and enter the background link:

/*
    Fullscreen background
*/
$.backstretch("assets/img/backgrounds/1.jpg");

You can also use multiple backgrounds as a slideshow. Here is an example:

$.backstretch([
      "assets/img/backgrounds/1.jpg"
    , "assets/img/backgrounds/2.jpg"
    , "assets/img/backgrounds/3.jpg"
    ], {duration: 3000, fade: 750});

Countdown timer

Open the “scripts.js” file (/assets/js/scripts.js) and enter the date in the format “YYYY/MM/DD”. Replace this code:

/*
    Countdown initializer
*/
var now = new Date();
var countTo = 25 * 24 * 60 * 60 * 1000 + now.valueOf();
$('.timer').countdown(countTo, function(event) {
    $(this).find('.days').text(event.offset.totalDays);
    $(this).find('.hours').text(event.offset.hours);
    $(this).find('.minutes').text(event.offset.minutes);
    $(this).find('.seconds').text(event.offset.seconds);
});

With this example:

/*
    Countdown initializer
*/
var countTo = "2014/09/25";
$('.timer').countdown(countTo, function(event) {
    $(this).find('.days').text(event.offset.totalDays);
    $(this).find('.hours').text(event.offset.hours);
    $(this).find('.minutes').text(event.offset.minutes);
    $(this).find('.seconds').text(event.offset.seconds);
});

This will count to “25 September 2014”.

Email subscription form

In the “subscribe.php” file (/assets/subscribe.php) you can insert the email where you want to receive the notification when someone subscribes. In this file you can also modify the success and error messages. It’s all commented, you’ll not make mistakes.

Logo, favicon and social icons

You’ll find the logo, favicon (along with the apple touch icons) and social media icons in the “img” folder (/assets/img/).

Replace them with your own images and customize them from the “index.html” and “style.css” (/assets/css/style.css) files.

I have saved the logo (the hover version also) and the social icons in two versions: normal and double size for Retina devices (iPhones, iPads). If you want Retina support, when creating your own logo and social icons, make sure you save them in two sizes and insert the links of the double size versions in the “media-queries.css” file (/assets/css/media-queries.css):

/* Retina-ize images/icons */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
	
	/* logo */
    .coming-soon .logo a {
    	background-image: url(../img/logo@2x.png) !important; background-repeat: no-repeat !important; background-size: 150px 54px !important;
    }
    .coming-soon .logo a:hover {
    	background-image: url(../img/logo-hover@2x.png) !important; background-repeat: no-repeat !important; background-size: 150px 54px !important;
    }
    .coming-soon .logo a:before {
    	content: url(../img/logo-hover@2x.png);
    }
    
    /* social icons */
    .social-icon.facebook {
    	background-image: url(../img/social-icons/facebook@2x.png) !important; background-repeat: no-repeat !important; background-size: 48px 48px !important;
    }
    .social-icon.twitter {
    	background-image: url(../img/social-icons/twitter@2x.png) !important; background-repeat: no-repeat !important; background-size: 48px 48px !important;
    }
    .social-icon.dribbble {
    	background-image: url(../img/social-icons/dribbble@2x.png) !important; background-repeat: no-repeat !important; background-size: 48px 48px !important;
    }
    .social-icon.google-plus {
    	background-image: url(../img/social-icons/google-plus@2x.png) !important; background-repeat: no-repeat !important; background-size: 48px 48px !important;
    }
	
}

Note: in the CSS “background-size” property insert the size of the normal image (not the size of the @2x version).

Questions?

If you have any question, suggestion or you just want to say “Hello”, leave a comment in the form below!

Similar Bootstrap Coming Soon Templates

Seria - Bootstrap Coming Soon Template Mira - Bootstrap Coming Soon Template Eli - Bootstrap Coming Soon Template

Filed under: Templates

8 Comments So Far

  1. lee says:

    nice freebie template, thanks 🙂

    My question is : is there a way to have the subscriber emails go into a text file instead of an email? or is it possible using other services like mailchimp to accumulate all the incoming emails and extract the address into a file for future mass email?

  2. rit says:

    Hi, this is very nice , i have a question to you! that may i use all these freebies on your site without giving credit back to you (in footer obvious :-).

    waiting for your response.

  3. Mads says:

    Awesome template.

    i have a question tho. How do i change the timezone of the countdown? mine is 1 hour wrong.

  4. Quick point: Don’t use regex to validate email addresses. PHP has validation built in to help with that:

    `function isEmail($email) {
    return filter_var($email, FILTER_VALIDATE_EMAIL);
    }`

  5. Gerry says:

    Hi admin! i’ve edited ur template and i uploaded it on my sites, payungku.xyz, it works well with desktop browser, but with my mobile, the background and timer didnt load.
    could you please to help me?

Leave a Reply