Daran Responsive Coming Soon Template


Daran is a modern, creative and minimalist Coming soon / Under construction template. It is built with latest Bootstrap framework so this template will look great on mobile devices. This template comes with two different layout and 6 background variations : Tab Style, Slideshow, Static Image, Image with particle effect, HTML video background and YouTube video background.

Daran is highly customizable and pretty easy to use. This template will serve any client’s needs. If you’re looking for something trendy, that’s your top choice!

So what you will get:

  1. Modern, Clean & Elegant Design,
  2. Extremely easy to setup and configure
  3. Built with latest Bootstrap framework
  4. Valid HTML5 and CSS3
  5. Fully responsive,
  6. Clean and well documented code
  7. Working ajax subscription form with Mailchimp integration
  8. Working PHP Contact Form with a Simple Email Template,
  9. jQuery Countdown
  10. Includes Entire Font Awesome,
  11. Cross browser support,
  12. CSS3 animations,
  13. Google Fonts used,
  14. Six background styles
  15. Excellent customer support – We care about your site as much as you and will help in anyway possible.

Folders

-assets (all assets/required file of this template)
--bootstrap (bootstrap core files)
--css (all css files)
--fonts (font-awesome font icon set )
--images (all images)
--js (all javascript files)
--videos (html5 video formats)
--YTPlayer (js for youtube background)
- email-templates (a basic email template functional with contact form)
-index.html (Main html file)
-sendemail.php (PHP file for functional contact form)

 

HTML Structure

Being based on Twitter Bootstrap, Daran inherits its awesome grid system. It's a responsive, mobile first  grid that appropriately scales up to 12 columns as the device or view port size increases.

Example markup:

<div class="row">
    <div class="col-md-12">
       Level 1 column
       <div class="row">
           <div class="col-md-6">Level 2</div>
           <div class="col-md-6">Level 2</div>
       </div>
    </div>
</div>

 

CSS Files

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- animate CSS -->
<link href="assets/css/animate.css" rel="stylesheet">
<!-- FontAwesome CSS -->
<link href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Style CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Responsive CSS -->
<link href="assets/css/responsive.css" rel="stylesheet">

 

JavaScripts Files

<!-- jQuery -->
<script src="assets/js/jquery-2.1.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- easing js --> <script src="assets/js/jquery.easing.min.js"></script>
<!-- smoothscroll js -->
<script src="assets/js/smoothscroll.js"></script>
<!-- inview js -->
<script src="assets/js/jquery.inview.min.js"></script>
<!-- coundown JS -->
<script src="assets/js/coundown-timer.js"></script>
<!-- ajaxchimp -->
<script src="assets/js/ajaxchimp.js"></script>
<!-- YTPlayer JS --> <script src="assets/YTPlayer/inc/jquery.mb.YTPlayer.min.js"></script>
<!-- script JS -->
<script src="assets/js/scripts.js"></script>
 

Configuring and Set-up countdown time is extremely easy.


To customize/change the countdown time, please open script.js from assets/js/scripts.js in any code editor.

Find out  /* ======= Countdown ======= */  wrapper, put your date in existing date. 

The script is look like: 

/* ======= Countdown ======= */   
(function () {
     $("#countdown").countdown({
          date: "31 december 2015 12:00:00",
          format: "on"
      });
}()); 

There is full FontAwesome font icon included with this template.

Font Awesome is a @font-face iconset that allows you to change size and color of the icons just using CSS.

To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example: 

<i class="fa fa-file"></i>
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>

The HTML5 <video> element specifies a standard way to embed a video in a web page. You can play a video in your webpage background or any section.  You can host video form root server or can add link form other server. 

For browser support you have to provide two format video(.webm/.ogg and .mp4)

The markup:

<video class="text-center" muted="" autoplay="" loop="" poster='assets/videos/Explore-HD.png' >
   <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
   <source type="video/webm" src="assets/videos/Explore-HD.webm">
   <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
   <source type="video/mp4" src="assets/videos/Explore-HD.mp4">
    Your browser does not support the video tag.
</video>
jquery.mb.YTPlayer - use a custom youtube player for a video as background on jQuery framework.
 
This is a jQuery component that let you play a Youtube® movie in a chromeless player.
You can even use a movie as background of your HTML page.
 
Important notice!
The plug in works only if used under a web server. It doesn’t work if you run the HTML page as file (file://…).
 
If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMP for Windows,LAMP for linux) and reach the file from http://localhost… or whatever you mapped in the Host file as localhost.
 
HTML Markup:
<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">My video</a>

 

data-property:
*data-property is an attribute of the TAG where you can pass the settings of the player.
 

 

js markup:

$(function(){
    $(".player").YTPlayer();
  });

 

For more customization go to the link: "https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

We used a dynamic full functional Mailchimp  Newsletter Subscription form  in this template. You can easily change your Mailchimp form post url.
 
First open script.js from assets/js/scripts.js find out  /* === Mail Chimp subscription form settings === */  wrapper.  
Replace exsisting url with your own mailchimp form post url inside the url: "---".
 
JS Markup: 
/* === Mail Chimp subscription form settings === */
(function () {
    $('.mailchimp').ajaxChimp({
        callback: mailchimpCallback,
        //replace bellow url with your own mailchimp form post url inside the url: "---".
        //to learn how to get your own URL, please check documentation file.
        url: "http://trendytheme.us9.list-manage.com/subscribe/post?u=85ba3666ffb519396fbe64dc5&amp;id=6a5ead803c" 
    }); 
    function mailchimpCallback(resp) {
         if (resp.result === 'success') {
            $('.subscription-success').html('<i class="fa fa-check"></i>' + resp.msg).fadeIn(1000);
            $('.subscription-error').fadeOut(500);
        } else if(resp.result === 'error') {
            $('.subscription-error').html('<i class="fa fa-times"></i>' + resp.msg).fadeIn(1000);
        }  
    }
}());  

 

HTML Markup:

<form class="subscribe-form mailchimp" role="form" method="post">
    <!-- to showing error message -->
    <label for="subscribeEmail" class="error"></label>
    <div class="input-group">
        <input type="email" class="form-control" id="subscribeEmail" name="EMAIL" placeholder="Your email">
        <span class="input-group-btn">
            <button type="submit" class="btn btn-primary btn-lg">Notify Me</button>
        </span>
    </div><!-- /input-group -->
    <!-- to showing success messages -->
    <p class="subscription-success"></p>
</form>

 

In Daran Responsive Coming Soon Template there is a full functional working contact form. We have also added a simple email template with this contact form.

To customize/change the email address please open  "sendemail.php" file from root folder in any code editor .  

Go to the line number 9.  There is a line: 

$to         = 'youremail@gmail.com'; //put your email here

Replace the existing email address with your own mailing address.

Thats it! your template is ready now for receive message from others via mail.

HTML/CSS

Twitter Bootstraphttp://getbootstrap.com/

animate.csshttp://daneden.github.io/animate.css/

 

Fonts

Google Fonts: http://www.google.com/webfonts

Font Awesome: http://fontawesome.io/

 

JavaScripts

jQuery: jquery-2.1.3.min.js

jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/

smoothscroll: http://cferdinandi.github.io/smooth-scroll/

coundown-timer: coundown-timer.js

inview: https://github.com/protonet/jquery.inview

YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer

Ajax Mailchimp : https://github.com/scdoshi/jquery-ajaxchimp

 

Photos and Videos

Important! 

The images used on the demo site are for demonstration purposes only and are not included in the download file. You need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects.
We have included placeholder images for each instance. 
 
Slider and Background Images:  Image One: http://www.freemagebank.com/downloads/dubai-metro-rail/, Image Two: https://picjumbo.com/workspace-desk-from-above/, Image Three: https://download.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2, Image Four: http://kaboompics.com/one_foto/942/close-up-of-girl-hands-coloring-easter-eggs, Image Five: http://www.pexels.com/photo/woman-smartphone-girl-technology-6400/, Image Six: https://picjumbo.com/girl-writing-on-the-sofa/, Image Seven: https://download.unsplash.com/photo-1428342319217-5fdaf6d7898e, Image Eight: https://download.unsplash.com/reserve/RONyPwknRQOO3ag4xf3R_Kinsey.jpg, Image Nine: http://foter.com/business/

HTML5 Videos:   http://mazwai.com/#83

Youtube Video: https://www.youtube.com/watch?v=NsXEULYFJNk

 

Once again, thank you very much for purchasing this template;  we'll be glad to help you if you have any questions.
If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.
 
Thanks,
Trendy Theme Team :)