Footers
Different style of footer layouts.
Footer #1
<!-- ========== FOOTER ========== -->
<footer>
<!-- Lists -->
<div class="container u-space-2">
<div class="row justify-content-md-between">
<div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
<h3 class="h6">
<strong>About</strong>
</h3>
<!-- List -->
<ul class="list-unstyled mb-0">
<li><a class="u-list__link" href="#">Agency</a></li>
<li><a class="u-list__link" href="#">Start-Up</a></li>
<li><a class="u-list__link" href="#">Business</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
<h3 class="h6">
<strong>Services</strong>
</h3>
<!-- List -->
<ul class="list-unstyled mb-0">
<li><a class="u-list__link" href="#">Agency</a></li>
<li><a class="u-list__link" href="#">Start-Up</a></li>
<li><a class="u-list__link" href="#">Business</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
<h3 class="h6">
<strong>Account</strong>
</h3>
<!-- List -->
<ul class="list-unstyled mb-0">
<li><a class="u-list__link" href="#">Profile</a></li>
<li><a class="u-list__link" href="#">User Contacts</a></li>
<li><a class="u-list__link" href="#">Projects</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-md-6 col-lg-4">
<h3 class="h6 mb-4">
<strong>We are driven to deliver results for all your businesses.</strong>
</h3>
<!-- Button -->
<button type="button" class="btn btn-xs btn-dark u-btn-dark u-btn-wide transition-3d-hover text-left mb-2">
<span class="media align-items-center">
<span class="d-flex mr-3">
<span class="fab fa-apple font-size-26"></span>
</span>
<span class="media-body">
<span class="d-block">Download on the</span>
<strong class="font-size-14">App Store</strong>
</span>
</span>
</button>
<!-- End Button -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-dark u-btn-dark u-btn-wide transition-3d-hover text-left mb-2">
<span class="media align-items-center">
<span class="d-flex mr-3">
<span class="fab fa-google-play font-size-26"></span>
</span>
<span class="media-body">
<span class="d-block">Get it on</span>
<strong class="font-size-14">Google Play</strong>
</span>
</span>
</button>
<!-- End Button -->
</div>
</div>
</div>
<!-- End Lists -->
<hr>
<!-- Copyright -->
<div class="container text-center u-space-1">
<!-- Logo -->
<a class="d-inline-block mb-2" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<p class="small text-muted">© Front. 2018 Htmlstream. All rights reserved.</p>
</div>
<!-- End Copyright -->
</footer>
<!-- ========== END FOOTER ========== -->
Footer #2
<!-- ========== FOOTER ========== -->
<footer class="container">
<div class="row u-space-2">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Coins Name -->
<div class="media">
<div class="d-flex mr-3">
<span class="u-icon u-icon--lg u-icon-primary--air rounded-circle">
<span class="fa fa-phone u-icon__inner"></span>
</span>
</div>
<div class="media-body">
<h4 class="u-list__link font-weight-normal mb-0">Call us</h4>
<span class="d-block font-size-14">+1 (062) 109-9222</span>
</div>
</div>
<!-- End Coins Name -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Coins Name -->
<div class="media">
<div class="d-flex mr-3">
<span class="u-icon u-icon--lg u-icon-primary--air rounded-circle">
<span class="fa fa-envelope u-icon__inner"></span>
</span>
</div>
<div class="media-body">
<h4 class="u-list__link font-weight-normal mb-0">Email us</h4>
<span class="d-block font-size-14">support@htmlstream.com</span>
</div>
</div>
<!-- End Coins Name -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Coins Name -->
<div class="media">
<div class="d-flex mr-3">
<span class="u-icon u-icon--lg u-icon-primary--air rounded-circle">
<span class="fa fa-map-marker-alt u-icon__inner"></span>
</span>
</div>
<div class="media-body">
<h4 class="u-list__link font-weight-normal mb-0">Address</h4>
<span class="d-block font-size-14">153 Williamson Plaza, Maggieberg</span>
</div>
</div>
<!-- End Coins Name -->
</div>
</div>
<hr class="my-0">
<div class="row u-space-2">
<div class="col-6 col-lg-3 mb-7 mb-lg-0">
<!-- Logo -->
<a class="d-inline-block mb-3" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<!-- Copyright -->
<p class="small text-muted">© Front. All rights reserved.</p>
<!-- End Copyright -->
</div>
<div class="col-6 col-lg-3 mb-7 mb-lg-0">
<!-- List -->
<ul class="list-unstyled u-list u-list--light">
<li><a class="u-list__link" href="#">Agency</a></li>
<li><a class="u-list__link" href="#">Start-Up</a></li>
<li><a class="u-list__link" href="#">Business</a></li>
<li><a class="u-list__link" href="#">Contacts</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-lg-3 mb-7 mb-lg-0">
<!-- List -->
<ul class="list-unstyled u-list u-list--light">
<li><a class="u-list__link" href="#">Help</a></li>
<li><a class="u-list__link" href="#">Terms</a></li>
<li><a class="u-list__link" href="#">Privacy</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-lg-3 mb-7 mb-lg-0">
<div class="u-list--light">
<h4 class="u-list__link font-weight-normal">Connect</h4>
</div>
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item mb-3">
<a class="u-icon u-icon--sm u-icon-primary--air rounded" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mb-3">
<a class="u-icon u-icon--sm u-icon-primary--air rounded" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mb-3">
<a class="u-icon u-icon--sm u-icon-primary--air rounded" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mb-3">
<a class="u-icon u-icon--sm u-icon-primary--air rounded" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #3
HTML:
<!-- ========== FOOTER ========== -->
<footer class="container u-space-3-top">
<div class="row mb-7">
<div class="col-lg-3 mb-7 mb-lg-0">
<div class="d-flex align-self-start flex-column h-100">
<!-- Logo -->
<a class="mb-4" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<!-- Country -->
<div class="btn-group position-relative">
<a id="footerCountryInvokerExample1" class="u-btn-text-primary" href="javascript:;" role="button"
aria-controls="footer-countryExample1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#footer-countryExample1"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="false"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<img class="u-unfold__icon u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
<strong class="font-size-14">United States</strong>
</a>
<!-- Content -->
<div id="footer-countryExample1" class="u-unfold u-unfold--country bottom-0 left-0" aria-labelledby="footerCountryInvokerExample1">
<!-- Signup Instantly -->
<div class="bg-white u-unfold--country__content">
<div class="p-6">
<h4 class="h6 mb-3"><strong>Front available in</strong></h4>
<div class="row">
<div class="col-6">
<!-- List of Countries -->
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/au.svg" alt="Australia Flag">
Australia
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/at.svg" alt="Austria Flag">
Austria
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/be.svg" alt="Belgium Flag">
Belgium
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ca.svg" alt="Canada Flag">
Canada
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/dk.svg" alt="Denmark Flag">
Denmark
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fi.svg" alt="Finland Flag">
Finland
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fr.svg" alt="France Flag">
France
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/de.svg" alt="Germany Flag">
Germany
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/nl.svg" alt="Netherlands Flag">
Netherlands
</a>
<!-- End List of Countries -->
</div>
<div class="col-6">
<!-- List of Countries -->
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/nz.svg" alt="New Zealand Flag">
New Zealand
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/no.svg" alt="Norway Flag">
Norway
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/pt.svg" alt="PortugalPREVIEW Flag">
Portugal
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/sg.svg" alt="Singapore Flag">
Singapore
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/es.svg" alt="Spain Flag">
Spain
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/se.svg" alt="Sweden Flag">
Sweden
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ch.svg" alt="Switzerland Flag">
Switzerland
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/gb.svg" alt="United Kingdom Flag">
United Kingdom
</a>
<a class="active u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
United States
</a>
<!-- End List of Countries -->
</div>
</div>
</div>
<a class="u-unfold--country__link p-6" href="#">
<small class="d-block text-muted mb-1">More countries coming soon.</small>
<small class="d-block">Signup to get notified <span class="fa fa-arrow-right u-unfold__icon-pointer"></span></small>
</a>
<!-- End Signup Instantly -->
</div>
</div>
<!-- End Content -->
</div>
<!-- End Country -->
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4 mb-md-0">
<!-- Title -->
<h3 class="h6">
<strong>Account</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">Profile</a></li>
<li><a class="u-list__link" href="#">User Contacts</a></li>
<li><a class="u-list__link" href="#">Projects</a></li>
<li><a class="u-list__link" href="#">Settings</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4 mb-md-0">
<!-- Title -->
<h3 class="h6">
<strong>Company</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">About</a></li>
<li><a class="u-list__link" href="#">Services</a></li>
<li><a class="u-list__link" href="#">Careers</a></li>
<li><a class="u-list__link" href="#">Blog</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-md-3 col-lg-2 mb-4 mb-md-0">
<!-- Title -->
<h3 class="h6">
<strong>Resources</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">Invoice</a></li>
<li><a class="u-list__link" href="#">Help</a></li>
<li><a class="u-list__link" href="#">Terms</a></li>
<li><a class="u-list__link" href="#">Privacy</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-md-3 col-lg-2">
<!-- Title -->
<h3 class="h6">
<strong>Contact</strong>
</h3>
<!-- End Title -->
<!-- Address -->
<address>
<ul class="list-unstyled u-list">
<li class="u-list__link">+1 (062) 109-9222</li>
<li class="u-list__link">
<a href="mailto:support@htmlstream.com">support@htmlstream.com</a>
</li>
<li class="u-list__link">153 Williamson Plaza, Maggieberg, MT 09514</li>
</ul>
</address>
<!-- End Address -->
</div>
</div>
<hr>
<div class="d-flex justify-content-between align-items-center my-7">
<!-- Copyright -->
<p class="small text-muted mb-0">© Front. 2018 Htmlstream.</p>
<!-- End Copyright -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</footer>
<!-- ========== END FOOTER ========== -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
});
</script>
Footer #4
<!-- ========== FOOTER ========== -->
<footer class="container u-space-2">
<div class="text-center">
<!-- Button -->
<button type="button" class="btn btn-xs btn-primary u-btn-primary u-btn-wide u-btn-pill text-left mb-2 mb-sm-0 mr-1">
<span class="media align-items-center">
<span class="d-flex mr-3">
<span class="fab fa-apple font-size-26"></span>
</span>
<span class="media-body">
<span class="d-block">Download on the</span>
<strong class="font-size-14">App Store</strong>
</span>
</span>
</button>
<!-- End Button -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-primary u-btn-primary u-btn-wide u-btn-pill text-left mb-2 mb-sm-0 ml-1">
<span class="media align-items-center">
<span class="d-flex mr-3">
<span class="fab fa-google-play font-size-26"></span>
</span>
<span class="media-body">
<span class="d-block">Get it on</span>
<strong class="font-size-14">Google Play</strong>
</span>
</span>
</button>
<!-- End Button -->
</div>
<hr class="my-7">
<div class="row align-items-md-center">
<div class="col-md-4 mb-4 mb-md-0">
<div class="d-flex align-items-center">
<!-- Logo -->
<a class="mr-3" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo-short.svg" alt="Logo" style="width: 40px;">
</a>
<!-- End Logo -->
<p class="small mb-0">© Front. 2018 Htmlstream.<br>All rights reserved.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-sm-0">
<!-- List -->
<ul class="list-inline text-md-center u-list">
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Help</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Terms</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Privacy</a>
</li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-sm-0">
<!-- Social Networks -->
<ul class="list-inline text-sm-right mb-0">
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #5
<!-- SVG Shape -->
<figure class="w-100">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1924 72" style="margin-bottom: -8px; enable-background:new 0 0 1924 72;" xml:space="preserve">
<path class="u-fill-dark" d="M962,0C507,1.5,0,72,0,72h962h962C1924,72,1417,1.5,962,0z"/>
</svg>
</figure>
<!-- End SVG Shape -->
<!-- ========== FOOTER ========== -->
<footer class="bg-dark">
<div class="container u-space-3">
<div class="row justify-content-lg-between">
<div class="col-lg-4 d-flex align-items-start flex-column mb-7 mb-lg-0">
<!-- Logo -->
<a class="d-inline-block mb-lg-auto mb-3" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo-white.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<p class="small mb-0">© Front. 2018 Htmlstream.<br>All rights reserved.</p>
</div>
<div class="col-4 col-lg-2 mb-7 mb-sm-0">
<!-- Title -->
<h3 class="h6 u-text-light">
<strong>About</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list u-list--light">
<li><a class="u-list__link" href="#">About</a></li>
<li><a class="u-list__link" href="#">Services</a></li>
<li><a class="u-list__link" href="#">Careers</a></li>
<li><a class="u-list__link" href="#">Blog</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-4 col-lg-2 mb-7 mb-sm-0">
<!-- Title -->
<h3 class="h6 u-text-light">
<strong>Account</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list u-list--light">
<li><a class="u-list__link" href="#">Profile</a></li>
<li><a class="u-list__link" href="#">Profile User Contacts</a></li>
<li><a class="u-list__link" href="#">Profile Projects</a></li>
<li><a class="u-list__link" href="#">Profile Settings</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-lg-3">
<!-- Title -->
<h3 class="h6 u-text-light">
<strong>Contacts</strong>
</h3>
<!-- End Title -->
<!-- Address -->
<address class="u-list--light mb-0">
<a class="u-list__link" href="#">+1 (062) 109-9222</a>
<a class="u-list__link" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
<a class="u-list__link" href="#">153 Williamson Plaza, Maggieberg, MT 09514</a>
</address>
<!-- End Address -->
</div>
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #6
<!-- ========== FOOTER ========== -->
<footer class="u-gradient-half-primary-v1">
<div class="container u-space-3-top u-space-1-bottom">
<div class="row justify-content-lg-start mb-7">
<div class="col-sm-9 col-lg-4 mb-7">
<!-- Logo -->
<a class="d-inline-block mb-3" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo-white.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<p class="small u-text-light">Front is a responsive website template. We will help to covert more visitors, and win more business with Front template.</p>
</div>
<div class="col-6 col-sm-4 col-lg-2 ml-lg-auto mb-4">
<!-- Title -->
<h3 class="h6 text-white">
<strong>Account</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list u-list--white">
<li><a class="u-list__link" href="#">Profile</a></li>
<li><a class="u-list__link" href="#">User Contacts</a></li>
<li><a class="u-list__link" href="#">Projects</a></li>
<li><a class="u-list__link" href="#">Settings</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-sm-4 col-lg-2 mb-4">
<!-- Title -->
<h3 class="h6 text-white">
<strong>Company</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list u-list--white">
<li><a class="u-list__link" href="#">About</a></li>
<li><a class="u-list__link" href="#">Services</a></li>
<li><a class="u-list__link" href="#">Careers</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-sm-4 col-lg-2 mb-4">
<!-- Title -->
<h3 class="h6 text-white">
<strong>Resources</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list u-list--white">
<li><a class="u-list__link" href="#">Help</a></li>
<li><a class="u-list__link" href="#">Terms</a></li>
<li><a class="u-list__link" href="#">Privacy</a></li>
</ul>
<!-- End List -->
</div>
</div>
<div class="row align-items-center">
<div class="col-sm-6 mb-3 mb-sm-0">
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="col-sm-6 text-sm-right">
<!-- Copyright -->
<p class="small u-text-light mb-0">© Front. 2018 Htmlstream. All rights reserved.</p>
<!-- End Copyright -->
</div>
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #7
HTML:
<!-- ========== FOOTER ========== -->
<footer class="bg-dark">
<div class="container u-space-2-top">
<div class="row justify-content-lg-between mb-7">
<div class="col-6 col-md-4 col-lg-2 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 u-text-light">
<strong>About</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">About</a></li>
<li><a class="u-list__link" href="#">Services</a></li>
<li><a class="u-list__link" href="#">Careers</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-md-4 col-lg-2 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 u-text-light">
<strong>Account</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">Profile</a></li>
<li><a class="u-list__link" href="#">Profile User Contacts</a></li>
<li><a class="u-list__link" href="#">Profile Projects</a></li>
<li><a class="u-list__link" href="#">Profile Settings</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-md-4 col-lg-2 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 u-text-light">
<strong>Contacts</strong>
</h3>
<!-- End Title -->
<!-- Address -->
<address class="u-list">
<a class="u-list__link" href="#">+1 (062) 109-9222</a>
<a class="u-list__link" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
<a class="u-list__link" href="#">153 Williamson Plaza, Maggieberg, MT 09514</a>
</address>
<!-- End Address -->
</div>
<div class="col-sm-6 col-md-5 col-lg-3 col-lg-3">
<div class="mb-4">
<!-- Title -->
<h3 class="h6 u-text-light mb-3">
<strong>Subscribe</strong>
</h3>
<!-- End Title -->
<!-- Input -->
<form class="js-validate js-form-message">
<div class="js-focus-state input-group input-group-sm u-form u-form--sm">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email address"
aria-label="Enter your email address"
data-msg="Please enter a valid email address.">
<div class="input-group-append u-form__append">
<button type="button" class="btn btn-primary">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</form>
<!-- End Input -->
</div>
<!-- Title -->
<h3 class="h6 u-text-light mb-3">
<strong>Stay in touch</strong>
</h3>
<!-- End Title -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
<div class="row justify-content-between align-items-center u-space-1">
<div class="col-5">
<!-- Logo -->
<a class="d-inline-block mb-lg-auto mb-3" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo-white.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
</div>
<div class="col-6 text-right">
<p class="small mb-0">© Front. 2018 Htmlstream.</p>
</div>
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>
Footer #8
<!-- ========== FOOTER ========== -->
<footer class="container text-center u-space-2">
<!-- Logo -->
<a class="d-inline-block mb-4" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<!-- List -->
<ul class="list-inline mb-3">
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">About</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Services</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Careers</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Blog</a>
</li>
</ul>
<!-- End List -->
<!-- Copyright -->
<p class="small text-muted mb-0">© Front. 2018 Htmlstream.</p>
<!-- End Copyright -->
</footer>
<!-- ========== END FOOTER ========== -->
Footer #9
<!-- ========== FOOTER ========== -->
<footer id="subscribeModalAnchor" class="bg-dark">
<div class="container text-center u-space-2">
<!-- Logo -->
<a class="d-inline-block mb-4" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo-white.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<!-- Copyright -->
<p class="small text-secondary">© Front. 2018 Htmlstream. All rights reserved.</p>
<!-- End Copyright -->
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #10
HTML:
<!-- ========== FOOTER ========== -->
<footer class="position-relative bg-primary text-center">
<div class="container">
<!-- Copyright -->
<div class="u-space-1">
<p class="small u-text-light mb-0">© Front. 2018 Htmlstream. All rights reserved.</p>
</div>
<!-- End Copyright -->
<!-- Go To Top -->
<div class="text-center mx-auto">
<a class="js-go-to" href="javascript:;"
data-type="absolute"
data-position='{
"bottom": 56
}'
data-compensation="#header"
data-show-effect="slideInUp"
data-hide-effect="slideOutDown">
<div class="u-go-to-wave">
<!-- SVG Wave Shape -->
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 208 44" style="enable-background:new 0 0 208 44;" xml:space="preserve">
<path class="u-fill-primary" d="M0,43c0,0,22.9,2.2,54-18.7S95.1,1.5,95.1,1.5s11.2-3.5,20.1,0.1s10.4,3.7,19.2,9.3c7.7,4.8,15,10.1,22.8,14.9
c10.1,6.2,21.5,11.7,33,14.8C191.6,41,208,44,208,43c0,0,0,1,0,1H0V43z"/>
</svg>
</figure>
<!-- End SVG Wave Shape -->
<span class="fa fa-angle-double-up text-white u-go-to-wave__icon"></span>
</div>
</a>
</div>
</div>
<!-- End Go To Top -->
</footer>
<!-- ========== END FOOTER ========== -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.go-to.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>
Footer #11
<!-- ========== END FOOTER ========== -->
<footer class="container text-center u-space-2">
<ul class="list-inline mb-4">
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<p class="small text-muted mb-0">© Front. 2018 Htmlstream. All rights reserved.</p>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #12
<!-- ========== FOOTER ========== -->
<footer class="container u-space-1">
<div class="row justify-content-sm-between">
<div class="col-sm-6 mb-4 mb-sm-0">
<!-- List -->
<ul class="list-unstyled">
<li class="list-inline-item u-list__item pl-0">
<a class="u-list__link" href="#">Help</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Terms</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Privacy</a>
</li>
</ul>
<!-- End List -->
<!-- Copyright -->
<p class="small text-muted mb-0">© Front. 2018 Htmlstream. All rights reserved.</p>
<!-- End Copyright -->
</div>
<div class="col-sm-6 align-self-sm-end text-sm-right mb-4 mb-sm-0">
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #13
<!-- ========== FOOTER ========== -->
<footer>
<div class="container">
<div class="d-flex justify-content-between align-items-center u-space-1">
<!-- Copyright -->
<p class="small text-muted mb-0">© Front. 2018 Htmlstream.</p>
<!-- End Copyright -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #14
<!-- ========== FOOTER ========== -->
<footer class="bg-primary">
<div class="container u-space-1">
<div class="row justify-content-between align-items-center">
<div class="col-sm-5 mb-3 mb-sm-0">
<!-- Copyright -->
<p class="small u-text-light mb-0">© Front. 2018 Htmlstream.</p>
<!-- End Copyright -->
</div>
<div class="col-sm-6 text-sm-right">
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-light--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-light--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-light--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-light--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #15
HTML:
<!-- ========== FOOTER ========== -->
<footer>
<div class="container">
<div class="row justify-content-lg-between u-space-2">
<div class="col-6 col-sm-4 col-lg-3 order-lg-2 ml-lg-auto mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 font-weight-bold">Account</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">Placing an order</a></li>
<li><a class="u-list__link" href="#">Shipping options</a></li>
<li><a class="u-list__link" href="#">Tracking a package</a></li>
<li><a class="u-list__link" href="#">Country availability</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-sm-4 col-lg-3 order-lg-3 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 font-weight-bold">Company</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">Financing</a></li>
<li><a class="u-list__link" href="#">Recycling</a></li>
<li><a class="u-list__link" href="#">Return policy</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-lg-2 order-lg-4 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 font-weight-bold">Our Location</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li>
<a class="media d-flex align-items-center u-list__link" href="#">
<span class="d-flex mr-3">
<span class="fa fa-info-circle"></span>
</span>
<span class="media-body">
Help
</span>
</a>
</li>
<li>
<a class="media d-flex align-items-center u-list__link" href="#">
<span class="d-flex mr-3">
<span class="fa fa-user-circle"></span>
</span>
<span class="media-body">
Your Account
</span>
</a>
</li>
<li>
<!-- Country -->
<div class="btn-group position-relative">
<a id="footerCountryInvokerExample2" class="u-list__link" href="javascript:;" role="button"
aria-controls="footer-countryExample2"
aria-haspopup="true"
aria-expanded="false"
data-toggle="dropdown"
data-unfold-event="click"
data-unfold-target="#footer-countryExample2"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="false"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<img class="u-unfold__icon u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
<span class="font-size-14">United States</span>
</a>
<!-- Content -->
<div id="footer-countryExample2" class="u-unfold u-unfold--country bottom-0 right-0" aria-labelledby="footerCountryInvokerExample2">
<!-- Signup Instantly -->
<div class="bg-white u-unfold--country__content">
<div class="p-6">
<h4 class="h6 font-weight-bold mb-3">Front available in</h4>
<div class="row">
<div class="col-6">
<!-- List of Countries -->
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/au.svg" alt="Australia Flag">
Australia
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/at.svg" alt="Austria Flag">
Austria
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/be.svg" alt="Belgium Flag">
Belgium
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ca.svg" alt="Canada Flag">
Canada
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/dk.svg" alt="Denmark Flag">
Denmark
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fi.svg" alt="Finland Flag">
Finland
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fr.svg" alt="France Flag">
France
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/de.svg" alt="Germany Flag">
Germany
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/nl.svg" alt="Netherlands Flag">
Netherlands
</a>
<!-- End List of Countries -->
</div>
<div class="col-6">
<!-- List of Countries -->
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/nz.svg" alt="New Zealand Flag">
New Zealand
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/no.svg" alt="Norway Flag">
Norway
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/pt.svg" alt="PortugalPREVIEW Flag">
Portugal
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/sg.svg" alt="Singapore Flag">
Singapore
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/es.svg" alt="Spain Flag">
Spain
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/se.svg" alt="Sweden Flag">
Sweden
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ch.svg" alt="Switzerland Flag">
Switzerland
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/gb.svg" alt="United Kingdom Flag">
United Kingdom
</a>
<a class="active u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
United States
</a>
<!-- End List of Countries -->
</div>
</div>
</div>
<a class="u-unfold--country__link p-6" href="#">
<small class="d-block text-muted mb-1">More countries coming soon.</small>
<small class="d-block">Signup to get notified <span class="fa fa-arrow-right u-unfold__icon-pointer"></span></small>
</a>
<!-- End Signup Instantly -->
</div>
</div>
<!-- End Content -->
</div>
<!-- End Country -->
</li>
</ul>
<!-- End List -->
</div>
<div class="col-lg-3 order-lg-1">
<div class="d-flex align-items-start flex-column h-100">
<!-- Logo -->
<a class="d-inline-block mb-lg-auto" href="#" aria-label="Front">
<img src="../assets/svg/logos/logo.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<!-- Copyright -->
<p class="small text-muted mb-0">© Front. 2018 Htmlstream.</p>
<!-- End Copyright -->
</div>
</div>
</div>
<hr class="my-0">
<div class="row u-space-1">
<div class="col-md-4 mb-4 mb-lg-0">
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-bg-transparent u-icon u-icon-secondary--air" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="col-md-8 text-md-right">
<!-- Links -->
<ul class="list-inline">
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="#">Privacy & policy</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="../pages/terms.html">Terms & conditions</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="../pages/careers.html">Careers</a>
</li>
</ul>
<!-- End Links -->
</div>
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
});
</script>
Footer #16
HTML:
<!-- ========== FOOTER ========== -->
<footer class="u-gradient-half-primary-v4">
<div class="container">
<!-- CTA -->
<div class="row justify-content-lg-between align-items-md-center u-space-2">
<div class="col-md-6 col-lg-5 mb-5 mb-md-0">
<h3 class="text-white font-weight-medium mb-1">Ready to get started?</h3>
<p class="u-text-light mb-0">Create your account and find your dream job.</p>
</div>
<div class="col-md-6 col-lg-5 text-md-right">
<a class="btn btn-success u-btn-success u-btn-wide transition-3d-hover mb-1 mb-sm-0 mr-sm-1" href="../pages/signup-simple.html">Sign Up</a>
<a class="btn text-primary u-btn-white u-btn-wide transition-3d-hover mb-1 mb-sm-0" href="#">Learn More</a>
</div>
</div>
<!-- End CTA -->
<hr class="opacity-0_2 my-0">
<div class="row justify-content-md-between u-space-2">
<div class="col-6 col-sm-4 col-lg-2 order-lg-2 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 text-white">
<strong>Account</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list u-list--white">
<li><a class="u-list__link" href="#">Profile</a></li>
<li><a class="u-list__link" href="#">User Contacts</a></li>
<li><a class="u-list__link" href="#">Projects</a></li>
<li><a class="u-list__link" href="#">Settings</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-sm-4 col-lg-2 order-lg-3 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 text-white">
<strong>Company</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list u-list--white">
<li><a class="u-list__link" href="../pages/about-agency.html">About</a></li>
<li><a class="u-list__link" href="../pages/services-agency.html">Services</a></li>
<li><a class="u-list__link" href="../pages/careers-listing.html">Careers</a></li>
<li><a class="u-list__link" href="../blog/classic-right-sidebar.html">Blog</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-lg-2 order-lg-4 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6 text-white">
<strong>Resources</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list u-list--white">
<li><a class="u-list__link" href="#">Invoice</a></li>
<li><a class="u-list__link" href="../pages/help.html">Help</a></li>
<li><a class="u-list__link" href="../pages/contacts.html">Terms</a></li>
<li><a class="u-list__link" href="../pages/privacy.html">Privacy</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-6 col-md-5 col-lg-3 order-lg-5 mb-6 mb-sm-0">
<!-- Title -->
<h3 class="h6 text-white">
<strong>Events</strong>
</h3>
<!-- End Title -->
<!-- Events -->
<ul class="list-unstyled mt-3 mb-0">
<li class="mb-3">
<a class="d-block bg-primary text-white shadow-primary-sm rounded-pill p-1" href="#">
<div class="media align-items-center">
<div class="d-flex mr-2">
<span class="u-label u-label--sm u-label--white font-weight-bold">23/05</span>
</div>
<div class="media-body">
<span class="font-size-14">Technical Hiring</span>
</div>
</div>
</a>
</li>
<li class="mb-3">
<a class="d-block bg-primary text-white shadow-primary-sm rounded-pill p-1" href="#">
<div class="media align-items-center">
<div class="d-flex mr-2">
<span class="u-label u-label--sm u-label--white font-weight-bold">01/06</span>
</div>
<div class="media-body">
<span class="font-size-14">Networking Event</span>
</div>
</div>
</a>
</li>
</ul>
<!-- End Events -->
</div>
<div class="col-sm-6 col-md-5 col-lg-3 order-lg-1">
<div class="d-flex align-self-start flex-column h-100">
<!-- Logo -->
<a class="d-inline-block mb-4" href="index.html" aria-label="Front">
<img src="../assets/svg/logos/logo-white.svg" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<!-- Country -->
<div class="btn-group position-relative mb-3 mb-lg-0">
<a id="footerCountryInvoker" class="u-btn-text-white text-white" href="javascript:;" role="button"
aria-controls="footer-country"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#footer-country"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="false"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<img class="u-unfold__icon u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
<strong class="font-size-14">United States</strong>
</a>
<!-- Content -->
<div id="footer-country" class="u-unfold u-unfold--country bottom-0 left-0" aria-labelledby="footerCountryInvoker">
<!-- Signup Instantly -->
<div class="bg-white u-unfold--country__content">
<div class="p-6">
<h4 class="h6 mb-3"><strong>Front available in</strong></h4>
<div class="row">
<div class="col-6">
<!-- List of Countries -->
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/au.svg" alt="Australia Flag">
Australia
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/at.svg" alt="Austria Flag">
Austria
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/be.svg" alt="Belgium Flag">
Belgium
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ca.svg" alt="Canada Flag">
Canada
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/dk.svg" alt="Denmark Flag">
Denmark
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fi.svg" alt="Finland Flag">
Finland
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fr.svg" alt="France Flag">
France
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/de.svg" alt="Germany Flag">
Germany
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/nl.svg" alt="Netherlands Flag">
Netherlands
</a>
<!-- End List of Countries -->
</div>
<div class="col-6">
<!-- List of Countries -->
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/nz.svg" alt="New Zealand Flag">
New Zealand
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/no.svg" alt="Norway Flag">
Norway
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/pt.svg" alt="PortugalPREVIEW Flag">
Portugal
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/sg.svg" alt="Singapore Flag">
Singapore
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/es.svg" alt="Spain Flag">
Spain
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/se.svg" alt="Sweden Flag">
Sweden
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ch.svg" alt="Switzerland Flag">
Switzerland
</a>
<a class="u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/gb.svg" alt="United Kingdom Flag">
United Kingdom
</a>
<a class="active u-list__link" href="#">
<img class="u-list__link-icon mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
United States
</a>
<!-- End List of Countries -->
</div>
</div>
</div>
<a class="u-unfold--country__link p-6" href="#">
<small class="d-block text-muted mb-1">More countries coming soon.</small>
<small class="d-block">Signup to get notified <span class="fa fa-arrow-right u-unfold__icon-pointer"></span></small>
</a>
<!-- End Signup Instantly -->
</div>
</div>
<!-- End Content -->
</div>
<!-- End Country -->
<!-- Copyright -->
<p class="small u-text-light mt-lg-auto mb-0">© Front. 2018 Htmlstream.</p>
<!-- End Copyright -->
</div>
</div>
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
});
</script>
Footer #17
<!-- ========== FOOTER ========== -->
<footer class="container">
<div class="row justify-content-lg-between u-space-1-top u-space-2-bottom">
<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6">
<strong>Account</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">Profile</a></li>
<li><a class="u-list__link" href="#">User Contacts</a></li>
<li><a class="u-list__link" href="#">Projects</a></li>
<li><a class="u-list__link" href="#">Settings</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6">
<strong>Company</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="../pages/about-agency.html">About</a></li>
<li><a class="u-list__link" href="../pages/services-agency.html">Services</a></li>
<li><a class="u-list__link" href="../pages/careers-listing.html">Careers</a></li>
<li><a class="u-list__link" href="../blog/classic-right-sidebar.html">Blog</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-lg-2 mb-7 mb-lg-0">
<!-- Title -->
<h3 class="h6">
<strong>Resources</strong>
</h3>
<!-- End Title -->
<!-- List -->
<ul class="list-unstyled u-list">
<li><a class="u-list__link" href="#">Invoice</a></li>
<li><a class="u-list__link" href="../pages/help.html">Help</a></li>
<li><a class="u-list__link" href="../pages/contacts.html">Terms</a></li>
<li><a class="u-list__link" href="../pages/privacy.html">Privacy</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-md-7 col-lg-5 mb-4 mb-md-0">
<div class="mb-4">
<h3 class="h6">
<strong>Get latest news in your box!</strong>
</h3>
<p class="font-size-14">Get special offers and deals. Never spam.</p>
</div>
<!-- Form -->
<form class="js-validate js-form-message">
<div class="js-focus-state input-group u-form">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append u-form__append">
<button type="submit" class="btn btn-primary u-btn-primary">Subscribe</button>
</span>
</div>
</form>
<!-- End Form -->
</div>
</div>
<hr class="my-0">
<div class="text-center py-7">
<!-- Copyright -->
<p class="small text-muted mb-0">© Front. 2018 Htmlstream.</p>
<!-- End Copyright -->
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #18
HTML:
<!-- ========== FOOTER ========== -->
<footer class="position-relative u-gradient-half-primary-v5">
<div class="container u-space-4-top u-space-2-bottom">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-auto mb-5">
<h2 class="text-white">Ready to <strong class="font-weight-bold">get started?</strong></h2>
<p class="u-text-light mb-0">Want to see Front in action? Get started with Front for instant experience:</p>
</div>
<!-- End Title -->
<!-- Form -->
<form class="js-validate w-lg-80 mx-lg-auto">
<div class="row mx-gutters-2">
<div class="col-sm-4 mb-3 mb-sm-0">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input type="text" class="form-control u-form__input" name="username" required
placeholder="Name"
aria-label="Name"
data-msg="Name must contain only letters.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-sm-4 mb-3 mb-sm-0">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-block btn-success u-btn-success transition-3d-hover">Get Started</button>
</div>
</div>
</form>
<!-- End Form -->
<hr class="opacity-0_2 my-7">
<div class="row align-items-lg-center">
<div class="col-lg-3 mb-4 mb-lg-0">
<!-- Copyright -->
<p class="small u-text-light mb-0">© Front. 2018 Htmlstream.</p>
<!-- End Copyright -->
</div>
<div class="col-md-8 col-lg-6 mb-4 mb-md-0">
<!-- List -->
<ul class="list-inline text-lg-center u-list u-list--white">
<li class="list-inline-item u-list__item pl-0">
<a class="u-list__link" href="../pages/about-agency.html">About</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="../pages/services-agency.html">Services</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="../pages/careers-listing.html">Careers</a>
</li>
<li class="list-inline-item u-list__item">
<a class="u-list__link" href="../blog/classic-right-sidebar.html">Blog</a>
</li>
</ul>
<!-- End List -->
</div>
<div class="col-md-4 col-lg-3">
<!-- Social Networks -->
<ul class="list-inline text-md-right mb-0">
<li class="list-inline-item">
<a class="u-icon u-icon-light--air rounded" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon-light--air rounded" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon-light--air rounded" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon-light--air rounded" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
<!-- SVG Background -->
<figure class="position-absolute-top-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="140px" viewBox="0 0 1920 140" style="margin-top: -2px; enable-background:new 0 0 1920 140;" xml:space="preserve">
<path class="u-fill-primary" opacity="0.3" d="M1607,81.8c0,0-274.6,48.2-560.1,19.9c-494.8-49.2-725.1,2.7-938.5,6.6C-203,114-339.2,85.6-339.2,85.6V9.4l1946.2,0V81.8z"/>
<path class="u-fill-primary" opacity="0.3" d="M2033.1,80.8c0,0-274.6,48.2-560.1,19.9c-494.8-49.2-725.1,2.7-938.5,6.6C223.1,113,86.9,84.6,86.9,84.6V8.5h1946.2V80.8z"/>
<path class="u-fill-white" opacity="0" d="M1526.9,5.6c0,0-309,96.5-698.5,96.5C406.8,102.1,201.4,7,201.4,7V1.8l1332,0L1526.9,5.6z"/>
<path class="u-fill-white" d="M2026.7,55.1c0,0-358.4,63.9-770,39c-523.7-31.8-712.6-8.6-938.5,6.6C-21.5,123.7-347.7,49-347.7,49l-8.5-51.3l2380.8,4.1L2026.7,55.1z"/>
</svg>
</figure>
<!-- End SVG Background Section -->
</div>
</footer>
<!-- ========== END FOOTER ========== -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
});
</script>