Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Basic structure

Basic structure


Written by Michal Szymanski ,


Final result preview
Live preview

1. Index.html

Open index.html file in your project folder (the folder where you have you unzipped MDB package).


2. Navigation

Let's start by creating navbar and links to the future sections of our Landing Page. Place the following code right below <body> tag


<!-- Navbar -->
<nav class="navbar navbar-toggleable-md navbar-dark scrolling-navbar fixed-top">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <strong>Navbar</strong>
        </a>
        <div class="collapse navbar-collapse" id="navbarNav1">
            <!--Links-->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#best-features">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#examples-of-use">Examples</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#testimonials">Testimonials</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>    
<!--/.Navbar-->

This is a standard HTML code for Fixed Navbar with one additional class .scrolling-navbar. Right now that class does nothing, but we'll need it later.

Because we want Navbar to take a full page width we don't place it in the bootstrap .container (or any other wrapper). Thanks to MDB this Navbar will be working perfectly without any further modifications.

Note: We place a .container inside the Navbar, to center the links.


When you refresh your browser you will see the navbar is transparent Right now it doesn't look very nice, but we will need its transparency later. That's why we leave it like that.

We have already set ID for every link to a corresponding sections (unordered list "nav navbar-nav" with a #hash symbols). These sections don't exist yet, but we'll create them soon.

We have placed the links within the container because we don't want them to be stretched full width of the page. It looks better when it's centered.


3. Basic construction

It's time to create a skeleton of our website. Place following code below our navbar :


<!--Mask-->
<div class="view hm-black-strong">
    <div class="full-bg-img flex-center">
        <div class="container">
            <div class="row" id="home">

                <!--First column-->
                <div class="col-lg-6">

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

                <!--Second column-->
                <div class="col-lg-6">

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

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

    <div class="divider-new">
        <h2 class="h2-responsive wow fadeInDown">Best Features</h2>
    </div>

    <!--Section: Best features-->
    <section id="best-features">
        <div class="row">
            <!--First columnn-->
            <div class="col-md-4">

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

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

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

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

            </div>
            <!--Third columnn-->
        </div>
    </section>
    <!--/Section: Best features-->

    <div class="divider-new">
        <h2 class="h2-responsive wow fadeInDown">Additional Features</h2>
    </div>

    <!--Section: Additional features-->
    <section id="additional-features">
        <div class="row">
            <!--First columnn-->
            <div class="col-md-6">

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

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

            </div>
            <!--/Second column-->
        </div>
    </section>
    <!--/Section: Additional features-->

    <div class="divider-new">
        <h2 class="h2-responsive wow fadeInDown">Examples of use</h2>
    </div>

    <!--Section: Examples of use-->
    <section id="examples-of-use">
        <div class="row">
            <!--First column-->
            <div class="col-md-5 wow fadeIn">

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

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

            </div>
            <!--/Second column-->
        </div>
    </section>
    <!--/Section: Examples of use-->

    <div class="divider-new">
        <h2 class="h2-responsive wow fadeInDown">Testimonials</h2>
    </div>

    <!--Section: Testimonials-->
    <section id="testimonials">
        <div class="row">

        </div>
    </section>
    <!--/Section: Testimonials-->

    <div class="divider-new">
        <h2 class="h2-responsive wow fadeInDown">Pricing</h2>
    </div>

    <!--Section: Pricing-->
    <section id="pricing">
        <div class="row">

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



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

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



            </div>
            <!--/.Second column-->

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



            </div>
            <!--/.Third column-->

        </div>
    </section>
    <!--/Section: Pricing-->

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

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


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

Now we've got all necessary sections which contain IDs corresponding with our navbar links.

At the beginning we've created a wrapper for our full page background Intro covered with a Mask.

We have also used a Section Dividers which will make our content more readable for users. Each divider contains a title of given section.

Inside each Section, we've created a Grid Layout, which you should already know very well from the previous tutorials.

We will learn more of these sections in the next lesson. Right now we've finished our work.


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 7

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.