Website templates

orange-coming-soon-html-responsive-template/css/styles.css

@@ -0,0 +1,310 @@
+/*
+Author: WebThemez
+Author URL: http://webthemez.com
+License: Creative Commons Attribution 3.0 Unported
+License URL: http://creativecommons.org/licenses/by/3.0/
+*/
+@import url(http://fonts.googleapis.com/css?family=Economica:400,700);
+@import url(http://fonts.googleapis.com/css?family=Lobster+Two:700);
+body {
+	color:#FFF; 
+	font-family: 'Economica', sans-serif;
+	min-width:960px;
+	top:0;
+	left:0;
+	position:absolute;
+	height:100%;
+	width:100%;
+	margin:0;
+	background-size:cover;
+}
+.ie body {
+	filter: dropshadow(color=#000000, offx=0, offy=1);	
+}
+h1 {
+	font-size:68px;
+	letter-spacing:-2px;  
+	text-align:center; 
+	padding-top:30px;
+	font-weight:700;
+	font-family: 'Lobster Two', cursive;
+	text-shadow: 2px 2px rgba(12, 11, 11, 0.56);
+}
+.ie h1 {
+	filter: dropshadow(color=#000000, offx=0, offy=3);
+	padding-bottom:12px;	
+} 
+.ie h2 {
+	filter: dropshadow(color=#000000, offx=0, offy=3);
+}
+h3 {
+	font-size:25px;
+	margin:0.2em 0; 
+}
+.ie h3 {
+	filter: dropshadow(color=#000000, offx=0, offy=3);
+}
+h4 {
+	margin-bottom:5px;	
+}
+p, pre {
+	margin:0 0 10px 0; 
+}
+code {
+	text-transform:uppercase !important;
+	color:#EEE;	
+	border-bottom:1px dotted #666;
+}
+small {
+	background:url(../images/alpha.png);
+	background:rgba(0, 0, 0, 0.8) url();	
+	border:1px solid #111;
+	font-size:15px;
+	padding:0 5px;
+}
+a {
+	color: rgba(255, 255, 255, 0.57);
+	text-decoration:none;	
+}
+a:hover {
+	color:#BBB;	
+} 
+#Header {
+margin-bottom: 62px;
+position: relative;
+width: 100%;
+height: 110px;
+line-height: 110px;
+z-index: 1;
+}
+.wrapper {
+margin: 0 auto;
+position: relative;
+width: 920px;
+z-index: 1;
+}
+#socialIcons {
+display:block;
+}
+#socialIcons ul {
+margin: 21px 0 0; 
+padding:0px;
+text-align: center;
+}
+#socialIcons ul li {
+margin-right: 5px;
+height: 34px;
+line-height: 34px;
+list-style-type: none;
+display: inline-block; 
+}
+#socialIcons ul li a{
+width:34px;
+height:34px; 
+display: inline-block;
+}
+.twitterIcon, .facebookIcon, .linkedInIcon, .pintrestIcon{
+background: url('../images/social-icons.png') -74px 0px;
+}
+.facebookIcon{
+background-position: 10px 0px;
+}
+.linkedInIcon{
+background-position: -245px 0px;
+}
+.pintrestIcon{
+background-position: -331px 0px;
+}
+.tempBy{
+display:block;
+text-align:center;
+margin-top:40px;
+}
+#Content h2 {
+display: inline-block;
+margin: 25px 0 45px;
+padding: 0px;
+text-align: center;
+font-size: 25px; 
+font-weight: 300;
+color: #fff;
+line-height: 42px;
+}
+#WindowSlide {
+margin: 0 auto;
+position: relative;
+width: 634px;
+height: 170px;
+display: block;
+overflow: hidden;
+}
+#Mail {
+position: absolute;
+width: 634px;
+top: 0px;
+left: 0px;
+}
+#Content h3 {
+text-align: center;
+font-size: 20px;
+font-weight: normal;
+display: block;
+clear: both;
+}
+
+#subscribe p{
+text-align:center;
+}
+#subscribe input {
+background: rgba(255, 255, 255, 0.52);
+color: #000; 
+vertical-align: middle;
+width: 293px;
+border: 1px solid rgba(255, 255, 255, 0.76);
+padding: 0 10px;
+height: 40px;
+}
+#subscribe input[type="button"]{
+background: rgba(255, 255, 255, 1);
+width: auto;
+padding: 0px 25px;
+cursor: pointer;
+margin-left: -5px;
+font-weight: bold; 
+height: 42px;
+display: inline-block;
+}
+
+
+.callback,
+.simple {
+  font-size: 20px;
+  background: #27ae60;
+  padding: 0.5em 0.7em;
+  color: #ecf0f1;
+  margin-bottom: 50px;
+  -webkit-transition: background 0.5s ease-out;
+  transition: background 0.5s ease-out;
+}
+.callback{
+  cursor: pointer;
+}
+.ended {
+  background: #c0392b;
+}
+.countdown {
+text-align:center;
+}
+
+.intro{
+font-size:22px;
+font-weight:normal;
+margin-bottom:30px;
+text-align:center;
+}
+h2.intro{
+display: block !important;
+}
+.styled{
+  margin: 100px 0 60px;
+  display: block;
+}
+.styled div {
+display: inline-block;
+font-size: 80px;
+font-weight: 900;
+text-align: center;
+margin: 0 8px;
+width: 136px; 
+height: 100px;
+background: rgba(255, 255, 255, 0.26);
+text-shadow: none;
+vertical-align: middle; 
+border: 1px solid rgba(255, 255, 255, 0.58);
+text-shadow: 0px 1px 2px rgba(12, 11, 11, 0.54);
+border-radius: 38px 0;
+padding: 20px 24px 55px; 
+box-shadow: 0px 1px 4px rgba(107, 55, 0, 0.62);
+}
+.styled div:last-child{
+}
+#overlay{ 
+background: rgba(0, 0, 0, 0.04) url(../images/overlays/06.png) top left repeat;
+background:rgba(0, 0, 0, 0.14);
+position: fixed;
+top: 0px;
+width: 100%;
+bottom: 0px;
+opacity:0.8;
+}
+/* IE7 inline-block hack */
+*+html .styled div{
+  display: inline;
+  zoom: 1;
+}
+.styled div:first-child {
+  margin-left: 0;
+}
+.styled div span {
+display: block;
+padding-top: 3px;
+font-size: 24px;
+font-weight: 400;
+text-align: center;
+text-transform: capitalize;
+font-weight: bold;
+}
+footer{
+width:100%;
+height:30px;
+background:rgba(0, 0, 0, 0.64);
+position:absolute;
+bottom:0px;
+}
+footer span{
+float:right;
+margin:10px;
+}
+@media(max-width:768px){
+	body {
+	min-width: initial !important;
+	}
+	.wrapper{width:100%;}
+	.styled div {
+	  margin-bottom:10px; 
+	}
+}
+@media(max-width:420px){
+	h1{
+	float:initial;
+	text-align: center;
+	margin-left:0px;
+	margin-bottom:0px;
+	}
+	.styled div {
+	  font-size: 40px;
+	  font-weight: normal; 
+	  text-align: center;    
+	}
+	#Content h2 {
+	margin: 0px 0px 0px 0px;
+	padding: 0px;
+	text-align: center;
+	font-size: 20px;
+	font-weight: 300;
+	line-height: 30px;
+	padding-bottom: 34px;
+}
+	.styled {
+	margin-bottom: 30px;
+	}
+	#subscribe input[type="button"]{
+	margin-top:10px;
+	}
+	#subscribe input{
+	width:80%;
+	}
+	footer{
+	position:relative !important;
+	}
+}

orange-coming-soon-html-responsive-template/index.html

@@ -0,0 +1,58 @@
+<!--
+Author: WebThemez
+Author URL: http://webthemez.com
+License: Creative Commons Attribution 3.0 Unported
+License URL: http://creativecommons.org/licenses/by/3.0/
+Note: Please use our back link in your site (webthemez.com)
+-->
+<!DOCTYPE HTML>
+<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]--> 
+<!--[if IE 7 ]>	<html lang="en" class="ie ie7"> <![endif]--> 
+<!--[if IE 8 ]>	<html lang="en" class="ie ie8"> <![endif]--> 
+<!--[if IE 9 ]>	<html lang="en" class="ie ie9"> <![endif]--> 
+<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+<meta charset="utf-8">
+<title>Orange Coming Soon HTML Responsive Template</title>
+<meta name="description" content="Trendset Page under construction">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">
+<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold"> 
+<link rel="stylesheet" type="text/css" href="css/styles.css">
+</head>
+
+<body id="home">
+<div id="Header">
+<div class="wrapper">
+	<h1>Orange</h1>	
+	</div>
+</div>
+<div id="Content" class="wrapper"> 
+<div class="countdown styled"></div> 
+<h2 class="intro">We're working hard to improve our website and we'll back on soon. Stay tuned for something amazing!. <br/>Subscribe to be notified.</h2>
+<div id="subscribe"> 
+	<form action="" method="post" onsubmit="">
+		<p><input name="" value="Enter your e-mail" type="text" id=""/>
+		<input type="button" value="Submit"/></p>
+	</form>
+	<div id="socialIcons">
+		<ul> 
+			<li><a href="" title="Twitter" class="twitterIcon"></a></li>
+			<li><a href="" title="facebook" class="facebookIcon"></a></li>
+			<li><a href="" title="linkedIn" class="linkedInIcon"></a></li>
+			<li><a href="" title="Pintrest" class="pintrestIcon"></a></li>
+		</ul>
+	</div>
+</div>
+<span class="tempBy">Template by: <a href="http://webthemez.com" alt="webthemez">WebThemez.com</a></span>
+</div>
+
+<div id="overlay"></div>
+
+<!--Scripts-->
+<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
+<script type="text/javascript" src="js/Backstretch.js"></script>
+<script type="text/javascript" src="js/jquery.countdown.js"></script>
+<script type="text/javascript" src="js/global.js"></script>
+
+</body>
+</html>

orange-coming-soon-html-responsive-template/js/backstretch.js

@@ -0,0 +1,4 @@
+/*! Backstretch - v2.0.4 - 2013-06-19
+* http://srobbin.com/jquery-plugins/backstretch/
+* Copyright (c) 2013 Scott Robbin; Licensed MIT */
+(function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window); 

orange-coming-soon-html-responsive-template/js/global.js

@@ -0,0 +1,30 @@
+/*
+Author: WebThemez
+Author URL: http://webthemez.com
+License: Creative Commons Attribution 3.0 Unported
+License URL: http://creativecommons.org/licenses/by/3.0/
+*/
+$( function() {
+// Add background image
+	$.backstretch('images/road2.jpg');
+	var endDate = "December  27, 2015 15:03:25";
+	$('.countdown.simple').countdown({ date: endDate });
+	$('.countdown.styled').countdown({
+	  date: endDate,
+	  render: function(data) {
+		$(this.el).html("<div>" + this.leadingZeros(data.days, 3) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>");
+	  }
+	});
+	$('.countdown.callback').countdown({
+	  date: +(new Date) + 10000,
+	  render: function(data) {
+		$(this.el).text(this.leadingZeros(data.sec, 2) + " sec");
+	  },
+	  onEnd: function() {
+		$(this.el).addClass('ended');
+	  }
+	}).on("click", function() {
+	  $(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start();
+	});
+
+});

orange-coming-soon-html-responsive-template/js/jquery.countdown.js

@@ -0,0 +1,133 @@
+// Generated by CoffeeScript 1.4.0
+
+/*
+countdown is a simple jquery plugin for countdowns
+
+Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+and GPL-3.0 (http://opensource.org/licenses/GPL-3.0) licenses.
+
+@source: http://github.com/rendro/countdown/
+@autor: Robert Fleischmann
+@version: 1.0.1
+*/
+
+
+(function() {
+
+  (function($) {
+    $.countdown = function(el, options) {
+      var getDateData,
+        _this = this;
+      this.el = el;
+      this.$el = $(el);
+      this.$el.data("countdown", this);
+      this.init = function() {
+        _this.options = $.extend({}, $.countdown.defaultOptions, options);
+        if (_this.options.refresh) {
+          _this.interval = setInterval(function() {
+            return _this.render();
+          }, _this.options.refresh);
+        }
+        _this.render();
+        return _this;
+      };
+      getDateData = function(endDate) {
+        var dateData, diff;
+        endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));
+        diff = (endDate - Date.parse(new Date)) / 1000;
+        if (diff <= 0) {
+          diff = 0;
+          if (_this.interval) {
+            _this.stop();
+          }
+          _this.options.onEnd.apply(_this);
+        }
+        dateData = {
+          years: 0,
+          days: 0,
+          hours: 0,
+          min: 0,
+          sec: 0,
+          millisec: 0
+        };
+        if (diff >= (365.25 * 86400)) {
+          dateData.years = Math.floor(diff / (365.25 * 86400));
+          diff -= dateData.years * 365.25 * 86400;
+        }
+        if (diff >= 86400) {
+          dateData.days = Math.floor(diff / 86400);
+          diff -= dateData.days * 86400;
+        }
+        if (diff >= 3600) {
+          dateData.hours = Math.floor(diff / 3600);
+          diff -= dateData.hours * 3600;
+        }
+        if (diff >= 60) {
+          dateData.min = Math.floor(diff / 60);
+          diff -= dateData.min * 60;
+        }
+        dateData.sec = diff;
+        return dateData;
+      };
+      this.leadingZeros = function(num, length) {
+        if (length == null) {
+          length = 2;
+        }
+        num = String(num);
+        while (num.length < length) {
+          num = "0" + num;
+        }
+        return num;
+      };
+      this.update = function(newDate) {
+        _this.options.date = newDate;
+        return _this;
+      };
+      this.render = function() {
+        _this.options.render.apply(_this, [getDateData(_this.options.date)]);
+        return _this;
+      };
+      this.stop = function() {
+        if (_this.interval) {
+          clearInterval(_this.interval);
+        }
+        _this.interval = null;
+        return _this;
+      };
+      this.start = function(refresh) {
+        if (refresh == null) {
+          refresh = _this.options.refresh || $.countdown.defaultOptions.refresh;
+        }
+        if (_this.interval) {
+          clearInterval(_this.interval);
+        }
+        _this.render();
+        _this.options.refresh = refresh;
+        _this.interval = setInterval(function() {
+          return _this.render();
+        }, _this.options.refresh);
+        return _this;
+      };
+      return this.init();
+    };
+    $.countdown.defaultOptions = {
+      date: "June 7, 2087 15:03:25",
+      refresh: 1000,
+      onEnd: $.noop,
+      render: function(date) {
+        return $(this.el).html("" + date.years + " years, " + date.days + " days, " + (this.leadingZeros(date.hours)) + " hours, " + (this.leadingZeros(date.min)) + " min and " + (this.leadingZeros(date.sec)) + " sec");
+      }
+    };
+    $.fn.countdown = function(options) {
+      return $.each(this, function(i, el) {
+        var $el;
+        $el = $(el);
+        if (!$el.data('countdown')) {
+          return $el.data('countdown', new $.countdown(el, options));
+        }
+      });
+    };
+    return void 0;
+  })(jQuery);
+
+}).call(this);

orange-coming-soon-html-responsive-template/readme.txt

@@ -0,0 +1,31 @@
+Free Coming soon Responsive Template
+------------------------------------
+
+Orange coming soon HTML responsive template is a modren simple landing page build on top of html5 and css3. This theme has a jquery countdown plugin in build. This template designed with height quality standards to meet the latest requirement and it is a responsive template fits in all devices with multi browser support. Download for free.  
+
+Credits :
+-------
+=> Design and developed: "WebThemez"  http://webthemez.com 
+=> For more free web themes: http://webthemez.com 
+
+Important Note:
+---------------
+To remove backlink from the template, you need to donate to remove the backlink from the template.
+Any question contact us: webthemez@gmail.com
+
+
+License :
+-------
+**Creative Commons Attribution 3.0** - http://creativecommons.org/licenses/by/3.0/
+
+- You are allowed to use all files for both personal and commercial projects.
+
+- If you use/modify the resources in your projects,we’d appreciate a linkback to this site.
+
+- You do not have rights to redistribute,resell or offer files from this site to any third party
+
+- If you wish to remove backlink from the template, you need to donate min USD $10 to remove backlink (credits) form the template
+
+- If you have any question,feel free to contact us at webthemez@gmail.com
+
+- All images user here is for demo purpose only, we are not responsible for any copyrights.