In this tutorial, you will create a Landing Page. It's very popular way of building so-called single page projects.

You will learn a few awesome techniques:

Final result preview

Step 1

Similarly to the previous tutorial, at the beginning, we'll create a basic structure of our project.

Open index.html file in your project folder (the folder where you have unzipped MDB package) and paste the following code below <body> tag:.


<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>

</main>
<!--Main layout-->

<!--Footer-->
<footer>

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

Step 2

Now we'll create a navigation. Go to NAVBARS DOCUMENTATION and copy the code of Basic Navbar. Then paste it between opening <header>s tags.


<!--Main Navigation-->
<header>

    <nav class="navbar navbar-expand-lg navbar-dark indigo">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 
            </a>
                    <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            </form>
        </div>
    </nav>

</header>
<!--Main Navigation-->

Step 3

We have to make one significant change in the Navbar's code.

Add a class .fixed-top to the Navbar.


<nav class="navbar navbar-expand-lg navbar-dark indigo fixed-top">

As you can expect, that makes our navbar stuck to the top of the screen. It will be visible all the time, even when you scroll down your page.

Step 4

Now it's time for something spectacular. Let's create a full page background intro for our landing page.

Paste that code below the Navbar:


<!--Mask-->
<div class="view">
    <div class="full-bg-img flex-center">
        <ul>
            <li>
                <h1 class="h1-responsive">New York Advertising Agency</h1>
            </li>
            <li>
                <p>Digital advertising agency focused on today's consumers</p>
            </li>
            <li>
                <a href="" class="btn btn-primary btn-lg">Sign up!</a>
                <a href="" class="btn btn-default btn-lg">Learn more</a>
            </li>
        </ul>
    </div>
</div>
<!--/.Mask-->

Let me explain how the code above works.

.view is a wrapper for our background image, which let us add a mask to it. Thanks to mask we can make our image darker or lighter, which helps us make your content more visible.

.full-bg-img is an element with absolute position, which makes it cover our background image. And because it covers the image, we can use it as a mask and manipulate the colors.

.flex-center aligns our content exactly in the middle of the screen.

Content within ul is our "Call to action" element, which let users know, what action we expect from them. You can place there whatever you want.

.h1-resposnive makes our heading look good on all kind devices because it adjusts the font size to the screen size.

When you save the file and refresh your browser, you will notice that nothing has changed. That because we need some CSS code to make it working.

Firstly, we'll use a separate CSS file for our custom styles. Open a file style.css (in "CSS" folder) and paste that code:


html,
body,
header,
.view {
    height: 100%;
}

.view {
    background: url("http://mdbootstrap.com/img/Photos/Horizontal/Work/full page/img%20(2).jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

We set height: 100% to all the parents element of our background image, because only that way we can cover with the image the entire screen.

We set to the .view a proper URL path for the image. You can use whatever image you want.

Then, we give a value cover to the background-size property. That makes the image cover all the available space on the screen.

-webkit-, -moz- and -o- make sure our code works properly with all the browsers.

Save the file and open it in your browser. You will see a beautiful image covering your intro. There are a few things which we should improve, but we'll take care of it in the next lesson.

In order change the background image you just have to change the URL path. You can provide a link to the image on your server or path to the source file within your project's files, for example: url("/img/imageName.png");


Small tip at the end:

You can use whatever image you want, but there are a few rules which you should follow.

Your image should be big enough to keep the quality and as lightweight as possible to don't increase a page load time. That's why I recommend you prepare your picture as follows:

1. Resolution: 1920px / 1280px

2. JPG file format

3. Compress the file (you can use COMPRES JPG tool)