<footer class="site-footer">
<div class="site-footer__top">
<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<div class="row">
<div class="col-12 col-lg-4">
<h5 class="site-footer__header">About AFW</h5>
<ul class="site-footer__navigation">
<li class="site-footer__item">
<a href="#" class="site-footer__link">About Jake</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Stores</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Careers</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Blog</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">AFW Giving Back</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">School Rewards</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Environmental Initiatives</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Customer Reviews</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-4">
<h5 class="site-footer__header">My Account</h5>
<ul class="site-footer__navigation">
<li class="site-footer__item">
<a href="#" class="site-footer__link">Track Order</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">My Orders</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">My Account</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">My Addresses</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Wishlist</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Recently Viewed Products</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Shopping Cart</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-4">
<h5 class="site-footer__header">Help & Support</h5>
<ul class="site-footer__navigation">
<li class="site-footer__item">
<a href="#" class="site-footer__link">Contact Us</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Help Center</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Platinum Delivery Service</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Pick Up</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Warranty</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Returns</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Financing</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Gift Cards</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<h5 class="site-footer__header">Be The First To Know</h5>
<p class="c-white fs-14">Join our newsletter to know about our new arrivals, events, contests, design tips, and more.</p>
<h5 class="site-footer__header mt-lg-40">Don't Forget! Follow Us On</h5>
<div class="site-footer__social-links mb-lg-40">
<a href="#" aria-label="Facebook">
<i class="icon fab fa-facebook fa-fw" aria-hidden="true"></i>
</a>
<a href="#" aria-label="Instagram">
<i class="icon fab fa-instagram fa-fw" aria-hidden="true"></i>
</a>
<a href="#" aria-label="Pinterest">
<i class="icon fab fa-pinterest fa-fw" aria-hidden="true"></i>
</a>
<a href="#" aria-label="YouTube">
<i class="icon fab fa-youtube fa-fw" aria-hidden="true"></i>
</a>
<a href="#" aria-label="Snapchat">
<i class="icon fab fa-snapchat fa-fw" aria-hidden="true"></i>
</a>
</div>
<h5 class="site-footer__header">Get the AFW Visualizer App</h5>
<div class="site-footer__app-links">
<a href="#" class="afw-visualizer" aria-label="AFW Visualizer">
<img src="../../images/icons/40x40_logo-min.png" alt="">
</a>
<a href="#" class="apple-download" aria-label="Apple App Store">
<img src="../../images/icons/apple-download-badge.png" alt="">
</a>
<a href="#" class="google-download" aria-label="Google Play Store">
<img src="../../images/icons/google-download-badge.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="site-footer__bottom">
<div class="container">
<ul class="site-footer__legal-links">
<li class="site-footer__item">
<a href="#" class="site-footer__link">Terms of Service</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Privacy Policy</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">Accessibility</a>
</li>
</ul>
<p class="site-footer__copyright">Copyright © [DATE] American Furniture Warehouse. All Rights Reserved.</p>
</div>
</div>
</footer>
<footer class="site-footer">
<div class="site-footer__top">
<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<div class="row">
{% for nav in navigation %}
<div class="col-12 col-lg-4">
<h5 class="site-footer__header">{{nav.name|safe}}</h5>
<ul class="site-footer__navigation">
{% for item in nav.items %}
<li class="site-footer__item">
<a href="{{item.href}}" class="site-footer__link">{{item.text|safe}}</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
<div class="col-12 col-lg-4">
<h5 class="site-footer__header">Be The First To Know</h5>
<p class="c-white fs-14">Join our newsletter to know about our new arrivals, events, contests, design tips, and more.</p>
<h5 class="site-footer__header mt-lg-40">Don't Forget! Follow Us On</h5>
<div class="site-footer__social-links mb-lg-40">
{% for link in socialLinks %}
<a href="{{link.href}}" aria-label="{{link.text}}">
{% render '@icon--default', link.icon, true %}
</a>
{% endfor %}
</div>
<h5 class="site-footer__header">Get the AFW Visualizer App</h5>
<div class="site-footer__app-links">
{% for link in appLinks %}
<a href="{{link.href}}" class="{{link.class}}" aria-label="{{link.text}}">
<img src="{{link.image.src|path}}" alt="{{link.image.alt}}">
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="site-footer__bottom">
<div class="container">
<ul class="site-footer__legal-links">
{% for link in legalLinks %}
<li class="site-footer__item">
<a href="{{link.href}}" class="site-footer__link">{{link.text}}</a>
</li>
{% endfor %}
</ul>
<p class="site-footer__copyright">{{copyright|safe}}</p>
</div>
</div>
</footer>
{
"navigation": [
{
"name": "About AFW",
"items": [
{
"href": "#",
"text": "About Jake"
},
{
"href": "#",
"text": "Stores"
},
{
"href": "#",
"text": "Careers"
},
{
"href": "#",
"text": "Blog"
},
{
"href": "#",
"text": "AFW Giving Back"
},
{
"href": "#",
"text": "School Rewards"
},
{
"href": "#",
"text": "Environmental Initiatives"
},
{
"href": "#",
"text": "Customer Reviews"
}
]
},
{
"name": "My Account",
"items": [
{
"href": "#",
"text": "Track Order"
},
{
"href": "#",
"text": "My Orders"
},
{
"href": "#",
"text": "My Account"
},
{
"href": "#",
"text": "My Addresses"
},
{
"href": "#",
"text": "Wishlist"
},
{
"href": "#",
"text": "Recently Viewed Products"
},
{
"href": "#",
"text": "Shopping Cart"
}
]
},
{
"name": "Help & Support",
"items": [
{
"href": "#",
"text": "Contact Us"
},
{
"href": "#",
"text": "Help Center"
},
{
"href": "#",
"text": "Platinum Delivery Service"
},
{
"href": "#",
"text": "Pick Up"
},
{
"href": "#",
"text": "Warranty"
},
{
"href": "#",
"text": "Returns"
},
{
"href": "#",
"text": "Financing"
},
{
"href": "#",
"text": "Gift Cards"
}
]
}
],
"socialLinks": [
{
"href": "#",
"text": "Facebook",
"icon": {
"icon": "fa-facebook",
"family": "fab"
}
},
{
"href": "#",
"text": "Instagram",
"icon": {
"icon": "fa-instagram",
"family": "fab"
}
},
{
"href": "#",
"text": "Pinterest",
"icon": {
"icon": "fa-pinterest",
"family": "fab"
}
},
{
"href": "#",
"text": "YouTube",
"icon": {
"icon": "fa-youtube",
"family": "fab"
}
},
{
"href": "#",
"text": "Snapchat",
"icon": {
"icon": "fa-snapchat",
"family": "fab"
}
}
],
"appLinks": [
{
"href": "#",
"text": "AFW Visualizer",
"class": "afw-visualizer",
"image": {
"src": "/images/icons/40x40_logo-min.png",
"alt": null
}
},
{
"href": "#",
"text": "Apple App Store",
"class": "apple-download",
"image": {
"src": "/images/icons/apple-download-badge.png",
"alt": null
}
},
{
"href": "#",
"text": "Google Play Store",
"class": "google-download",
"image": {
"src": "/images/icons/google-download-badge.png",
"alt": null
}
}
],
"legalLinks": [
{
"href": "#",
"text": "Terms of Service"
},
{
"href": "#",
"text": "Privacy Policy"
},
{
"href": "#",
"text": "Accessibility"
}
],
"copyright": "Copyright © [DATE] American Furniture Warehouse. All Rights Reserved."
}
.site-footer {
$this: &;
background: $color-primary-blue;
&__top {
padding-block: rem(32px);
}
&__bottom {
background: $color-blue-dark;
padding-block: rem(32px);
}
&__header {
color: $color-white;
font-size: rem(16px);
font-weight: 700;
margin: 0 0 rem(20px);
position: relative;
&:after {
background: $color-primary-red;
content: '';
display: block;
position: absolute;
left: 0;
bottom: rem(-10px);
width: rem(30px);
height: rem(2px);
}
}
&__navigation {
list-style: none;
margin: 0;
padding: 0;
#{$this}__item {
// margin: 0 rem(7.5px);
margin: 0;
display: block;
}
#{$this}__link {
color: $color-white;
display: inline-block;
font-size: rem(14px);
font-weight: 600;
text-decoration: none;
padding: rem(9.6px) 0;
position: relative;
&:after {
background: $color-primary-red;
content: '';
display: block;
position: absolute;
left: 0;
bottom: rem(2px);
width: rem(0px);
height: rem(2px);
transition: width 333ms linear;
}
&:hover,
&:focus {
&:after {
width: rem(15px);
}
}
}
}
&__social-links {
display: flex;
a {
color: $color-white;
display: block;
margin-inline: rem(6px);
.icon {
font-size: rem(24px);
}
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
}
}
&__app-links {
display: flex;
padding-top: rem(12.800px);
.afw-visualizer {
background: $color-white;
border-radius: rem(5px);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 rem(40px);
width: rem(40px);
height: rem(40px);
margin-right: rem(15px);
padding: rem(5px);
}
.apple-download,
.google-download {
margin-right: rem(15px);
img {
height: rem(40px);
}
}
}
&__legal-links {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style: none;
margin: 0 0 rem(15px);
padding: 0;
#{$this}__item {
margin: 0 rem(7.5px);
}
#{$this}__link {
color: $color-white;
font-size: rem(13px);
font-weight: 600;
text-decoration: none;
}
}
&__copyright {
color: $color-white;
font-size: rem(13px);
font-weight: 600;
text-align: center;
margin: 0;
padding: 0;
}
}
No notes defined.