Contact Section Footer

By Rafi

contact footer links flexbox forms mobile first

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="https://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';
}

Contact Section Footer

By Rafi

Floating Label Form

Animated Expanding Search Form

Form with Icons

Contact Section Footer

By Rafi

Similar Building Blocks

Floating Label Form

Animated Expanding Search Form

Form with Icons