167 lines
7.1 KiB
HTML
167 lines
7.1 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">
|
|
|
|
<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>
|
|
<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">
|
|
<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>
|
|
</main>
|
|
|
|
<!--
|
|
<section class="grid-test">
|
|
<div class="row">
|
|
<div class="col-1-of-2">
|
|
Col 1 of 2
|
|
</div>
|
|
<div class="col-1-of-2">
|
|
Col 1 of 2
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-of-3">
|
|
Col 1 of 3
|
|
</div>
|
|
<div class="col-1-of-3">
|
|
Col 1 of 3
|
|
</div>
|
|
<div class="col-1-of-3">
|
|
Col 1 of 3
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-of-3">
|
|
Col 1 of 3
|
|
</div>
|
|
<div class="col-2-of-3">
|
|
Col 2 of 3
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-of-4">
|
|
Col 1 of 4
|
|
</div>
|
|
<div class="col-1-of-4">
|
|
Col 1 of o
|
|
</div>
|
|
<div class="col-2-of-4">
|
|
Col 1 of 4
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-of-4">
|
|
Col 1 of 4
|
|
</div>
|
|
<div class="col-2-of-4">
|
|
Col 1 of o
|
|
</div>
|
|
<div class="col-1-of-4">
|
|
Col 2 of 4
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-of-4">
|
|
Col 1 of 4
|
|
</div>
|
|
<div class="col-3-of-4">
|
|
Col 3 of 4
|
|
</div>
|
|
</div>
|
|
</section>
|
|
-->
|
|
</body>
|
|
</html>
|