Sign in


Sign up


Corporate website – lesson 2

by Michal Szymanski,

In the first row, we are using 2 columns. One of them is a perfect place for an outstanding image that will be an eye-catcher for our visitors. The second column will be useful for heading, short description and call to action button.

Step 1

In the first column of the first row place an image. You can use any image you want, by providing a correct URL.


<div class="col-md-7">

    <!--Featured image -->
    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid">

</div>
                                    

Pay attention to the special class "img-fluid". It makes our image responsive, which means that it will always adjust to the screen size and it parents width. Thanks to that our visitors can enjoy watching it both on mobile and desktop.

Step 2

We can easily enhance our image by adding a subtle shadow, hover effect and waves effect. To achieve that we need to place the image within a special wrapper.

Replace the code of our image with the code below.


<!--Featured image -->
<div class="view overlay hm-white-light z-depth-1-half">
    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid " alt="">
    <div class="mask"></div>
</div>
                                    

Save the file and refresh your browser. Now you can enjoy all the effects.

Step 3

As we said before, in the second column we'll place heading, short description and call to action. That will help our visitor to quickly understand what our website is about (heading and description) and what action we expect from them (call to action button).


<!--Grid column-->
<div class="col-md-5">
    
    <h2>Some awesome heading</h2>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam dolorem
        voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis
        natus quaerat!</p>
    <a href="https://mdbootstrap.com/" class="btn btn-primary">Get it now!</a>

</div>
<!--Grid column-->
                                    

If you want to play with it, you can change a call to action button. MDB provides you a huge variety of buttons.

Go to BUTTONS DOCUMENTATION section in our documentation and use the element you like the most.

Save the file and open it in the browser.

Thanks to MDB our project is growing fast, so let's keep going!

Step 4

In the second row, we are going to add some detailed information about our website. Our cards will do the work.

Cards are great to present content to the users. They are clear, easy to use and elegant. Facebook uses cards, Google uses cards, LinkedIn uses cards. You also should do that, especially that MDB provides you really outstanding cards.

Go to the CARDS DOCUMENTATION and grab the Card with Waves Effect. Then paste it to every column of the second row.

After all your second row should look like this:


<!--Grid row-->
<div class="row">

    <!--Grid column-->
    <div class="col-lg-4 col-md-12">

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

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg" class="img-fluid" alt="">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
            </div>

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

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6">

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

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg" class="img-fluid" alt="">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
            </div>

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

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6">

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

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid" alt="">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Button</a>
            </div>

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

    </div>
    <!--Grid column-->

</div>
<!--Grid row-->
                                      

Save the file and open it in the browser. Our layout still needs a few improvements, but we'll take care of it later.

Step 5

Now it's time for the footer.

Go to the FOOTER DOCUMENTATION and grab the code of Basic Footer. Then paste it to our project:


<!--Footer-->
<footer class="page-footer blue center-on-small-only">

    <!--Footer Links-->
    <div class="container-fluid">
        <div class="row">

            <!--First column-->
            <div class="col-md-6">
                <h5 class="title">Footer Content</h5>
                <p>Here you can use rows and columns here to organize your footer content.</p>
            </div>
            <!--/.First column-->

            <!--Second column-->
            <div class="col-md-6">
                <h5 class="title">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Second column-->
        </div>
    </div>
    <!--/.Footer Links-->

    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid">
            © 2015 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>

        </div>
    </div>
    <!--/.Copyright-->

</footer>
<!--/.Footer-->
                                      

You can see that our footer already contains a color class "blue", which makes it blue. You can easily change it by using one of over 300 defined color classes provided by MDB

In the next lesson, you will learn how to manipulate MDB colors.

You can also notice class .center-on-small-only which center footers elements on small screens.

Alright, the main layout of our website is done, but it's still a lot of details to improve.

I.e. navbar and footer colors are slightly different, and their links are stretched full-width, which doesn't look good. Also content in our rows of <main> section are too close to each other. And there are few more things which should be fixed.

That website definitely requires more work to make it looks professional. 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?

Facebook Twitter Google +

About author


User avatar

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst.

Comments 3

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more