Let us know what you think about the new Building Blocks

Contact Section Footer

By Rafi

F6
#
How do I use This?

A responsive contact section with map and forms.

HTML
<section class="contact-us-section">
  <div class="row medium-unstack">
    <div class="columns contact-us-section-left">
      <h1 class="contact-us-header">Get In Touch</h1>
      <div class="responsive-embed">
        <img src="http://maps.googleapis.com/maps/api/staticmap?center=campbell&zoom=13&scale=false&size=600x300&maptype=roadmap&sensor=false&format=png&visual_refresh=true" alt="Google Map of campbell" alt="" />
      </div>

      <ul class="contact-us-list">
        <li class="address">100 W Rincon Ave, Campbell CA 95008</li>
        <li class="email"><a href="mailto:">hello@yeticave.com</a></li>
        <li class="phone">
          1 (408) 445 9978
        </li>
      </ul>
    </div>
    <div class="columns contact-us-section-right">
      <h1 class="contact-us-header">Mail Us</h1>
      <form class="contact-us-form">
        <input type="text" placeholder="Full name">
        <input type="email" placeholder="Email">
        <textarea name="message" id="" rows="12" placeholder="Type your message here"></textarea>
        <div class="contact-us-form-actions">
          <input type="submit" class="button" value="Send it" />
          <div>
            <label for="FileUpload" class="button contact-us-file-button">Attach Files</label>
            <input type="file" id="FileUpload" class="show-for-sr">
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

$contact-us-section-padding: 2rem;
$contact-us-section-bg: $body-background;

.contact-us-section {
  padding: $contact-us-section-padding;
  background: $contact-us-section-bg;

  .contact-us-section-left {
    padding-right: $contact-us-section-padding;
    border-bottom: 2px solid $light-gray;
    padding-bottom: $contact-us-section-padding;
    margin-bottom: $contact-us-section-padding;

    @include breakpoint(medium) {
      border-right: 1px solid $light-gray;
      border-bottom: 0;
      padding-bottom: 0;
      margin-bottom: 0;
    }
  }

  .contact-us-section-right {
    padding-left: $contact-us-section-padding;

    @include breakpoint(medium) {
      border-left: 1px solid $light-gray;
    }
  }

  .contact-us-header {
    margin-bottom: $contact-us-section-padding;

    @media screen and #{breakpoint(medium)} and #{breakpoint(large down)} {
      font-size: 32px;
    }
  }

  .responsive-embed {
    margin-bottom: 0;
    padding-bottom: 55%;
  }
}

.contact-us-form {
  input[type=text],
  input[type=email],
  textarea {
    margin-bottom: 1.5rem;
  }
}

.contact-us-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;

  input[type=submit] {
    border-radius: 5000px;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .contact-us-file-button {
    background: transparent;
    color: $dark-gray;
  }
}

.contact-us-list {
  list-style-type: none;
  margin: 0;

  li {
    a {
      color: $black;
    }
  }

  li::before {
    margin-right: 2rem;
    font-size: 2rem;
    vertical-align: middle;
    color: $dark-gray;
    font-family: 'FontAwesome';
  }

  // generates icons - change fontawesome content codes below to change icons
  .address::before {
    content: '\f041';
    margin-left: 0.4rem;
    margin-right: 2.3rem;
  }

  .email::before {
    content: '\f003';
  }

  .phone::before {
    content: '\f098';
  }
}


.contact-us-section {
  padding: 2rem;
  background: #fefefe;
}

.contact-us-section .contact-us-section-left {
  padding-right: 2rem;
  border-bottom: 2px solid #e6e6e6;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

@media print, screen and (min-width: 40em) {
  .contact-us-section .contact-us-section-left {
    border-right: 1px solid #e6e6e6;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

.contact-us-section .contact-us-section-right {
  padding-left: 2rem;
}

@media print, screen and (min-width: 40em) {
  .contact-us-section .contact-us-section-right {
    border-left: 1px solid #e6e6e6;
  }
}

.contact-us-section .contact-us-header {
  margin-bottom: 2rem;
}

@media screen and (min-width: 40em) and (max-width: 74.9375em) {
  .contact-us-section .contact-us-header {
    font-size: 32px;
  }
}

.contact-us-section .responsive-embed {
  margin-bottom: 0;
  padding-bottom: 55%;
}

.contact-us-form input[type=text],
.contact-us-form input[type=email],
.contact-us-form textarea {
  margin-bottom: 1.5rem;
}

.contact-us-form-actions {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.contact-us-form-actions input[type=submit] {
  border-radius: 5000px;
  padding-left: 2rem;
  padding-right: 2rem;
}

.contact-us-form-actions .contact-us-file-button {
  background: transparent;
  color: #8a8a8a;
}

.contact-us-list {
  list-style-type: none;
  margin: 0;
}

.contact-us-list li a {
  color: #0a0a0a;
}

.contact-us-list li::before {
  margin-right: 2rem;
  font-size: 2rem;
  vertical-align: middle;
  color: #8a8a8a;
  font-family: 'FontAwesome';
}

.contact-us-list .address::before {
  content: '\f041';
  margin-left: 0.4rem;
  margin-right: 2.3rem;
}

.contact-us-list .email::before {
  content: '\f003';
}

.contact-us-list .phone::before {
  content: '\f098';
}

JS