Responsive Blog Footer

By Laurel Beyers

How do I use This?

A responsive footer that has an input form for a mailing list, an "About Me" section, and search tag area.

HTML

<footer class="responsive-blog-footer">
  <div class="row">
    <div class="medium-8 columns small-order-2 medium-order-1 about-container">
      <div class="row">
        <div class="hide-for-small-only medium-4 columns about-section">
          <img src="https://placehold.it/250x250">
        </div>
        <div class="medium-8 columns about-section">
          <h4> About Me</h4>
          <p>paragraph about how amazing and awesome i am paragraph about how amazing and awesome i am paragraph about how amazing and awesome i am</p>
          <a href="">Read More</a>
        </div>
      </div>
    </div>
    <div class="small-12 medium-4 columns small-order-1 medium-order-2 mailing-container">
      <h4 class="mailing-list">Join my mailing list</h4>
      <input type="text" placeholder="Email Address">
      <a class="button expanded subscribe-button" href="#">Subscribe Now</a>
    </div>
  </div>
  <div class="row tag-search">
    <div class="columns">
      <h4>Search by Tag</h4>
      <ul class="menu simple tag-section">
        <li><a href="">word</a></li>
        <li><a href="">word</a></li>
        <li><a href="">word</a></li>
        <li><a href="">word</a></li>
        <li><a href="">word</a></li>
        <li><a href="">word</a></li>
        <li><a href="">word</a></li>
      </ul>
    </div>
  </div>
  <div class="row columns flex-container align-justify">
     <p> all rights reserved</p>
    <div class="up-arrow">
      <a href="#top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a>
    </div>
  </div>
</footer>

$highlight: $primary-color;

.responsive-blog-footer {
  background: darken($dark-gray, 25%);
  padding: 3rem 3rem;
  color: white;

  h4 {
    @media screen and (max-width: 39.9375em) {
      font-size: 1.5rem;
    }
  }

  p {
    color: $dark-gray;
  }

  .mailing-list {
    margin-bottom: 1.5rem;
  }
  .mailing-container {
    margin-bottom: 2rem;
  }

  .about-section, .tag-section {
    margin-bottom: 2rem;

    a {
      color: $highlight;
    }
  }

  .subscribe-button {
    background-color:$highlight;

    &:hover {
     background-color: darken($highlight, 5%);
     transition: color 0.3s ease-in;
    }
  }

  .fa-chevron-circle-up {
    font-size: 3rem;
    color: $dark-gray;

     &:hover {
     color: lighten($dark-gray, 15%);
     transition: color 0.3s ease-in;
    }
  }
}

.responsive-blog-footer {
  background: #4a4a4a;
  padding: 3rem 3rem;
  color: white;
}

@media screen and (max-width: 39.9375em) {
  .responsive-blog-footer h4 {
    font-size: 1.5rem;
  }
}

.responsive-blog-footer p {
  color: #8a8a8a;
}

.responsive-blog-footer .mailing-list {
  margin-bottom: 1.5rem;
}

.responsive-blog-footer .mailing-container {
  margin-bottom: 2rem;
}

.responsive-blog-footer .about-section, .responsive-blog-footer .tag-section {
  margin-bottom: 2rem;
}

.responsive-blog-footer .about-section a, .responsive-blog-footer .tag-section a {
  color: #1779ba;
}

.responsive-blog-footer .subscribe-button {
  background-color: #1779ba;
}

.responsive-blog-footer .subscribe-button:hover {
  background-color: #146aa3;
  transition: color 0.3s ease-in;
}

.responsive-blog-footer .fa-chevron-circle-up {
  font-size: 3rem;
  color: #8a8a8a;
}

.responsive-blog-footer .fa-chevron-circle-up:hover {
  color: #b0b0b0;
  transition: color 0.3s ease-in;
}

Responsive Blog Footer

By Laurel Beyers

Sticky Footer with CSS Only

Blog Post Footer

Vertical Testimonial Block

Responsive Blog Footer

By Laurel Beyers

Similar Building Blocks

Sticky Footer with CSS Only

Blog Post Footer

Vertical Testimonial Block