Footer 2 Foundation

footer links website footer dark footer
1 Download Preview

Footer block for use with websites and landing pages.

Dependencies

  • Foundation 6
  • FontAwesome
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Foundation Blocks - Footer 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <footer class="footer-2">
        <div class="grid-container footer-top">
            <div class="grid-x grid-margin-x">
                <div class="cell large-4 footer-info">
                    <h4 class="footer-heading">19K users are using FWR blocks and making their life easy.</h4>
                    <p>We have carefully crafted the blocks to suit to everyone's need.</p>
                    <div class="footer-social">
                        <button class="button btn-facebook">
                            <span class="fab fa-facebook-f"></span>
                            Follow
                        </button>
                        <button class="button btn-twitter">
                            <span class="fab fa-twitter"></span>
                            Follow @freeweb
                        </button>
                    </div>
                </div>
                <div class="cell large-4 footer-link-wrap">
                    <div class="grid-x grid-margin-x">
                        <div class="cell medium-6 large-6">
                            <h6 class="text-uppercase">ABOUT</h6>
                            <div class="footer-links">
                                <a href="#">Company</a>
                                <a href="#">Culture</a>
                                <a href="#">Team</a>
                                <a href="#">Careers</a>
                            </div>
                        </div>
                        <div class="cell medium-6 large-6">
                            <h6 class="text-uppercase text-white">WHAT WE OFFER</h6>
                            <div class="footer-links">
                                <a href="#">Blocks</a>
                                <a href="#">Resources</a>
                                <a href="#">Tools</a>
                                <a href="#">Tutorials</a>
                                <a href="#">Freebies</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell medium-6 large-4 large-text-center footer-explore">
                    <h5 class="text-white">Explore our site</h5>
                    <button class="button bluebtn">Explore</button>
                </div>
            </div>

        </div>
        <div class="footer-bottom">
            <div class="grid-container">
                <div class="grid-x grid-margin-x">

                    <div class="cell large-2 small-text-center medium-text-center large-text-left">
                        <p class="ftlogo">&copy; FWR</p>
                    </div>
                    <div class="cell large-10 small-text-center medium-text-center large-text-right">
                        <a href="#">Terms of Service</a>
                        <a href="#">Privacy Policy</a>
                    </div>

                </div>
            </div>
        </div>
    </footer>
    <!-- /.footer-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>
// Foundation variables and mixins
@import "~foundation-sites/scss/foundation";

// Variables
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$light-gray: #ced4da;
$white: #fff;
$primary: #5863f8;
$facebook: #3b5998;
$twitter: #1da1f2;
$dark-black: #343a40;
$button-radius: 4px;
$footer-border: #212529;

// Custom CSS
body {
  font-family: #{$body-font-family} !important;
}

.grid-container {
  max-width: 540px;
}

.footer-2 {
  background: $dark-black;
  padding-top: 1.5rem;
  color: $white;

  h5, h6 {
    font-family: $body-font-family;
  }

  h5 {
    font-size: 20px;
    line-height: 1;
    margin-top: 40px;
  }

  h6 {
    margin-top: 25px;
  }
}

.footer-top {
  @include padding-direction('vertical', 1.5);
}

.footer-info {
  .footer-heading {
    font-family: #{$body-font-family} !important;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 15px;
  }

  p {
    font-family: $body-font-family;
    line-height: 1.5;
    color: $light-gray;
  }

  .button {
    margin-top: 15px;
  }
}

.footer-social {
  .button {
    span {
      display: inline-block;
      margin-right: 8px;
    }
  }
}

.footer-links {
  font-size: 1rem;

  a {
    color: $light-gray;
    padding: 5px 0;
    display: block;

    &:hover {
      text-decoration: underline;
    }
  }
}

.bluebtn {
  background: $primary;
  margin-top: 10px;

  &.bluebtn {
    @include button-style($primary, 'auto', $white);
  }
}

.button {
  font-family: $body-font-family;
  border-radius: $button-radius;
  font-size: 16px;
  line-height: 1.5;
  padding: 6px 16px;
  margin-bottom: 0;

  &.primary {
    @include button-style($primary, 'auto', $white);
  }

  &.btn-twitter {
    @include button-style($twitter, 'auto', $white);
  }

  &.btn-facebook {
    @include button-style($facebook, 'auto', $white);
  }
}

.footer-bottom {
  margin-top: 1rem;
  @include padding-direction('vertical', 1);
  text-align: center;
  border-top: 1px solid $footer-border;

  a {
    color: $white;
    display: inline-block;
    padding: .5rem 1rem;
    margin: 10px 4px;

    &:hover {
      text-decoration: underline;
    }
  }
}

.ftlogo {
  font-weight: bold;
}


@media #{breakpoint(medium)} {

  .grid-container {
    max-width: 1140px;
  }

  .footer-2 {
    padding-top: 3rem;

    h5, h6 {
      margin-top: 0;
    }
  }

  .footer-top {
    padding-bottom: 0 !important;
  }

  .footer-link-wrap,
  .footer-explore {
    margin-top: 3rem;
  }

  .footer-social {
    .button + .button {
      margin-left: 8px;
    }
  }

  .footer-bottom {
    margin-top: 40px;

    a {
      margin-top: 0;
      margin-bottom: 0;
      @include padding-direction('vertical', .5);
    }
  }

  .ftlogo {
    margin-top: .5rem;
  }

}


@media #{breakpoint(large)} {

  .bluebtn {
    min-width: 150px;
  }

  .footer-link-wrap,
  .footer-explore {
    margin-top: 0;
  }

  .footer-link-wrap {
    padding-left: 48px;
  }

  .footer-bottom {
    margin-top: 60px;
  }

}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
}

.grid-container {
  max-width: 540px;
}

.footer-2 {
  background: #343a40;
  padding-top: 1.5rem;
  color: #fff;
}

.footer-2 h5, .footer-2 h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.footer-2 h5 {
  font-size: 20px;
  line-height: 1;
  margin-top: 40px;
}

.footer-2 h6 {
  margin-top: 25px;
}

.footer-top {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.footer-info .footer-heading {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
  font-size: 24px;
  line-height: 28px;
  margin-bottom: 15px;
}

.footer-info p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
  color: #ced4da;
}

.footer-info .button {
  margin-top: 15px;
}

.footer-social .button span {
  display: inline-block;
  margin-right: 8px;
}

.footer-links {
  font-size: 1rem;
}

.footer-links a {
  color: #ced4da;
  padding: 5px 0;
  display: block;
}

.footer-links a:hover {
  text-decoration: underline;
}

.bluebtn {
  background: #5863f8;
  margin-top: 10px;
}

.bluebtn.bluebtn {
  background-color: #5863f8;
  color: #fff;
}

.bluebtn.bluebtn:hover, .bluebtn.bluebtn:focus {
  background-color: #1827f5;
  color: #fff;
}

.button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  padding: 6px 16px;
  margin-bottom: 0;
}

.button.primary {
  background-color: #5863f8;
  color: #fff;
}

.button.primary:hover, .button.primary:focus {
  background-color: #1827f5;
  color: #fff;
}

.button.btn-twitter {
  background-color: #1da1f2;
  color: #fff;
}

.button.btn-twitter:hover, .button.btn-twitter:focus {
  background-color: #0c84cd;
  color: #fff;
}

.button.btn-facebook {
  background-color: #3b5998;
  color: #fff;
}

.button.btn-facebook:hover, .button.btn-facebook:focus {
  background-color: #2f477a;
  color: #fff;
}

.footer-bottom {
  margin-top: 1rem;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  text-align: center;
  border-top: 1px solid #212529;
}

.footer-bottom a {
  color: #fff;
  display: inline-block;
  padding: .5rem 1rem;
  margin: 10px 4px;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.ftlogo {
  font-weight: bold;
}

@media (min-width: 40em) {
  .grid-container {
    max-width: 1140px;
  }
  .footer-2 {
    padding-top: 3rem;
  }
  .footer-2 h5, .footer-2 h6 {
    margin-top: 0;
  }
  .footer-top {
    padding-bottom: 0 !important;
  }
  .footer-link-wrap,
  .footer-explore {
    margin-top: 3rem;
  }
  .footer-social .button + .button {
    margin-left: 8px;
  }
  .footer-bottom {
    margin-top: 40px;
  }
  .footer-bottom a {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .ftlogo {
    margin-top: .5rem;
  }
}

@media (min-width: 64em) {
  .bluebtn {
    min-width: 150px;
  }
  .footer-link-wrap,
  .footer-explore {
    margin-top: 0;
  }
  .footer-link-wrap {
    padding-left: 48px;
  }
  .footer-bottom {
    margin-top: 60px;
  }
}

Similar Blocks

Footer 1
1
Footer 1
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi9mb290ZXIvZm9vdGVyLTI=

By using our website you agree to our Cookie Policy