Author: Michal Szymanski
Free live lesson
Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.
JOIN NOWStep 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 sections .
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 sections
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 sections 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:
