End of video4 - the periscope

Author: travisneilson

css/layout1.sass

@@ -84,3 +84,17 @@ img
     &.is-showing
       opacity: 1
       transform: translateX(0px)
+
+
+
+// large-window
+
+.large-window
+  height: 640px
+  background:
+    image: url(/images/model2.jpg)
+    position: center 0px
+    repeat: repeat-y
+    attachment: fixed
+  margin-top: 100px
+  border-radius: 50%

css/style.css

@@ -924,3 +924,12 @@ img {
   .clothes-pics figure.is-showing {
     opacity: 1;
     transform: translateX(0px); }
+
+.large-window {
+  height: 640px;
+  background-image: url(/images/model2.jpg);
+  background-position: center 0px;
+  background-repeat: repeat-y;
+  background-attachment: fixed;
+  margin-top: 100px;
+  border-radius: 50%; }

index.html

@@ -38,6 +38,11 @@ <h1>Clothing Store</h1>
             <figure class="columns four"><img src="/images/model2.jpg"></figure>
           </div>
         </div>
+        <h1>Clothing Store</h1>
+        <hr>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
+        <hr>
+        <div class="large-window"></div>
       </article>
       <div style="height: 2000px"></div>
     </section>

index.jade

@@ -61,7 +61,17 @@ html(lang="en")
             figure.columns.four
               img(src="/images/model2.jpg")
 
-              
+        
+        h1 Clothing Store
+        
+        hr
+        
+        p Lorem ipsum dolor sit amet, consectetur adipisicing 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 ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
+        
+        hr
+        
+        .large-window
+        
 
       div(style="height: 2000px")
 

readme.html

@@ -34,6 +34,15 @@ <h2>Video 3 - &ldquo;Landing Elements&rdquo;</h2>
 </ul>
 
 
+<h2>Video 4 - &ldquo;The Periscope&rdquo;</h2>
+
+<p><a href="https://youtu.be/uYPdA_SFSDw"><img src="https://i.ytimg.com/vi/uYPdA_SFSDw/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.3">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

@@ -29,6 +29,16 @@ 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.2).
 
+
+
+## Video 4 - "The Periscope"
+
+<a href="https://youtu.be/uYPdA_SFSDw"><img src="https://i.ytimg.com/vi/uYPdA_SFSDw/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.3).
+
+
 ---
 
+
 _If this stuff is helpful, consider subscribing to my [YouTube Channel](https://www.youtube.com/user/DevTipsForDesigners)_