Author: Michal Szymanski
Step 1
To begin, let's create a basic structure for our content.
Inside the <main>
tags place the following code:
<!--Main layout-->
<main class="mt-5">
<div class="container">
<!--Section: Best Features-->
<section id="best-features">
</section>
<!--Section: Best Features-->
<hr class="my-5">
<!--Section: Examples-->
<section id="examples">
</section>
<!--Section: Examples-->
<hr class="my-5">
<!--Section: Gallery-->
<section id="gallery">
</section>
<!--Section: Gallery-->
<hr class="my-5">
<!--Section: Contact-->
<section id="contact">
</section>
<!--Section: Contact-->
</div>
</main>
<!--Main layout-->
As you can see, we've divided our content into section
s .
section
does not have any special properties, but provides necessary clarity and readability for our
project.
Each section
contains an ID
. We'll use that later to connect the section
s
with Navbar
links.
Remember: in a single document it can be only one element with a specific ID
. Using the
same
ID
in multiple elements can cause serious problems.
Between the section
s we've placed a divider with both top and bottom margins (Y axis) to separate one
section
from another.
We've also added .mt-5
to the main
element to provide a proper margin for our Intro.
There is one more thing worth noting: always use comments to describe your code. That will be extremely helpful for you and your coworkers when your project grows.
Step 2
To the section "Best Features", add a following snippet:
<!--Section: Best Features-->
<section id="best-features" class="text-center">
<!-- Heading -->
<h2 class="mb-5">Best Features</h2>
<!--Grid row-->
<div class="row d-flex justify-content-center mb-4">
<!--Grid column-->
<div class="col-md-8">
<!-- Description -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptate hic provident nulla repellat
facere esse molestiae ipsa labore porro minima quam quaerat rem, natus repudiandae debitis est
sit pariatur.</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-4 mb-1">
<i class="fas fa-camera-retro"></i>
<h4 class="my-4">Experience</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
assumenda deleniti hic.</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-1">
<i class="fas fa-heart"></i>
<h4 class="my-4">Happiness</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
assumenda deleniti hic.</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-1">
<i class="fas fa-bicycle"></i>
<h4 class="my-4">Adventure</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
assumenda deleniti hic.</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Best Features-->
It seems to be a lot of code, but there is nothing new - we have learned about all those things in previous lessons.
Apart from the one thing - icons
Have a look at this code:
<i class="fas fa-camera-retro"></i>
If you want to use icons you always have to use .fa
class (it stands for "Font Awesome").
Next, you use an identifier of the particular icon (for example .fa-camera-retro
).
Here you can find a full list of over 1479 available icons.
Step 3
We'll make our icons bigger. That's easy to achieve - we just need to add the class .fa-2x
, .fa-3x
,
.fa-4x
or .fa-5x
to the i
element.
We'll use .fa-4x
To learn more about advanced usage of the icons read our Icons Usage Docs
<i class="fas fa-camera-retro fa-4x"></i>
<i class="fas fa-heart fa-4x"></i>
<i class="fas fa-bicycle fa-4x"></i>
Alright, that looks good. Nevertheless, it could be even better if it had a more lively color.
So let's add the class .orange-text
to the icons.
To learn more about text color read our Text Color Docs.
<i class="fas fa-camera-retro fa-4x orange-text"></i>
Step 4
Finally, we'll make some improvements of our typography.
Add the class .grey-text
to each description, and .font-weight-bold
to the headings.
To learn more about text modifications read our Text Utilities Docs.
After all your "Best Features" section should looks like that:
<!--Section: Best Features-->
<section id="best-features" class="text-center">
<!-- Heading -->
<h2 class="mb-5 font-weight-bold">Best Features</h2>
<!--Grid row-->
<div class="row d-flex justify-content-center mb-4">
<!--Grid column-->
<div class="col-md-8">
<!-- Description -->
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptate hic provident nulla repellat
facere esse molestiae ipsa labore porro minima quam quaerat rem, natus repudiandae debitis est
sit pariatur.</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-4 mb-5">
<i class="fas fa-camera-retro fa-4x orange-text"></i>
<h4 class="my-4 font-weight-bold">Experience</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
assumenda deleniti hic.</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-1">
<i class="fas fa-heart fa-4x orange-text"></i>
<h4 class="my-4 font-weight-bold">Happiness</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
assumenda deleniti hic.</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-1">
<i class="fas fa-bicycle fa-4x orange-text"></i>
<h4 class="my-4 font-weight-bold">Adventure</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
assumenda deleniti hic.</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Best Features-->
Previous lesson Live preview Next lesson
Spread the word: