Landing page tutorial - how to build a stunning, responsive website with Bootstrap 4

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

You will learn a few awesome techniques:

Creating a Full Page Intro
Using masks and shadows
Creating a Contact Section
Using Google Maps
Using animations
Using the Font Awesome toolkit

Step 1

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

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

HTML



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

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

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

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

<!--Footer-->
<footer>

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

Step 2

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

Remember to place .container inside your navbar in order to center the links.

HTML



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">

  <div class="container">

    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
      aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="basicExampleNav">

      <!-- Links -->
      <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>

        <!-- Dropdown -->
        <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>
      <!-- Links -->

      <form class="form-inline">
        <div class="md-form my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </div>
    <!-- Collapsible content -->

  </div>

</nav>
<!--/.Navbar-->

Step 3

We have to make one significant change to the Navbar code.

Add the class .fixed-top to the Navbar.

HTML



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color fixed-top">

As you would expect, that makes our navbar stick 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 this code below the navbar and before the closing </header> tag:

HTML



<!--Mask-->
<div id="intro" class="view">

  <div class="mask">

  </div>

</div>
<!--/.Mask-->

Let me explain how the code above works.

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

.mask is the 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.

We've also set id="intro" for the .view element. We'll need that in a second.

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

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



html,
body,
header,
#intro {
    height: 100%;
}

#intro {
    background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20%283%29.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 parent elements of our background image because only in that way we can cover the entire screen with the image

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

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

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

Save the file andlet the magic happen. When you open your browser you will see a beautiful image covering your intro. There are a few things which we could improve, but we'll take care of that in the next lesson.

In order to 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");

A final small tip:

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

Your image should be big enough to keep the quality but as small as possible so to not increase the page loading time. That's why we recommend you prepare your picture as follows:

1. Resolution: 1920px / 1280px

2. JPEG file format

3. The file is compressed (you can use the COMPRES JPG tool)

Previous lesson Live preview Next lesson