Landing page – lesson 2


Our new full page image is impressive, but it's completely empty - what makes it useless. Let's add some content.

Step 1

Before adding anything to our Full Page Intro, we need to take care about a proper contrast between content and background.

Add .rgba-black-strong class to the .mask element and save the file.


<div class="mask rgba-black-strong">
            

You will notice the background became much more darker. Thanks to that our content will be well visible.

You can easily manipulate the color and intensity of the mask. Replace the class .rgba-black-strong with .rgba-red-light. And yes - it's that simple.

To learn more about mask take a look at Masks Documentation.

When you finish playing with masks restore the previously used class .rgba-black-strong.

Step 2

Within .mask .rgba-black-strong elements place the following content:


<div class="mask rgba-black-strong">

    <!-- Heading -->
    <h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2>

    <!-- Divider -->
    <hr class="hr-light">

    <!-- Description -->
    <h4 class="white-text my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur.</h4>
    <button type="button" class="btn btn-outline-white">Read more<i class="fa fa-book ml-2"></i></button>

</div>
            

We've added Heading, Divider and short Description.

Let me explain what these classes do.

.display-4 creates an outstanding and huge heading (read more in Typography Docs)

.font-weight-bold makes it heavier (read more in Text Utilities Docs)

.white-text makes it white (read more in Color Docs)

.hr-light makes the divider white

Within the description there is nothing new.

.btn-outline-white creates a transparent button (read more in Buttons Docs)

.fa-book is one of 700 icons available in MDB (read more in Icons Docs)

"Alright Michal, now we know how does it work. But nevertheless our Intro is broken" - you may say. And you will be right. Let's fix the Intro and center the content within.

Step 3

Firstly, we will align the content vertically by using magic power of flexbox. Create a new line with these classes: .d-flex and .align-items-center.


<div class="mask rgba-black-strong">

    <div class="d-flex align-items-center">

        <!-- Heading -->
        <h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2>

        <!-- Divider -->
        <hr class="hr-light">

        <!-- Description -->
        <h4 class="white-text my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur.</h4>
        <button type="button" class="btn btn-outline-white">Read more<i class="fa fa-book ml-2"></i></button>

    </div>

</div>
                        

.d-flex makes a given element to display in flex mode (which means display: flex; attribute).

Together with .d-flex comes .align-items-center class which specify the flexbox display settings. In this case it makes the content vertically aligned perfectly in the middle of its parent.

You can read more about Flexbox options in our Flexbox Docs. Be prepared for a lot of reading because, well, that's quite a big topic.

Now let's move forward with fixing our Intro.


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