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:
-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)
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>
<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>
js markup:
$(function(){
$(".player").YTPlayer();
});
For more customization go to the link: "https://github.com/pupunzi/jquery.mb.YTPlayer/wiki"
/* === 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&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.
Twitter Bootstrap: http://getbootstrap.com/
animate.css: http://daneden.github.io/animate.css/
Google Fonts: http://www.google.com/webfonts
Font Awesome: http://fontawesome.io/
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!
HTML5 Videos: http://mazwai.com/#83
Youtube Video: https://www.youtube.com/watch?v=NsXEULYFJNk
