Footers
Different style of footer layouts.
Footer #1
<!-- ========== FOOTER ========== -->
<footer class="bg-dark">
<div class="container space-2">
<div class="row justify-content-md-between">
<div class="col-6 col-md-3 col-lg-2 order-lg-3 mb-7 mb-lg-0">
<h3 class="h6 text-white mb-3">About</h3>
<!-- List Group -->
<div class="list-group list-group-flush list-group-transparent">
<a class="list-group-item list-group-item-action" href="../html/pages/about-agency.html">About Agency</a>
<a class="list-group-item list-group-item-action" href="../html/pages/about-start-up.html">About Start-Up</a>
<a class="list-group-item list-group-item-action" href="../html/pages/services-agency.html">Services Agency</a>
<a class="list-group-item list-group-item-action" href="../html/pages/services-start-up.html">Services Start-Up</a>
</div>
<!-- End List Group -->
</div>
<div class="col-6 col-md-3 col-lg-2 order-lg-4 mb-7 mb-lg-0">
<h3 class="h6 text-white mb-3">Company</h3>
<!-- List Group -->
<div class="list-group list-group-flush list-group-transparent">
<a class="list-group-item list-group-item-action" href="../html/pages/contacts-agency.html">Contact Us</a>
<a class="list-group-item list-group-item-action" href="../html/pages/help.html">Help</a>
<a class="list-group-item list-group-item-action" href="../html/pages/careers.html">Careers</a>
<a class="list-group-item list-group-item-action" href="../html/pages/terms.html">Terms & Conditions</a>
<a class="list-group-item list-group-item-action" href="../html/pages/privacy.html">Privacy & Policy</a>
</div>
<!-- End List Group -->
</div>
<div class="col-6 col-md-3 col-lg-2 order-lg-5 mb-7 mb-lg-0">
<h3 class="h6 text-white mb-3">Shop</h3>
<!-- List Group -->
<div class="list-group list-group-flush list-group-transparent">
<a class="list-group-item list-group-item-action" href="../html/shop/classic.html">Classic</a>
<a class="list-group-item list-group-item-action" href="../html/shop/single-product.html">Single Product</a>
<a class="list-group-item list-group-item-action" href="../html/shop/checkout.html">Checkout</a>
</div>
<!-- End List Group -->
</div>
<div class="col-6 col-md-3 col-lg-2 order-lg-6 mb-7 mb-lg-0">
<h3 class="h6 text-white mb-3">Social</h3>
<!-- List -->
<div class="list-group list-group-flush list-group-transparent">
<a class="list-group-item list-group-item-action" href="#">
<span class="fab fa-facebook-f min-width-3 text-center mr-2"></span>
Facebook
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fab fa-twitter min-width-3 text-center mr-2"></span>
Twitter
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fab fa-dribbble min-width-3 text-center mr-2"></span>
Dribbble
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fab fa-github min-width-3 text-center mr-2"></span>
GitHub
</a>
</div>
<!-- End List -->
</div>
<div class="col-lg-4 order-lg-1 d-flex align-items-start flex-column">
<!-- Logo -->
<a class="d-inline-block mb-5" href="index.html" aria-label="Space">
<img src="../assets/svg/logos/logo-short-white.svg" alt="Logo" style="width: 40px; max-width: 100%;">
</a>
<!-- End Logo -->
<!-- Language -->
<div class="btn-group d-block position-relative mb-4 mb-lg-auto">
<a id="footerLanguageInvoker" class="btn-text-secondary d-flex align-items-center u-unfold--language-btn rounded py-2 px-3" href="javascript:;" role="button"
aria-controls="footerLanguage"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#footerLanguage"
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">
<span class="font-size-14">English</span>
<span class="fa fa-angle-down u-unfold__icon-pointer u-unfold--language-icon-pointer ml-4"></span>
</a>
<!-- Content -->
<div id="footerLanguage" class="u-unfold u-unfold--language bottom-0 left-0" aria-labelledby="footerLanguageInvoker">
<div class="py-6 px-5">
<h4 class="h6 mb-4">Select your language</h4>
<div class="row">
<div class="col-6">
<!-- List of Languages -->
<div class="list-group list-group-borderless list-group-flush">
<a class="active d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="United States Flag">
English
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/fr.svg" alt="France Flag">
Français
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/de.svg" alt="Germany Flag">
Deutsch
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/pt.svg" alt="Portugal Flag">
Português
</a>
</div>
<!-- End List of Languages -->
</div>
<div class="col-6">
<!-- List of Languages -->
<div class="list-group list-group-borderless list-group-flush">
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/es.svg" alt="Spain Flag">
Español
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/it.svg" alt="Italy Flag">
Italiano
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/ru.svg" alt="Russian Flag">
Русский
</a>
<a class="d-flex align-items-center list-group-item list-group-item-action" href="#">
<img class="max-width-3 mr-2" src="../assets/vendor/flag-icon-css/flags/4x3/tr.svg" alt="Turkey Flag">
Türkçe
</a>
</div>
<!-- End List of Languages -->
</div>
</div>
</div>
<!-- Signup -->
<a class="u-unfold--language__link p-5" href="../pages/signup-simple.html">
<small class="d-block text-muted mb-1">More languages 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 -->
</div>
<!-- End Content -->
</div>
<!-- End Language -->
<p class="small text-muted">All rights reserved. © Space. 2018 Htmlstream.</p>
</div>
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
JS library and initialization:
<!-- JS Space -->
<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>