Skip to content

Commit ae621f6

Browse files
mounikaperimounikaperi
committed
Natours Code Additions
1 parent c0e95a7 commit ae621f6

File tree

10 files changed

+286
-70
lines changed

10 files changed

+286
-70
lines changed

‎Project-Natours/css/style.css

+145-56
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
1+
/* Browsers are optimized for opacity and transform properties for animations */
2+
@keyframes moveInLeft {
3+
0% {
4+
opacity: 0;
5+
transform: translateX(-10rem);
6+
/*positive to the right, negative to the left */ }
7+
/* 60% {
8+
tranform: rotate(180deg);
9+
} */
10+
80% {
11+
transform: translateX(1rem);
12+
/* moves to right */ }
13+
100% {
14+
opacity: 1;
15+
transform: translate(0); } }
16+
17+
@keyframes moveInRight {
18+
0% {
19+
opacity: 0;
20+
transform: translateX(10rem);
21+
/*positive to the right, negative to the left */ }
22+
80% {
23+
transform: translateX(-1rem);
24+
/* moves to right */ }
25+
100% {
26+
opacity: 1;
27+
transform: translate(0); } }
28+
29+
@keyframes moveInButton {
30+
0% {
31+
opacity: 0;
32+
transform: translateY(3rem);
33+
/*positive to the right/down, negative to the left/up */ }
34+
100% {
35+
opacity: 1;
36+
transform: translate(0); } }
37+
138
*,
239
*::after,
340
*::before {
@@ -8,34 +45,16 @@
845
html {
946
font-size: 62.5%; }
1047

48+
body {
49+
box-sizing: border-box; }
50+
1151
body {
1252
font-family: 'Lato', sans-serif;
1353
font-weight: 400;
1454
font-size: 1.6rem;
1555
line-height: 1.7;
1656
color: #777;
17-
padding: 3rem;
18-
box-sizing: border-box; }
19-
20-
.header {
21-
height: 95vh;
22-
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(126, 213, 111, 0.8)), url(../img/hero.jpg);
23-
background-size: cover;
24-
background-position: top;
25-
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
26-
position: relative; }
27-
.header__logo.box {
28-
position: absolute;
29-
top: 4rem;
30-
left: 4rem; }
31-
.header__text-box {
32-
position: absolute;
33-
top: 40%;
34-
left: 50%;
35-
transform: translate(-50%, -50%);
36-
text-align: center; }
37-
.header__logo {
38-
height: 3.5rem; }
57+
padding: 3rem; }
3958

4059
.heading-primary {
4160
color: #fff;
@@ -60,42 +79,42 @@ body {
6079
letter-spacing: 1.74rem;
6180
animation: moveInRight 1s ease-out; }
6281

63-
/* Browsers are optimized for opacity and transform properties for animations */
64-
@keyframes moveInLeft {
65-
0% {
66-
opacity: 0;
67-
transform: translateX(-10rem);
68-
/*positive to the right, negative to the left */ }
69-
/* 60% {
70-
tranform: rotate(180deg);
71-
} */
72-
80% {
73-
transform: translateX(1rem);
74-
/* moves to right */ }
75-
100% {
76-
opacity: 1;
77-
transform: translate(0); } }
82+
.heading-secondary {
83+
font-size: 3.5rem;
84+
font-weight: 700;
85+
text-transform: uppercase;
86+
display: inline-block;
87+
background-image: linear-gradient(to right, #7ed56f, #28b485);
88+
background-clip: inherit;
89+
-webkit-background-clip: text;
90+
color: transparent;
91+
letter-spacing: 2px;
92+
transition: all .2s; }
93+
.heading-secondary:hover {
94+
transform: skewY(2deg) skewX(15deg) scale(1.1);
95+
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }
7896

79-
@keyframes moveInRight {
80-
0% {
81-
opacity: 0;
82-
transform: translateX(10rem);
83-
/*positive to the right, negative to the left */ }
84-
80% {
85-
transform: translateX(-1rem);
86-
/* moves to right */ }
87-
100% {
88-
opacity: 1;
89-
transform: translate(0); } }
97+
.heading-tertiary {
98+
font-size: 1.6rem;
99+
font-weight: 700;
100+
text-transform: uppercase; }
90101

91-
@keyframes moveInButton {
92-
0% {
93-
opacity: 0;
94-
transform: translateY(3rem);
95-
/*positive to the right/down, negative to the left/up */ }
96-
100% {
97-
opacity: 1;
98-
transform: translate(0); } }
102+
.paragraph {
103+
font-size: 1.6rem; }
104+
.paragraph:not(:last-child) {
105+
margin-bottom: 3rem; }
106+
107+
.u-center-text {
108+
text-align: center; }
109+
110+
.u-margin-bottom-small {
111+
margin-bottom: 2rem; }
112+
113+
.u-margin-bottom-medium {
114+
margin-bottom: 4rem; }
115+
116+
.u-margin-bottom-big {
117+
margin-bottom: 8rem; }
99118

100119
.btn:link, .btn:visited {
101120
text-transform: uppercase;
@@ -140,3 +159,73 @@ body {
140159
/* animation-name, animation-duration, animation-timing-function, animation-delay */
141160
animation-fill-mode: backwards;
142161
/*automatically apply styles of 0% before animation starts */ }
162+
163+
.btn-text:link, .btn-text:visited {
164+
color: #55c57a;
165+
display: inline-block;
166+
text-decoration: none;
167+
border-bottom: 1px solid #55c57a;
168+
padding: 3px;
169+
font-size: 1.6rem;
170+
transition: all 0.2s; }
171+
172+
.btn-text:hover {
173+
background-color: #55c57a;
174+
color: #fff;
175+
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
176+
transform: translateY(-2px); }
177+
178+
.btn-text:active {
179+
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
180+
transform: translateY(0); }
181+
182+
.header {
183+
height: 95vh;
184+
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(126, 213, 111, 0.8)), url(../img/hero.jpg);
185+
background-size: cover;
186+
background-position: top;
187+
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
188+
position: relative; }
189+
.header__logo.box {
190+
position: absolute;
191+
top: 4rem;
192+
left: 4rem; }
193+
.header__text-box {
194+
position: absolute;
195+
top: 40%;
196+
left: 50%;
197+
transform: translate(-50%, -50%);
198+
text-align: center; }
199+
.header__logo {
200+
height: 3.5rem; }
201+
202+
.row {
203+
max-width: 114rem;
204+
margin: 0 auto; }
205+
.row:not(:last-child) {
206+
margin-bottom: 8rem; }
207+
.row::after {
208+
content: "";
209+
display: table;
210+
clear: both; }
211+
.row [class^="col-"] {
212+
float: left; }
213+
.row [class^="col-"]:not(:last-child) {
214+
margin-right: 6rem; }
215+
.row .col-1-of-2 {
216+
width: calc((100% - 6rem) / 2); }
217+
.row .col-1-of-3 {
218+
width: calc((100% - 2 * 6rem) / 3); }
219+
.row .col-2-of-3 {
220+
width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem); }
221+
.row .col-1-of-4 {
222+
width: calc((100% - 3 * 6rem) / 4); }
223+
.row .col-2-of-4 {
224+
width: calc(2 * (( 100% - 3 * 6rem) / 4) + 6rem); }
225+
.row .col-3-of-4 {
226+
width: calc(3 * (( 100% - 3 * 6rem) / 4) + 2 * (6rem)); }
227+
228+
.section-about {
229+
background-color: #f7f7f7;
230+
padding: 25rem 0;
231+
margin-top: -20vh; }

‎Project-Natours/index.html

+31-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1 class="heading-primary">
2222
<a href="#" class="btn btn--white btn--animated">Discover our tours</a>
2323
</div>
2424
</header>
25-
<section class="grid-test">
25+
<!-- <section class="grid-test">
2626
<div class="row">
2727
<div class="col-1-of-2">
2828
Col 1 of 2
@@ -83,6 +83,35 @@ <h1 class="heading-primary">
8383
Col 3 of 4
8484
</div>
8585
</div>
86-
</section>
86+
</section> -->
87+
<main>
88+
<section class="section-about">
89+
<div class="u-center-text u-margin-bottom-big">
90+
<h2 class="heading-secondary">
91+
Exciting tours for adventurous people
92+
</h2>
93+
</div>
94+
<div class="row">
95+
<div class="col-1-of-2">
96+
<h3 class="heading-tertiary u-margin-bottom-small">
97+
You're going to fall in love with nature
98+
</h3>
99+
<p class="paragraph">
100+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, suscipit. Ad dolore esse vitae! Obcaecati culpa placeat cupiditate aut pariatur cumque aliquam praesentium minima quas. Libero dolorem similique modi veniam!
101+
</p>
102+
<h3 class="heading-tertiary u-margin-bottom-small">
103+
Live adventures like you never have before
104+
</h3>
105+
<p class="paragraph">
106+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime maiores saepe, cupiditate dicta, tempora earum eius, unde fugiat itaque quasi sed vitae explicabo omnis beatae doloremque exercitationem libero culpa commodi!
107+
</p>
108+
<a href="#" class="btn-text">Learn more &rarr;</a>
109+
</div>
110+
<div class="col-1-of-2">
111+
112+
</div>
113+
</div>
114+
</section>
115+
</main>
87116
</body>
88117
</html>

‎Project-Natours/sass/abstracts/_mixins.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@mixin clearfix {
2+
&::after {
3+
content: "";
4+
display: table;
5+
clear: both;
6+
}
7+
}

‎Project-Natours/sass/abstracts/_variables.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
$color-primary: #55c57a;
22
$color-primary-light : #7ed56f;
33
$color-primary-dark : #28b485;
4+
$color-grey-light-1: #f7f7f7;
45
$color-grey-dark: #777;
56
$color-white: #fff;
67
$color-black: #000;
78

89
//Grid
910
$grid-width: 114rem;
1011
$gutter-vertical: 8rem;
11-
$gutter-horizontal: 6rem;
12+
$gutter-horizontal: 6rem;
13+
14+
//Fonts
15+
$default-font-size: 1.6rem;

‎Project-Natours/sass/base/_typography.scss

+30
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,34 @@ body {
3333
letter-spacing: 1.74rem;
3434
animation: moveInRight 1s ease-out;
3535
}
36+
}
37+
38+
.heading-secondary {
39+
font-size: 3.5rem;
40+
font-weight: 700;
41+
text-transform: uppercase;
42+
display: inline-block;
43+
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
44+
background-clip: inherit;
45+
-webkit-background-clip: text;
46+
color: transparent;
47+
letter-spacing: 2px;
48+
transition: all .2s;
49+
&:hover {
50+
transform: skewY(2deg) skewX(15deg) scale(1.1);
51+
text-shadow: .5rem 1rem 2rem rgba($color-black, 0.2);
52+
}
53+
}
54+
55+
.heading-tertiary {
56+
font-size: $default-font-size;
57+
font-weight: 700;
58+
text-transform: uppercase;
59+
}
60+
61+
.paragraph {
62+
font-size: $default-font-size;
63+
&:not(:last-child) {
64+
margin-bottom: 3rem;
65+
}
3666
}

‎Project-Natours/sass/base/_utilities.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.u-center-text {
2+
text-align: center;
3+
}
4+
.u-margin-bottom-small {
5+
margin-bottom: 2rem;
6+
}
7+
.u-margin-bottom-medium {
8+
margin-bottom: 4rem;
9+
}
10+
.u-margin-bottom-big {
11+
margin-bottom: 8rem;
12+
}

‎Project-Natours/sass/components/_button.scss

+22
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,26 @@
4646
animation-fill-mode: backwards;
4747
/*automatically apply styles of 0% before animation starts */
4848
}
49+
}
50+
.btn-text {
51+
&:link,
52+
&:visited {
53+
color: $color-primary;
54+
display: inline-block;
55+
text-decoration: none;
56+
border-bottom: 1px solid $color-primary;
57+
padding: 3px;
58+
font-size: $default-font-size;
59+
transition: all 0.2s;
60+
}
61+
&:hover {
62+
background-color: $color-primary;
63+
color: $color-white;
64+
box-shadow: 0 1rem 2rem rgba($color-black, 0.15);
65+
transform: translateY(-2px);
66+
}
67+
&:active {
68+
box-shadow: 0 0.5rem 2rem rgba($color-black, 0.15);
69+
transform: translateY(0);
70+
}
4971
}

0 commit comments

Comments
 (0)