Initial commit 🚀
Jonas Schmedtmann
1324
4-natours/after-section-06/public/css/style.css
Normal file
BIN
4-natours/after-section-06/public/img/favicon.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
1324
4-natours/after-section-06/public/img/icons.svg
Executable file
|
After Width: | Height: | Size: 141 KiB |
BIN
4-natours/after-section-06/public/img/logo-green-round.png
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
4-natours/after-section-06/public/img/logo-green-small.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
4-natours/after-section-06/public/img/logo-green.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
4-natours/after-section-06/public/img/logo-white.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
4-natours/after-section-06/public/img/pin.png
Normal file
|
After Width: | Height: | Size: 8.0 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-1-1.jpg
Executable file
|
After Width: | Height: | Size: 647 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-1-2.jpg
Executable file
|
After Width: | Height: | Size: 837 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-1-3.jpg
Executable file
|
After Width: | Height: | Size: 717 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-1-cover.jpg
Normal file
|
After Width: | Height: | Size: 950 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-2-1.jpg
Executable file
|
After Width: | Height: | Size: 588 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-2-2.jpg
Executable file
|
After Width: | Height: | Size: 308 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-2-3.jpg
Executable file
|
After Width: | Height: | Size: 903 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-2-cover.jpg
Normal file
|
After Width: | Height: | Size: 776 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-3-1.jpg
Executable file
|
After Width: | Height: | Size: 256 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-3-2.jpg
Normal file
|
After Width: | Height: | Size: 675 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-3-3.jpg
Normal file
|
After Width: | Height: | Size: 563 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-3-cover.jpg
Normal file
|
After Width: | Height: | Size: 606 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-4-1.jpg
Executable file
|
After Width: | Height: | Size: 618 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-4-2.jpg
Executable file
|
After Width: | Height: | Size: 787 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-4-3.jpg
Executable file
|
After Width: | Height: | Size: 970 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-4-cover.jpg
Normal file
|
After Width: | Height: | Size: 574 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-5-1.jpg
Normal file
|
After Width: | Height: | Size: 718 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-5-2.jpg
Normal file
|
After Width: | Height: | Size: 298 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-5-3.jpg
Normal file
|
After Width: | Height: | Size: 539 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-5-cover.jpg
Normal file
|
After Width: | Height: | Size: 626 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-6-1.jpg
Executable file
|
After Width: | Height: | Size: 571 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-6-2.jpg
Executable file
|
After Width: | Height: | Size: 545 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-6-3.jpg
Executable file
|
After Width: | Height: | Size: 387 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-6-cover.jpg
Normal file
|
After Width: | Height: | Size: 853 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-7-1.jpg
Executable file
|
After Width: | Height: | Size: 436 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-7-2.jpg
Normal file
|
After Width: | Height: | Size: 607 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-7-3.jpg
Executable file
|
After Width: | Height: | Size: 432 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-7-cover.jpg
Executable file
|
After Width: | Height: | Size: 275 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-8-1.jpg
Executable file
|
After Width: | Height: | Size: 631 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-8-2.jpg
Executable file
|
After Width: | Height: | Size: 540 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-8-3.jpg
Normal file
|
After Width: | Height: | Size: 581 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-8-cover.jpg
Normal file
|
After Width: | Height: | Size: 669 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-9-1.jpg
Executable file
|
After Width: | Height: | Size: 467 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-9-2.jpg
Executable file
|
After Width: | Height: | Size: 483 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-9-3.jpg
Normal file
|
After Width: | Height: | Size: 502 KiB |
BIN
4-natours/after-section-06/public/img/tours/tour-9-cover.jpg
Executable file
|
After Width: | Height: | Size: 552 KiB |
BIN
4-natours/after-section-06/public/img/users/default.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
4-natours/after-section-06/public/img/users/user-1.jpg
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
4-natours/after-section-06/public/img/users/user-10.jpg
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
4-natours/after-section-06/public/img/users/user-11.jpg
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
4-natours/after-section-06/public/img/users/user-12.jpg
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
4-natours/after-section-06/public/img/users/user-13.jpg
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
4-natours/after-section-06/public/img/users/user-14.jpg
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
4-natours/after-section-06/public/img/users/user-15.jpg
Normal file
|
After Width: | Height: | Size: 6.0 KiB |
BIN
4-natours/after-section-06/public/img/users/user-16.jpg
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
4-natours/after-section-06/public/img/users/user-17.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
4-natours/after-section-06/public/img/users/user-18.jpg
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
BIN
4-natours/after-section-06/public/img/users/user-19.jpg
Normal file
|
After Width: | Height: | Size: 5.5 KiB |
BIN
4-natours/after-section-06/public/img/users/user-2.jpg
Normal file
|
After Width: | Height: | Size: 5.6 KiB |
BIN
4-natours/after-section-06/public/img/users/user-20.jpg
Normal file
|
After Width: | Height: | Size: 7.4 KiB |
BIN
4-natours/after-section-06/public/img/users/user-3.jpg
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
4-natours/after-section-06/public/img/users/user-4.jpg
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
4-natours/after-section-06/public/img/users/user-5.jpg
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
4-natours/after-section-06/public/img/users/user-6.jpg
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
4-natours/after-section-06/public/img/users/user-7.jpg
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
4-natours/after-section-06/public/img/users/user-8.jpg
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
4-natours/after-section-06/public/img/users/user-9.jpg
Normal file
|
After Width: | Height: | Size: 18 KiB |
430
4-natours/after-section-06/public/overview.html
Normal file
@@ -0,0 +1,430 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Lato:300,300i,700"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
|
||||
<title>Natours | Exciting tours for adventurous people</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav nav--tours">
|
||||
<a href="#" class="nav__el">All tours</a>
|
||||
<form class="nav__search">
|
||||
<button class="nav__search-btn">
|
||||
<svg>
|
||||
<use xlink:href="img/icons.svg#icon-search"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tours"
|
||||
class="nav__search-input"
|
||||
/>
|
||||
</form>
|
||||
</nav>
|
||||
<div class="header__logo">
|
||||
<img src="img/logo-white.png" alt="Natours logo" />
|
||||
</div>
|
||||
<nav class="nav nav--user">
|
||||
<a href="#" class="nav__el">My bookings</a>
|
||||
<a href="#" class="nav__el">
|
||||
<img src="img/user.jpg" alt="User photo" class="nav__user-img" />
|
||||
<span>Jonas</span>
|
||||
</a>
|
||||
|
||||
<!-- <button class="nav__el">Log in</button>
|
||||
<button class="nav__el nav__el--cta">Sign up</button> -->
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="overview">
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card__header">
|
||||
<div class="card__picture">
|
||||
<div class="card__picture-overlay"> </div>
|
||||
<img
|
||||
src="img/tour-1-cover.jpg"
|
||||
alt="Tour 1"
|
||||
class="card__picture-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="heading-tertirary">
|
||||
<span>The Forest Hiker</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="card__details">
|
||||
<h4 class="card__sub-heading">Easy 5-day tour</h4>
|
||||
<p class="card__text">
|
||||
Breathtaking hike through the Canadian Banff National Park
|
||||
</p>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-map-pin"></use>
|
||||
</svg>
|
||||
<span>Banff, Canada</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-calendar"></use>
|
||||
</svg>
|
||||
<span>April 2021</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-flag"></use>
|
||||
</svg>
|
||||
<span>3 stops</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-user"></use>
|
||||
</svg>
|
||||
<span>25 people</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card__footer">
|
||||
<p>
|
||||
<span class="card__footer-value">$297</span>
|
||||
<span class="card__footer-text">per person</span>
|
||||
</p>
|
||||
<p class="card__ratings">
|
||||
<span class="card__footer-value">4.9</span>
|
||||
<span class="card__footer-text">rating (21)</span>
|
||||
</p>
|
||||
<a href="#" class="btn btn--green btn--small">Details</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card__header">
|
||||
<div class="card__picture">
|
||||
<div class="card__picture-overlay"> </div>
|
||||
<img
|
||||
src="img/tour-2-cover.jpg"
|
||||
alt="Tour 1"
|
||||
class="card__picture-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="heading-tertirary">
|
||||
<span>The Sea Explorer</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="card__details">
|
||||
<h4 class="card__sub-heading">Medium-difficult 7-day tour</h4>
|
||||
<p class="card__text">
|
||||
Exploring the jaw-dropping US east coast by foot and by boat
|
||||
</p>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-map-pin"></use>
|
||||
</svg>
|
||||
<span>Oregon, US</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-calendar"></use>
|
||||
</svg>
|
||||
<span>June 2021</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-flag"></use>
|
||||
</svg>
|
||||
<span>4 stops</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-user"></use>
|
||||
</svg>
|
||||
<span>15 people</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card__footer">
|
||||
<p>
|
||||
<span class="card__footer-value">$497</span>
|
||||
<span class="card__footer-text">per person</span>
|
||||
</p>
|
||||
<p class="card__ratings">
|
||||
<span class="card__footer-value">4.8</span>
|
||||
<span class="card__footer-text">rating (12)</span>
|
||||
</p>
|
||||
<a href="#" class="btn btn--green btn--small">Details</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card__header">
|
||||
<div class="card__picture">
|
||||
<div class="card__picture-overlay"> </div>
|
||||
<img
|
||||
src="img/tour-3-cover.jpg"
|
||||
alt="Tour 1"
|
||||
class="card__picture-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="heading-tertirary">
|
||||
<span>The Snow Adventurer</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="card__details">
|
||||
<h4 class="card__sub-heading">Difficult 3-day tour</h4>
|
||||
<p class="card__text">
|
||||
Exciting adventure in the snow with snowboarding and skiing
|
||||
</p>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-map-pin"></use>
|
||||
</svg>
|
||||
<span>Aspen, USA</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-calendar"></use>
|
||||
</svg>
|
||||
<span>January 2022</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-flag"></use>
|
||||
</svg>
|
||||
<span>2 stops</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-user"></use>
|
||||
</svg>
|
||||
<span>10 people</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card__footer">
|
||||
<p>
|
||||
<span class="card__footer-value">$697</span>
|
||||
<span class="card__footer-text">per person</span>
|
||||
</p>
|
||||
<p class="card__ratings">
|
||||
<span class="card__footer-value">4.9</span>
|
||||
<span class="card__footer-text">rating (7)</span>
|
||||
</p>
|
||||
<a href="#" class="btn btn--green btn--small">Details</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card__header">
|
||||
<div class="card__picture">
|
||||
<div class="card__picture-overlay"> </div>
|
||||
<img
|
||||
src="img/tour-4-cover.jpg"
|
||||
alt="Tour 1"
|
||||
class="card__picture-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="heading-tertirary">
|
||||
<span>The City Wanderer</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="card__details">
|
||||
<h4 class="card__sub-heading">Easy 7-day tour</h4>
|
||||
<p class="card__text">
|
||||
Living the life of Wanderlust in the US' most beatiful cities
|
||||
</p>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-map-pin"></use>
|
||||
</svg>
|
||||
<span>NYC, USA</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-calendar"></use>
|
||||
</svg>
|
||||
<span>March 2021</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-flag"></use>
|
||||
</svg>
|
||||
<span>3 stops</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-user"></use>
|
||||
</svg>
|
||||
<span>20 people</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card__footer">
|
||||
<p>
|
||||
<span class="card__footer-value">$997</span>
|
||||
<span class="card__footer-text">per person</span>
|
||||
</p>
|
||||
<p class="card__ratings">
|
||||
<span class="card__footer-value">4.8</span>
|
||||
<span class="card__footer-text">rating (31)</span>
|
||||
</p>
|
||||
<a href="#" class="btn btn--green btn--small">Details</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card__header">
|
||||
<div class="card__picture">
|
||||
<div class="card__picture-overlay"> </div>
|
||||
<img
|
||||
src="img/tour-5-cover.jpg"
|
||||
alt="Tour 1"
|
||||
class="card__picture-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="heading-tertirary">
|
||||
<span>The Park Camper</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="card__details">
|
||||
<h4 class="card__sub-heading">Medium-Difficult 10-day tour</h4>
|
||||
<p class="card__text">
|
||||
Breathing in Nature in America's most spectacular National Parks
|
||||
</p>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-map-pin"></use>
|
||||
</svg>
|
||||
<span>Las Vegas, USA</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-calendar"></use>
|
||||
</svg>
|
||||
<span>August 2021</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-flag"></use>
|
||||
</svg>
|
||||
<span>4 stops</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-user"></use>
|
||||
</svg>
|
||||
<span>15 people</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card__footer">
|
||||
<p>
|
||||
<span class="card__footer-value">$1,497</span>
|
||||
<span class="card__footer-text">per person</span>
|
||||
</p>
|
||||
<p class="card__ratings">
|
||||
<span class="card__footer-value">4.9</span>
|
||||
<span class="card__footer-text">rating (19)</span>
|
||||
</p>
|
||||
<a href="/tour.html" class="btn btn--green btn--small">Details</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card__header">
|
||||
<div class="card__picture">
|
||||
<div class="card__picture-overlay"> </div>
|
||||
<img
|
||||
src="img/tour-6-cover.jpg"
|
||||
alt="Tour 1"
|
||||
class="card__picture-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="heading-tertirary">
|
||||
<span>The Sports Lover</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="card__details">
|
||||
<h4 class="card__sub-heading">Difficult 14-day tour</h4>
|
||||
<p class="card__text">
|
||||
Surfing, skating, parajumping, rock climbing and more, all in one
|
||||
tour
|
||||
</p>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-map-pin"></use>
|
||||
</svg>
|
||||
<span>California, USA</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-calendar"></use>
|
||||
</svg>
|
||||
<span>July 2021</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-flag"></use>
|
||||
</svg>
|
||||
<span>5 stops</span>
|
||||
</div>
|
||||
<div class="card__data">
|
||||
<svg class="card__icon">
|
||||
<use xlink:href="img/icons.svg#icon-user"></use>
|
||||
</svg>
|
||||
<span>8 people</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card__footer">
|
||||
<p>
|
||||
<span class="card__footer-value">$1,997</span>
|
||||
<span class="card__footer-text">per person</span>
|
||||
</p>
|
||||
<p class="card__ratings">
|
||||
<span class="card__footer-value">4.7</span>
|
||||
<span class="card__footer-text">rating (23)</span>
|
||||
</p>
|
||||
<a href="#" class="btn btn--green btn--small">Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer__logo">
|
||||
<img src="img/logo-green.png" alt="Natours logo" />
|
||||
</div>
|
||||
<ul class="footer__nav">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Download apps</a></li>
|
||||
<li><a href="#">Become a guide</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<p class="footer__copyright">
|
||||
© by Jonas Schmedtmann. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
522
4-natours/after-section-06/public/tour.html
Normal file
@@ -0,0 +1,522 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
|
||||
<title>Natours | The Park Camper Tour</title>
|
||||
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
|
||||
<link
|
||||
href="https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav nav--tours">
|
||||
<a href="/overview.html" class="nav__el">All tours</a>
|
||||
<form class="nav__search">
|
||||
<button class="nav__search-btn">
|
||||
<svg>
|
||||
<use xlink:href="img/icons.svg#icon-search"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tours"
|
||||
class="nav__search-input"
|
||||
/>
|
||||
</form>
|
||||
</nav>
|
||||
<div class="header__logo">
|
||||
<img src="img/logo-white.png" alt="Natours logo" />
|
||||
</div>
|
||||
<nav class="nav nav--user">
|
||||
<a href="#" class="nav__el">My bookings</a>
|
||||
<button class="nav__el">Log out</button>
|
||||
<a href="#" class="nav__el">
|
||||
<img src="img/user.jpg" alt="User photo" class="nav__user-img" />
|
||||
<span>Jonas</span>
|
||||
</a>
|
||||
|
||||
<!--
|
||||
<button class="nav__el">Log in</button>
|
||||
<button class="nav__el nav__el--cta">Sign up</button>
|
||||
-->
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="section-header">
|
||||
<div class="heading-box">
|
||||
<h1 class="heading-primary">
|
||||
<span
|
||||
>The Park <br />
|
||||
Camper Tour</span
|
||||
>
|
||||
</h1>
|
||||
<div class="heading-box__group">
|
||||
<div class="heading-box__detail">
|
||||
<svg class="heading-box__icon">
|
||||
<use xlink:href="img/icons.svg#icon-clock"></use>
|
||||
</svg>
|
||||
<span class="heading-box__text">10 days</span>
|
||||
</div>
|
||||
<div class="heading-box__detail">
|
||||
<svg class="heading-box__icon">
|
||||
<use xlink:href="img/icons.svg#icon-map-pin"></use>
|
||||
</svg>
|
||||
<span class="heading-box__text">Las Vegas, USA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-description">
|
||||
<div class="overview-box">
|
||||
<div>
|
||||
<div class="overview-box__group">
|
||||
<h2 class="heading-secondary ma-bt-lg">Quick facts</h2>
|
||||
<div class="overview-box__detail">
|
||||
<svg class="overview-box__icon">
|
||||
<use xlink:href="img/icons.svg#icon-calendar"></use>
|
||||
</svg>
|
||||
<span class="overview-box__label">Next date</span>
|
||||
<span class="overview-box__text">August 2021</span>
|
||||
</div>
|
||||
<div class="overview-box__detail">
|
||||
<svg class="overview-box__icon">
|
||||
<use xlink:href="img/icons.svg#icon-trending-up"></use>
|
||||
</svg>
|
||||
<span class="overview-box__label">Difficulty</span>
|
||||
<span class="overview-box__text">Medium</span>
|
||||
</div>
|
||||
<div class="overview-box__detail">
|
||||
<svg class="overview-box__icon">
|
||||
<use xlink:href="img/icons.svg#icon-user"></use>
|
||||
</svg>
|
||||
<span class="overview-box__label">Participants</span>
|
||||
<span class="overview-box__text">10 people</span>
|
||||
</div>
|
||||
<div class="overview-box__detail">
|
||||
<svg class="overview-box__icon">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<span class="overview-box__label">Rating</span>
|
||||
<span class="overview-box__text">4.9 / 5</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-box__group">
|
||||
<h2 class="heading-secondary ma-bt-lg">Your tour guides</h2>
|
||||
|
||||
<div class="overview-box__detail">
|
||||
<img
|
||||
src="img/users/user-19.jpg"
|
||||
alt="Lead guide"
|
||||
class="overview-box__img"
|
||||
/>
|
||||
<span class="overview-box__label">Lead guide</span>
|
||||
<span class="overview-box__text">Steven Miller</span>
|
||||
</div>
|
||||
<div class="overview-box__detail">
|
||||
<img
|
||||
src="img/users/user-18.jpg"
|
||||
alt="Tour guide"
|
||||
class="overview-box__img"
|
||||
/>
|
||||
<span class="overview-box__label">Tour guide</span>
|
||||
<span class="overview-box__text">Lisa Brown</span>
|
||||
</div>
|
||||
<div class="overview-box__detail">
|
||||
<img
|
||||
src="img/users/user-17.jpg"
|
||||
alt="Intern"
|
||||
class="overview-box__img"
|
||||
/>
|
||||
<span class="overview-box__label">Intern</span>
|
||||
<span class="overview-box__text">Max Smith</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description-box">
|
||||
<h2 class="heading-secondary ma-bt-lg">About the park camper tour</h2>
|
||||
<p class="description__text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur.
|
||||
</p>
|
||||
<p class="description__text">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-pictures">
|
||||
<div class="picture-box">
|
||||
<img
|
||||
class="picture-box__img picture-box__img--1"
|
||||
src="img/tour-5-1.jpg"
|
||||
alt="The Park Camper Tour 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="picture-box">
|
||||
<img
|
||||
class="picture-box__img picture-box__img--2"
|
||||
src="img/tour-5-2.jpg"
|
||||
alt="The Park Camper Tour 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="picture-box">
|
||||
<img
|
||||
class="picture-box__img picture-box__img--3"
|
||||
src="img/tour-5-3.jpg"
|
||||
alt="The Park Camper Tour 1"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-map">
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1Ijoiam9uYXNzY2htZWR0bWFubiIsImEiOiJjam54ZmM5N3gwNjAzM3dtZDNxYTVlMnd2In0.ytpI7V7w7cyT1Kq5rT9Z1A';
|
||||
|
||||
const geojson = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [-112.987418, 37.198125]
|
||||
},
|
||||
properties: {
|
||||
description: 'Zion Canyon National Park'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [-111.376161, 36.86438]
|
||||
},
|
||||
properties: {
|
||||
description: 'Antelope Canyon'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [-112.115763, 36.058973]
|
||||
},
|
||||
properties: {
|
||||
description: 'Grand Canyon National Park'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [-116.107963, 34.011646]
|
||||
},
|
||||
properties: {
|
||||
description: 'Joshua Tree National Park'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'mapbox://styles/jonasschmedtmann/cjnxfn3zk7bj52rpegdltx58h',
|
||||
scrollZoom: false
|
||||
});
|
||||
|
||||
const bounds = new mapboxgl.LngLatBounds();
|
||||
|
||||
geojson.features.forEach(function(marker) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'marker';
|
||||
|
||||
new mapboxgl.Marker({
|
||||
element: el,
|
||||
anchor: 'bottom'
|
||||
})
|
||||
.setLngLat(marker.geometry.coordinates)
|
||||
.addTo(map);
|
||||
|
||||
new mapboxgl.Popup({
|
||||
offset: 30,
|
||||
closeOnClick: false
|
||||
})
|
||||
.setLngLat(marker.geometry.coordinates)
|
||||
.setHTML('<p>' + marker.properties.description + '</p>')
|
||||
.addTo(map);
|
||||
|
||||
bounds.extend(marker.geometry.coordinates);
|
||||
});
|
||||
|
||||
map.fitBounds(bounds, {
|
||||
padding: {
|
||||
top: 200,
|
||||
bottom: 150,
|
||||
left: 50,
|
||||
right: 50
|
||||
}
|
||||
});
|
||||
|
||||
map.on('load', function() {
|
||||
map.addLayer({
|
||||
id: 'route',
|
||||
type: 'line',
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[-112.987418, 37.198125],
|
||||
[-111.376161, 36.86438],
|
||||
[-112.115763, 36.058973],
|
||||
[-116.107963, 34.011646]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round'
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#55c57a',
|
||||
'line-opacity': 0.6,
|
||||
'line-width': 3
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section class="section-reviews">
|
||||
<div class="reviews">
|
||||
<div class="reviews__card">
|
||||
<div class="reviews__avatar">
|
||||
<img
|
||||
src="img/users/user-7.jpg"
|
||||
alt="Jim Brown"
|
||||
class="reviews__avatar-img"
|
||||
/>
|
||||
<h6 class="reviews__user">Jim Brown</h6>
|
||||
</div>
|
||||
<p class="reviews__text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
|
||||
dignissimos sint quo commodi corrupti accusantium veniam saepe
|
||||
numquam.
|
||||
</p>
|
||||
<div class="reviews__rating">
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reviews__card">
|
||||
<div class="reviews__avatar">
|
||||
<img
|
||||
src="img/users/user-14.jpg"
|
||||
alt="Laura Wilson"
|
||||
class="reviews__avatar-img"
|
||||
/>
|
||||
<h6 class="reviews__user">Laura Wilson</h6>
|
||||
</div>
|
||||
<p class="reviews__text">
|
||||
Veniam adipisci blanditiis, corporis sit magnam aperiam ad, fuga
|
||||
reiciendis provident deleniti cumque similique itaque animi,
|
||||
sapiente obcaecati beatae accusantium.
|
||||
</p>
|
||||
<div class="reviews__rating">
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--inactive">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reviews__card">
|
||||
<div class="reviews__avatar">
|
||||
<img
|
||||
src="img/users/user-15.jpg"
|
||||
alt="Ben Hadley"
|
||||
class="reviews__avatar-img"
|
||||
/>
|
||||
<h6 class="reviews__user">Ben Hadley</h6>
|
||||
</div>
|
||||
<p class="reviews__text">
|
||||
Debitis, nesciunt itaque! At quis officia natus. Suscipit,
|
||||
reprehenderit blanditiis mollitia distinctio ducimus porro tempore
|
||||
perspiciatis sunt vel.
|
||||
</p>
|
||||
<div class="reviews__rating">
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reviews__card">
|
||||
<div class="reviews__avatar">
|
||||
<img
|
||||
src="img/users/user-6.jpg"
|
||||
alt="Alexander Jones"
|
||||
class="reviews__avatar-img"
|
||||
/>
|
||||
<h6 class="reviews__user">Alexander Jones</h6>
|
||||
</div>
|
||||
<p class="reviews__text">
|
||||
Quaerat laborum eveniet ut aut maiores doloribus mollitia aperiam
|
||||
quis praesentium sed inventore harum aliquam veritatis at adipisci
|
||||
ea assumenda!
|
||||
</p>
|
||||
<div class="reviews__rating">
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reviews__card">
|
||||
<div class="reviews__avatar">
|
||||
<img
|
||||
src="img/users/user-3.jpg"
|
||||
alt="Ayla Cornell"
|
||||
class="reviews__avatar-img"
|
||||
/>
|
||||
<h6 class="reviews__user">Ayla Cornell</h6>
|
||||
</div>
|
||||
<p class="reviews__text">
|
||||
Perferendis quo aliquid iste quas laboriosam molestias illo est
|
||||
voluptatem odit ea. Vero placeat culpa provident dicta maiores!
|
||||
</p>
|
||||
<div class="reviews__rating">
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="reviews__star reviews__star--active">
|
||||
<use xlink:href="img/icons.svg#icon-star"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-cta">
|
||||
<div class="cta">
|
||||
<div class="cta__img cta__img--logo">
|
||||
<img src="img/logo-white.png" alt="Natours logo" class="" />
|
||||
</div>
|
||||
<img src="img/tour-5-2.jpg" alt="" class="cta__img cta__img--1" />
|
||||
<img src="img/tour-5-1.jpg" alt="" class="cta__img cta__img--2" />
|
||||
|
||||
<div class="cta__content">
|
||||
<h2 class="heading-secondary">What are you waiting for?</h2>
|
||||
<p class="cta__text">
|
||||
10 days. 1 adventure. Infinite memories. Make it yours today!
|
||||
</p>
|
||||
<button class="btn btn--green span-all-rows">Book tour now!</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer__logo">
|
||||
<img src="img/logo-green.png" alt="Natours logo" />
|
||||
</div>
|
||||
<ul class="footer__nav">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Download apps</a></li>
|
||||
<li><a href="#">Become a guide</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<p class="footer__copyright">
|
||||
© by Jonas Schmedtmann. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||