Skip to content

Commit a79d79a

Browse files
vycodervycoder
committed
Finished Natours Project
 - sections 5 to 6
1 parent 10b8a6b commit a79d79a

24 files changed

+7344
-772
lines changed

‎Natours/starter/css/style.comp.css

Lines changed: 972 additions & 0 deletions
Large diffs are not rendered by default.

‎Natours/starter/css/style.concat.css

Lines changed: 1418 additions & 0 deletions
Large diffs are not rendered by default.

‎Natours/starter/css/style.css

Lines changed: 1 addition & 702 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Natours/starter/css/style.prefix.css

Lines changed: 1534 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Natours/starter/index.html

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
88

9-
<link rel="stylesheet" href="css/icon-font.css">
109
<link rel="stylesheet" href="css/style.css">
1110
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
1211

@@ -38,7 +37,7 @@ <h1 class="heading-primary"> <!-- SEO checks for h1, we want the whole slogan to
3837
<span class="heading-primary--main">Outdoors</span>
3938
<span class="heading-primary--sub">is where life happens</span>
4039
</h1>
41-
<a href="#" class="btn btn--white btn--animated">Discover our tours</a>
40+
<a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
4241
</div>
4342
</header>
4443
<main>
@@ -63,7 +62,15 @@ <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you neve
6362
</div>
6463
<div class="col-1-of-2">
6564
<div class="composition">
66-
<img src="img/nat-1-large.jpg" alt="photo 1" class="composition__photo composition__photo--p1">
65+
<!-- 300w means the width px of the image -->
66+
<!-- sizes = informs the browser of the approximate width of the image at different viewport width -->
67+
<!-- ie: the image is approx 20% when the viewport is 900px, now the browser can properly choose which srcset to download and use. -->
68+
<img srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
69+
src="img/nat-1-large.jpg"
70+
sizes="(max-width: 900px) 20vw, (max-width: 600) 30vw, 300px"
71+
alt="Photo 1"
72+
class="composition__photo composition__photo--p1"
73+
>
6774
<img src="img/nat-2-large.jpg" alt="photo 2" class="composition__photo composition__photo--p2">
6875
<img src="img/nat-3-large.jpg" alt="photo 3" class="composition__photo composition__photo--p3">
6976
</div>
@@ -112,7 +119,7 @@ <h3 class="heading-tertiary u-margin-bottom-small">live a healthier life</h3>
112119
</div>
113120
</section>
114121

115-
<section class="section-tours">
122+
<section class="section-tours" id="section-tours">
116123
<div class="u-center-text u-margin-bottom-big">
117124
<h2 class="heading-secondary">
118125
Most popular tours
@@ -147,7 +154,7 @@ <h4 class="card__heading">
147154
<p class="card__price-only">Only</p>
148155
<p class="card__price-value">$297</p>
149156
</div>
150-
<a href="#" class="btn btn--white">Book now!</a>
157+
<a href="#popup" class="btn btn--white">Book now!</a>
151158
</div>
152159
</div>
153160
</div>
@@ -179,7 +186,7 @@ <h4 class="card__heading">
179186
<p class="card__price-only">Only</p>
180187
<p class="card__price-value">$497</p>
181188
</div>
182-
<a href="#" class="btn btn--white">Book now!</a>
189+
<a href="#popup" class="btn btn--white">Book now!</a>
183190
</div>
184191
</div>
185192
</div>
@@ -211,15 +218,15 @@ <h4 class="card__heading">
211218
<p class="card__price-only">Only</p>
212219
<p class="card__price-value">$897</p>
213220
</div>
214-
<a href="#" class="btn btn--white">Book now!</a>
221+
<a href="#popup" class="btn btn--white">Book now!</a>
215222
</div>
216223
</div>
217224
</div>
218225
</div>
219226
</div>
220227

221228
<div class="u-center-text u-margin-top-huge">
222-
<a href="#" class="btn btn--green">Discover all tours</a>
229+
<a href="#section-tours" class="btn btn--green">Discover all tours</a>
223230
</div>
224231

225232
</section>
@@ -309,7 +316,10 @@ <h2 class="heading-secondary">Start booking now</h2>
309316
</main>
310317
<footer class="footer">
311318
<div class="footer__logo-box">
312-
<img class="footer__logo" src="img/logo-green-2x.png" alt="Full logo-green-2x">
319+
<picture class="footer__logo">
320+
<source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x" media="(max-width: 37.5em)">
321+
<img class="footer__logo" srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo-green-2x">
322+
</picture>
313323
</div>
314324
<div class="row">
315325
<div class="col-1-of-2">
@@ -330,5 +340,24 @@ <h2 class="heading-secondary">Start booking now</h2>
330340
</div>
331341
</div>
332342
</footer>
343+
344+
<div class="popup" id="popup">
345+
<div class="popup__content">
346+
<div class="popup__left">
347+
<img src="img/nat-8.jpg" alt="Tour photo" class="popup__img">
348+
<img src="img/nat-9.jpg" alt="Tour photo" class="popup__img">
349+
</div>
350+
<div class="popup__right">
351+
<a href="#section-tours" class="popup__close">&times;</a>
352+
<h2 class="heading-secondary u-margin-bottom-small">Start booking now</h2>
353+
<h3 class="heading-tertiary u-margin-bottom-small">Important &ndash; Please read these terms before booking</h3>
354+
<p class="popup__text">
355+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus pariatur iusto, suscipit odio quisquam modi magnam similique totam aliquam in sapiente iure nobis esse, officiis commodi expedita quam facilis dolore! Quaerat laudantium magnam excepturi illo est! Adipisci iusto, quibusdam dolores assumenda deleniti vitae amet debitis commodi fuga sapiente veniam aliquid, asperiores excepturi magni. Et, molestias dicta. Autem minus sequi veniam?
356+
</p>
357+
<a href="#" class="btn btn--green">Book now</a>
358+
</div>
359+
</div>
360+
</div>
361+
333362
</body>
334363
</html>

0 commit comments

Comments
 (0)