Engadget footer

By Kevin Neal

F6
#
footer
How do I use This?

A Responsive footer with sitemap links, newsletter signup, social links and company details.

HTML
<div id="engadget-footer-sitemap-container">
  <footer id="engadget-footer-sitemap">
    <div class="links">
      <div class="link-column">
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
        </ul>
      </div>
      <div class="link-column">
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
        </ul>
      </div>
       <div class="link-column">
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
        </ul>
      </div>
      <div class="link-column">
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
        </ul>
      </div>
    </div>
  </footer>
</div>
<div id="engadget-footer-social-container">
    <footer id="engadget-footer-social">
        <div class="footer-left">
            <div class="newsletter">
                <h6>Sign up for our newsletter</h6>
                <div class="input-group">

                    <input class="input-group-field" type="email" placeholder="Email address">
                    <div class="input-group-button">
                        <input type="submit" class="button" value="Submit">
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-right">
            <h6>Follow us</h6>
            <i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
            <i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i>
            <i class="fa fa-google-plus-square fa-3x" aria-hidden="true"></i>
            <i class="fa fa-linkedin-square fa-3x" aria-hidden="true"></i>
        </div>
    </footer>
</div>
<div id="engadget-footer-contact-details-container">
    <footer id="engadget-footer-contact-details">
        <div class="footer-left">
            <div class="contact-details">
                <ul>
                    <li><img class="thumbnail" src="https://placehold.it/80"></li>
                    <li><i class="fa fa-phone fa-lg" aria-hidden="true"></i> 01234 567890</li>
                    <li><a data-toggle="animatedModal10"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact us</a></li>
                    <li><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i> Street, City, County, Country</li>
                </ul>
            </div>
        </div>
        <div class="footer-right">
            <ul class="menu align-right">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
            </ul>
        </div>
    </footer>
</div>

 #engadget-footer-sitemap-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  margin-top: rem-calc(0);
  background-color: $black;
  
    #engadget-footer-sitemap { 
      @include grid-row();
      color:$light-gray;
      padding: rem-calc(60) 0;
      a {
        color:$light-gray !important;
        }
	  .links {
  	  @include breakpoint(small) {
        @include grid-layout(2, '.link-column', $grid-column-gutter);
        }
      @include breakpoint(large) {
        @include grid-layout(4, '.link-column', $grid-column-gutter);
        }

      .link-column:not(:last-child) {
      border-right:1px solid $light-gray
      }
	  }	  
  }
}
#engadget-footer-social-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  margin-top: rem-calc(0);
  background-color: $dark-gray;
  
  #engadget-footer-social {
    @include grid-row();
	  color:$light-gray;
	  padding: rem-calc(60) 0;
	  a {
  	  color:$light-gray !important;
  	  }
    .footer-left {
		  @include breakpoint(small) {
		  	@include grid-column(12);
		  }
      @include breakpoint(medium) { 
        @include grid-column(6);
		  }
		  @include breakpoint(large) { 
        @include grid-column(5);
		  }
      .input-group-field {
  	  	background: $white
      }
    }

  	.footer-right {
    	text-align: right;
      @include breakpoint(small) {
        @include grid-column(12); 
      }
      @include breakpoint(medium) {
        @include grid-column(6);
      }
    }
    .fa {
      padding: 0 0 0 0.6rem;
      }
    h2 {
      color: $white;
      }
    p {
      font-size: 0.8rem;
      margin-bottom: 0;
    }
  }
}

#engadget-footer-contact-details-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  margin-top: rem-calc(0);
  background-color: $white;
  
  #engadget-footer-contact-details { 
    @include grid-row();
	  color:$dark-gray;
	  padding: rem-calc(20) 0;
	  a {
  	  color:$dark-gray !important;
  	  }
	  
	  .footer-left {
		@include breakpoint(small) {
		@include grid-column(12); 
		li {
  		display: block;
  		}
		text-align: center;
		}
		@include breakpoint(medium) {
		@include grid-column(6); 
		text-align: left;
		}
		 @include breakpoint(large) { 
		 @include grid-column(8);
		 ul {
  		 margin-bottom: 0;
  		 }
		li {
  		display: inline-block
  		}	 
		}
		font-size: 0.9rem;
		.fa {
  		padding: 0 0.4rem;
  		}
	}
	.footer-right {
		@include breakpoint(small) {
		@include hide-for-only(small);
		}
		@include breakpoint(medium) {
		@include grid-column(6); 
		}
		 @include breakpoint(large) {
		 @include grid-column(4);
		 text-align: right;
		 ul {padding-top: 1.6rem;}
		
		 
		}
		font-size: 0.9rem;
		.fa {padding: 0 0.4rem;}
    }
  }
}


#engadget-footer-sitemap-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  margin-top: 0;
  background-color: #0a0a0a;
}

#engadget-footer-sitemap-container #engadget-footer-sitemap {
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto;
  color: #e6e6e6;
  padding: 3.75rem 0;
}

#engadget-footer-sitemap-container #engadget-footer-sitemap::before, #engadget-footer-sitemap-container #engadget-footer-sitemap::after {
  display: table;
  content: ' ';
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

#engadget-footer-sitemap-container #engadget-footer-sitemap::after {
  clear: both;
}

#engadget-footer-sitemap-container #engadget-footer-sitemap a {
  color: #e6e6e6 !important;
}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column {
  float: left;
  width: 50%;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:nth-of-type(1n) {
  clear: none;
}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:nth-of-type(2n+1) {
  clear: both;
}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:last-child {
  float: left;
}

@media print, screen and (min-width: 64em) {
  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column {
    float: left;
    width: 25%;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }
}

@media print, screen and (min-width: 64em) and (min-width: 40em) {
  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 64em) {
  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:nth-of-type(1n) {
    clear: none;
  }
  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:nth-of-type(4n+1) {
    clear: both;
  }
  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:last-child {
    float: left;
  }
}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links .link-column:not(:last-child) {
  border-right: 1px solid #e6e6e6;
}

#engadget-footer-social-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  margin-top: 0;
  background-color: #8a8a8a;
}

#engadget-footer-social-container #engadget-footer-social {
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto;
  color: #e6e6e6;
  padding: 3.75rem 0;
}

#engadget-footer-social-container #engadget-footer-social::before, #engadget-footer-social-container #engadget-footer-social::after {
  display: table;
  content: ' ';
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

#engadget-footer-social-container #engadget-footer-social::after {
  clear: both;
}

#engadget-footer-social-container #engadget-footer-social a {
  color: #e6e6e6 !important;
}

#engadget-footer-social-container #engadget-footer-social .footer-left {
  width: 100%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-left {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

#engadget-footer-social-container #engadget-footer-social .footer-left:last-child:not(:first-child) {
  float: right;
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-left {
    width: 50%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }
}

@media print, screen and (min-width: 40em) and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-left {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-left:last-child:not(:first-child) {
    float: right;
  }
}

@media print, screen and (min-width: 64em) {
  #engadget-footer-social-container #engadget-footer-social .footer-left {
    width: 41.66667%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }
}

@media print, screen and (min-width: 64em) and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-left {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 64em) {
  #engadget-footer-social-container #engadget-footer-social .footer-left:last-child:not(:first-child) {
    float: right;
  }
}

#engadget-footer-social-container #engadget-footer-social .footer-left .input-group-field {
  background: #fefefe;
}

#engadget-footer-social-container #engadget-footer-social .footer-right {
  text-align: right;
  width: 100%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-right {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

#engadget-footer-social-container #engadget-footer-social .footer-right:last-child:not(:first-child) {
  float: right;
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-right {
    width: 50%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }
}

@media print, screen and (min-width: 40em) and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-right {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-social-container #engadget-footer-social .footer-right:last-child:not(:first-child) {
    float: right;
  }
}

#engadget-footer-social-container #engadget-footer-social .fa {
  padding: 0 0 0 0.6rem;
}

#engadget-footer-social-container #engadget-footer-social h2 {
  color: #fefefe;
}

#engadget-footer-social-container #engadget-footer-social p {
  font-size: 0.8rem;
  margin-bottom: 0;
}

#engadget-footer-contact-details-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  margin-top: 0;
  background-color: #fefefe;
}

#engadget-footer-contact-details-container #engadget-footer-contact-details {
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto;
  color: #8a8a8a;
  padding: 1.25rem 0;
}

#engadget-footer-contact-details-container #engadget-footer-contact-details::before, #engadget-footer-contact-details-container #engadget-footer-contact-details::after {
  display: table;
  content: ' ';
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

#engadget-footer-contact-details-container #engadget-footer-contact-details::after {
  clear: both;
}

#engadget-footer-contact-details-container #engadget-footer-contact-details a {
  color: #8a8a8a !important;
}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {
  width: 100%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  text-align: center;
  font-size: 0.9rem;
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left:last-child:not(:first-child) {
  float: right;
}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left li {
  display: block;
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {
    width: 50%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
    text-align: left;
  }
}

@media print, screen and (min-width: 40em) and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left:last-child:not(:first-child) {
    float: right;
  }
}

@media print, screen and (min-width: 64em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {
    width: 66.66667%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }
}

@media print, screen and (min-width: 64em) and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 64em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left:last-child:not(:first-child) {
    float: right;
  }
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left ul {
    margin-bottom: 0;
  }
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left li {
    display: inline-block;
  }
}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left .fa {
  padding: 0 0.4rem;
}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {
  font-size: 0.9rem;
}

@media screen and (max-width: 39.9375em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {
    width: 50%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }
}

@media print, screen and (min-width: 40em) and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right:last-child:not(:first-child) {
    float: right;
  }
}

@media print, screen and (min-width: 64em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {
    width: 33.33333%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
    text-align: right;
  }
}

@media print, screen and (min-width: 64em) and (min-width: 40em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 64em) {
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right:last-child:not(:first-child) {
    float: right;
  }
  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right ul {
    padding-top: 1.6rem;
  }
}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right .fa {
  padding: 0 0.4rem;
}
JS

Similar Building Blocks

containers

Article Card Hover

F6
by Laurel Beyers
containers

Product Details

F6
by Kevin
containers

Dashboard Number Card

F6
by Kevin Ball