dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

features section done

Browse Source
This commit is contained in:
Daniel Heras Quesada committed 2023-09-11 23:10:40 +02:00
1 parent b5a07abf51
commit 14b32ac1ac
20 files changed
+945 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Natours/starter/index.html
+62 -7
View File
@@ -6,6 +6,8 @@
<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">
@@ -29,18 +31,71 @@
<main>
<section class="section-about">
<div class="u-center-text u-margin-bottom-8">
<h2 class="heading--secondary">
Exciting tours for adventurous people
</h2>
<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">
Text left
<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 &rarr;</a>
</div>
<div class="col-1-of-2">
Images right
<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>