Landing page – lesson 4


Step 1

At the beginning we'll 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 provide necessary clarity and readability for our project.

Each section contains an ID. We'll use it later to connect the sections with Navbar links.

Remember: in single document it can be only one element with specific ID. Using the same ID in multiple elements can cause a serious problems.

Between the sections we've placed a divider with a 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 with our Intro.

One more thing worth to note: always use the 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="fa 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="fa 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="fa 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 here is nothing new - we have learned about all that things in previous lessons.

Step 3

We'll make our icons bigger. It's easy to achieve - we just need to add class .fa-2x, .fa-3x, .fa-4xor .fa-5x to the i element.

We'll use .fa-4x


<i class="fa fa-camera-retro fa-4x"></i>
                            

<i class="fa fa-heart fa-4x"></i>
                            

<i class="fa fa-bicycle fa-4x"></i>
                            

Alright, that looks good. Nevertheless, it could be even better if it has more lively color.

Add class .orange-text to the icons.


<i class="fa fa-camera-retro fa-4x orange-text"></i>
                            

At the end we'll make some improvements of our typography.

Add class .grey-text to each description, and .font-weight-bold to the headings.

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="fa 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="fa 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="fa 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 Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits