diff --git a/css/layout1.sass b/css/layout1.sass index cfa0bc1..6378f8d 100644 --- a/css/layout1.sass +++ b/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% diff --git a/css/style.css b/css/style.css index 85fcdbe..75d4f08 100644 --- a/css/style.css +++ b/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%; } diff --git a/index.html b/index.html index 41bbbe2..972b9c9 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,11 @@

Clothing Store

+

Clothing Store

+
+

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.

+
+
diff --git a/index.jade b/index.jade index 3623f01..b52be0c 100644 --- a/index.jade +++ b/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") diff --git a/readme.html b/readme.html index 084f898..623b2a3 100644 --- a/readme.html +++ b/readme.html @@ -34,6 +34,15 @@

Video 3 - “Landing Elements”

+

Video 4 - “The Periscope”

+ +


Watch on YouTube

+ + + +

If this stuff is helpful, consider subscribing to my YouTube Channel

diff --git a/readme.md b/readme.md index 596c92b..557cf38 100644 --- a/readme.md +++ b/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" + +
Watch on YouTube
+ +- 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)_