Version 1

Added Files
YC · Nov 8, 2013 · 85db770 · 85db770
1 parent c0ddf5f
commit 85db770
Show file tree

Hide file tree

Showing 3 changed files with 287 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,13 @@
-coming-soon
+Coming Soon
 ===========
+Coming Soon is a simplistic, animated and responsive "coming soon" page. 
+Coming Soon is coded in HTML5 and CSS3. 
+
+Features:
+Multi-Browser Support (Up to Date Major Browsers),
+Responsive Design
+
+Upcoming Features:
+Live Demo,
+More Multi Browser Support,
+Documentation
diff --git a/index.html b/index.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<!--/*License at http://github.com/cfws/coming-soon*/-->
+<html>
+<head>		
+<meta charset="utf-8"> <!--Define Metadata Charset-->
+<link href='http://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'> <!--Define Google Fonts-->
+<!--[if lt IE 9]>
+<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+<style type="text/css">
+    /*Main Page Customizable Code at Bottom of Page*/
+
+    h1,h2,img,h3,body,html {margin:0;padding:0;} /*Basic/Quick CSS Reset*/
+
+    #mainpg
+    {
+        margin:0 auto;
+        font-family:inherit; /*Inherit Parent Font*/
+        width:100%;
+        position:absolute; top:0; bottom:0; left:0; right:0;
+        margin:auto; height:70%;
+        /*Centering - http://blog.themeforest.net/tutorials/vertical-centering-with-css/*/
+        }
+
+    body{
+        font-family: 'Quicksand Light', sans-serif; /*Default Font*/
+		text-align:center; /*Align Text to Center*/
+		font-weight: 300; /*Use Light Variation of Font*/
+		color:#099; /*Text Colour*/
+		-moz-animation: fadeinelement 3s; /*Mozilla*/
+		-webkit-animation: fadeinelement 3s; /*Webkit*/
+		-o-animation: fadeinelement 3s; /*Opera*/
+		-ms-animation: fadeinelement 3s; /*Microsoft*/
+		animation: fadeinelement 3s; /*Main*/
+        width:100%;
+		background-color:#fff; /*Background Colour of Page*/
+    }
+
+    #progress
+	{
+        width:40%; /*Changes Percentage of Bar Total Width*/
+		height:1.6em; /*Text Field Height*/
+		border-radius:8px; /*Roundness of Bar*/
+        background-color:#a8a8a8; /*Background Colour of Bar*/
+		margin:0 auto; /*Center Object*/
+		border: 5px solid #a8a8a8; /*Border Colour of Bar*/
+	}
+
+    #fill
+	{
+        background-color:#0C9; /*Fill of Bar*/
+		width:40%; /*Bar Percent, Can be Customized down Below*/
+		height:100%; /*Set Bar Fill Height to 100%*/
+		border-radius:25px; /*Bar Roundness*/
+		-moz-animation: proanimate 5s; /*Mozilla*/
+		-webkit-animation: proanimate 5s; /*Webkit*/
+		-o-animation: proanimate 5s; /*Opera*/
+		-ms-animation: proanimate 5s; /*Microsoft*/
+		animation: proanimate 5s; /*Main*/
+	}
+
+    h2,h1
+	{
+		color:inherit; /*Inherit Colours from Body*/
+		cursor:default; /*When hover, default cursor displays*/
+        -moz-transition-duration:.6s; /*Mozilla*/
+		-ms-transition-duration:.6s; /*Microsoft*/
+		-o-transition-duration:.6s; /*Opera*/
+		-webkit-transition-duration:.6s; /*Webkit*/
+		transition-duration:.6s; /*Main*/
+        margin:15px 0; /*Top/Bottom Margin for Space*/
+    }/*h2:hover{color:#099;}*/
+
+    img
+	{
+		width:30%; /*Define Image Fluid Width*/
+		border:0; /*For IE*/
+	}	
+
+    #barpercent h3
+    {
+        color:white; /*Bar Percentage Text*/
+        font-weight:inherit; /*Inherit Font Weight*/
+        cursor:default; /*Default Cursor on Hover color:#000;*/
+    }
+
+    footer
+    {
+        text-align:right;
+        position:fixed;  
+        font-size:0.7em;
+        bottom:0px;
+        right:5px;
+        background-color:white;
+        background-color:rgba(255,255,255,0.5);
+        width:100%;
+    }
+
+    footer a
+    {
+        font-size:inherit;
+        color:#0C9;
+        color:inherit;
+        text-decoration:none;
+        -moz-transition-duration:.6s; /*Mozilla*/
+		-ms-transition-duration:.6s; /*Microsoft*/
+		-o-transition-duration:.6s; /*Opera*/
+		-webkit-transition-duration:.6s; /*Webkit*/
+		transition-duration:.6s; /*Main*/
+    }
+
+    footer a:hover
+    {
+        color:#099;
+    }
+
+
+@keyframes fadeinelement /*Fades in Page*/
+	{
+	from {opacity:0;}
+	to {opacity:1;}
+	}
+
+@-webkit-keyframes fadeinelement
+	{
+	from {opacity:0;}
+	to {opacity:1;}
+	}	
+
+@-ms-keyframes fadeinelement
+	{
+	from {opacity:0;}
+	to {opacity:1;}
+	}	
+
+@-o-keyframes fadeinelement
+	{
+	from {opacity:0;}
+	to {opacity:1;}
+	}	
+
+@keyframes fadeinelement
+	{
+	from {opacity:0;}
+	to {opacity:1;}
+	}
+
+@-webkit-keyframes fadeinelement
+	{
+	from {opacity:0;}
+	to {opacity:1;}
+	}	
+
+@-ms-keyframes fadeinelement
+	{
+	from {opacity:0;}
+	to {opacity:1;}
+	}	
+
+@-o-keyframes fadeinelement
+	{
+	from {opacity:0;}
+	to {opacity:1;}
+	}	
+
+@keyframes proanimate /* Animates Bar Moving on Page Load*/
+	{from {width:0%;}} /*Main*/
+@-moz-keyframes proanimate
+	{from {width:0;}} /*Mozilla*/
+@-webkit-keyframes proanimate
+	{from {width:0%;}}	/*Webkit*/
+@-ms-keyframes proanimate
+	{from {width:0%;}}	/*Microsoft*/
+@-o-keyframes proanimate
+	{from {width:0%;}} /*Opera*/
+
+/*User Customize Area*/
+    body
+    {
+        background-color:#fff; /*Page Background Colour*/
+        color:#099; /*Page Text Colour*/
+        font-family: 'Quicksand Light', sans-serif; /*Font, Please Also Change Font Embed Link at Top of Page*/
+    }
+
+    #barpercent h3
+	{
+		color:white; /*Change Colour of Text (Percentage) on Progressbar*/
+	}
+
+    #progress
+	{
+        width:40%; /*Changes Bar Container Total Width*/
+		border-radius:8px; /*Changes Roundness of Bar Container*/
+        background-color:#a8a8a8; /*Changes Background Colour of Bar Container*/
+		border: 5px solid #a8a8a8; /*Changes Border Colour of Bar Container*/
+	}
+
+     #fill
+	{
+        border-radius:25px; /*Bar Roundness*/
+        background-color:#0C9; /*Changes Bar Colour*/
+        width:40%; /*Changes Percentage of Bar, Please also change HTML Property Below*/
+    }
+
+/*End User Customize Area*/
+</style>	
+
+<style>
+    /*Responsive Stylesheet*/
+    @media screen and (max-width:600px)
+    {
+    img{
+        width:50%;
+    }
+    h1
+    {
+        font-size:1.7em;
+    }
+    h2
+    {
+        font-size:1.3em;
+    }
+    #progress
+    {
+		width:80%; /*Changes Percentage of Bar Width*/
+        line-height:1.7em;
+    }
+
+    h3
+    {
+        font-size:1em;
+    }
+
+    }
+
+     @media screen and (max-width:300px)
+    {
+    img{
+        width:80%;
+    }
+    h1
+    {
+        font-size:1.3em;
+    }
+    h2
+    {
+        font-size:1.1em;
+    }
+    #progress
+    {
+		width:80%; /*Changes Percentage of Bar Width*/
+        line-height:1em;
+        height:1em;
+    }
+
+    h3
+    {
+        font-size:.8em;
+    }
+
+    }
+
+    </style>
+	<!--Title of Page--><title>Coming Soon</title>
+	</head>	
+	<body>
+        <div id="mainpg"> <!--Start Page Container-->
+            <img src="logo.png" alt=""> <!--Logo-->
+			<h1>Company Name</h1>
+			<h2>Our website is currently under construction. </h2>
+            <div id="progress"><div id="fill"><div id="barpercent"><h3>40%</h3></div></div></div>
+        </div> <!--End Page Container-->
+        <footer><a href="http://github.com/cfws/coming-soon">Powered by coming-soon</a></footer>
+	</body>
+</html>
diff --git a/logo.png b/logo.png