Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Pricing

Pricing and contact section


Written by Michal Szymanski ,

MDB Pro required

This lesson requires MDB Pro package. If you use MDB Free version some elements might not work as expected.

Get MDB PRO

1. Pricing Plans

That will be terribly easy. The only thing you need to do is go to the E-COMMERCE section in MDB documentation, copy the code of the Pricing Cards and paste it into the #sec-pricing section:


<!--Section: Pricing v.1-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Our pricing plans v.1</h1>
    <!--Section description-->
    <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

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

        <!--First column-->
        <div class="col-lg-4 col-md-6 m-b-r">

            <!--Pricing card-->
            <div class="card pricing-card">
                <!--Price-->
                <div class="price header blue">
                    <h1>10</h1>
                    <div class="version">
                        <h5>Basic</h5>
                    </div>
                </div>
                <!--/.Price-->

                <!--Features-->
                <div class="card-block striped">
                    <ul>
                        <li>
                            <p><i class="fa fa-check"></i> 20 GB Of Storage</p>
                        </li>
                        <li>
                            <p><i class="fa fa-check"></i> 2 Email Accounts</p>
                        </li>
                        <li>
                            <p><i class="fa fa-times"></i> 24h Tech Support</p>
                        </li>
                        <li>
                            <p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
                        </li>
                        <li>
                            <p><i class="fa fa-times"></i> User Management </p>
                        </li>
                    </ul>

                    <button class="btn btn-primary">Buy now</button>
                </div>
                <!--/.Features-->

            </div>
            <!--/.Pricing card-->

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

        <!--Second column-->
        <div class="col-lg-4 col-md-6 m-b-r">

            <!--Pricing card-->
            <div class="card pricing-card">
                <!--Price-->
                <div class="price header indigo">
                    <h1>20</h1>
                    <div class="version">
                        <h5>Pro</h5>
                    </div>
                </div>
                <!--/.Price-->

                <!--Features-->
                <div class="card-block striped">
                    <ul>
                        <li>
                            <p><i class="fa fa-check"></i> 20 GB Of Storage</p>
                        </li>
                        <li>
                            <p><i class="fa fa-check"></i> 4 Email Accounts</p>
                        </li>
                        <li>
                            <p><i class="fa fa-check"></i> 24h Tech Support</p>
                        </li>
                        <li>
                            <p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
                        </li>
                        <li>
                            <p><i class="fa fa-times"></i> User Management </p>
                        </li>
                    </ul>

                    <button class="btn btn-primary">Buy now</button>
                </div>
                <!--/.Features-->

            </div>
            <!--/.Pricing card-->

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

        <!--Third column-->
        <div class="col-lg-4 col-md-6 m-b-r">
            <!--Pricing card-->
            <div class="card pricing-card">
                <!--Price-->
                <div class="price header deep-purple">
                    <h1>30</h1>
                    <div class="version">
                        <h5>Enterprise</h5>
                    </div>
                </div>
                <!--/.Price-->

                <!--Features-->
                <div class="card-block striped">
                    <ul>
                        <li>
                            <p><i class="fa fa-check"></i> 30 GB Of Storage</p>
                        </li>
                        <li>
                            <p><i class="fa fa-check"></i> 5 Email Accounts</p>
                        </li>
                        <li>
                            <p><i class="fa fa-check"></i> 24h Tech Support</p>
                        </li>
                        <li>
                            <p><i class="fa fa-check"></i> 300 GB Bandwidth</p>
                        </li>
                        <li>
                            <p><i class="fa fa-check"></i> User Management </p>
                        </li>
                    </ul>

                    <button class="btn btn-primary">Buy now</button>
                </div>
                <!--/.Features-->

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

    </div>
    <!--/First row-->

</section>
<!--/Section: Pricing v.1-->

Fill it up with the whatever content you want. Change the features, prices and colors of the cards. It's up to you.


2. Contact section

If you've read previous tutorials you know exactly how to prepare this section and use the Google Maps.

If you haven't - take a look at the lesson Contact section and Google Maps

This is how finally your Contact Section should look like:


<!--Section: Contact-->
<section id="contact">
    <div class="row">
        <!--First column-->
        <div class="col-md-8">
            <div id="map-container" class="z-depth-1 wow fadeInUp" style="height: 300px"></div>
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-4">
            <ul class="text-center">
                <li class="wow fadeInUp" data-wow-delay="0.2s"><a class="btn-floating btn-small mdb-color"><i class="fa fa-map-marker"></i></a>
                    <p>New York, NY 10012, USA</p>
                </li>

                <li class="wow fadeInUp" data-wow-delay="0.3s"><a class="btn-floating btn-small mdb-color" data-toggle="modal" data-target="#contact-form"><i class="fa fa-phone"></i></a>
                    <p>+ 01 234 567 89</p>
                </li>

                <li class="wow fadeInUp" data-wow-delay="0.4s"><a class="btn-floating btn-small mdb-color" data-toggle="modal" data-target="#contact-form"><i class="fa fa-envelope"></i></a>
                    <p>contact@mdbootstrap.com</p>
                </li>
            </ul>
        </div>
        <!--/Second column-->
    </div>
</section>
<!--Section: Contact-->

Don't forget to include javascript code in the script section:


<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>

<script>
    function init_map() {

        var var_location = new google.maps.LatLng(40.725118, -73.997699);

        var var_mapoptions = {
            center: var_location,

            zoom: 14
        };

        var var_marker = new google.maps.Marker({
            position: var_location,
            map: var_map,
            title: "New York"
        });

        var var_map = new google.maps.Map(document.getElementById("map-container"),
            var_mapoptions);

        var_marker.setMap(var_map);

    }

    google.maps.event.addDomListener(window, 'load', init_map);
</script>

3. Footer

The last thing we missed in our Landing Page is a Footer with social references.

In the FOOTERS section of MDB documentation, you can find two examples of the footer. Grab the Advanced Footer and paste it into the Footer section

Paste the following code into the Footer section:


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

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

            <!--First column-->
            <div class="col-md-3 offset-md-1">
                <h5 class="title">ABOUT MATERIAL DESIGN</h5>
                <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>

                <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
            </div>
            <!--/.First column-->

            <hr class="hidden-md-up">

            <!--Second column-->
            <div class="col-md-2 offset-md-1">
                <h5 class="title">First column</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-->

            <hr class="hidden-md-up">

            <!--Third column-->
            <div class="col-md-2">
                <h5 class="title">Second column</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>
            <!--/.Third column-->

            <hr class="hidden-md-up">

            <!--Fourth column-->
            <div class="col-md-2">
                <h5 class="title">Third column</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>
            <!--/.Fourth column-->

        </div>
    </div>
    <!--/.Footer Links-->

    <hr>

    <!--Call to action-->
    <div class="call-to-action">
        <h4>Material Design for Bootstrap</h4>
        <ul>
            <li>
                <h5>Get our UI KIT for free</h5></li>
            <li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
            <li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
        </ul>
    </div>
    <!--/.Call to action-->

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

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

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

That's it. Our Footer is ready.


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 3

Leave a reply

Anonymous User

Bootstrap tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free