new homepage image

Author: Mike Neumegen

_sass/layout.scss

@@ -56,13 +56,16 @@ header {
 }
 
 .screenshot{
+	max-width: 100%;
 	height: auto;
 	display: block;
-	margin: 0 auto;
+	box-shadow: 0 1px 0 #ccc, 0 1px 0 1px #eee;
 	border-radius: 2px;
-	padding: 20px 0 0;
-	background: #DDD url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="12" viewBox="0 0 44 12"><circle cx="6" cy="6" r="4" fill="#eee" /><circle cx="22" cy="6" r="4" fill="#eee" /><circle cx="38" cy="6" r="4" fill="#eee" /></svg>') 4px 4px no-repeat;
-	box-shadow: 0px 0px 50px rgba(0,0,0,.2);
+	margin-left: auto;
+	margin-right: auto;
+	background: #DDD url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2212%22%20viewBox%3D%220%200%2044%2012%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3C%2Fsvg%3E') 4px 4px no-repeat;
+	padding: 20px 0 62.5% 0;
+	position: relative;
 }
 
 section {

images/_screenshot.png

@@ -8,7 +8,7 @@ <h1 class="editable">The last sales CRM <strong>you'll ever need</strong></h1>
 		<p class="subtext editable">Track and optimize your sales team in real time.</p>
 		<div class="cta button alt"><a href="/sign-up/">Get Started Free</a></div>
 		<div>
-			<img src="//placehold.it/1500x945" alt="Screenshot" class="screenshot editable" />
+			<img src="/images/dashboard.png" alt="Screenshot" class="screenshot editable" />
 		</div>
 	</div>
 </section>
@@ -21,7 +21,7 @@ <h2>How can we <strong>double</strong> our sales revenue?</h2>
 				<p>Hydra learns your business. By analyzing your sales data, Hydra optimizes your sales process and show you where you should be spending your resources. </p>
 			</div>
 			<div class="image">
-				<img src="//placehold.it/1500x938" alt="Screenshot" class="screenshot editable" />
+				<img src="/images/dashboard.png" alt="Screenshot" class="screenshot editable" />
 			</div>
 		</div>
 	</section>
@@ -33,7 +33,7 @@ <h2>How can I <strong>keep track</strong> of my sales team?</h2>
 				<p>Hydra learns your business. By analyzing your sales data, Hydra optimizes your sales process and show you where you should be spending your resources.</p>
 			</div>
 			<div class="image">
-				<img src="//placehold.it/1500x938" alt="Screenshot" class="screenshot editable" />
+				<img src="/images/dashboard.png" alt="Screenshot" class="screenshot editable" />
 			</div>
 		</div>
 	</section>
@@ -45,7 +45,7 @@ <h2>How can I <strong>forecast</strong> the next 90 days?</h2>
 				<p>Hydra learns your business. By analyzing your sales data, Hydra optimizes your sales process and show you where you should be spending your resources.</p>
 			</div>
 			<div class="image">
-				<img src="//placehold.it/1500x938" alt="Screenshot" class="screenshot editable" />
+				<img src="/images/dashboard.png" alt="Screenshot" class="screenshot editable" />
 			</div>
 		</div>
 	</section>