Updated splash page

app/views/public/splash.blade.php

@@ -41,32 +41,32 @@
         <div class="row">
           <div class="col-md-3 one">
             <div class="box">
-              <div class="icon"><img src="{{ asset('images/icon-free.png') }}"></div>
+              <div class="icon"><span class="img-wrap"><img src="{{ asset('images/icon-free.png') }}"></span></div>
-              <h2>FREE, ALWAYS</h2>
+              <h2>100% Free. Always.</h2>
               <p>Invoicing with no monthly fee, because you have enough bills already! Free, now and forever! Quality invoicing to build your business and get paid.</p>
             </div>
           </div>
 
           <div class="col-md-3 two">
             <div class="box">
-              <div class="icon"><img src="{{ asset('images/icon-opensource.png') }}"></div>
+              <div class="icon"><span class="img-wrap"><img src="{{ asset('images/icon-opensource.png') }}"></span></div>
-                <h2>OPEN-SOURCE</h2>
+                <h2>Open-Source</h2>
                 <p>Cloud-based, super secure, and user-developed. Open source platforms are a better way to do business (and save the world). Need we say more?</p>
               </div>
             </div>
 
             <div class="col-md-3 three">
               <div class="box">
-                <div class="icon"><img src="{{ asset('images/icon-pdf.png') }}"></div>
+                <div class="icon"><span class="img-wrap"><img src="{{ asset('images/icon-pdf.png') }}"></span></div>
-                <h2>LIVE .PDF VIEW</h2>
+                <h2>Live .PDF View</h2>
                 <p>Create beautiful email-ready .PDF invoices created instantly as you type. Our ‘Save & send’ feature saves you time and impresses clients.</p>
               </div>
             </div>
 
             <div class="col-md-3 four">
               <div class="box">
-                <div class="icon"><img src="{{ asset('images/icon-payment.png') }}"></div>
+                <div class="icon"><span class="img-wrap"><img src="{{ asset('images/icon-payment.png') }}"></span></div>
-                  <h2>ONLINE PAYMENTS</h2>
+                  <h2>Online Payments</h2>
                   <p>PayPal? Authorize.Net? Stripe? We support many payment technologies and if you need help or advice we’ll lend a hand (we’re pretty friendly).</p>
                 </div>
               </div>
@@ -77,36 +77,26 @@
         <section class="blue">
           <div class="container">
             <div class="row">
-              <div class="col-md-6">
+              <div class="col-md-5">
-                <!--<h1>2.500 <span>sent invoices</span></h1>-->
+               <h1><span>Simple, Intuitive Invoicing,</span>AnyWHERE.</h1>
-              </div>
-              <div class="col-md-6">
-                <!--<h1>$350.456 <span>billed</span></h1>-->
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section class="hero2">
-          <div class="container">
-            <div class="caption">
-              <h1>SIMPLE, INTUITIVE INVOICING.</h1>
-            </div>
-          </div>
-        </section>
-
-        <section class="upper-footer">
-          <div class="container">
                   <div class="row">
-              <div class="col-md-3 center-block">
+                  <div class="col-md-7">
                       <a href="#">
                           <div class="cta">
                               <h2 onclick="return getStarted()">Invoice Now <span>+</span></h2>
                         </div>
                       </a>
+
+                      </div>
+                      </div>
+                  <p>or {{ link_to('features', 'View Our Features' ) }}</a></p>
+              </div>
+              <div class="col-md-7">
+                <img src="{{ asset('images/devices.png') }}">
               </div>
             </div>
           </div>
         </section>
 
+
         @stop

public/css/splash.css

@@ -1,5 +1,5 @@
 body {
-    font-family: 'Roboto Slab', serif;
+    font-family: Roboto, sans-serif;
     line-height: 1.6;
 }
 
@@ -12,16 +12,16 @@ h1,h2,.btn {
     font-family: Roboto, sans-serif;
     font-weight: 900;
     line-height: 1.1;
-    text-transform: uppercase;
     color: #1a1818;
 }
 
 h1 {
     font-size: 45px;
+    text-transform: uppercase;
 }
 
 h2 {
-    font-size: 20px;
+    font-size: 25px;
 }
 
 a,a .cta h2,.socicon,.btn {
@@ -101,6 +101,9 @@ a .cta h2 {
     text-align: center;
     float: left;
     margin: 0;
+    text-transform: uppercase;
+    font-size: 20px;
+    font-weight: 900;
 }
 
 a .cta h2 span {
@@ -224,63 +227,88 @@ section.upper-footer.white-bg {
 
 section.features .col-md-3 .box {
     padding: 20px;
-    background: #ebbe09;
     text-align: center;
-    color: #fff;
 }
 
-section.features .col-md-3.two .box {
+section.features .col-md-3.two .box .icon {
-    background: #36c157;
+    background: #32ba8d;
+    border-color: #28ae82;
 }
 
-section.features .col-md-3.three .box {
+section.features .col-md-3.two h2 {
-    background: #e27329;
+    color: #32ba8d;
 }
 
-section.features .col-md-3.four .box {
+section.features .col-md-3.three .box .icon {
-    background: #2299c0;
+    background: #d2462d;
+    border-color: #c23b23;
+}
+
+section.features .col-md-3.three h2 {
+    color: #d2462d;
+}
+
+section.features .col-md-3.four .box .icon {
+    background: #fad129;
+    border-color: #f0c824;
+}
+
+section.features .col-md-3.four h2 {
+    color: #f0c824;
 }
 
 section.features h2 {
-    margin: 30px 0 15px;
+    margin: 20px 0 15px;
-    color: #fff;
+    color: #2599c0;
 }
 
 section.features .col-md-3 .box .icon {
-    margin-left: -20px;
+    background: #2599c0;
-    margin-top: -20px;
+    width: 94px;
-    text-align: left;
+    height: 94px;
+    border: 8px solid #1d8db3;
+    text-align: center;
+    display: table;
+    margin: 0 auto;
+    
+}
+
+section.features .col-md-3 .box .icon .img-wrap {
+  display: table-cell;
+   vertical-align: middle;
+   height: 100%;
+}
+
+section.features .col-md-3 .box .icon img {
+   vertical-align: middle;
 }
 
 section.blue {
-    display: none;
+    background-image:url('../images/bg-blue.jpg');
-    background: #2299c0;
+    background-color:#cccccc;
+    background-size: cover;
     color: #fff;
+    padding: 140px 0;
 }
 
-section.blue .col-md-6 {
+section.blue .col-md-7 {
-    text-align: center;
+    text-align: left;
 }
-
+section.blue h1 span {
-section.blue .col-md-6:last-child h1 {
+    font-size: 30px;
-    border-left: none;
+    display: block;
 }
-
+section.blue h1 {
-section.blue .col-md-6 h1 {
-    border-left: 1px dotted #46b9df;
-    border-right: 1px dotted #46b9df;
     color: #fff;
     line-height: 1.2;
-    padding: 100px 0;
+   margin-bottom: 20px;
-    margin: 0;
+    margin-top: 30px;
+    font-size: 65px;
 }
+section.blue a {color: #ffffff; text-decoration:underline;}
 
-section.blue .col-md-6 h1 span {
+section.blue p {margin-top: 15px;}
-    font-size: 36px;
+section.blue img {max-width: 100%;}
-    font-weight: 100;
-    display: block;
-    text-transform: lowercase;
-}
 
 section.about, section.team, section.plans {
     padding: 70px 0;