Code for video number 8

Author: travisneilson

css/layout1.sass

@@ -11,6 +11,11 @@ figure
   margin: auto
 
 .content
+  position: relative
+  z-index: 2
+  background: white
+  margin-bottom: 400px
+
   article
     padding: 100px 0
     max-width: 640px
@@ -22,6 +27,7 @@ img
 
 
 
+
 // Parallax
 
 .bird-box
@@ -189,3 +195,24 @@ img
 
   .post-3
     transform: translate(-100px, 20px)
+
+
+//footer
+
+footer
+  background: black
+  color: white
+  padding: 40px 0
+  position: fixed
+  bottom: 0
+  width: 100%
+
+  .footer-stuff
+    max-width: 640px
+    margin: 0 auto
+
+  a
+    color: white
+
+  input
+    color: #666

css/style.css

@@ -866,11 +866,16 @@ h1 {
 figure {
   margin: auto; }
 
-.content article {
-  padding: 100px 0;
-  max-width: 640px;
-  margin: 0 auto;
-  text-align: center; }
+.content {
+  position: relative;
+  z-index: 2;
+  background: white;
+  margin-bottom: 400px; }
+  .content article {
+    padding: 100px 0;
+    max-width: 640px;
+    margin: 0 auto;
+    text-align: center; }
 
 img {
   max-width: 100%; }
@@ -1005,3 +1010,18 @@ img {
     z-index: 2; }
   .blog-posts .post-3 {
     transform: translate(-100px, 20px); }
+
+footer {
+  background: black;
+  color: white;
+  padding: 40px 0;
+  position: fixed;
+  bottom: 0;
+  width: 100%; }
+  footer .footer-stuff {
+    max-width: 640px;
+    margin: 0 auto; }
+  footer a {
+    color: white; }
+  footer input {
+    color: #666; }

index.html

@@ -87,8 +87,38 @@ <h5>Post Title</h5><img src="/images/posts/three.jpg">
           </div>
         </div>
       </article>
-      <div style="height: 2000px"></div>
     </section>
+    <footer>
+      <div class="row footer-stuff">
+        <div class="columns three"><strong>FIND US ON</strong>
+          <ul>
+            <li><a href="">Twitter</a></li>
+            <li><a href="">Facebook</a></li>
+            <li><a href="">Pinterest</a></li>
+            <li><a href="">Instagram</a></li>
+          </ul>
+        </div>
+        <div class="columns three"><strong>OTHER SHOPS</strong>
+          <ul>
+            <li><a href="">Red Robin</a></li>
+            <li><a href="">Emerald Eagle</a></li>
+            <li><a href="">Crimson Crane</a></li>
+            <li><a href="">Auburn Abbot</a></li>
+          </ul>
+        </div>
+        <div class="columns six">
+          <p><strong>Sign Up for the newsletter</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+          <form class="row">
+            <div class="columns eight">
+              <input type="email" placeholder="Your Email" class="u-full-width">
+            </div>
+            <div class="columns four">
+              <input type="submit" class="button-primary">
+            </div>
+          </form>
+        </div>
+      </div>
+    </footer>
     <script src="/js/jquery-2.1.3.min.js"></script>
     <script src="/js/functions.js"></script>
   </body>

index.jade

@@ -116,7 +116,33 @@ html(lang="en")
             p Duis aute irure dolor in reprehenderit.
             p: a.button(href="") Read More
 
-      div(style="height: 2000px")
+    footer
+      .row.footer-stuff
+        .columns.three
+          strong FIND US ON
+          ul
+            li: a(href="") Twitter
+            li: a(href="") Facebook
+            li: a(href="") Pinterest
+            li: a(href="") Instagram
+        
+        .columns.three
+          strong OTHER SHOPS
+          ul
+            li: a(href="") Red Robin
+            li: a(href="") Emerald Eagle
+            li: a(href="") Crimson Crane
+            li: a(href="") Auburn Abbot
+        
+        .columns.six
+          p <strong>Sign Up for the newsletter</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          
+          form.row
+            .columns.eight
+              input.u-full-width(type="email" placeholder="Your Email")
+            .columns.four
+              input.button-primary(type="submit")
+
 
     script(src="/js/jquery-2.1.3.min.js")
     script(src="/js/functions.js")

readme.html

@@ -69,6 +69,14 @@ <h2 id="video7-floatingelements">Video 7 - &#8220;Floating Elements&#8221;</h2>
 <li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.6">Get the code</a>.</li>
 </ul>
 
+<h2 id="video8-revealedfooter">Video 8 - &#8220;Revealed Footer&#8221;</h2>
+
+<p><a href="https://youtu.be/VH0iYda6KNs"><img src="https://i.ytimg.com/vi/VH0iYda6KNs/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.7">Get the code</a>.</li>
+</ul>
+
 <hr />
 
 <p><em>If this stuff is helpful, consider subscribing to my <a href="https://www.youtube.com/user/DevTipsForDesigners">YouTube Channel</a></em></p>

readme.md

@@ -62,6 +62,14 @@ Releases correspond to the videos. Visit the releases page on this repo to find
 - Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.6).
 
 
+## Video 8 - "Revealed Footer"
+
+<a href="https://youtu.be/VH0iYda6KNs"><img src="https://i.ytimg.com/vi/VH0iYda6KNs/mqdefault.jpg"><br>Watch on YouTube</a>
+
+
+- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.7).
+
+
 ---