leather 0.2.29 → 3.2.0

data/app/assets/stylesheets/leather/_scroll_panels.css.scss

@@ -0,0 +1,85 @@
+.scroll-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  .scroll-panel-header {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: $scroll-panel-header-height;
+    padding: 10px 20px;
+    background: #FFF;
+    border-bottom: 1px solid #F1F1F1;
+
+    .scroll-panel-title {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: 18px;
+      line-height: 30px;
+    }
+
+    .btn.pull-left ~ .scroll-panel-title {
+      margin-left: 15px;
+      float: left;
+    }
+    
+    @media (max-width: $screen-xs-max) {
+      .btn.pull-left.visible-xs ~ .scroll-panel-title {
+        margin-left: 15px;
+      }
+    }
+    
+    @media (max-width: $screen-sm-max) {
+      .btn.pull-left.visible-xs.visible-sm ~ .scroll-panel-title {
+        margin-left: 15px;
+      }
+    }
+    
+    @media (min-width: $screen-sm-min) {
+      .btn.pull-left.visible-xs ~ .scroll-panel-title {
+        margin-left: 0;
+      }
+    }
+    
+    @media (min-width: $screen-md-min) {
+      .btn.pull-left.visible-xs.visible-sm ~ .scroll-panel-title {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .scroll-panel-body {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .scroll-panel-header ~ .scroll-panel-body {
+    top: $scroll-panel-header-height;
+  }
+
+  .scroll-panel-header.visible-xs ~ .scroll-panel-body,
+  .scroll-panel-header.visible-sm ~ .scroll-panel-body  {
+    top: 0;
+  }
+  
+  @media (max-width: $screen-xs-max) {
+    .scroll-panel-header.visible-xs ~ .scroll-panel-body {
+      top: $scroll-panel-header-height;
+    }
+  }
+  
+  @media (max-width: $screen-sm-max) {
+    .scroll-panel-header.visible-sm ~ .scroll-panel-body {
+      top: $scroll-panel-header-height;
+    }
+  }
+}

data/app/assets/stylesheets/leather/_toggle_columns.css.scss

@@ -0,0 +1,23 @@
+#right {
+  width: 40%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+#left {
+  width: 60%;
+  position: absolute;
+  top: 0;
+  left: 40%;
+  bottom: 0;
+}
+
+@media (max-width: $screen-xs-max) {
+  .full-width-xs {
+    width: 100% !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
+}

data/app/assets/stylesheets/leather/_typography.css.scss

@@ -0,0 +1,12 @@
+.text-shadowed {
+  text-shadow: 1px 1px 2px $gray-dark;
+}
+.text-light {
+  font-weight: 200;
+}
+.text-lighter {
+  font-weight: lighter;
+}
+.blog-heading {
+  margin: 30px 0;
+}

data/app/assets/stylesheets/leather/_utilities.css.scss

@@ -0,0 +1,54 @@
+.abs-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover !important;
+}
+
+.vertical-center {
+  position: relative; 
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.bg-white { background:#FFF; }
+.bg-gray-light { background: $gray-light; }
+.bg-gray-lighter { background: $gray-lighter; }
+.bg-gray-lightest { background: $navbar-default-bg; }
+.bg-gray-radial-light {
+  background: #eeeeee;
+  background: -moz-radial-gradient(center, ellipse cover, #eeeeee 0%, #dddddd 100%) !important;
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)) !important;
+  background: -webkit-radial-gradient(center, ellipse cover, #eeeeee 0%, #dddddd 100%) !important;
+  background: -o-radial-gradient(center, ellipse cover, #eeeeee 0%, #dddddd 100%) !important;
+  background: -ms-radial-gradient(center, ellipse cover, #eeeeee 0%, #dddddd 100%) !important;
+  background: radial-gradient(ellipse at center, #eeeeee 0%, #dddddd 100%) !important;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=1);
+}
+.bg-gray-radial-dark {
+  background: #333333;
+  background: -moz-radial-gradient(center, ellipse cover, #3b3b3b 0%, #222222 100%) !important;
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #3b3b3b), color-stop(100%, #222222)) !important;
+  background: -webkit-radial-gradient(center, ellipse cover, #3b3b3b 0%, #222222 100%) !important;
+  background: -o-radial-gradient(center, ellipse cover, #3b3b3b 0%, #222222 100%) !important;
+  background: -ms-radial-gradient(center, ellipse cover, #3b3b3b 0%, #222222 100%) !important;
+  background: radial-gradient(ellipse at center, #3b3b3b 0%, #222222 100%) !important;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b3b3b', endColorstr='#222222', GradientType=1) !important;
+}
+
+.no-margin { margin: 0; }
+.no-padding { padding: 0; }
+.no-overflow { overflow: hidden; }
+.no-radius {
+  @include border-top-radius(0);
+  @include border-bottom-radius(0);
+}
+
+.absolute { position: absolute; }
+.relative {  position: relative; }
+.block { display: block; }
+.inline-block { display: inline-block; }

data/app/assets/stylesheets/leather/_variables.css.scss

@@ -1,16 +1,7 @@
-$devise-bg-gradient-start: #355069 !default;
-$devise-bg-gradient-end:   #5E7A9B !default;
-$devise-box-border-color:  #6ED5E4 !default;
+$devise-bg-gradient-start:        #355069 !default;
+$devise-bg-gradient-end:          #5E7A9B !default;
+$devise-box-border-color:         #6ED5E4 !default;
 
-$off-canvas-width:         300px   !default;
-$off-canvas-bg-color:      $navbar-default-bg !default;
-$off-canvas-border:        $navbar-default-border !default;
-$off-canvas-color:         #333333 !default;
-
-$off-canvas-inverse-bg:           $navbar-inverse-bg !default;
-$off-canvas-inverse-color:        $navbar-inverse-link-hover-color !default;
-$off-canvas-inverse-border:       $navbar-inverse-border !default;
-$off-canvas-inverse-brand-color:  $navbar-inverse-link-hover-color !default;
-
-$navbar-fixed-left-width:                   230px;
-$header-height:                             50px;
+$navbar-fixed-width:              350px;
+$navbar-fixed-collapsed-width:    75px;
+$scroll-panel-header-height:      $navbar-height;

data/app/assets/stylesheets/leather/components/_cta.css.scss

@@ -0,0 +1,13 @@
+.cta {
+  padding: 40px 0;
+
+  h2 {
+    margin-bottom: 20px;
+  }
+
+  &.cta-inline {
+    h2 {
+      margin: 6px 0 0 0;
+    }
+  }
+}

data/app/assets/stylesheets/leather/components/_features.css.scss

@@ -0,0 +1,87 @@
+@mixin feature-block-variant($color, $bg) {
+  background: lighten($bg, 7%);
+  border-right: 1px solid lighten($bg, 10%);
+  color: $color;
+
+  &:first-child {
+    background: $bg;
+  }
+
+  &:last-child {
+    background: lighten($bg, 12%);
+  }
+
+  &:hover, &:focus {
+    color: $color;
+  }
+
+  .detail-line:before {
+    border-color: $color;
+  }
+}
+
+.features {
+  padding-bottom: 40px;
+
+  .feature {
+    margin-bottom: 40px;
+  }
+}
+
+.detail-line {
+  margin: 0 0 24px 0;
+  
+  &:before {
+    content: "";
+    width: 30px;
+    border-bottom: 1px solid #333;
+    margin-bottom: 24px;
+    display: block;
+  }
+}
+
+.feature-block {
+  padding: 60px 30px;
+  transition: all 0.6s ease;
+  -webkit-transition: all 0.6s ease;
+  -moz-transition: all 0.6s ease;
+
+  p {
+    display: none;
+  }
+
+  .detail-line:before {
+    display: inline-block;
+    margin: 10px 0 0 0;
+  }
+
+  &:hover {
+    p {
+      display: block;
+    }
+  }
+  
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &.feature-block-primary {
+    @include feature-block-variant($btn-primary-color, $btn-primary-bg);
+  }
+
+  &.feature-block-info {
+    @include feature-block-variant($btn-info-color, $btn-info-bg);
+  }
+
+  &.feature-block-success {
+    @include feature-block-variant($btn-success-color, $btn-success-bg);
+  }
+
+  &.feature-block-warning {
+    @include feature-block-variant($btn-warning-color, $btn-warning-bg);
+  }
+
+  &.feature-block-danger {
+    @include feature-block-variant($btn-danger-color, $btn-danger-bg);
+  }
+}

data/app/assets/stylesheets/leather/components/_flex_boxes.css.scss

@@ -0,0 +1,37 @@
+.flex-grid {
+  .flex-row {
+    display: flex;
+
+    .flex-cell {
+      flex: 1;
+    }
+
+    .flex-cell-wide {
+      flex: 0 0 percentage(2/3);
+    }
+  }
+
+  &.flex-grid-bordered {
+    .flex-row {
+      border-bottom: 1px solid #ccc;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .flex-cell {
+        border-left: 1px solid #ccc;
+
+        &:first-child {
+          border-left: none;
+        }
+      }
+    }
+  }
+
+  &.flex-grid-padded {
+    .flex-cell {
+      padding: 20px;
+    }
+  }
+}

data/app/assets/stylesheets/leather/components/_image_block.css.scss

@@ -0,0 +1,55 @@
+.image-block {
+  padding: 0;
+
+  .image-block-copy {
+    padding: 80px 0;
+    min-height: 400px;
+
+    p {
+      margin: 30px 0;
+    }
+  }
+
+  .image {
+    position: absolute; 
+    top: 0; 
+    height: 100%; 
+  }
+
+  .image-right {
+    right: 0;
+  }
+
+  .image-left {
+    left: 0;
+  }
+
+  &.image-block-bottom {
+    .image {
+      bottom: 0;
+      top: 80px;
+    }
+  }
+}
+
+@media(max-width: $screen-xs-max) {
+  .image-block {
+
+    .image-block-copy {
+      padding: 40px 0;
+      min-height: 300px;
+    }
+
+    .image {
+      position: relative;
+      height: 300px;
+      width: 100%;
+    }
+
+    &.image-block-bottom {
+      .image {
+        top: 0;
+      }
+    }
+  }
+}

data/app/controllers/leather/application_controller.rb

@@ -3,7 +3,11 @@ module Leather
     layout 'application'
 
     def ui_kit
-      set_tab :home
+      set_tab :ui_kit
+    end
+
+    def components
+      set_tab :components
     end
   end
 end

data/app/controllers/leather/layouts_controller.rb

@@ -0,0 +1,15 @@
+module Leather
+  class LayoutsController < ApplicationController
+    def admin
+      set_tab :layouts
+    end
+
+    def two_column
+      set_tab :layouts
+    end
+
+    def three_column
+      set_tab :layouts
+    end
+  end
+end

data/app/views/leather/application/components.html.haml

@@ -0,0 +1,174 @@
+= content_for :body_class do
+  = "bg-gray-lighter container-lg"
+
+.jumbotron.relative.no-margin.text-white{style: "height: 700px;"}
+  .abs-cover.hero24
+  .vertical-center.text-center
+    .text-shadowed
+      %h1.text-lighter Welcome to Leather
+      %p.text-lighter Hello
+    = link_to "Learn More", "", class: "btn btn-lg no-radius btn-primary"
+
+%section.bg-gray-lightest.features
+  .container
+    .row
+      .col-sm-4
+        .feature
+          %h4.detail-line Feature 1
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+      .col-sm-4
+        .feature
+          %h4.detail-line Feature 2
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+      .col-sm-4
+        .feature
+          %h4.detail-line Feature 3
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+
+%section.bg-white.features
+  .container
+    .row
+      .col-sm-3
+        .feature
+          %h4.detail-line Feature 1
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+      .col-sm-3
+        .feature
+          %h4.detail-line Feature 2
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+      .col-sm-3
+        .feature
+          %h4.detail-line Feature 3
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+      .col-sm-3
+        .feature
+          %h4.detail-line Feature 4
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+
+%section.no-padding
+  .flex-grid.text-center
+    .flex-row
+      = link_to "#", class: "feature-block feature-block-primary flex-cell" do
+        %h4.text-light Hover Link Feature
+        .detail-line
+        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+      = link_to "#", class: "feature-block feature-block-primary flex-cell" do
+        %h4.text-light Hover Link Feature
+        .detail-line
+        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+      = link_to "#", class: "feature-block feature-block-primary flex-cell" do
+        %h4.text-light Hover Link Feature
+        .detail-line
+        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+
+%section.bg-gray-lightest.relative.image-block
+  .image.image-right.col-sm-5.col-md-6
+    .abs-cover.hero24
+  .container
+    .row
+      .col-sm-7.col-md-5
+        .image-block-copy
+          %h2.no-margin.text-lighter Image Block Right
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+          = link_to "Learn More", "", class: "btn no-radius btn-primary"
+
+%section.bg-gray-lightest.relative.image-block
+  .image.image-left.col-sm-5.col-md-6
+    .abs-cover.hero24
+  .container
+    .row
+      .col-sm-7.col-md-5.col-md-offset-7.col-sm-offset-5
+        .image-block-copy
+          %h2.no-margin.text-lighter Image Block Left
+          %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+          = link_to "Learn More", "", class: "btn no-radius btn-primary"
+
+%section.bg-white
+  .container
+    .flex-grid.flex-grid-bordered.flex-grid-padded
+      .flex-row
+        .flex-cell.flex-cell-wide.bg-gray-lightest
+          Flex Box
+        .flex-cell 
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+      .flex-row
+        .flex-cell.bg-gray-lightest 
+          Flex Box
+        .flex-cell.flex-cell-wide
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+      .flex-row
+        .flex-cell.bg-gray-lightest
+          Flex Box
+        .flex-cell
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+      .flex-row
+        .flex-cell.bg-gray-lightest
+          Flex Box
+        .flex-cell
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+        .flex-cell
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+      .flex-row
+        .flex-cell.bg-gray-lightest
+          Flex Box
+        .flex-cell
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+        .flex-cell
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+        .flex-cell
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+
+%section.bg-gray-lightest
+  .container
+    .row
+      .col-sm-2
+        .text-center
+          %p= image_tag "http://placehold.it/200x200", class: "img-responsive img-circle inline-block"
+          %p
+            %span.text-muted by
+            Author Name
+      .col-sm-9.col-sm-offset-1
+        %h4.detail-line.text-lighter.text-muted.no-margin= Time.zone.now.strftime("%b %d, %Y")
+        %h3.text-lighter.blog-heading Post Title
+
+        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+
+        %h4.blog-heading Subheading
+
+        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+
+        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+
+%section.bg-gray-radial-light.no-overflow.image-block.image-block-bottom
+  .container
+    .row.relative
+      .col-sm-6
+        .image-block-copy.relative
+          .vertical-center.absolute
+            %h2.text-light.text-primary.no-margin Title
+            %p.text-muted Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+            = link_to "Learn More", "", class: "btn btn-primary no-radius btn-outline"
+      .image.image-right.col-sm-6.col-md-4
+        = image_tag "leather/phone.png", class: "img-responsive"
+
+%section.bg-white.text-center.cta.cta-inline
+  .container
+    %h2.text-primary.text-light.pull-left Call to Action
+    = link_to "Learn More", "", class: "btn btn-primary btn-lg text-white no-radius btn-outline pull-right"
+
+%section.bg-gray-radial-dark.text-white.no-overflow.image-block.image-block-bottom
+  .container
+    .row.relative
+      .col-sm-6.col-sm-push-6
+        .image-block-copy.relative
+          .vertical-center.absolute
+            %h2.text-light.no-margin Title
+            %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. 
+            = link_to "Learn More", "", class: "btn btn-default text-white no-radius btn-outline"
+      .image.image-left.col-sm-6.col-md-4
+        = image_tag "leather/phone.png", class: "img-responsive"
+
+%section.bg-white.text-center.cta
+  .container
+    %h2.text-primary.text-light Call to Action
+    %p= link_to "Learn More", "", class: "btn btn-primary btn-lg text-white no-radius btn-outline"