pyc-website

commit 35b2709b7b203e4140b65187037c422e5e152ff5
parent 86f161b6cfb96a6a12f8c1e954f7c195366f397e
Author: Jul <jul@9o.is>
Date:   Tue, 10 Jun 2014 16:26:24 -0400

finish touches to pages before releasing

Diffstat:
M
src/main/webapp/faqs.html
 | 
6
+++---
M
src/main/webapp/index.html
 | 
20
+++++++++++++-------
M
src/main/webapp/less/pages/index.less
 | 
47
+++++++++++++++++++++++++++++++++++++++--------

3 files changed, 55 insertions(+), 18 deletions(-)
diff --git a/src/main/webapp/faqs.html b/src/main/webapp/faqs.html
@@ -17,9 +17,9 @@
 						<li class="padding-top-10">
 							<h3 class="bold">In which states is PYC available?</h3>
 							<p>
-								ATMs are currently available in the state of New
-								Jersey. If you’re located in another state but would like to be
-								the next customer to benefit from our service, 
+								We're rolling out our first machine at Hellas Bakery, Albany, NY in June 27. 
+								ATMs may soon be available in the state of New Jersey. If you’re located in 
+								another state but would like to be the next customer to benefit from our service, 
 								<a data-lift="Menus.item?name=ATM Locations">fill out this form so we can know you’re interested</a>.
 							</p>
 						</li>
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -4,10 +4,11 @@
 		<div class="col-xs-12 semi-content-index">
 			
 			<div class="row">
-				<div id="buysell-index" class="col-xs-12">
+				<div id="buysell-index" class="col-sm-12 col-md-9">
+					<div class="hidden-xs hidden-sm bitcoin-bg"></div>
 					<div class="jumbotron">
 						<h1>Buy Bitcoin Instantly!</h1>
-						<p>We're Coming Soon to Hellas Bakery in Albany, New York to provide Bitcoin services 
+						<p>We're Coming Soon to Hellas Bakery in Albany to provide Bitcoin ATM services 
 						that are safe and secure, easy to use and user-friendly. Sign up now!
 						</p>
 						<p data-lift="test_cond.loggedOut">
@@ -17,9 +18,12 @@
 						</p>
 					</div>
 				</div>
+				<div class="hidden-xs hidden-sm col-md-3">
+					<img class="bitcoin-solid-logo" src="https://s3.amazonaws.com/assets-pyc/bitcoin.png" width="200" />
+				</div>
 			</div>
 			
-		    <div id="applyatm-index" class="col-xs-12 col-md-4">
+		<div id="applyatm-index" class="col-xs-12 col-sm-6 col-md-4">
 			<div class="row">
 				<div class="col-xs-12">
 					
@@ -64,7 +68,7 @@
 
 		</div>
 		
-		<div id="findatm-index" class="col-xs-12 col-md-4 bg-secondary-gradient">
+		<div id="findatm-index" class="col-xs-12 col-sm-6 col-md-4 bg-secondary-gradient">
 					<div class="row">
 						<div class="col-xs-12">
 							<h2 class="text-white bold">FIND ATM LOCATIONS</h2>
@@ -93,7 +97,7 @@
 					</div>
 				</div>
 				
-		<div id="whoweare-index" class="col-xs-12 col-md-4 bg-primary-gradient text-white">
+		<div id="whoweare-index" class="col-xs-12 col-sm-12 col-md-4 bg-primary-gradient text-white">
 					<div class="row">
 						<div class="col-xs-12">
 							<h2 class="text-white bold">WHO WE ARE</h2>
@@ -116,13 +120,15 @@
 								<h3>What is Bitcoin?</h3>
 							</div>
 						</div>
-						<div class="col-xs-8 col-sm-6 col-md-12 padding-bottom-20">
+						
+						<div data-lift="ignore" class="col-xs-8 col-sm-6 col-md-12 padding-bottom-20">
 							<a data-lift="Menus.item?name=What Is Bitcoin" type="button" class="btn btn-default btn-lg btn-block">
 								<small>Click Here to </small><strong>Understand</strong><br>
 								<img src="https://s3.amazonaws.com/assets-pyc/bitcoin_logo.png" alt="Click Here to Learn More About Bitcoin" style="width:100%"></img>
 							</a>
 						</div>
-						<div class="col-xs-12">
+						
+						<div class="col-xs-12 margin-bottom-10">
 							<iframe src="//www.youtube.com/embed/Gc2en3nHxA4" frameborder="0"
 								allowfullscreen></iframe>
 						</div>
diff --git a/src/main/webapp/less/pages/index.less b/src/main/webapp/less/pages/index.less
@@ -1,6 +1,6 @@
 #content-index {
 	
-	@index-page-height: 1025px;
+	@index-page-height: 925px;
 	@buysell-height: 275px;
 	@semi-content-padding: @jumbotron-padding / 1.5;
 	
@@ -24,11 +24,7 @@
 		}
 	}
 	
-	@media(min-width: @screen-md) {
-		#applyatm-index {
-			min-height: @index-page-height;
-		}	
-	
+	@media(min-width: @screen-md) {	
 		#buysell-index {
 			min-height: @buysell-height;
 			padding-left: 0; // jumbotron
@@ -36,7 +32,13 @@
 		}
 		
 		#whoweare-index, #findatm-index {
-			min-height: @index-page-height - @buysell-height;
+			min-height: @index-page-height;
+		}
+	}
+	
+	@media(min-width: @screen-sm) {
+		#applyatm-index, #findatm-index {
+			min-height: @index-page-height;
 		}
 		
 		& > div[class^="col-"], .semi-content-index > div[class^="col-"] {
@@ -47,7 +49,7 @@
 	
 	// for div,img, btn etc that need 100% width but looks bad when stretched
 	.center-fixed-expand {
-	  @media(min-width: @screen-md) {
+	  @media(min-width: @screen-sm) {
 	  	width: 100%;
 	  }	  
 	}
@@ -57,6 +59,10 @@
 		padding-right: 0;
 	}
 	
+	#applyatm-index {
+		background-color: @white;
+	}
+	
 	// formats the atm application form
 	#applyatm-index-form {
 		fieldset { padding:0 }
@@ -73,4 +79,29 @@
 			height: 300px;
 		}
 	}
+	
+	.jumbotron {
+		background: transparent;
+	}
+	
+	.bitcoin-bg {
+		background: transparent url('https://s3.amazonaws.com/assets-pyc/bitcoin.png') no-repeat right center;
+		.background-size(inherit);
+		opacity: 0.2;
+		-moz-opacity: 0.2;
+		-khtml-opacity: 0.2;  
+    	filter: alpha(opacity=20);
+    	position: absolute;
+    	top: 0;
+    	width: 100%;
+    	height: 500px;
+    	
+    	@media(min-width: @screen-md) {
+	  		left: 300px;
+	  	}	
+	}
+	
+	.bitcoin-solid-logo {
+		margin-top: @buysell-height / 4;
+	}
 }
 \ No newline at end of file