diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 30a486c..3dda9cd 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -323,7 +323,7 @@ body { width: 75%; margin: 0 auto; box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1); - background-color: #fff; + background-color: rgba(255, 255, 255, 0.6); border-radius: 3px; padding: 6rem; padding-left: 9rem; @@ -339,11 +339,47 @@ body { shape-outside: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); - transform: translateX(-3rem) skewX(12deg); } + transform: translateX(-3rem) skewX(12deg); + position: relative; } .story__img { - height: 100%; } + height: 100%; + transform: translateX(-4rem) scale(1.4); + backface-visibility: hidden; + transition: all .5s; } .story__text { transform: skewX(12deg); } + .story__caption { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20%); + color: #fff; + text-transform: uppercase; + font-size: 1.7rem; + text-align: center; + opacity: 0; + transition: all .5s; + backface-visibility: hidden; } + .story:hover .story__caption { + opacity: 1; + transform: translate(-50%, -50%); } + .story:hover .story__img { + transform: translateX(-4rem) scale(1); + filter: blur(3px) brightness(80%); } + +.bg-video { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: -1; + opacity: .15; + overflow: hidden; } + .bg-video__content { + height: 100%; + width: 100%; + object-fit: cover; } .header { height: 95vh; @@ -421,5 +457,5 @@ body { margin-top: -10rem; } .section-stories { - padding: 15rem 0; - background-color: #f7f7f7; } + position: relative; + padding: 15rem 0; } diff --git a/Natours/starter/index.html b/Natours/starter/index.html index 44249c8..5f6c377 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -237,6 +237,13 @@
+
+ +

We make people genuinely happy

@@ -249,6 +256,7 @@ alt="Person on a tour" class="story__img" /> +
Mary Smith

@@ -263,6 +271,34 @@

+ +
+
+
+ Person on a tour +
Jack Wilson
+
+
+

+ WOW! My life is completly different now +

+

+ Lorem ipsum dolor sit amet, qui minim labore adipisicing minim + sint cillum sint consectetur cupidatat. Lorem ipsum dolor sit + amet, qui minim labore adipisicing minim sint cillum sint + consectetur cupidatat. Lorem ipsum dolor sit amet, qui minim + labore adipisicing minim sint cillum sint consectetur cupidatat. +

+
+
+ +
+ Read all stories → +

diff --git a/Natours/starter/sass/components/_bg-video.scss b/Natours/starter/sass/components/_bg-video.scss new file mode 100644 index 0000000..32e2607 --- /dev/null +++ b/Natours/starter/sass/components/_bg-video.scss @@ -0,0 +1,16 @@ +.bg-video { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: -1; + opacity: .15; + overflow: hidden; + + &__content { + height: 100%; + width: 100%; + object-fit: cover; + } +} diff --git a/Natours/starter/sass/components/_story.scss b/Natours/starter/sass/components/_story.scss index 04e8eaf..175e523 100644 --- a/Natours/starter/sass/components/_story.scss +++ b/Natours/starter/sass/components/_story.scss @@ -2,14 +2,14 @@ width: 75%; margin: 0 auto; box-shadow: 0 3rem 6rem rgba($color-black, 0.1); - background-color: $color-white; + background-color: rgba($color-white, .6); border-radius: 3px; padding: 6rem; padding-left: 9rem; font-size: $default-font-size; transform: skewX(-12deg); - & > * { + &>* { transform: skewX(12deg); } @@ -24,13 +24,41 @@ -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); transform: translateX(-3rem) skewX(12deg); + position: relative; } &__img { height: 100%; + transform: translateX(-4rem) scale(1.4); + backface-visibility: hidden; + transition: all .5s; } &__text { transform: skewX(12deg); } + + &__caption { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 20%); + color: $color-white; + text-transform: uppercase; + font-size: 1.7rem; + text-align: center; + opacity: 0; + transition: all .5s; + backface-visibility: hidden; + } + + &:hover &__caption { + opacity: 1; + transform: translate(-50%, -50%); + } + + &:hover &__img { + transform: translateX(-4rem) scale(1); + filter: blur(3px) brightness(80%); + } } diff --git a/Natours/starter/sass/main.scss b/Natours/starter/sass/main.scss index 7db48a8..1eace17 100644 --- a/Natours/starter/sass/main.scss +++ b/Natours/starter/sass/main.scss @@ -12,6 +12,7 @@ @import "components/feature-box"; @import "components/card"; @import "components/story"; +@import "components/bg-video"; @import "layout/header"; @import "layout/grid"; diff --git a/Natours/starter/sass/pages/_home.scss b/Natours/starter/sass/pages/_home.scss index cdb0938..0442af8 100644 --- a/Natours/starter/sass/pages/_home.scss +++ b/Natours/starter/sass/pages/_home.scss @@ -6,18 +6,16 @@ .section-features { padding: 20rem 0; - background-image: linear-gradient( - to right bottom, + background-image: linear-gradient(to right bottom, rgba($color-primary-light, 0.801), - rgba($color-primary-dark, 0.808) - ), + rgba($color-primary-dark, 0.808)), url("../img/nat-4.jpg"); background-size: cover; margin-top: -10rem; transform: skewY(-7deg); - & > * { + &>* { transform: skewY(7deg); } } @@ -29,6 +27,6 @@ } .section-stories { + position: relative; padding: 15rem 0; - background-color: $color-grey-light-1; }