Skip to content

Commit 8822a32

Browse files
vycodervycoder
committed
Section 5 Finished About Section
1 parent e8441f0 commit 8822a32

File tree

8 files changed

+167
-6
lines changed

8 files changed

+167
-6
lines changed

‎Natours/starter/css/style.css

+63-1
Original file line numberDiff line numberDiff line change
@@ -88,10 +88,26 @@ body {
8888
transform: skewY(2deg) skewX(15deg) scale(1.1);
8989
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }
9090

91+
.heading-tertiary {
92+
font-size: 1.6rem;
93+
font-weight: 700;
94+
text-transform: uppercase; }
95+
96+
.paragraph {
97+
font-size: 1.6rem; }
98+
.paragraph:not(:last-child) {
99+
margin-bottom: 3rem; }
100+
91101
.u-center-text {
92102
text-align: center; }
93103

94-
.u-margin-bottom-8 {
104+
.u-margin-bottom-small {
105+
margin-bottom: 1.5rem; }
106+
107+
.u-margin-bottom-medium {
108+
margin-bottom: 8rem; }
109+
110+
.u-margin-bottom-big {
95111
margin-bottom: 8rem; }
96112

97113
.btn:link, .btn:visited {
@@ -142,6 +158,52 @@ body {
142158
animation-fill-mode: backwards;
143159
/* apply all initial 0% state of the animation before the animation starts */ }
144160

161+
.btn-text:link, .btn-text:visited {
162+
font-size: 1.6rem;
163+
color: #55c57a;
164+
display: inline-block;
165+
text-decoration: none;
166+
border-bottom: 1px solid #55c57a;
167+
padding: 3px;
168+
transition: all .2s; }
169+
170+
.btn-text:hover {
171+
background-color: #55c57a;
172+
color: #FFF;
173+
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
174+
transform: translateY(-2px); }
175+
176+
.btn-text:active {
177+
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
178+
transform: translateY(0); }
179+
180+
.composition {
181+
position: relative; }
182+
.composition__photo {
183+
width: 55%;
184+
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
185+
border-radius: 2px;
186+
position: absolute;
187+
z-index: 10;
188+
transition: all .2s;
189+
outline-offset: 2rem; }
190+
.composition__photo--p1 {
191+
left: 0;
192+
top: -2rem; }
193+
.composition__photo--p2 {
194+
right: 0;
195+
top: 2rem; }
196+
.composition__photo--p3 {
197+
left: 20%;
198+
top: 10rem; }
199+
.composition__photo:hover {
200+
outline: 1.5rem solid #55c57a;
201+
transform: scale(1.05) translateY(-2rem);
202+
box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
203+
z-index: 20; }
204+
.composition:hover .composition__photo:not(:hover) {
205+
transform: scale(0.9); }
206+
145207
.row {
146208
max-width: 114rem;
147209
margin: 0 auto; }

‎Natours/starter/index.html

+15-3
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,30 @@ <h1 class="heading-primary"> <!-- SEO checks for h1, we want the whole slogan to
2828

2929
<main>
3030
<section class="section-about">
31-
<div class="u-center-text u-margin-bottom-8">
31+
<div class="u-center-text u-margin-bottom-big">
3232
<h2 class="heading-secondary">
3333
Exciting tours for adventurous people
3434
</h2>
3535
</div>
3636

3737
<div class="row">
3838
<div class="col-1-of-2">
39-
Text content
39+
<h3 class="heading-tertiary u-margin-bottom-small">You're going to fall in love with nature</h3>
40+
<p class="paragraph">
41+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit aliquam dignissimos dolorum. Illo, est ipsa cumque sint dignissimos voluptatum explicabo perspiciatis quisquam amet ex aut eveniet, ipsam veniam numquam totam?
42+
</p>
43+
<h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
44+
<p class="paragraph">
45+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit aliquam dignissimos dolorum.
46+
</p>
47+
<a href="#" class="btn-text">Learn more &rarr;</a>
4048
</div>
4149
<div class="col-1-of-2">
42-
Image composition
50+
<div class="composition">
51+
<img src="img/nat-1-large.jpg" alt="photo 1" class="composition__photo composition__photo--p1">
52+
<img src="img/nat-2-large.jpg" alt="photo 2" class="composition__photo composition__photo--p2">
53+
<img src="img/nat-3-large.jpg" alt="photo 3" class="composition__photo composition__photo--p3">
54+
</div>
4355
</div>
4456
</div>
4557

‎Natours/starter/sass/abstracts/_variables.scss

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ $color-grey-light-1: #f7f7f7;
88
$color-white: #FFF;
99
$color-black: #000;
1010

11+
//font-sizes
12+
$default-font-size: 1.6rem;
13+
1114
// grid variables
1215
$grid-width: 114rem;
1316
$gutter-vertical: 8rem;

‎Natours/starter/sass/base/_typography.scss

+13
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,17 @@ body {
4949
transform: skewY(2deg) skewX(15deg) scale(1.1);
5050
text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
5151
}
52+
}
53+
54+
.heading-tertiary {
55+
font-size: $default-font-size;
56+
font-weight: 700;
57+
text-transform: uppercase;
58+
}
59+
60+
.paragraph {
61+
font-size: $default-font-size;
62+
&:not(:last-child) {
63+
margin-bottom: 3rem;
64+
}
5265
}

‎Natours/starter/sass/base/_utilities.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
.u-center-text { text-align: center; } // center for text, inline-blocks
2-
.u-margin-bottom-8 { margin-bottom: 8rem; }
2+
.u-margin-bottom-small { margin-bottom: 1.5rem; }
3+
.u-margin-bottom-medium { margin-bottom: 8rem; }
4+
.u-margin-bottom-big { margin-bottom: 8rem; }

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

+26-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
border-radius: 10rem;
88
transition: all .2s;
99
position: relative;
10-
font-size: 1.6rem;
10+
font-size: $default-font-size;
1111
}
1212

1313
&:hover {
@@ -53,4 +53,29 @@
5353
animation-fill-mode: backwards; /* apply all initial 0% state of the animation before the animation starts */
5454
}
5555

56+
}
57+
58+
.btn-text {
59+
&:link,
60+
&:visited {
61+
font-size: $default-font-size;
62+
color: $color-primary;
63+
display: inline-block;
64+
text-decoration: none;
65+
border-bottom: 1px solid $color-primary;
66+
padding: 3px;
67+
transition: all .2s;
68+
}
69+
70+
&:hover {
71+
background-color: $color-primary;
72+
color: $color-white;
73+
box-shadow: 0 1rem 2rem rgba($color-black, .15);
74+
transform: translateY(-2px);
75+
}
76+
77+
&:active {
78+
box-shadow: 0 1rem 1rem rgba($color-black, .15);
79+
transform: translateY(0); // relative to current position which is hover's
80+
}
5681
}

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.composition {
2+
position: relative;
3+
4+
&__photo {
5+
width: 55%;
6+
box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
7+
border-radius: 2px;
8+
position: absolute;
9+
z-index: 10;
10+
transition: all .2s;
11+
outline-offset: 2rem;
12+
13+
&--p1 {
14+
left: 0;
15+
top: -2rem;
16+
}
17+
18+
&--p2 {
19+
right: 0;
20+
top: 2rem;
21+
}
22+
23+
&--p3 {
24+
left: 20%;
25+
top: 10rem;
26+
}
27+
28+
&:hover {
29+
outline: 1.5rem solid $color-primary;
30+
transform: scale(1.05) translateY(-2rem);
31+
box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
32+
z-index: 20;
33+
}
34+
}
35+
36+
// when the picture is hovered, the whole composition is also hovered
37+
// and yet, the actual element is also hovered, hence we can do a selector like
38+
// below. When the composition is hovered select all child elements that are not
39+
// hovered. pretty neat
40+
&:hover &__photo:not(:hover) {
41+
transform: scale(.9);
42+
}
43+
}

‎Natours/starter/sass/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import "base/utilities";
99

1010
@import "components/button";
11+
@import "components/composition";
1112

1213
@import "layout/grid";
1314
@import "layout/header";

0 commit comments

Comments
 (0)