New layout for generator page.

public/assets/css/styles.css

@@ -107,10 +107,11 @@ body {
     border:1px solid black;
     background-color:#fff;
     box-shadow:0px 0px 5px #555;
+    position: relative;
 }
 
 .content h1 {
-    margin-top:0;
+    margin:0 auto;
     color:#fff;
     background-color:#87161a;
     text-align:center;
@@ -126,23 +127,22 @@ body {
 
 .content p {
     margin:10px;
+    display:block;
+    overflow: hidden;
 }
 
 .content-section {
     padding:5px 0;
     margin:0;
-    display:block;
+    float:left;
-    width:100%;
+    width:33%;
-    position:relative;
     height:auto;
-    background-color:transparent;
 }
 
 .content-box {
-    display:inline-block;
     margin:5px 0;
     padding:5px 0;
-    width:49%;
+    width:100%;
     height:auto;
 }
 
@@ -150,11 +150,55 @@ body {
     text-align: center;
 }
 
-fieldset {
+.fs-div {
-    background-color:white;
+    background-color:rgba(255, 255, 255, 0.9) !important;
-    margin:20px;
+    width:50%;
+    padding:5px;
 }
 
+.generator {
+    background-image:url('/assets/images/generator-bg.jpg');
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: right top;
+    background-color: #0a0a0a;
+    padding:10px;
+    border:1px solid black;
+}
+
+.generator select {
+    -webkit-appearance:none;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    background-color:#87161a;
+    text-shadow:0px 0px 5px #000;
+    border:1px solid #000;
+    padding:5px;
+}
+
+.generator input[type='checkbox'] {
+    -webkit-appearance:none;
+    color: #fff;
+    background-color:#87161a;
+    border:1px solid #000;
+    padding:5px;
+    margin:0 5px 0 0;
+}
+
+.generator input[type='checkbox']:disabled {
+    background-color:#B77376;
+}
+
+.generator input[type='checkbox']:checked {
+    background-image: url('/assets/images/check.png')
+}
+
+@media (max-width: 1024px) {
+    .generator {
+        background-position: right bottom;
+    }
+}
 @media (max-width:685px) {
     #nav {
         float:none;
@@ -183,7 +227,12 @@ fieldset {
         padding:0;
     }
 
-    .content-box {
+    .content-section {
         width:100%;
     }
+
+    .fs-div {
+        width:97.5%;
+        margin:0;
+    }
 }

resources/views/generate.blade.php

@@ -5,8 +5,10 @@
 @section('header')
 
 @section('content')
-<div class="content">
+<div class="content" style="padding-bottom:0;">
     <h1>Workout Generator</h1>
+    <div class="generator">
+        <div class="fs-div">
             <form method="post">
                 <fieldset>
                     <legend>Background Info:</legend>
@@ -68,10 +70,11 @@
                     </select>
                     <br />
                     <br />
-            <button name="">Generate My Workout!</button>
+                    <button name="" class="home-button">Generate My Workout!</button>
                 </fieldset>
             </form>
-    <br />
+        </div>
+    </div>
 </div>
 <script>
 var fw = document.getElementById("free-weights");

resources/views/home.blade.php

@@ -21,9 +21,8 @@
         	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;">
+    	<div class="content-box">
     		<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 
@@ -31,15 +30,13 @@
 	    	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 /></p>
+	    	<p>Don't take our word for it, sign up and try it out today!</p>
-	    </div>
-        <div class="content-box">
             <p><a href='/generate'><button class="home-button">Get Started</button></a></p>
         </div>
     </div>
+    <br style="clear:both;" />
 </div>
 @endsection