Author: Michal Szymanski
Free live lesson
Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.
JOIN NOWStep 1 - contact section
Go to the Contact Sections
Docs
and copy the code for Contact v.2.
Next, place it inside the <!--Section: contact--> element,
below the heading.
Note: Don't copy the <section> tags because you already did that in the previous lesson.
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="fas fa-map-marker-alt fa-2x purple-text"></i>
<p>San Francisco, CA 94126, USA</p>
</li>
<li>
<i class="fas fa-phone fa-2x mt-4 purple-text"></i>
<p>+ 01 234 567 89</p>
</li>
<li>
<i class="fas 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 the .my-5 class with the .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 ensure color consistency we changed the color of the button by changing the .btn-primary
class to the .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 the .special-color-dark class from the <footer>
element, because we don't need it now.
<!-- 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="fab fa-facebook-f"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fab fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1">
<i class="fab fa-google-plus-g"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fab fa-linkedin-in"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-dribbble mx-1">
<i class="fab 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 the .top-nav-collapse
element in the style.cssfile...
.top-nav-collapse {
background-color: #563e91 !important;
}
...and then add .page-footer as shown. Remember to place a comma between elements!
.top-nav-collapse, .page-footer {
background-color: #563e91 !important;
}
Previous lesson Live preview Next lesson
Spread the word:
