search

12-Contact Style

hashtag
Key Objectives

  • To start to stylize the contact section.

hashtag
Overview

Now that we have the contact form working with formspree.io, we should start to stylize the form. We stylize after because it can be difficult to see where we put our Formspree items amidst any styling and CSS ids & class names. Get the data passing, then style up our UI.

hashtag
Notes/Tips

  • This is another open-ended task, and it gets hard to identify when you are done. We recommend timeboxing your work.

  • We know it's just a contact form, but showing your skills here is just as important as anything else on your site, especially since this might be a tool that a potential client or employer might use.

hashtag
Steps

  1. There is no video for this module. Essentially, we are adding style to our contact form.

  2. Open your teminal window and do git pull. This will make sure that you have the most up-to-date version of our code. If you started this project early on, we might have made updates to this module.

  3. Style your contact form in accordance with the theme that you're seeing in the rest of your app.

  4. Commit the code.

  5. Go on to the next module.

  6. Here's the final code.

    • index.html

      • <head>

        <!-- Bootstrap core CSS Modules-->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link href="node_modules/animate.css/animate.min.css">

      • Header Section

        <h1 class="jumbotron-heading">Paul O'Connor</h1>

      • Contact Section

        <section id="contact" class="block block-bg-grey-dark">
<div class="container wow fadeInUp">
  <div class="row">
      <!--Info -->
      <div class="col-md-3">
          <address>
              <strong>Paul O'Connor</strong>
              <br>
              <i class="fa fa-map-pin"></i> Westfield, IN 46074
              <br>
              <i class="fa fa-phone"></i> 970-631-6367
              <br>
              <i class="fa fa-envelope-o"></i> jamespauloconnor@gmail.com
              <br>
          </address>
      </div>
        <!--Contact Form -->
      <div class="col-md-6">
          <form action="https://formspree.io/poconnor@elevenfifty.org" method="POST">
              <div class="control-group">
              <!--Social Media Links -->
              <div class="col-md-3">
                  <div class="container">
                      <div class="col-md-6-offset col-md-6">
                          <div class="social-links">
                              <ul>
                                  <li>
                                      <a href="#" class="twitter">
                                          <i class="fa fa-twitter"></i>
                                      </a>
                                  </li>
                                  <li>
                                      <a href="#" class="facebook">
                                          <i class="fa fa-facebook"></i>
                                      </a>
                                  </li>
                                  <li>
                                      <a href="#" class="github">
                                          <i class="fa fa-github"></i>
                                      </a>
                                  </li>

                                  <li>
                                      <a href="#" class="google-plus">
                                          <i class="fa fa-google-plus"></i>
                                      </a>
                                  </li>
                                  <li>
                                      <a href="#" class="linkedin">
                                          <i class="fa fa-linkedin"></i>
                                      </a>
                                  </li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>

    • _contact.scss

      /* CSS code for the Contact section. */

#contact {
  margin: 50px;
}

#contact .social-links ul {
  list-style: none;
}

#contact .social-links a {
  font-size: 18px;
  display: inline-block;
  background: $gray;
  color: #fff;
  line-height: 1;
  padding: 12px 0;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#contact .social-links a:hover {
  background: $green;
  color: #fff;
}
Previous11-Contact SetupNext13-Footer Style

Last updated