Skip to content

Commit cb1b0cd

Browse files
vycodervycoder
committed
Completed Stories section
1 parent 974968c commit cb1b0cd

File tree

6 files changed

+190
-2
lines changed

6 files changed

+190
-2
lines changed

‎Natours/starter/css/style.css

+65-1
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,19 @@ body {
189189
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
190190
transform: translateY(0); }
191191

192+
.bg-video {
193+
position: absolute;
194+
top: 0;
195+
left: 0;
196+
height: 100%;
197+
width: 100%;
198+
z-index: -1;
199+
opacity: .15; }
200+
.bg-video__content {
201+
height: 100%;
202+
width: 100%;
203+
object-fit: cover; }
204+
192205
.card {
193206
perspective: 150rem;
194207
-moz-perspective: 150rem;
@@ -328,6 +341,53 @@ body {
328341
background-clip: text;
329342
color: transparent; }
330343

344+
.story {
345+
width: 75%;
346+
margin: 0 auto;
347+
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
348+
background-color: rgba(255, 255, 255, 0.6);
349+
border-radius: 3px;
350+
padding: 6rem;
351+
padding-left: 9rem;
352+
font-size: 1.6rem;
353+
transform: skewX(-12deg); }
354+
.story > * {
355+
transform: skewX(12deg); }
356+
.story__shape {
357+
width: 15rem;
358+
height: 15rem;
359+
float: left;
360+
-webkit-shape-outside: circle(50% at 50% 50%);
361+
shape-outside: circle(50% at 50% 50%);
362+
clip-path: circle(50% at 50% 50%);
363+
-webkit-clip-path: circle(50% at 50% 50%);
364+
transform: translateX(-3rem) skewX(12deg);
365+
position: relative; }
366+
.story__image {
367+
height: 100%;
368+
transform: translateX(-4rem) scale(1.4);
369+
backface-visibility: hidden;
370+
transition: all .5s; }
371+
.story__caption {
372+
position: absolute;
373+
top: 50%;
374+
left: 50%;
375+
transform: translate(-50%, 20%);
376+
opacity: 0;
377+
transition: all .5s;
378+
color: #FFF;
379+
font-size: 1.7rem;
380+
text-align: center;
381+
backface-visibility: hidden; }
382+
.story__text {
383+
transform: skewX(12deg); }
384+
.story:hover .story__caption {
385+
opacity: 1;
386+
transform: translate(-50%, -50%); }
387+
.story:hover .story__image {
388+
transform: translateX(-4rem) scale(1);
389+
filter: blur(3px) brightness(80%); }
390+
331391
.row {
332392
max-width: 114rem;
333393
margin: 0 auto; }
@@ -392,5 +452,9 @@ body {
392452

393453
.section-tours {
394454
background-color: #f7f7f7;
395-
padding: 25rem 0 50rem 0;
455+
padding: 25rem 0 15rem 0;
396456
margin-top: -10rem; }
457+
458+
.section-stories {
459+
padding: 15rem 0;
460+
position: relative; }

‎Natours/starter/index.html

+41
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,47 @@ <h4 class="card__heading">
208208
</div>
209209

210210
</section>
211+
<section class="section-stories">
212+
<div class="bg-video">
213+
<video class="bg-video__content" autoplay muted loop>
214+
<source src="img/video.mp4" type="video/mp4">
215+
<source src="img/video.webm" type="video/webm">
216+
Your browser is not supported.
217+
</video>
218+
</div>
219+
<div class="u-center-text u-margin-bottom-big">
220+
<h2 class="heading-secondary">
221+
We make people genuinely happy
222+
</h2>
223+
</div>
224+
<div class="row">
225+
<div class="story">
226+
<figure class="story__shape">
227+
<img src="img/nat-8.jpg" class="story__image" alt="Person on a tour" >
228+
<figcaption class="story__caption">Mary Smith</figcaption>
229+
</figure>
230+
<div class="story__text">
231+
<h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family</h3>
232+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid nam ipsam dolor eligendi magni doloremque numquam! Doloribus repudiandae dolorum tempore nisi non qui ut vero, architecto cupiditate quae aliquid est culpa quos dolore molestias tenetur excepturi sequi ab ipsa corrupti.</p>
233+
</div>
234+
</div>
235+
</div>
236+
<div class="row">
237+
<div class="story">
238+
<figure class="story__shape">
239+
<img src="img/nat-9.jpg" class="story__image" alt="Person on a tour" >
240+
<figcaption class="story__caption">Wade Wilson</figcaption>
241+
</figure>
242+
<div class="story__text">
243+
<h3 class="heading-tertiary u-margin-bottom-small">WOW! My life is completely different now</h3>
244+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid nam ipsam dolor eligendi magni doloremque numquam! Doloribus repudiandae dolorum tempore nisi non qui ut vero, architecto cupiditate quae aliquid est culpa quos dolore molestias tenetur excepturi sequi ab ipsa corrupti.</p>
245+
</div>
246+
</div>
247+
</div>
248+
<div class="u-center-text u-margin-top-huge">
249+
<a href="#" class="btn-text">Read all stories &rarr;</a>
250+
</div>
251+
</section>
211252

212253
</main>
213254
<!--

‎Natours/starter/sass/components/_bg-video.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.bg-video {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
height: 100%;
6+
width: 100%;
7+
z-index: -1;
8+
opacity: .15;
9+
overflow: hidden;
10+
11+
&__content {
12+
height: 100%;
13+
width: 100%;
14+
object-fit: cover;
15+
}
16+
}

‎Natours/starter/sass/components/_story.scss

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.story {
2+
width: 75%;
3+
margin: 0 auto;
4+
box-shadow: 0 3rem 6rem rgba($color-black, .1);
5+
background-color: rgba($color-white,.6);
6+
border-radius: 3px;
7+
padding: 6rem;
8+
padding-left: 9rem;
9+
font-size: $default-font-size;
10+
transform: skewX(-12deg);
11+
& > * {
12+
transform: skewX(12deg);
13+
}
14+
15+
&__shape {
16+
width: 15rem;
17+
height: 15rem;
18+
float: left;
19+
-webkit-shape-outside: circle(50% at 50% 50%);
20+
shape-outside: circle(50% at 50% 50%);
21+
clip-path: circle(50% at 50% 50%);
22+
-webkit-clip-path: circle(50% at 50% 50%);
23+
transform: translateX(-3rem) skewX(12deg);
24+
position: relative;
25+
}
26+
27+
&__image {
28+
height: 100%;
29+
transform: translateX(-4rem) scale(1.4);
30+
backface-visibility: hidden;
31+
transition: all .5s;
32+
}
33+
34+
&__caption {
35+
position: absolute;
36+
top: 50%;
37+
left: 50%;
38+
transform: translate(-50%, 20%);
39+
opacity: 0;
40+
transition: all .5s;
41+
color: $color-white;
42+
font-size: 1.7rem;
43+
text-align: center;
44+
backface-visibility: hidden;
45+
}
46+
47+
&__text {
48+
transform: skewX(12deg);
49+
}
50+
51+
&:hover &__caption {
52+
opacity: 1;
53+
transform: translate(-50%, -50%);
54+
}
55+
56+
&:hover &__image {
57+
transform: translateX(-4rem) scale(1);
58+
filter: blur(3px) brightness(80%);
59+
}
60+
}

‎Natours/starter/sass/main.scss

+2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@
88
@import "base/utilities";
99

1010
@import "components/button";
11+
@import "components/bg-video";
1112
@import "components/card";
1213
@import "components/composition";
1314
@import "components/feature-box";
15+
@import "components/story";
1416

1517
@import "layout/grid";
1618
@import "layout/header";

‎Natours/starter/sass/pages/_home.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020

2121
.section-tours {
2222
background-color: $color-grey-light-1;
23-
padding: 25rem 0 50rem 0;
23+
padding: 25rem 0 15rem 0;
2424
margin-top: -10rem;
25+
}
26+
27+
.section-stories {
28+
padding: 15rem 0;
29+
position: relative;
2530
}

0 commit comments

Comments
 (0)