Footer block for use with websites and landing pages.

Dependencies

  • Bootstrap 4
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Bootstrap Blocks - Footer 1</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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-1 py-4 py-sm-5 bg-light">

        <div class="container">

            <div class="row py-md-3">
                <div class="col-sm-6 col-md-3 col-xl-2">
                    <h5 class="mb-4">Features</h5>
                    <ul class="list-unstyled footer-links">
                        <li><a href="#">Cool stuff</a></li>
                        <li><a href="#">Random feature</a></li>
                        <li><a href="#">Team feature</a></li>
                        <li><a href="#">Stuff for developers</a></li>
                        <li><a href="#">Another one</a></li>
                        <li><a href="#">Last time</a></li>
                    </ul>
                </div>
                <div class="col-sm-6 col-md-3 col-xl-2 mt-3 mt-md-0">
                    <h5 class="mb-4">Resources</h5>
                    <ul class="list-unstyled footer-links">
                        <li><a href="#">Resource</a></li>
                        <li><a href="#">Resource name</a></li>
                        <li><a href="#">Another resource</a></li>
                        <li><a href="#">Final resource</a></li>
                    </ul>
                </div>
                <div class="col-sm-6 col-md-3 col-xl-2 mt-3 mt-md-0">
                    <h5 class="mb-4">About</h5>
                    <ul class="list-unstyled footer-links">
                        <li><a href="#">Team</a></li>
                        <li><a href="#">Locations</a></li>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="#">Terms</a></li>
                    </ul>
                </div>
                <div class="col-sm-6 col-md-3 col-xl-2 mt-3 mt-md-0">
                    <h5 class="mb-4">Help</h5>
                    <ul class="list-unstyled footer-links">
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
                <div class="col-sm-4 mx-sm-auto col-xl-2 offset-xl-2 mr-xl-0 mt-3 mt-md-0">
                    <h5 class="mb-4">Stay connected</h5>
                    <div class="social-links d-flex text-center">
                        <a class="facebook rounded-circle" href="#">
                            <span class="fab fa-facebook"></span>
                        </a>
                        <a class="twitter rounded-circle ml-2" href="#">
                            <span class="fab fa-twitter"></span>
                        </a>
                        <a class="google-plus rounded-circle ml-2" href="#">
                            <span class="fab fa-google-plus-g"></span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="row border-top mt-4 mt-sm-5 pt-4 pt-sm-5">
                <div class="col-sm-12 col-md-2">
                    <strong>FWR</strong>
                </div>
                <div class="col-sm-6 col-md-3 small mt-3 mt-md-0">
                    <h6>Address</h6>
                    <address>
                        123 6th St.<br>
                        Melbourne, FL 32904
                    </address>
                </div>
                <div class="col-sm-6 col-md-3 small">
                    <h6>Free Resources</h6>
                    <p>Use our HTML blocks for <strong>FREE</strong>.<br>
                        <em>All are MIT License</em></p>
                </div>
                <div class="col-sm-4 col-md-3 offset-md-1 col-xl-2 offset-xl-2 mt-3 mt-md-0">
                    <button class="btn btn-primary">Get Started</button>
                </div>
            </div>

        </div>

    </footer>
    <!-- /.footer-1 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:       #5863f8;
$facebook:      #3b5998;
$twitter:       #1da1f2;
$google-plus:   #dd4b39;

// Custom CSS
.footer-links {
  li {
    margin-bottom: $spacer/2;
  }

  a {
    color: $gray-600;
    padding-bottom: $spacer/8;
    border-bottom: 1px solid transparent;
    transition: color .3s, border-color .3s;

    @include hover-focus {
      text-decoration: none;
      color: $primary;
      border-color: $primary;
    }
  }
}

.social-links {
  a {
    width: 36px;
    height: 36px;
    border: 2px solid $gray-300;
    color: $gray-600;
    transition: color .3s, background-color .3s, border-color .3s;

    @include hover-focus {
      color: $white;
      border-color: $white;
      text-decoration: none;
    }

    &.facebook {
      @include hover-focus {
        background-color: $facebook;
        border-color: $facebook;
      }
    }

    &.twitter {
      @include hover-focus {
        background-color: $twitter;
        border-color: $twitter;
      }
    }

    &.google-plus {
      @include hover-focus {
        background-color: $google-plus;
        border-color: $google-plus;
      }
    }
  }

  .fab {
    font-size: 1rem;
    line-height: 2;
  }
}

.btn-primary {
  @include button-variant($primary, $primary);
}
.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: #6c757d;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid transparent;
  -webkit-transition: color .3s, border-color .3s;
  transition: color .3s, border-color .3s;
}

.footer-links a:hover, .footer-links a:focus {
  text-decoration: none;
  color: #5863f8;
  border-color: #5863f8;
}

.social-links a {
  width: 36px;
  height: 36px;
  border: 2px solid #dee2e6;
  color: #6c757d;
  -webkit-transition: color .3s, background-color .3s, border-color .3s;
  transition: color .3s, background-color .3s, border-color .3s;
}

.social-links a:hover, .social-links a:focus {
  color: #fff;
  border-color: #fff;
  text-decoration: none;
}

.social-links a.facebook:hover, .social-links a.facebook:focus {
  background-color: #3b5998;
  border-color: #3b5998;
}

.social-links a.twitter:hover, .social-links a.twitter:focus {
  background-color: #1da1f2;
  border-color: #1da1f2;
}

.social-links a.google-plus:hover, .social-links a.google-plus:focus {
  background-color: #dd4b39;
  border-color: #dd4b39;
}

.social-links .fab {
  font-size: 1rem;
  line-height: 2;
}

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

.btn-primary:hover {
  color: #fff;
  background-color: #3341f6;
  border-color: #2735f6;
}

.btn-primary:focus, .btn-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #2735f6;
  border-color: #1b2af5;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2Zvb3Rlci9mb290ZXItMQ==