523 lines
20 KiB
HTML
523 lines
20 KiB
HTML
<!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:100,300,400,700,900"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- Not needed because its on the code already because of the concat -->
|
|
<!-- <link rel="stylesheet" href="css/icon-font.css" /> -->
|
|
|
|
<link rel="stylesheet" href="css/icon-font.css" />
|
|
<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>
|
|
<div class="navigation">
|
|
<input type="checkbox" class="navigation__checkbox" id="navi-toggle" />
|
|
<label for="navi-toggle" class="navigation__button">
|
|
<span class="navigation__icon"> </span>
|
|
</label>
|
|
<div class="navigation__background"> </div>
|
|
|
|
<nav class="navigation__nav">
|
|
<ul class="navigation__list">
|
|
<li class="navigation__item">
|
|
<a href="#" class="navigation__link">
|
|
<span>01</span>
|
|
About Natous</a
|
|
>
|
|
</li>
|
|
<li class="navigation__item">
|
|
<a href="#" class="navigation__link">
|
|
<span>02</span>
|
|
Your benefits</a
|
|
>
|
|
</li>
|
|
<li class="navigation__item">
|
|
<a href="#" class="navigation__link">
|
|
<span>03</span>
|
|
Popular tours</a
|
|
>
|
|
</li>
|
|
<li class="navigation__item">
|
|
<a href="#" class="navigation__link">
|
|
<span>04</span>
|
|
Stories</a
|
|
>
|
|
</li>
|
|
<li class="navigation__item">
|
|
<a href="#" class="navigation__link">
|
|
<span>05</span>
|
|
Book now</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<header class="header">
|
|
<div class="header__logo-box">
|
|
<img src="./img/logo-white.png" alt="Logo" class="header__logo" />
|
|
</div>
|
|
<div class="header__text-box">
|
|
<h1 class="heading--primary">
|
|
<span class="heading--primary-main">outdoors</span>
|
|
<span class="heading--primary-sub">is where life happens</span>
|
|
</h1>
|
|
|
|
<a href="#" class="btn btn--white btn--animated">Discover our tours</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="section-about">
|
|
<div class="u-center-text u-margin-bottom-big">
|
|
<h2 class="heading--secondary">
|
|
Exciting tours for adventurous people
|
|
</h2>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-of-2">
|
|
<h3 class="heading--terciary u-margin-bottom-small">
|
|
You're going to fall n love with nature
|
|
</h3>
|
|
<p class="paragraph">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo
|
|
ipsum magnam, accusantium quo modi deserunt excepturi praesentium
|
|
dolores dolorem cumque consequatur quod veniam!
|
|
</p>
|
|
<h3 class="heading--terciary u-margin-bottom-small">
|
|
Live adventure like never have before
|
|
</h3>
|
|
<p class="paragraph">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo
|
|
ipsum magnam.
|
|
</p>
|
|
<a href="#" class="btn-text">Learn more →</a>
|
|
</div>
|
|
<div class="col-1-of-2">
|
|
<div class="composition">
|
|
<!-- In the srcset we inform the browser the width of the images without him neeeding to download them -->
|
|
<!-- In sizes we inform the browser the aproximate width of the image in the different situations -->
|
|
<!-- This way the browser will determine itself what image to request -->
|
|
<!-- is also good to include src attribute in case the browser does not support srcset (old) -->
|
|
<img
|
|
srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
|
|
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
|
|
src="img/nat-1-large.jpg"
|
|
alt="Photo 1"
|
|
/>
|
|
<img
|
|
srcset="img/nat-2.jpg 300w, img/nat-2-large.jpg 1000w"
|
|
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
|
|
src="img/nat-2-large.jpg"
|
|
alt="Photo 2"
|
|
/>
|
|
<img
|
|
srcset="img/nat-3.jpg 300w, img/nat-3-large.jpg 1000w"
|
|
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
|
|
src="img/nat-3-large.jpg"
|
|
alt="Photo 3"
|
|
/>
|
|
<!-- <img -->
|
|
<!-- src="img/nat-1-large.jpg" -->
|
|
<!-- alt="Photo 1" -->
|
|
<!-- class="composition__photo composition__photo--p1" -->
|
|
<!-- /> -->
|
|
<!-- <img -->
|
|
<!-- src="img/nat-2-large.jpg" -->
|
|
<!-- alt="Photo 2" -->
|
|
<!-- class="composition__photo composition__photo--p2" -->
|
|
<!-- /> -->
|
|
<!-- <img -->
|
|
<!-- src="img/nat-3-large.jpg" -->
|
|
<!-- alt="Photo 3" -->
|
|
<!-- class="composition__photo composition__photo--p3" -->
|
|
<!-- /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section-features">
|
|
<div class="row">
|
|
<div class="col-1-of-4">
|
|
<div class="feature-box">
|
|
<i class="feature-box__icon icon-basic-world"></i>
|
|
<h3 class="heading-tertiary u-margin-bottom-small">
|
|
Explore the world
|
|
</h3>
|
|
<p class="feature-box__text">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
|
|
tempora adipisci, laboriosam assumenda nostrum ab dicta.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-1-of-4">
|
|
<div class="feature-box">
|
|
<i class="feature-box__icon icon-basic-compass"></i>
|
|
<h3 class="heading-tertiary u-margin-bottom-small">
|
|
Meet nature
|
|
</h3>
|
|
<p class="feature-box__text">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
|
|
tempora adipisci, laboriosam assumenda nostrum ab dicta.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-1-of-4">
|
|
<div class="feature-box">
|
|
<i class="feature-box__icon icon-basic-map"></i>
|
|
<h3 class="heading-tertiary u-margin-bottom-small">
|
|
Find your way
|
|
</h3>
|
|
<p class="feature-box__text">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
|
|
tempora adipisci, laboriosam assumenda nostrum ab dicta.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-1-of-4">
|
|
<div class="feature-box">
|
|
<i class="feature-box__icon icon-basic-heart"></i>
|
|
<h3 class="heading-tertiary u-margin-bottom-small">
|
|
Live a healthier life
|
|
</h3>
|
|
<p class="feature-box__text">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
|
|
tempora adipisci, laboriosam assumenda nostrum ab dicta.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-tours">
|
|
<div class="u-center-text u-margin-bottom-big">
|
|
<h2 class="heading--secondary">Most popular tours</h2>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-of-3">
|
|
<div class="card">
|
|
<div class="card__side card__side--front">
|
|
<div class="card__picture card__picture--1"> </div>
|
|
<h4 class="card__heading">
|
|
<span class="card__heading--span card__heading--span--1">
|
|
The sea Explorer
|
|
</span>
|
|
</h4>
|
|
<div class="card__details">
|
|
<ul>
|
|
<li>3 day tours</li>
|
|
<li>Up to 30 people</li>
|
|
<li>2 tour guides</li>
|
|
<li>Sleep in cozy hotels</li>
|
|
<li>Difficulty: easy</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card__side card__side--back card__side--back-1">
|
|
<div class="card__cta">
|
|
<div class="card__price-box">
|
|
<p class="card__price-only">Only</p>
|
|
<p class="card__price-value">$279</p>
|
|
</div>
|
|
<a href="#popup" class="btn btn--white">Book now!</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-1-of-3">
|
|
<div class="card">
|
|
<div class="card__side card__side--front">
|
|
<div class="card__picture card__picture--2"> </div>
|
|
<h4 class="card__heading">
|
|
<span class="card__heading--span card__heading--span--2">
|
|
The Forest Hiker
|
|
</span>
|
|
</h4>
|
|
<div class="card__details">
|
|
<ul>
|
|
<li>7 day tour</li>
|
|
<li>Up to 40 people</li>
|
|
<li>6 tour guides</li>
|
|
<li>Sleep in provided tents</li>
|
|
<li>Difficulty: medium</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card__side card__side--back card__side--back-2">
|
|
<div class="card__cta">
|
|
<div class="card__price-box">
|
|
<p class="card__price-only">Only</p>
|
|
<p class="card__price-value">$279</p>
|
|
</div>
|
|
<a href="#popup" class="btn btn--white">Book now!</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-1-of-3">
|
|
<div class="card">
|
|
<div class="card__side card__side--front">
|
|
<div class="card__picture card__picture--3"> </div>
|
|
<h4 class="card__heading">
|
|
<span class="card__heading--span card__heading--span--3">
|
|
The snow adventurer
|
|
</span>
|
|
</h4>
|
|
<div class="card__details">
|
|
<ul>
|
|
<li>5 day tour</li>
|
|
<li>Up to 15 people</li>
|
|
<li>3 tour guides</li>
|
|
<li>Sleep in provided tents</li>
|
|
<li>Difficulty: hard</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card__side card__side--back card__side--back-3">
|
|
<div class="card__cta">
|
|
<div class="card__price-box">
|
|
<p class="card__price-only">Only</p>
|
|
<p class="card__price-value">$279</p>
|
|
</div>
|
|
<a href="#popup" class="btn btn--white">Book now!</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="u-center-text u-margin-top-huge">
|
|
<a href="#" class="btn btn--green">Discover all tours</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-stories">
|
|
<div class="bg-video">
|
|
<video class="bg-video__content" autoplay muted loop>
|
|
<source src="img/video.mp4" type="video/mp4" />
|
|
<source src="img/video.webm" type="video/webm" />
|
|
Your browser is not supported!
|
|
</video>
|
|
</div>
|
|
<div class="u-center-text u-margin-bottom-big">
|
|
<h2 class="heading--secondary">We make people genuinely happy</h2>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="story">
|
|
<figure class="story__shape">
|
|
<img
|
|
src="img/nat-8.jpg"
|
|
alt="Person on a tour"
|
|
class="story__img"
|
|
/>
|
|
<figcaption class="story__caption">Mary Smith</figcaption>
|
|
</figure>
|
|
<div class="story__text"></div>
|
|
<h3 class="heading--terciary u-margin-bottom-small">
|
|
I had the best weekend with my family
|
|
</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim
|
|
sint cillum sint consectetur cupidatat. Lorem ipsum dolor sit
|
|
amet, qui minim labore adipisicing minim sint cillum sint
|
|
consectetur cupidatat. Lorem ipsum dolor sit amet, qui minim
|
|
labore adipisicing minim sint cillum sint consectetur cupidatat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="story">
|
|
<figure class="story__shape">
|
|
<img
|
|
src="img/nat-9.jpg"
|
|
alt="Person on a tour"
|
|
class="story__img"
|
|
/>
|
|
<figcaption class="story__caption">Jack Wilson</figcaption>
|
|
</figure>
|
|
<div class="story__text"></div>
|
|
<h3 class="heading--terciary u-margin-bottom-small">
|
|
WOW! My life is completly different now
|
|
</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim
|
|
sint cillum sint consectetur cupidatat. Lorem ipsum dolor sit
|
|
amet, qui minim labore adipisicing minim sint cillum sint
|
|
consectetur cupidatat. Lorem ipsum dolor sit amet, qui minim
|
|
labore adipisicing minim sint cillum sint consectetur cupidatat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="u-center-text u-margin-top-huge">
|
|
<a href="#" class="btn-text">Read all stories →</a>
|
|
</div>
|
|
</section>
|
|
<section class="section-book">
|
|
<div class="row">
|
|
<div class="book">
|
|
<div class="book__form">
|
|
<form action="#" class="form">
|
|
<div class="u-margin-bottom-medium">
|
|
<h2 class="heading--secondary">Start booking now</h2>
|
|
</div>
|
|
<div class="form__group">
|
|
<input
|
|
id="name"
|
|
type="text"
|
|
class="form__input"
|
|
placeholder="Full Name"
|
|
required
|
|
/>
|
|
<label for="name" class="form__label">Full name</label>
|
|
</div>
|
|
<div class="form__group">
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
class="form__input"
|
|
placeholder="Email"
|
|
required
|
|
/>
|
|
<label for="email" class="form__label">Email address</label>
|
|
</div>
|
|
<div class="form__group u-margin-bottom-medium">
|
|
<div class="form__radio-group">
|
|
<input
|
|
type="radio"
|
|
class="form__radio-input"
|
|
id="small"
|
|
name="size"
|
|
/>
|
|
<label for="small" class="form__radio-label"
|
|
><span class="form__radio-button"></span>Small tour
|
|
group</label
|
|
>
|
|
</div>
|
|
<div class="form__radio-group">
|
|
<input
|
|
type="radio"
|
|
class="form__radio-input"
|
|
id="large"
|
|
name="size"
|
|
/>
|
|
<label for="large" class="form__radio-label"
|
|
><span class="form__radio-button"></span>Large tour
|
|
group</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="form__group">
|
|
<button class="btn btn--green">Next step →</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer class="footer">
|
|
<div class="footer__logo-box">
|
|
<picture class="footer__logo">
|
|
<!-- if browser smaller than 37.5rem, uses source, if not browser is forced to use the default set in img -->
|
|
<!-- multiple sources can be specified -->
|
|
<!-- all sources can also implement density switching with srcset -->
|
|
<source
|
|
srcset="
|
|
img/logo-green-small-1x.png 1x,
|
|
img/logo-green-small-2x.png 2x
|
|
"
|
|
media="(max-width: 37.5rem)"
|
|
/>
|
|
<img
|
|
srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x"
|
|
alt="Full logo"
|
|
class="footer__logo"
|
|
/>
|
|
</picture>
|
|
<!-- <img -->
|
|
<!-- srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" -->
|
|
<!-- alt="Full logo" -->
|
|
<!-- class="footer__logo" -->
|
|
<!-- /> -->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-of-2">
|
|
<div class="footer__navigation">
|
|
<ul class="footer__list">
|
|
<li class="footer__item">
|
|
<a href="" class="footer__link">Company</a>
|
|
</li>
|
|
<li class="footer__item">
|
|
<a href="" class="footer__link">Contact us</a>
|
|
</li>
|
|
<li class="footer__item">
|
|
<a href="" class="footer__link">Carrers</a>
|
|
</li>
|
|
<li class="footer__item">
|
|
<a href="" class="footer__link">Privacy</a>
|
|
</li>
|
|
<li class="footer__item">
|
|
<a href="" class="footer__link">Terms</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-1-of-2">
|
|
<p class="footer__copyright">
|
|
Built my
|
|
<a href="#" class="footer__link">Daniel Heras Quesada</a> as an
|
|
example project for learning Advanced CSS and Sass. Designed by
|
|
Jonas Schemdtmann. Copyright © by Jonas Schemdtmann. You are
|
|
100% allow to use this webpage for both personal and commercial use,
|
|
but NOT to claim it as your own design.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<div class="popup" id="popup">
|
|
<div class="popup__content">
|
|
<div class="popup__left">
|
|
<img src="img/nat-8.jpg" alt="Tour photo" class="popup__img" />
|
|
<img src="img/nat-9.jpg" alt="Tour photo" class="popup__img" />
|
|
</div>
|
|
<div class="popup__right">
|
|
<a href="#section-tours" class="popup__close">×</a>
|
|
<h2 class="heading--secondary u-margin-bottom-small">
|
|
Start booking now
|
|
</h2>
|
|
<h3 class="heading--terciary u-margin-bottom-small">
|
|
Important – Please read these terms before booking
|
|
</h3>
|
|
<p class="popup__text">
|
|
Lorem ipsum dolor sit amet, officia excepteur ex fugiat
|
|
reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit
|
|
ex esse exercitation amet. Nisi anim cupidatat excepteur officia.
|
|
Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate
|
|
voluptate dolor minim nulla est proident. Nostrud officia pariatur
|
|
ut officia. Sit irure elit esse ea nulla sunt ex occaecat
|
|
reprehenderit commodo officia dolor Lorem duis laboris cupidatat
|
|
officia voluptate. Culpa proident adipisicing id nulla nisi laboris
|
|
ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo
|
|
ex non excepteur duis sunt velit enim. Voluptate laboris sint
|
|
cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
|
</p>
|
|
<a href="#" class="btn btn--green">Book now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|