Footer style - #3
<!--begin:Footer-->
<footer id="footer" class="bg-body footer position-relative" data-bs-theme="dark">
<div class="container position-relative z-1">
<div class="row grid-separator align-items-stretch">
<!--Footer col-->
<div class="col-md-7 col-lg-4 pe-md-6 py-lg-11 py-9">
<div class="d-flex flex-column h-100">
<h6 class="mb-4 text-white-50">
Join our mail list
</h6>
<p class="mb-4 small text-white-50">Join us today and get 20% off on your first purchase</p>
<form novalidate class="needs-validation">
<div class="mb-3">
<input type="text" required placeholder="Full name"
class="form-control bg-transparent text-white border-secondary">
<span class="invalid-feedback">This field is required</span>
</div>
<div class="mb-3">
<input type="email" required placeholder="Your work Email"
class="form-control bg-transparent text-white border-secondary">
<span class="invalid-feedback">This field is required</span>
</div>
<div class="mb-3">
<p class="small text-white-50 mb-0">
By clicking on Sign me up, you agree to our <a class="fw-semibold d-table link-light"
href="#!">Terms and Conditions of Use.</a>
</p>
</div>
<div class="d-grid">
<button class="btn btn-primary" type="submit">
Sign me up
</button>
</div>
</form>
<!--:Dark Mode:-->
<div class="d-inline-flex align-items-center dropup mt-6">
<button class="btn border text-body py-1 px-3 dropdown-toggle d-flex align-items-center"
id="assan-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown"
data-bs-display="static">
<span class="theme-icon-active d-flex align-items-center">
<small>Current theme</small> <i class="bx align-middle ms-2"></i>
</span>
</button>
<!--:Dark Mode Options:-->
<ul class="dropdown-menu" aria-labelledby="assan-theme" style="--bs-dropdown-min-width: 9rem;">
<li class="mb-1">
<button type="button" class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="light">
<span class="theme-icon d-flex align-items-center">
<i class="bx bx-sun align-middle me-2"> </i>
</span>
Light
</button>
</li>
<li class="mb-1">
<button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark">
<span class="theme-icon d-flex align-items-center">
<i class="bx bx-moon align-middle me-2"></i>
</span>
Dark
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto">
<span class="theme-icon d-flex align-items-center">
<i class="bx bx-color-fill align-middle me-2"></i>
</span>
Auto
</button>
</li>
</ul>
</div>
</div>
</div>
<!--Footer col-->
<div class="col-md-5 col-lg-3 ps-md-6 py-lg-11 py-9">
<h6 class="mb-4 text-white-50">Explore</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">
Comapny
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
News & media
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Customers
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Products
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Career
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Help center
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Privacy & policy
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Terms & conditions
</a>
</li>
</ul>
</div>
<!--Footer col-->
<div class="col-md-12 col-lg-5 ps-md-6 py-lg-11 py-9">
<div class="d-flex flex-column flex-sm-row">
<div class="mb-4 flex-grow-1 mb-sm-0 pe-sm-3">
<div>
<h6 class="mb-4 text-white-50">Registered office</h6>
<p class="mb-2">
<strong class="small text-white">Company, Inc.</strong>
</p>
<p class="mb-3 text-white">
1355 Market St, Suite 900<br> San Francisco<br> CA 94103
</p>
</div>
</div>
<div class="ps-sm-3 flex-grow-1">
<h6 class="mb-4 text-white-50">Hours</h6>
<p class="text-white">
Office opening hours are 10.00am to 6.00pm
</p>
<hr>
<strong class="d-block text-white-50 small mb-2">Phone:</strong>
<a href="#!" class="fw-semibold link-underline link-light">+01 1234-56789</a>
<br><br>
<strong class="d-block text-white-50 small mb-2">Email:</strong>
<a href="mailto:mail@email.com"
class="fw-semibold link-underline link-light">mail@domain.com</a>
</div>
</div>
</div>
</div>
<div class="border-top">
<div class="row py-5">
<div class="col-sm-7 col-md-6 mb-3 mb-sm-0">
<div class="dropup d-table">
<a href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false"
class="dropdown-toggle link-light">
United States (English)
</a>
<!--Dropdown lang menu-->
<div class="dropdown-menu mb-3 dropdown-menu-lg-start">
<a href="#!" class="d-flex align-items-center dropdown-item active">
<img src="assets/img/country/us.svg" class="width-2x me-2" alt="">
United States (English)
</a>
<a href="#!" class="d-flex align-items-center dropdown-item">
<img src="assets/img/country/es.svg" class="width-2x me-2" alt="">
América Latina (Español)
</a>
<a href="#!" class="d-flex align-items-center dropdown-item">
<img src="assets/img/country/gb.svg" class="width-2x me-2" alt="">
United Kingdom (English)
</a>
<a href="#!" class="d-flex align-items-center dropdown-item">
<img src="assets/img/country/fr.svg" class="width-2x me-2" alt="">
France (Français)
</a>
<a href="#!" class="d-flex align-items-center dropdown-item">
<img src="assets/img/country/pt.svg" class="width-2x me-2" alt="">
Italia (Italiano)
</a>
</div>
</div>
</div>
<div class="col-sm-5 col-md-6 small text-sm-end">
<span class="d-block lh-sm small text-white-50">© Copyright
<script>
document.write(new Date().getFullYear())
</script>. Assan
</span>
</div>
</div>
</div>
</div>
<!--container-->
</footer>
<!--end:Footer-->
<!-- Bootstrap + Vendor + Theme -->
<link href="assets/css/theme.min.css" rel="stylesheet">