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 2</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>

    <div class="footer-2 pt-4 pt-md-5 bg-dark">

        <div class="container">
            <div class="row py-4 pb-md-5">
                <div class="col-lg-4 footer-info">
                    <h4 class="footer-heading text-white mb-3">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="mt-4">
                        <button class="btn btn-facebook px-3 mr-sm-2 mt-2">
                            <span class="fab fa-facebook-f mr-2"></span>
                            Follow
                        </button>
                        <button class="btn btn-twitter px-3 mt-2">
                            <span class="fab fa-twitter mr-2"></span>
                            Follow @freeweb
                        </button>
                    </div>
                </div>
                <div class="col-md-8 col-lg-4 pl-xl-5 mt-5 mt-lg-0">
                    <div class="row pl-xl-3">
                        <div class="col-sm">
                            <h6 class="text-uppercase text-white">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="col-sm mt-4 mt-sm-0">
                            <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="col-md-4 col-lg-4 text-md-center mt-5 mt-lg-0">
                    <h5 class="text-white mb-3">Explore our site</h5>
                    <button class="btn btn-primary px-md-5">Explore</button>
                </div>
            </div>
        </div>

        <div class="footer-bottom py-3 mt-3">
            <div class="container">
                <div class="row">
                    <div class="col-md text-center text-md-left">
                        <p class="text-white mt-2">&copy; <strong>FWR</strong></p>
                    </div>
                    <div class="col-md footer-bottom-links text-center text-md-right">
                        <a class="d-inline-block text-white py-2 px-3" href="#">Terms of Service</a>
                        <a class="d-inline-block text-white py-2 px-3" href="#">Privacy Policy</a>
                    </div>
                </div>
            </div>
        </div>

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

    <!-- 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;

// Custom CSS
.footer-info {
  p {
    color: $gray-400;
  }
}

.footer-links {
  a {
    display: block;
    padding: 5px 0;
    font-size: 1rem;
    color: $gray-400;
  }
}

.footer-bottom {
  border-top: 1px solid $gray-900;
}

.footer-bottom-links {
  a {
    display: inline-block;

  }
}

.btn-primary {
  @include button-variant($primary, $primary);
}

.btn-facebook {
  @include button-variant($facebook, $facebook);
}

.btn-twitter {
  @include button-variant($twitter, $twitter);
}
.footer-info p {
  color: #ced4da;
}

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

.footer-bottom {
  border-top: 1px solid #212529;
}

.footer-bottom-links a {
  display: inline-block;
}

.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);
}

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

.btn-facebook:hover {
  color: #fff;
  background-color: #30497c;
  border-color: #2d4373;
}

.btn-facebook:focus, .btn-facebook.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.5);
}

.btn-facebook.disabled, .btn-facebook:disabled {
  color: #fff;
  background-color: #3b5998;
  border-color: #3b5998;
}

.btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active,
.show > .btn-facebook.dropdown-toggle {
  color: #fff;
  background-color: #2d4373;
  border-color: #293e6a;
}

.btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus,
.show > .btn-facebook.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.5);
}

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

.btn-twitter:hover {
  color: #fff;
  background-color: #0d8ddc;
  border-color: #0c85d0;
}

.btn-twitter:focus, .btn-twitter.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(29, 161, 242, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(29, 161, 242, 0.5);
}

.btn-twitter.disabled, .btn-twitter:disabled {
  color: #fff;
  background-color: #1da1f2;
  border-color: #1da1f2;
}

.btn-twitter:not(:disabled):not(.disabled):active, .btn-twitter:not(:disabled):not(.disabled).active,
.show > .btn-twitter.dropdown-toggle {
  color: #fff;
  background-color: #0c85d0;
  border-color: #0b7ec4;
}

.btn-twitter:not(:disabled):not(.disabled):active:focus, .btn-twitter:not(:disabled):not(.disabled).active:focus,
.show > .btn-twitter.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(29, 161, 242, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(29, 161, 242, 0.5);
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2Zvb3Rlci9mb290ZXItMg==