Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Masks

Masks, cards, shadows


Written by Michal Szymanski ,

Our intro looks nice, but heading in the middle isn't visible. That can decrease user experience, so we have to do something with that.

This is a perfect occasion to use the mask.


1. Mask

Firstly, we will change the color of the text to white. Put the following code into style.css file:


.flex-center {
    color: #fff;
}

Now it looks even worst. We definitely need to make the background darker.

Add a class .hm-black-strong to the .view div.


    <!--Mask-->
    <div class="view hm-black-strong">

Alright, now it's fine.

You can modify the color intensity by changing word "light" to "strong" or "slight". You can also change the color itself. Try it:


    <!--Mask-->
    <div class="view hm-blue-strong">

All color references you can find in our COLORS section. To learn more about masks have a look at our MASKS documentation.

After you finish playing with the colors, change back mask to .hm-black-strong.


2. Basic structure

Let's create a basic structure for our Landing Page. Place the following code below the Mask section:


<!--/.Mask-->

<!-- Main container-->
<div class="container">

    <div class="divider-new">
        <h2 class="h2-responsive">About us</h2>
    </div>

    <!--Section: About-->
    <section id="about">


    </section>
    <!--Section: About-->

    <div class="divider-new">
        <h2 class="h2-responsive">Best features</h2>
    </div>

    <!--Section: Best features-->
    <section id="best-features">

        <div class="row">

            <!--First columnn-->
            <div class="col-md-3">

            </div>
            <!--First columnn-->

            <!--Second columnn-->
            <div class="col-md-3">

            </div>
            <!--Second columnn-->

            <!--Third columnn-->
            <div class="col-md-3">

            </div>
            <!--Third columnn-->

            <!--Fourth columnn-->
            <div class="col-md-3">

            </div>
            <!--Fourth columnn-->
        </div>

    </section>
    <!--/Section: Best features-->

    <div class="divider-new">
        <h2 class="h2-responsive">Contact us</h2>
    </div>

    <!--Section: Contact-->
    <section id="contact">
        <div class="row">
            <!--First column-->
            <div class="col-md-8">

            </div>
            <!--/First column-->

            <!--Second column-->
            <div class="col-md-4">

            </div>
            <!--/Second column-->
        </div>
    </section>
    <!--Section: Contact-->

</div>
<!--/ Main container-->

We have created a main "container" (which will center our content by adding a proper margin) and 3 sections: "About", "Best Features" and "Contact". These will provide a bunch of useful information to visitors of our website.

Each section contains "row" div to provide a necessary structure for content's columns which are placed inside. All of them are a part of Bootstrap Grid System. If you are not sure what we are talking about you can read more about it in our previous tutorials.

In this case, we use .col-md-3 4 times, because we need 4 columns for 4 cards.

Each section has own ID. We'll refer to it later in our navigation.

We've also added a divider with a title above the sections.


3. Section "About"

Put some dummy text inside "About" section and add a class .text-center to it.


<!--Section: About-->
<section id="about" class="text-center">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit explicabo assumenda eligendi ex exercitationem harum deleniti quaerat beatae ducimus dolor voluptates magnam, reiciendis pariatur culpa tempore quibusdam quidem, saepe eius.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit explicabo assumenda eligendi ex exercitationem harum deleniti quaerat beatae ducimus dolor voluptates magnam, reiciendis pariatur culpa tempore quibusdam quidem, saepe eius.</p>

</section>
<!--Section: About-->

Class .text-center center the content horizontally inside the parent div.

"Lorem ipsum..." is just a dummy text.


4. Section "Best Features"

Now go to the CARDS section in MDB documentation and grab the code of the Card with waves effect. Then paste it into the each column (.col-md-3) of the .row inside the "best features" section.

We'll make a few small modification of the card:

- Remove the buttons, because we don't need them

- Add a class .text-center to each div .card-block to center the content

- Add a divider <hr> below each .card-title heading.


After all your section Best Features should look like that:


<!--Section: Best features-->
<section id="best-features">

    <div class="row">

        <!--First columnn-->
        <div class="col-md-3">
            <!--Card-->
            <div class="card">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/regular/city/img%20(2).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <hr>
                    <!--Text-->
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto dolores dicta cum quo velit.</p>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->
        </div>
        <!--First columnn-->

        <!--Second columnn-->
        <div class="col-md-3">
            <!--Card-->
            <div class="card">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/regular/city/img%20(3).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <hr>
                    <!--Text-->
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto dolores dicta cum quo velit.</p>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->
        </div>
        <!--Second columnn-->

        <!--Third columnn-->
        <div class="col-md-3">
            <!--Card-->
            <div class="card">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/regular/city/img%20(4).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <hr>
                    <!--Text-->
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto dolores dicta cum quo velit.</p>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->
        </div>
        <!--Third columnn-->

        <!--Fourth columnn-->
        <div class="col-md-3">
            <!--Card-->
            <div class="card">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/images/regular/city/img%20(8).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <hr>
                    <!--Text-->
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga animi architecto dolores dicta cum quo velit.</p>
                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->
        </div>
        <!--Fourth columnn-->
    </div>

</section>
<!--/Section: Best features-->

Small tip: add a class .hoverable to the card's div. That provides a nice hover effect. Move your cursor over the card to watch the effect.


<!--Card-->
<div class="card hoverable">

You can add "hoverable" class to any HTML element to achieve same hover effect as we used for card.


Save the file and refresh your browser.

Our website looks better with every minute. We still have a lot of things to do but we'll take care of it in the next lesson.


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 10

  • User avatar

    Kamil Paciepnik

    Hi Sribalaji, thanks for reporting. We'll fix it as soon as possible.

  • User avatar

    Sribalaji

    In card portion please add some margin-bottom or create any margin-bottom class for mobile device because of no gap between each card it's not looking good.

  • User avatar

    Michal Szymanski

    Too many classes can make your code difficult to read and maintain. However it's always up to you if you prefer use CSS or HTML class.

  • User avatar

    Juan

    Why don't you make use of class "white-text" in "" instead using css directly?

  • User avatar

    James

    Still making good progress. Your content is awesome and it is helping many of us make great designs.

  • User avatar

    Michal Szymanski

    "View" class is a wrapper which gives elements inside needed properties. It doesn't refer only to full-screen construction. You can learn more about masks and related with them "view" class here: http://mdbootstrap.com/css/masks/

  • User avatar

    renegade

    You've added class="view" to the cards which makes them take on the properties of the full screen item. Took me a little while to work out what was going on. Removed the view class and all is well.

  • User avatar

    rkopylowski

    Nice Nice Nice work Michal, I'm very delighted when i see that Polish people create fantastic work like that. Greetings from Italy, by Polish guy Rafal Kopylowski

  • User avatar

    Michal Szymanski

    Read a masks documentation for deeper understanding: http://mdbootstrap.com/css/masks/

  • Konstantante Kholod

    Try to make a pattern, but it class doesn't work...

Leave a reply

Anonymous User

Bootstrap tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free