Page Footer

Explore the type of footer in Nubra UI.

Footer simple

Add data-footer="simple" in wrapper class and paste below snippet in  section.

Preview
HTML

														
<div class="hk-footer">
	<footer class="container-xxl footer py-0">
		<div class="row">
			<div class="col-xl-8">
				<p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
			</div>
			<div class="col-xl-4">
				<a href="#" class="footer-extr-link"><span class="feather-icon"><i data-feather="external-link"></i></span><u>Send feedback to our help forum</u></a>
			</div>
		</div>
	</footer>
</div>

Footer complex

Add data-footer="complex" in wrapper class and paste below snippet in  section.

Preview
HTML

														
<div class="hk-footer">
	<footer class="container-xxl footer">
		<div class="row h-auto">
			<div class="col-xl-6">
				<a class="footer-brand" href="#">
					<img class="brand-img d-inline-block img-fluid" src="dist/img/logo-light.svg" alt="brand" />
				</a>
				<p class="footer-info-text">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
			</div>
			<div class="col-xl-6">
				<div class="row">
					<div class="col-md-4">
						<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">About us</a>
						<a href="#" class="quick-links">Terms</a>
						<a href="#" class="quick-links">Jobs</a>
						<a href="#" class="quick-links">Developer Jobs</a>
					</div>
					<div class="col-md-4">
						<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">Contact Us</a>
						<a href="#" class="quick-links">Blog</a>
						<a href="#" class="quick-links">Testimonials</a>
						<a href="#" class="quick-links">Faq</a>
					</div>
					<div class="col-md-4">
					<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">Documentation</a>
						<a href="#" class="quick-links">Support</a>
						<a href="#" class="quick-links">Legal Terms</a>
						<a href="#" class="quick-links">Help</a>
					</div>
				</div>
			</div>
			
		</div>
		<div class="row h-auto">
			<div class="col-xl-8">
				<p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
			</div>
			<div class="col-xl-4">
				<div class="footer-social-btn-wrap">
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-facebook"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-linkedin"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-google"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-twitter"></i></span></a>
				</div>
			</div>
		</div>
	</footer>
</div>

Footer simple
Footer complex