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