Contact section and footer


Step 1 - contact section

Go to the Contact Sections Docs and copy the code for Contact v.2.

Next, place it inside <!--Section: contact-->, below the heading.

Note: Don't copy <section> tags because we already did it.

It should look like this:



        <!--Section: contact-->
        <section id="contact" class="py-5" style="background-color: #eee;">

            <div class="container">

                <!-- Section heading -->
                <h2 class="h1-responsive font-weight-bold text-center mb-5">Contact us</h2>
                <!-- Section description -->
                <p class="text-center w-responsive mx-auto mb-5">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 veniam.</p>

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

                    <!-- Grid column -->
                    <div class="col-md-9 mb-md-0 mb-5">

                    <form>

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

                        <!-- Grid column -->
                        <div class="col-md-6">
                            <div class="md-form mb-0">
                            <input type="text" id="contact-name" class="form-control">
                            <label for="contact-name" class="">Your name</label>
                            </div>
                        </div>
                        <!-- Grid column -->

                        <!-- Grid column -->
                        <div class="col-md-6">
                            <div class="md-form mb-0">
                            <input type="text" id="contact-email" class="form-control">
                            <label for="contact-email" class="">Your email</label>
                            </div>
                        </div>
                        <!-- Grid column -->

                        </div>
                        <!-- Grid row -->

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

                        <!-- Grid column -->
                        <div class="col-md-12">
                            <div class="md-form mb-0">
                            <input type="text" id="contact-Subject" class="form-control">
                            <label for="contact-Subject" class="">Subject</label>
                            </div>
                        </div>
                        <!-- Grid column -->

                        </div>
                        <!-- Grid row -->

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

                        <!-- Grid column -->
                        <div class="col-md-12">
                            <div class="md-form">
                            <textarea type="text" id="contact-message" class="form-control md-textarea" rows="3"></textarea>
                            <label for="contact-message">Your message</label>
                            </div>
                        </div>
                        <!-- Grid column -->

                        </div>
                        <!-- Grid row -->

                    </form>

                    <div class="text-center text-md-left">
                        <a class="btn btn-purple btn-md">Send</a>
                    </div>

                    </div>
                    <!-- Grid column -->

                    <!-- Grid column -->
                    <div class="col-md-3 text-center">
                    <ul class="list-unstyled mb-0">
                        <li>
                        <i class="fa fa-map-marker fa-2x purple-text"></i>
                        <p>San Francisco, CA 94126, USA</p>
                        </li>
                        <li>
                        <i class="fa fa-phone fa-2x mt-4 purple-text"></i>
                        <p>+ 01 234 567 89</p>
                        </li>
                        <li>
                        <i class="fa fa-envelope fa-2x mt-4 purple-text"></i>
                        <p class="mb-0">contact@example.com</p>
                        </li>
                    </ul>
                    </div>
                    <!-- Grid column -->

                </div>
                <!-- Grid row -->

            </div>

        </section>
        <!--Section: contact-->

    

Note: In the h2 element we replaced .my-5 class with .mb-5 class to provide more appropriate margins.



<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center mb-5">Contact us</h2>

    

Note 2: To provide a color consistency we changed the color of the button by changing .btn-primary class to .btn-purple class and the color of the icons by changing .blue-text class to purple-text class.

Step 2 - footer

Go to the Footer Docs and copy the code Footer with "Social buttons".

Next, place it in our project. After you do it remove . special-color-dark class from the <footer> element, because we don't need it.



<!-- Footer -->
<footer class="page-footer font-small pt-4">

    <!-- Footer Elements -->
    <div class="container">

      <!-- Social buttons -->
      <ul class="list-unstyled list-inline text-center">
        <li class="list-inline-item">
          <a class="btn-floating btn-fb mx-1">
            <i class="fa fa-facebook"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-tw mx-1">
            <i class="fa fa-twitter"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-gplus mx-1">
            <i class="fa fa-google-plus"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-li mx-1">
            <i class="fa fa-linkedin"> </i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="btn-floating btn-dribbble mx-1">
            <i class="fa fa-dribbble"> </i>
          </a>
        </li>
      </ul>
      <!-- Social buttons -->

    </div>
    <!-- Footer Elements -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->

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

    

Step 3 - CSS adjustments

To provide a proper color to the footer we will modify our CSS code. It will be very simple - just find .top-nav-collapse element in the style.cssfile and add .page-footer to this.



        .top-nav-collapse {
          background-color: #563e91 !important;
        }

    

...and then add .page-footer. Remember to palce , sign between elements!



        .top-nav-collapse, .page-footer {
          background-color: #563e91 !important;
      }

    

Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits