Footer 2 Bootstrap
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">© <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);
}
