Icon Blocks
Component #1
<!-- ========== FOOTER ========== -->
<footer class="bg-dark">
<div class="container">
<div class="row align-items-center pt-8 pb-4">
<div class="col-md mb-5 mb-md-0">
<h2 class="fw-medium text-white-70 mb-0">Join the thriving<br><span class="fw-bold text-white">Unify</span> business agency</h2>
</div>
<!-- End Col -->
<div class="col-md-auto">
<div class="d-grid d-sm-flex gap-3">
<a class="btn btn-primary" href="#">Request demo</a>
<a class="btn btn-ghost-light btn-pointer" href="#">Sign up free</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="border-bottom border-white-10">
<div class="row py-6">
<div class="col-6 col-sm-4 col-lg mb-7 mb-lg-0">
<span class="text-cap text-white">Resources</span>
<!-- List -->
<ul class="list-unstyled list-py-1 mb-0">
<li><a class="link link-light link-light-75" href="#">Blog</a></li>
<li><a class="link link-light link-light-75" href="#">Guidance</a></li>
<li><a class="link link-light link-light-75" href="#">Customer Stories</a></li>
<li><a class="link link-light link-light-75" href="#">Support <i class="bi-box-arrow-up-right ms-1"></i></a></li>
<li><a class="link link-light link-light-75" href="#">API</a></li>
<li><a class="link link-light link-light-75" href="#">Packages</a></li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
<div class="col-6 col-sm-4 col-lg mb-7 mb-lg-0">
<span class="text-cap text-white">Company</span>
<!-- List -->
<ul class="list-unstyled list-py-1 mb-0">
<li><a class="link link-light link-light-75" href="#">Belonging <i class="bi-box-arrow-up-right ms-1"></i></a></li>
<li><a class="link link-light link-light-75" href="#">Company</a></li>
<li><a class="link link-light link-light-75" href="#">Careers</a> <span class="fs-6 fw-bold text-primary">— We're hiring</span></li>
<li><a class="link link-light link-light-75" href="#">Contacts</a></li>
<li><a class="link link-light link-light-75" href="#">Security</a></li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
<div class="col-6 col-sm-4 col-lg mb-7 mb-sm-0">
<span class="text-cap text-white">Platform</span>
<!-- List -->
<ul class="list-unstyled list-py-1 mb-0">
<li><a class="link link-light link-light-75" href="#">Web</a></li>
<li><a class="link link-light link-light-75" href="#">Mobile</a></li>
<li><a class="link link-light link-light-75" href="#">iOS</a></li>
<li><a class="link link-light link-light-75" href="#">Android</a></li>
<li><a class="link link-light link-light-75" href="#">Figma Importing</a></li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
<div class="col-6 col-sm-4 col-lg mb-7 mb-sm-0">
<span class="text-cap text-white">Legal</span>
<!-- List -->
<ul class="list-unstyled list-py-1 mb-5">
<li><a class="link link-light link-light-75" href="#">Terms of use</a></li>
<li><a class="link link-light link-light-75" href="#">Privacy policy <i class="bi-box-arrow-up-right ms-1"></i></a></li>
</ul>
<!-- End List -->
<span class="text-cap text-white">Docs</span>
<!-- List -->
<ul class="list-unstyled list-py-1 mb-0">
<li><a class="link link-light link-light-75" href="#">Documentation</a></li>
<li><a class="link link-light link-light-75" href="#">Snippets</a></li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
<div class="col-6 col-sm-4 col-lg">
<span class="text-cap text-white">Follow us</span>
<!-- List -->
<ul class="list-unstyled list-py-2 mb-0">
<li><a class="link link-light link-light-75" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-envelope-open-fill"></i>
</div>
<div class="flex-grow-1 ms-2">
<span>Subscribe by email</span>
</div>
</div>
</a></li>
<li><a class="link link-light link-light-75" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-facebook"></i>
</div>
<div class="flex-grow-1 ms-2">
<span>Facebook</span>
</div>
</div>
</a></li>
<li><a class="link link-light link-light-75" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-linkedin"></i>
</div>
<div class="flex-grow-1 ms-2">
<span>Linkedin</span>
</div>
</div>
</a></li>
<li><a class="link link-light link-light-75" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-twitter"></i>
</div>
<div class="flex-grow-1 ms-2">
<span>Twitter</span>
</div>
</div>
</a></li>
<li><a class="link link-light link-light-75" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-slack"></i>
</div>
<div class="flex-grow-1 ms-2">
<span>Slack</span>
</div>
</div>
</a></li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<div class="row align-items-md-center py-6">
<div class="col-md mb-3 mb-md-0">
<!-- List -->
<ul class="list-inline list-px-2 mb-0">
<li class="list-inline-item"><a class="link link-light link-light-75" href="#">Privacy and Policy</a></li>
<li class="list-inline-item"><a class="link link-light link-light-75" href="#">Terms</a></li>
<li class="list-inline-item"><a class="link link-light link-light-75" href="#">Status</a></li>
<li class="list-inline-item">
<!-- Button Group -->
<div class="btn-group">
<a class="link link-light link-light-75" href="javascript:;" id="selectLanguage" data-bs-toggle="dropdown" aria-expanded="false">
<span class="d-flex align-items-center">
<img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/>
<span>English</span>
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item d-flex align-items-center active" href="#">
<img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/>
<span>English</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/>
<span>Deutsch</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/>
<span>Español</span>
</a>
</div>
</div>
<!-- End Button Group -->
</li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
<div class="col-md-auto">
<p class="fs-5 text-white-70 mb-0">© Unify. 2021</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Component #2
<!-- ========== FOOTER ========== -->
<footer class="container py-4">
<div class="row align-items-md-center text-center text-md-start">
<div class="col-md mb-3 mb-md-0">
<p class="fs-5 mb-0">© Unify. 2021 Htmlstream.</p>
</div>
<div class="col-md d-md-flex justify-content-md-end">
<!-- Socials -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="#">
<i class="bi-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="#">
<i class="bi-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="#">
<i class="bi-github"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-icon btn-sm btn-ghost-secondary rounded-circle" href="#">
<i class="bi-slack"></i>
</a>
</li>
</ul>
<!-- End Socials -->
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->