Sign in


Sign up


Landing page – lesson 1

by Michal Szymanski,

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:

  • Creating Full Page Intro

  • Using masks and shadows

  • Creating Contact Section

  • Using Google Maps

  • Using animations

  • Using font awesome

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.

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


<!--Main Navigation-->
<header>
    
    <!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark indigo fixed-top">
        <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="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

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

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

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

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

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

Step 3

We have to make one significant change in the Navbar 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 and before closing header tag:


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



    </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.

We've also set an id="intro" to the .view element. We'll need it in a second.

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,
#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 that way we can cover with the image the entire screen.

We set to the #intro 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 let the magic happen. When you open 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)


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 6

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us