Added icons to splash

MilkyGoodness · Nov 19, 2012 · 69ebe63 · 69ebe63
1 parent 180ee35
commit 69ebe63
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/splash2/css/style.css b/splash2/css/style.css
@@ -44,6 +44,7 @@ body, html {
     color: #232323;
     font-size: 62.5%;
     font-family: 'Asap', Helvetica, sans-serif;
+    background: #77C4FF;
 }
 
 #wrapper {
@@ -64,7 +65,7 @@ body, html {
 
 #logo {
     position: absolute;
-    top: 150px;
+    top: 120px;
     left: 50%;
     z-index: 10;
     margin-left: -93px;
@@ -76,6 +77,17 @@ body, html {
     filter: url(shadow.svg#drop-shadow);
 }
 
+#steps, #steps2 {
+    position: relative;
+    width: 440px;
+    height: 140px;
+    background: url("../img/steps.png");
+}
+
+#steps2 {
+    background: url("../img/steps2.png");
+}
+
 #fb-icon, #twitter-icon {
     position: absolute;
     top: 30px;
@@ -97,11 +109,11 @@ body, html {
 ------------------------------------------------------------ */
 #content {
     position: absolute;
-    top: 300px;
+    top: 270px;
     left: 50%;
     margin-left: -300px;
     width: 600px;
-    height: 400px;
+    height: 540px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.9);
     box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.1);
@@ -275,6 +287,10 @@ button:active {
     display: block !important;
 }
 
+#steps, #steps2 {
+    display: none;
+}
+
 #logo {
     position: absolute;
     top: 60px;

diff --git a/splash2/img/steps.png b/splash2/img/steps.png
diff --git a/splash2/img/steps2.png b/splash2/img/steps2.png
diff --git a/splash2/index.html b/splash2/index.html
@@ -25,14 +25,16 @@
         	<a href="https://twitter.com/neverrunout" target="_blank"><div id="twitter-icon"></div></a>
 
 			<a href="index.html"><div id="logo"></div></a>
-			<div id="bg"></div>
-
+<!-- 			<div id="bg"></div>
+ -->			
 
         	<section id="content">
         		<div id="content-container" class="consumer">
 	        		<h1>Prepare to never run out.</h1>
+	        		<div id="steps"></div>
 	        		<h2>Remember that time you were sitting on the toilet and you ran out of toilet paper? Milk is a subscription service where you can manage all your subscriptions in one place and never run out of anything again.</h2>
 
+
 	        		<section id="consumer-form">
 		        		<form novalidate>			  
 					    <input type="text" name="consumer-email" placeholder="Enter your email" required>
@@ -50,6 +52,7 @@ <h3 id="consumer-toggle">Are you a retailer?</h3>
 
 				<div id="content-container" class="customer">
 	        		<h1>Your customers will never run out.</h1>
+	        		<div id="steps2"></div>
 	        		<h2>Milk is a subscription service made for buyers <em><strong>and</strong></em> sellers. Expand your horizons and allow your customers to subscribe to your products.</h2>
 
 	        		<section id="customer-form">