Skip to content

Commit d87df08

Browse files
vycodervycoder
committed
Booking section completed
1 parent cb1b0cd commit d87df08

File tree

8 files changed

+281
-18
lines changed

8 files changed

+281
-18
lines changed

‎Natours/starter/css/style.css

+103-10
Original file line numberDiff line numberDiff line change
@@ -99,32 +99,34 @@ body {
9999
margin-bottom: 3rem; }
100100

101101
.u-center-text {
102-
text-align: center; }
102+
text-align: center !important; }
103103

104104
.u-margin-bottom-small {
105-
margin-bottom: 1.5rem; }
105+
margin-bottom: 1.5rem !important; }
106106

107107
.u-margin-bottom-medium {
108-
margin-bottom: 8rem; }
108+
margin-bottom: 8rem !important; }
109109

110110
.u-margin-bottom-big {
111-
margin-bottom: 8rem; }
111+
margin-bottom: 8rem !important; }
112112

113113
.u-margin-top-big {
114-
margin-top: 8rem; }
114+
margin-top: 8rem !important; }
115115

116116
.u-margin-top-huge {
117-
margin-top: 10rem; }
117+
margin-top: 10rem !important; }
118118

119-
.btn:link, .btn:visited {
119+
.btn, .btn:link, .btn:visited {
120120
text-transform: uppercase;
121121
text-decoration: none;
122122
padding: 1.5rem 4rem;
123123
display: inline-block;
124124
border-radius: 10rem;
125125
transition: all .2s;
126126
position: relative;
127-
font-size: 1.6rem; }
127+
font-size: 1.6rem;
128+
border: none;
129+
cursor: pointer; }
128130

129131
.btn:hover {
130132
transform: translateY(-3px);
@@ -135,8 +137,9 @@ body {
135137
transform: scaleX(1.4) scaleY(1.6);
136138
opacity: 0; }
137139

138-
.btn:active {
140+
.btn:active, .btn:focus {
139141
/* clicked state */
142+
outline: none;
140143
transform: translateY(-1px);
141144
/* minus 1 to initial state not to hover */
142145
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }
@@ -196,7 +199,8 @@ body {
196199
height: 100%;
197200
width: 100%;
198201
z-index: -1;
199-
opacity: .15; }
202+
opacity: .15;
203+
overflow: hidden; }
200204
.bg-video__content {
201205
height: 100%;
202206
width: 100%;
@@ -388,6 +392,82 @@ body {
388392
transform: translateX(-4rem) scale(1);
389393
filter: blur(3px) brightness(80%); }
390394

395+
.form__group:not(:last-child) {
396+
margin-bottom: 2rem; }
397+
398+
.form__input {
399+
font-size: 1.5rem;
400+
font-family: inherit;
401+
padding: 1.5rem 2rem;
402+
color: inherit;
403+
border-radius: 2px;
404+
background-color: rgba(255, 255, 255, 0.5);
405+
border: none;
406+
border-bottom: 3px solid transparent;
407+
width: 90%;
408+
display: block;
409+
transition: all .3s; }
410+
.form__input:focus {
411+
outline: none;
412+
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
413+
border-bottom: 3px solid #55c57a; }
414+
.form__input:focus:invalid {
415+
border-bottom: 3px solid #ff7730; }
416+
.form__input::-webkit-input-placeholder {
417+
color: #999; }
418+
419+
.form__label {
420+
font-size: 1.2rem;
421+
font-weight: 700;
422+
margin-left: 2rem;
423+
margin-top: .7rem;
424+
display: block;
425+
transition: all .3s; }
426+
427+
.form__input:placeholder-shown + .form__label {
428+
opacity: 0;
429+
visibility: hidden;
430+
transform: translateY(-4rem); }
431+
432+
.form__radio-group {
433+
width: 49%;
434+
display: inline-block; }
435+
436+
.form__radio-input {
437+
display: none; }
438+
439+
.form__radio-label {
440+
font-size: 1.6rem;
441+
cursor: pointer;
442+
position: relative;
443+
padding-left: 4.5rem; }
444+
445+
.form__radio-button {
446+
height: 3rem;
447+
width: 3rem;
448+
border: 5px solid #55c57a;
449+
border-radius: 50%;
450+
display: inline-block;
451+
position: absolute;
452+
left: 0;
453+
top: -.4rem; }
454+
.form__radio-button::after {
455+
content: '';
456+
display: block;
457+
height: 1.3rem;
458+
width: 1.3rem;
459+
border-radius: 50%;
460+
position: absolute;
461+
left: 50%;
462+
top: 50%;
463+
transform: translate(-50%, -50%);
464+
background-color: #55c57a;
465+
opacity: 0;
466+
transition: opacity .2s; }
467+
468+
.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
469+
opacity: 1; }
470+
391471
.row {
392472
max-width: 114rem;
393473
margin: 0 auto; }
@@ -458,3 +538,16 @@ body {
458538
.section-stories {
459539
padding: 15rem 0;
460540
position: relative; }
541+
542+
.section-book {
543+
padding: 15rem 0;
544+
background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
545+
546+
.book {
547+
background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url("../img/nat-10.jpg");
548+
background-size: cover;
549+
border-radius: 3px;
550+
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5); }
551+
.book__form {
552+
width: 50%;
553+
padding: 6rem; }

‎Natours/starter/index.html

+41
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,47 @@ <h3 class="heading-tertiary u-margin-bottom-small">WOW! My life is completely di
250250
</div>
251251
</section>
252252

253+
<section class="section-book">
254+
<div class="row">
255+
<div class="book">
256+
<div class="book__form">
257+
<form action="#" class="form">
258+
<div class="u-margin-bottom-medium">
259+
<h2 class="heading-secondary">Start booking now</h2>
260+
</div>
261+
<div class="form__group">
262+
<input id="name" type="text" class="form__input"placeholder="Full Name" required>
263+
<label for="name" class="form__label">Full name</label>
264+
</div>
265+
<div class="form__group">
266+
<input id="email" type="email" class="form__input"placeholder="Email" required>
267+
<label for="email" class="form__label">Email address</label>
268+
</div>
269+
<div class="form__group u-margin-bottom-medium">
270+
<div class="form__radio-group">
271+
<input id="small" type="radio" class="form__radio-input" name="size">
272+
<label for="small" class="form__radio-label">
273+
<span class="form__radio-button"></span>
274+
Small tour group
275+
</label>
276+
</div>
277+
<div class="form__radio-group">
278+
<input id="large" type="radio" class="form__radio-input" name="size">
279+
<label for="large" class="form__radio-label">
280+
<span class="form__radio-button"></span>
281+
Large tour group
282+
</label>
283+
</div>
284+
</div>
285+
<div class="form__group">
286+
<button class="btn btn--green">Next step &rarr;</button>
287+
</div>
288+
</form>
289+
</div>
290+
</div>
291+
</div>
292+
</section>
293+
253294
</main>
254295
<!--
255296
<section class="grid-test">

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

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ $color-tertiary-light: #2998ff;
1010
$color-tertiary-dark: #5643fa;
1111

1212
$color-grey-dark: #777;
13+
$color-grey-dark-2: #999;
1314
$color-grey-light-1: #f7f7f7;
1415
$color-grey-light-2: #eeeeee;
1516
$color-white: #FFF;

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
.u-center-text { text-align: center; } // center for text, inline-blocks
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; }
5-
.u-margin-top-big { margin-top: 8rem }
6-
.u-margin-top-huge { margin-top: 10rem }
1+
.u-center-text { text-align: center !important; } // center for text, inline-blocks
2+
.u-margin-bottom-small { margin-bottom: 1.5rem !important; }
3+
.u-margin-bottom-medium { margin-bottom: 8rem !important; }
4+
.u-margin-bottom-big { margin-bottom: 8rem !important; }
5+
.u-margin-top-big { margin-top: 8rem !important; }
6+
.u-margin-top-huge { margin-top: 10rem !important; }

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
.btn {
2-
&:link, &:visited {
2+
&,
3+
&:link,
4+
&:visited {
35
text-transform: uppercase;
46
text-decoration: none;
57
padding: 1.5rem 4rem;
@@ -8,6 +10,10 @@
810
transition: all .2s;
911
position: relative;
1012
font-size: $default-font-size;
13+
14+
// Reset for the <button> element
15+
border: none;
16+
cursor: pointer;
1117
}
1218

1319
&:hover {
@@ -21,7 +27,8 @@
2127
}
2228
}
2329

24-
&:active { /* clicked state */
30+
&:active, &:focus { /* clicked state */
31+
outline: none;
2532
transform: translateY(-1px); /* minus 1 to initial state not to hover */
2633
box-shadow: 0 .5rem 1rem rgba($color-black, .2);
2734
}

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

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.form {
2+
3+
&__group:not(:last-child) {
4+
margin-bottom: 2rem;
5+
}
6+
7+
&__input {
8+
font-size: 1.5rem;
9+
font-family: inherit;
10+
padding: 1.5rem 2rem;
11+
color: inherit;
12+
border-radius: 2px;
13+
background-color: rgba($color-white, .5);
14+
border: none;
15+
border-bottom: 3px solid transparent;
16+
width: 90%;
17+
display: block;
18+
transition: all .3s;
19+
20+
&:focus {
21+
outline: none;
22+
box-shadow: 0 1rem 2rem rgba($color-black, .1);
23+
border-bottom: 3px solid $color-primary;
24+
&:invalid {
25+
border-bottom: 3px solid $color-secondary-dark;
26+
}
27+
}
28+
29+
&::-webkit-input-placeholder {
30+
color: $color-grey-dark-2;
31+
}
32+
33+
}
34+
35+
36+
&__label {
37+
font-size: 1.2rem;
38+
font-weight: 700;
39+
margin-left: 2rem;
40+
margin-top: .7rem;
41+
display: block;
42+
transition: all .3s;
43+
}
44+
45+
// + sibling selector
46+
// think of this as trigger + element
47+
&__input:placeholder-shown + &__label {
48+
opacity: 0;
49+
visibility: hidden;
50+
transform: translateY(-4rem);
51+
}
52+
53+
&__radio-group {
54+
width: 49%;
55+
display: inline-block;
56+
}
57+
58+
&__radio-input {
59+
display: none;
60+
}
61+
62+
&__radio-label {
63+
font-size: $default-font-size;
64+
cursor: pointer;
65+
position: relative;
66+
padding-left: 4.5rem;
67+
}
68+
69+
&__radio-button {
70+
height: 3rem;
71+
width: 3rem;
72+
border: 5px solid $color-primary;
73+
border-radius: 50%;
74+
display: inline-block;
75+
position: absolute;
76+
left: 0;
77+
top: -.4rem;
78+
79+
&::after {
80+
content: '';
81+
display: block;
82+
height: 1.3rem;
83+
width: 1.3rem;
84+
border-radius: 50%;
85+
position: absolute;
86+
left: 50%;
87+
top: 50%;
88+
transform: translate(-50%, -50%);
89+
background-color: $color-primary;
90+
opacity: 0;
91+
transition: opacity .2s;
92+
}
93+
}
94+
95+
// &__radio-button::after is the target
96+
&__radio-input:checked ~ &__radio-label &__radio-button::after {
97+
opacity: 1;
98+
}
99+
}

‎Natours/starter/sass/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@import "components/composition";
1414
@import "components/feature-box";
1515
@import "components/story";
16+
@import "components/form";
1617

1718
@import "layout/grid";
1819
@import "layout/header";

0 commit comments

Comments
 (0)