ongoing work

app/views/public/features.blade.php

@@ -1,105 +1,54 @@
 @extends('public.header')
 
 @section('content')
-<section class="hero background hero5" data-speed="2" data-type="background">
-  <div class="caption-side"></div>
+<section class="hero background hero5 center" data-speed="2" data-type="background">
   <div class="container">
-    <div class="row" style="margin:0;">
-      <div class="caption-wrap">
-        <div class="caption">
-          <h1>THE <span style="color:#ecd816">FEATURES</span>
-            </div>
-          </div>
+    <div class="row">
+          <h1><img src="{{ asset('images/icon-features.png') }}"><span class="thin">THE</span> FEATURES</h1>
         </div>
       </div>
     </section>
 
- <section class="about center">
+ <section class="features features1">
   <div class="container">
     <div class="row">
-      <div class="col-md-8 col-md-offset-2">
-        <h2>Open Source Platform</h2>
-        <p>Set the code free! Here at Invoice Ninja, we’re all about being non-evil, and providing full code transparency is a central manifestation of this value. Our users started seeing the benefits of open source within days of our launch, when we rolled out v1.0.2, which included some key code improvements that our friends on GitHub sent our way.</p>
+      <div class="col-md-5">
+          <div class="headline">
+        <div class="icon open"><span class="img-wrap"><img src="{{ asset('images/icon-opensource.png') }}"></span></div><h2>Open Source Platform</h2>
+              </div>
+       <p class="first">Set the code free! Here at Invoice Ninja, we’re all about being non-evil, and providing full code transparency is a central manifestation of this value.</p>
+          <p>Our users started seeing the benefits of open source within days of our launch, when we rolled out v1.0.2, which included some key code improvements that our friends on GitHub sent our way.
+</p>
           <p>We firmly believe that being an open source product helps everyone involved. We’re looking forward to seeing what the developers out there can do to take Invoice Ninja into new realms of usefulness.</p>
-      </div>
+      
+    </div>
+        <div class="col-md-7">
+             <img src="{{ asset('images/features1.jpg') }}">
+        </div>
     </div>
   </div>
 </section>
 
-<section class="about white-bg">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-5">
-        <div class="screendump">
-          <img src="images/features1.jpg">
-        </div>
-      </div>
-      <div class="col-md-7">
-        <h2>Free Forever</h2>
-        <p>Yeah, you read that correctly. You don’t have to pay us a cent to use our tools. We know how tough it is to make ends meet as a web-based business, and we’re bent on providing a top-notch product that will do everything you need it to do, without any subscription or opt-in fees. 
-        </p>
-        <p>
-        Try Invoice Ninja out. You literally have nothing to lose. We’re confident that you’ll find the experience so positive that you’ll never need to turn elsewhere.
-        </p>
-      </div>
-    </div>
-  </div>
-</section>
-<section class="about">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-7">
-        <h2>Secure and Private</h2>
-        <p>Invoice Ninja has been built from the ground up to keep your data safe. Only you have access to your login and accounting details, and we will never share your transaction data to any third party.</p>
-        <p>
-        Our website operates with <span class="blue-text">256-bit encryption</span>, which is even more secure than most banking websites. Invoice Ninja uses the <span class="blue-text">TLS 1.0 cryptographic protocol</span>, <span class="blue-text">AES_256_CBC string encryption</span>, <span class="blue-text">SHA1 message authentication</span> and <span class="blue-text">DHE_RSA key exchanges</span>. We feel safe here and have invested heavily in measures to ensure that you do too.  
-        </p>
-      </div>
-      <div class="col-md-5">
-        <div class="screendump">
-          <img src="images/features2.jpg">
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<section class="about white-bg">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-5">
-        <div class="screendump">
-          <img src="images/features3.jpg">
-        </div>
-      </div>
-      <div class="col-md-7">
-        <h2>Live PDF Creation</h2>
-        <p>With Invoice Ninja, we’ve done away with the need for cumbersome multi-click invoice previewing after each save. When you enter the details of your customer and/or invoice in our editor, you can instantly see the results in the pdf preview pane below. Want to see what your invoice would look like in a different layout style? The live pdf can show you four beautiful preset styles in real time too. 
-        </p>
-        <p>
-       Just create, save, send, and you’re done!
-        </p>
-      </div>
-    </div>
-  </div>
-</section>
-<section class="about">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-7">
-        <h2>Online Payments</h2>
-        <p>Invoice Ninja seamlessly integrates with all of the top internet payment processors and gateways so you can get paid for your work quickly and easily. Invoices crated with our tools aren’t just for bookkeeping purposes - they bring in the Benjamins.</p>
-        <p>
-        We also make it super easy to choose the right gateway for the specific needs of your business and are happy to help you to get started working with the gateway of your choice. What’s more, we’re constantly working on rolling out additional gateway integrations, so if you don’t see the one you use here, just let us know, and there’s a good chance we’ll add it for you.
-        </p>
-      </div>
-      <div class="col-md-5">
-        <div class="screendump">
-          <img src="images/features4.jpg">
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
+<section class="blue features">
+          <div class="container">
+            <div class="row">
+              
+              <div class="col-md-7">
+                <img src="{{ asset('images/devices-2.png') }}">
+              </div>
+                <div class="col-md-5">
+                    <div class="headline">
+               <div class="icon free"><span class="img-wrap"><img src="{{ asset('images/icon-free2.png') }}"></span></div><h2>FREE. Forever.</h2>
+                        </div>
+                   <p class="first">Set the code free! Here at Invoice Ninja, we’re all about being non-evil, and providing full code transparency is a central manifestation of this value.</p>
+          <p>Our users started seeing the benefits of open source within days of our launch, when we rolled out v1.0.2, which included some key code improvements that our friends on GitHub sent our way.
+</p>
+          <p>We firmly believe that being an open source product helps everyone involved. We’re looking forward to seeing what the developers out there can do to take Invoice Ninja into new realms of usefulness.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
   <section class="upper-footer white-bg">
    <div class="container">
     <div class="row">

app/views/public/splash.blade.php

@@ -36,12 +36,12 @@
       </div>
     </section>
 
-    <section class="features">
+    <section class="features-splash">
       <div class="container">
         <div class="row">
           <div class="col-md-3 one">
             <div class="box">
-              <div class="icon"><span class="img-wrap"><img src="{{ asset('images/icon-free.png') }}"></span></div>
+              <div class="icon free"><span class="img-wrap"><img src="{{ asset('images/icon-free.png') }}"></span></div>
               <h2>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>
@@ -49,7 +49,7 @@
 
           <div class="col-md-3 two">
             <div class="box">
-              <div class="icon"><span class="img-wrap"><img src="{{ asset('images/icon-opensource.png') }}"></span></div>
+              <div class="icon open"><span class="img-wrap"><img src="{{ asset('images/icon-opensource.png') }}"></span></div>
                 <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>
@@ -57,7 +57,7 @@
 
             <div class="col-md-3 three">
               <div class="box">
-                <div class="icon"><span class="img-wrap"><img src="{{ asset('images/icon-pdf.png') }}"></span></div>
+                <div class="icon pdf"><span class="img-wrap"><img src="{{ asset('images/icon-pdf.png') }}"></span></div>
                 <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>
@@ -65,7 +65,7 @@
 
             <div class="col-md-3 four">
               <div class="box">
-                <div class="icon"><span class="img-wrap"><img src="{{ asset('images/icon-payment.png') }}"></span></div>
+                <div class="icon pay"><span class="img-wrap"><img src="{{ asset('images/icon-payment.png') }}"></span></div>
                   <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>

public/css/splash.css

@@ -1,6 +1,7 @@
 body {
     font-family: Roboto, sans-serif;
     line-height: 1.6;
+    background-color: #fff;
 }
 
 .center-block {
@@ -16,13 +17,17 @@ h1,h2,.btn {
 }
 
 h1 {
-    font-size: 45px;
+    font-size: 56px;
     text-transform: uppercase;
 }
 
 h2 {
     font-size: 25px;
 }
+.headline { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px;}
+.thin {font-weight: 300;}
+
+p.first {font-size: 17px;}
 
 a,a .cta h2,.socicon,.btn {
     -webkit-transition: all .3s ease-in-out;
@@ -181,10 +186,15 @@ a .cta:hover span {
     background-size: cover;
 }
 
-.hero2 h1 {
+.hero h1 {
     color: #fff;
     margin: 0;
 }
+.hero h1 img {
+    display: inline;
+    margin-right: 10px;
+    margin-top: -6px;
+}
 
 .hero3 {
     text-align: center;
@@ -216,53 +226,30 @@ a .cta:hover span {
     min-height: 500px;
 }
 
-section.features,section.upper-footer {
-    margin: 60px 0;
+section.features-splash, section.upper-footer {
+    margin: 70px 0;
 }
 
+section.features {
+    margin: 0;
+    padding-top: 80px;
+}
+
+
+
 section.upper-footer.white-bg {
     margin: 0;
     padding: 60px 0;
 }
 
-section.features .col-md-3 .box {
+section.features-splash .box {
     padding: 20px;
     text-align: center;
 }
 
-section.features .col-md-3.two .box .icon {
-    background: #32ba8d;
-    border-color: #28ae82;
-}
+/*Icons*/
 
-section.features .col-md-3.two h2 {
-    color: #32ba8d;
-}
-
-section.features .col-md-3.three .box .icon {
-    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: 20px 0 15px;
-    color: #2599c0;
-}
-
-section.features .col-md-3 .box .icon {
+section.features-splash .icon {
     background: #2599c0;
     width: 94px;
     height: 94px;
@@ -270,16 +257,65 @@ section.features .col-md-3 .box .icon {
     text-align: center;
     display: table;
     margin: 0 auto;
-    
 }
 
-section.features .col-md-3 .box .icon .img-wrap {
+section.features .icon {
+    background: #2599c0;
+    width: 35px;
+    height: 35px;
+    border: 4px solid #1d8db3;
+    text-align: center;
+    display: table;
+    float: left;
+}
+
+.icon.open  {
+    background: #32ba8d !important;
+    border-color: #28ae82 !important;
+}
+
+section.features .icon.free img {width: 23px;}
+section.features .icon.open img {width: 23px;}
+section.blue .icon.free {background-color: #fff; border-color: #fff;}
+section.features-splash .two .box h2 {
+    color: #32ba8d;
+}
+
+.icon.pdf {
+    background: #d2462d !important;
+    border-color: #c23b23 !important;
+}
+
+section.features-splash .three .box h2 {
+    color: #d2462d;
+}
+
+.icon.pay {
+    background: #fad129 !important;
+    border-color: #f0c824 !important;
+}
+
+section.features-splash .four .box h2 {
+    color: #f0c824;
+}
+
+section.features-splash h2 {
+    margin: 20px 0 15px;
+    color: #2599c0;
+}
+section.features h2 {
+    display: inline-block;
+    margin-top: 5px;
+    padding-left: 15px;
+    color: #1a1818;
+}
+.icon .img-wrap {
   display: table-cell;
    vertical-align: middle;
    height: 100%;
 }
 
-section.features .col-md-3 .box .icon img {
+.icon img {
    vertical-align: middle;
 }
 
@@ -305,6 +341,7 @@ section.blue h1 {
     margin-top: 30px;
     font-size: 65px;
 }
+section.blue h2 {color: #fff;}
 section.blue a {color: #ffffff; text-decoration:underline;}
 
 section.blue p {margin-top: 15px;}