footer

assets/scss/_typography.scss

@@ -60,3 +60,26 @@ ul li:before {
     width: 1em;
     content: '\25AA';
 }
+
+input::-webkit-input-placeholder { /* Chrome */
+ color: $white;
+}
+input:-ms-input-placeholder { /* IE 10+ */
+ color: $white;
+}
+input::-moz-placeholder { /* Firefox 19+ */
+ color: $white;
+ opacity: 1;
+}
+input:-moz-placeholder { /* Firefox 4 - 18 */
+ color: $white;
+ opacity: 1;
+}
+
+.left{
+  float:left;
+}
+
+.right{
+  float:right;
+}

assets/scss/modules/_footer.scss

@@ -1,18 +1,138 @@
 .footer-container {
   max-width: 100%;
   width: 100%;
-  margin: 0 auto;
-  border-top: 1px solid $medium-gray;
-  margin-top: rem-calc(60);
+  margin: rem-calc(60) auto 0;
+  color: $white;
+  padding: 30px 0 0;
+  font-size: 0.8em;
 }
 
 .footer {
-  @include grid-row();
-  padding: rem-calc(30) 0;
 
   ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
-}
+
+  .footer-form {
+    background-color: $primary-color;
+    padding: 50px 0;
+    color: $white;
+
+    .form-title {
+      color: $white;
+    }
+
+    .form-description {}
+
+    nf-field {
+      color: $white;
+      width: 50%;
+      float: left;
+      padding: 10px;
+
+      input {
+        background-color: transparent;
+        color: $white;
+        border: none;
+        box-shadow: none;
+        border-bottom: 1px $white solid;
+      }
+    }
+
+    nf-field:last-child {
+      width: 100%;
+    }
+
+    select {
+      background-color: transparent;
+      border: none;
+      border-bottom: $white 1px solid;
+      color: $white;
+    }
+
+    label {
+      color: $white;
+    }
+
+    .nf-error-msg {
+      color: $secondary-color;
+    }
+
+    textarea {
+      box-shadow: none;
+      background-color: transparent;
+      color: $white;
+      border: 1px $white solid;
+    }
+
+    input {
+      box-shadow: none;
+    }
+
+    .submit-wrap {
+      input {
+        border: 1px $white solid;
+        padding: 15px 40px;
+        float: right;
+        transition: all 0.45s;
+        font-weight: 700;
+
+        &:hover {
+          background-color: $white;
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  .footer-upper {
+    background-color: $medium-gray;
+    padding: 60px 0;
+    text-align: center;
+
+    .row-16 {
+      @include grid-row(16) {
+        article {
+          @include grid-column(2);
+
+          img {
+            height: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  .footer-lower {
+    background-color: $dark-gray;
+    padding: 60px 0 ;
+  }
+}
+
+.footer-contact {
+  float: right;
+  text-align: right;
+
+  h4 {
+    color: $white;
+  }
+
+  img {
+    width: 40px;
+    padding: 0 0 0 10px;
+  }
+
+  a {
+    transition: opacity 0.35s;
+  }
+
+  a:hover {
+    opacity: 0.8;
+  }
+
+  a:after {
+    display: none;
+  }
+}

footer.php

@@ -14,7 +14,23 @@
 		<div class="footer-container" data-sticky-footer>
 			<footer class="footer">
 				<?php do_action( 'foundationpress_before_footer' ); ?>
-				<?php dynamic_sidebar( 'footer-widgets' ); ?>
+				<div class="footer-form">
+			  <div class="row">
+
+				<?php dynamic_sidebar( 'form-footer-widgets' ); ?>
+
+				</div>
+			</div>
+				<div class="footer-upper">
+					 <div class="row-16">
+				<?php dynamic_sidebar( 'upper-footer-widgets' ); ?>
+					</div>
+			</div>
+			<div class="footer-lower">
+				 <div class="row">
+				<?php dynamic_sidebar( 'lower-footer-widgets' ); ?>
+				</div>
+			</div>
 				<?php do_action( 'foundationpress_after_footer' ); ?>
 			</footer>
 		</div>

library/widget-areas.php

@@ -19,14 +19,33 @@ function foundationpress_sidebar_widgets() {
 	));
 
 	register_sidebar(array(
-		'id' => 'footer-widgets',
-		'name' => __( 'Footer widgets', 'foundationpress' ),
-		'description' => __( 'Drag widgets to this footer container', 'foundationpress' ),
-		'before_widget' => '<article id="%1$s" class="large-4 columns widget %2$s">',
+		'id' => 'upper-footer-widgets',
+		'name' => __( 'Upper Footer widgets', 'foundationpress' ),
+		'description' => __( 'Drag sponser images to this footer container', 'foundationpress' ),
+		'before_widget' => '<article id="%1$s" class=" widget %2$s">',
 		'after_widget' => '</article>',
 		'before_title' => '<h6>',
 		'after_title' => '</h6>',
 	));
+
+	register_sidebar(array(
+		'id' => 'lower-footer-widgets',
+		'name' => __( 'Lower Footer widgets', 'foundationpress' ),
+		'description' => __( 'Drag info and image to this footer container', 'foundationpress' ),
+		'before_widget' => '<article id="%1$s" class="large-3 columns widget %2$s">',
+		'after_widget' => '</article>',
+		'before_title' => '<h6>',
+		'after_title' => '</h6>',
+	));
+	register_sidebar(array(
+		'id' => 'form-footer-widgets',
+		'name' => __( 'Form Footer widgets', 'foundationpress' ),
+		'description' => __( 'Drag form widgets to this footer container', 'foundationpress' ),
+		'before_widget' => '<div class="row"> <article id="%1$s" class="large-8 left large-offset-2 columns widget %2$s">',
+		'after_widget' => '</article></div>',
+		'before_title' => '<h6>',
+		'after_title' => '</h6>',
+	));
 }
 
 add_action( 'widgets_init', 'foundationpress_sidebar_widgets' );