Additions to home page.

public/assets/css/styles.css

@@ -53,7 +53,7 @@ body {
     text-shadow:0px 0px 5px #000;
 }
 
-.banner button {
+.home-button {
     font-size: 20px;
     color: #fff;
     background-color:#87161a;
@@ -89,6 +89,7 @@ body {
     text-align:center;
 	padding:10px;
 	margin:0;
+    border-radius:5px;
 }
 
 #nav a:hover, a:active {
@@ -118,10 +119,36 @@ body {
 }
 
 .content h2 {
+    color:#87161a;
     margin:20px;
     text-align:center;
 }
 
+.content p {
+    margin:10px;
+}
+
+.content-section {
+    padding:5px 0;
+    margin:0;
+    display:block;
+    width:100%;
+    position:relative;
+    height:auto;
+    background-color:transparent;
+}
+
+.content-box {
+    display:block;
+    margin:0;
+    padding:5px 0;
+    width:50%;
+}
+
+.content-box p {
+    text-align: center;
+}
+
 fieldset {
     background-color:white;
     margin:20px;
@@ -154,4 +181,8 @@ fieldset {
         margin:0;
         padding:0;
     }
+
+    .content-box {
+        width:100%;
+    }
 }

resources/views/home.blade.php

@@ -8,8 +8,36 @@
 <div class="content">
 	<div class="banner">
 	    <img src={{ asset('assets/images/banner.jpg') }} class="banner">
-    	<h1 class="banner_text">Need help with your workouts? We've got you covered.<br />
+    	<h1>Need help with your workouts? We've got you covered.<br />
-    		<a href='/generate'><button>Generate My Workout</button></a></h1>
+    	<a href='/generate'><button class="home-button">Generate My Workout</button></a></h1>
+    </div>
+    <div class="content-section">
+    	<div class="content-box">
+    	    <h2>How does it work?</h2>
+        	<p>It's simple, really. You tell us a little bit about yourself: your goals, experience, and preferences, 
+        	and we take care of the rest. You'll get a complete workout routine including warm-ups, stretches, 
+        	cool-downs, the number of sets and reps you should be doing for each exercise, and occasional 
+        	nutritional tips to help you reach your goals even faster. If you'd like, you can even add in some 
+        	custom exercises to make your experience even more personalized.</p>
+        </div>
+    </div>
+    <br style="clear:both;"/>
+    <div class="content-section">
+    	<div class="content-box" style="float:right;">
+    		<h2>Why random generation?</h2>
+	    	<p>One of the primary pillars of fitness is <b>periodization</b>. Studies have shown that after about 2-3 weeks, 
+	    	your body begins to adapt to the challenges you give it, which means you'll still be putting in the work 
+	    	but you won't be seeing the results. Periodization is the process of changing up the structure of your 
+	    	routine to prevent you from adapting to it. Say goodbye to plateaus!</p>
+	    </div>
+    </div>
+    <br style="clear:both;"/>
+    <div class="content-section">
+    	<div class="content-box">
+    		<h2>Still not convinced?</h2>
+	    	<p>Don't take our word for it, sign up and try it out today!<br />
+            <a href='/generate'><button class="home-button">Get Started</button></a></p>
+	    </div>
     </div>
 </div>
 @endsection