Dark Footers
Dark style of footer layouts.
Footer #1
<!-- ========== FOOTER ========== -->
<footer id="SVGcurvedShape" class="svg-preloader">
<!-- SVG Shape -->
<figure>
<img class="js-svg-injector" src="../../assets/svg/components/curved-2.svg" alt="Image Description"
data-parent="#SVGcurvedShape">
</figure>
<!-- End SVG Shape -->
<!-- Content -->
<div class="bg-dark">
<div class="container space-2 space-md-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-flex align-items-center mb-lg-auto" href="../home/index.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
<path fill="#E1E4EA" opacity=".65" d="M23,41.1L23,41.1c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4C41,33,32.9,41.1,23,41.1z"/>
<path class="fill-white" opacity=".5" d="M28,36L28,36c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3C43,0.1,46,3.1,46,6.7v11.4C46,28,38,36,28,36z"/>
<path class="fill-white" opacity=".7" d="M18,46.1L18,46.1c-10,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4C35.9,38.1,27.9,46.1,18,46.1z"/>
<path class="fill-primary" d="M17.4,34.1V18.4h10.2v2.9h-6.4v3.4H26v2.9h-4.8v6.5H17.4z"/>
</svg>
<span class="brand brand-light">Front</span>
</a>
<!-- End Logo -->
<p class="small text-white-50 mb-0">© Front. 2019 Htmlstream.<br>All rights reserved.</p>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-7 mb-md-0">
<h3 class="h6 text-white">About</h3>
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0">
<li><a class="list-group-item list-group-item-action" href="../pages/about-agency.html">About</a></li>
<li><a class="list-group-item list-group-item-action" href="../pages/services-agency.html">Services</a></li>
<li><a class="list-group-item list-group-item-action" href="../pages/careers.html">Careers</a></li>
<li><a class="list-group-item list-group-item-action" href="../pages/grid-right-sidebar.html">Blog</a></li>
</ul>
<!-- End List Group -->
</div>
<div class="col-6 col-md-4 col-lg-2 mb-7 mb-md-0">
<h3 class="h6 text-white">Account</h3>
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0">
<li><a class="list-group-item list-group-item-action" href="../account/dashboard.html">Account</a></li>
<li><a class="list-group-item list-group-item-action" href="../account/my-tasks.html">My tasks</a></li>
<li><a class="list-group-item list-group-item-action" href="../account/projects.html">Projects</a></li>
<li><a class="list-group-item list-group-item-action" href="../account/invite-friends.html">Invite friends</a></li>
</ul>
<!-- End List Group -->
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 class="h6 text-white">Contacts</h3>
<!-- Address -->
<address class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0">
<a class="list-group-item list-group-item-action" href="#">+1 (062) 109-9222</a>
<a class="list-group-item list-group-item-action" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
<a class="list-group-item list-group-item-action" href="#">153 Williamson Plaza, Maggieberg, MT 09514</a>
</address>
<!-- End Address -->
</div>
</div>
</div>
</div>
<!-- End Content -->
</footer>
<!-- ========== END FOOTER ========== -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Footer #2
<!-- ========== FOOTER ========== -->
<footer class="bg-dark">
<div class="container space-top-2">
<div class="row justify-content-lg-between mb-7">
<div class="col-6 col-md-4 col-lg-2 mb-7 mb-lg-0">
<h4 class="h6 text-white">About</h4>
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0">
<li><a class="list-group-item list-group-item-action" href="../pages/about-agency.html">About</a></li>
<li><a class="list-group-item list-group-item-action" href="../pages/services-agency.html">Services</a></li>
<li><a class="list-group-item list-group-item-action" href="../pages/careers-listing.html">Careers</a></li>
</ul>
<!-- End List Group -->
</div>
<div class="col-6 col-md-4 col-lg-2 mb-7 mb-lg-0">
<h4 class="h6 text-white">Account</h4>
<!-- List Group -->
<ul class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0">
<li><a class="list-group-item list-group-item-action" href="../account/dashboard.html">Account</a></li>
<li><a class="list-group-item list-group-item-action" href="../account/my-tasks.html">My tasks</a></li>
<li><a class="list-group-item list-group-item-action" href="../account/projects.html">Projects</a></li>
<li><a class="list-group-item list-group-item-action" href="../account/invite-friends.html">Invite friends</a></li>
</ul>
<!-- End List Group -->
</div>
<div class="col-6 col-md-4 col-lg-2 mb-7 mb-lg-0">
<h4 class="h6 text-white">Contacts</h4>
<!-- Address -->
<address class="list-group list-group-transparent list-group-white list-group-flush list-group-borderless mb-0">
<a class="list-group-item list-group-item-action" href="#">+1 (062) 109-9222</a>
<a class="list-group-item list-group-item-action" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
<a class="list-group-item list-group-item-action" 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">
<h4 class="h6 text-white mb-3">Subscribe</h4>
<!-- Subscribe Form -->
<form class="js-validate js-form-message">
<label class="sr-only" for="subscribeSrEmailExample2">Your email</label>
<div class="input-group">
<input type="email" class="form-control" name="email" id="subscribeSrEmailExample2" placeholder="Your email" aria-label="Your email" aria-describedby="subscribeButtonExample2" required
data-msg="Please enter a valid email address.">
<div class="input-group-append">
<button class="btn btn-primary" type="submit" id="subscribeButtonExample2">
<span class="fas fa-paper-plane"></span>
</button>
</div>
</div>
</form>
<!-- End Subscribe Form -->
</div>
<h4 class="h6 text-white-70 mb-3">Stay in touch</h4>
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
<span class="fab fa-facebook-f btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
<span class="fab fa-google btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
<span class="fab fa-twitter btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
<span class="fab fa-github btn-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
<div class="row justify-content-between align-items-center space-1">
<div class="col-5">
<!-- Logo -->
<a class="d-inline-flex align-items-center mb-3" href="index.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
<path fill="#E1E4EA" opacity=".65" d="M23,41.1L23,41.1c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4C41,33,32.9,41.1,23,41.1z"/>
<path class="fill-white" opacity=".5" d="M28,36L28,36c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3C43,0.1,46,3.1,46,6.7v11.4C46,28,38,36,28,36z"/>
<path class="fill-white" opacity=".7" d="M18,46.1L18,46.1c-10,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4C35.9,38.1,27.9,46.1,18,46.1z"/>
<path class="fill-primary" d="M17.4,34.1V18.4h10.2v2.9h-6.4v3.4H26v2.9h-4.8v6.5H17.4z"/>
</svg>
<span class="brand brand-light">Front</span>
</a>
<!-- End Logo -->
</div>
<div class="col-6 text-right">
<p class="small mb-0">© Front. 2019 Htmlstream.</p>
</div>
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<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');
});
</script>
Footer #3
<!-- ========== FOOTER ========== -->
<footer class="bg-dark">
<div class="container text-center space-2">
<a class="d-inline-flex align-items-center mb-3" href="index.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1399/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
<path fill="#E1E4EA" opacity=".65" d="M23,41.1L23,41.1c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4C41,33,32.9,41.1,23,41.1z"/>
<path class="fill-white" opacity=".5" d="M28,36L28,36c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3C43,0.1,46,3.1,46,6.7v11.4C46,28,38,36,28,36z"/>
<path class="fill-white" opacity=".7" d="M18,46.1L18,46.1c-10,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4C35.9,38.1,27.9,46.1,18,46.1z"/>
<path class="fill-primary" d="M17.4,34.1V18.4h10.2v2.9h-6.4v3.4H26v2.9h-4.8v6.5H17.4z"/>
</svg>
<span class="brand brand-light">Front</span>
</a>
<p class="small text-secondary">© Front. 2019 Htmlstream. All rights reserved.</p>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
Footer #4
<!-- ========== FOOTER ========== -->
<footer class="bg-dark">
<div class="container space-2">
<div class="row mb-7">
<div class="col-lg-3 mb-5 mb-lg-0">
<a class="d-inline-flex align-items-center mb-2" href="index.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
<path fill="#FFFFFF" opacity=".65" d="M23,41L23,41c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18h11.3C38,5,41,8,41,11.7V23C41,32.9,32.9,41,23,41z"/>
<path class="fill-white" opacity=".5" d="M28,35.9L28,35.9c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18l11.3,0C43,0,46,3,46,6.6V18C46,27.9,38,35.9,28,35.9z"/>
<path class="fill-white" opacity=".7" d="M18,46L18,46C8,46,0,38,0,28v0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6V28C35.9,38,27.9,46,18,46z"/>
<path class="fill-primary" d="M17.4,34V18.3h10.2v2.9h-6.4v3.4h4.8v2.9h-4.8V34H17.4z"/>
</svg>
<span class="brand brand-light">Front</span>
</a>
</div>
<div class="col-6 col-lg-2 mb-5 mb-lg-0">
<h4 class="h6 text-white font-weight-medium">Help and advice</h4>
<ul class="list-unstyled font-size-1">
<li class="py-2"><a class="text-white-70" href="#">Contact us</a></li>
<li class="py-2"><a class="text-white-70" href="#">FAQ</a></li>
<li class="py-2"><a class="text-white-70" href="#">Legal & Privacy</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-5 mb-lg-0">
<h4 class="h6 text-white font-weight-medium">About us</h4>
<ul class="list-unstyled font-size-1">
<li class="py-2"><a class="text-white-70" href="#">About Spec</a></li>
<li class="py-2"><a class="text-white-70" href="#">Careers</a></li>
</ul>
</div>
<div class="col-lg-5">
<!-- Form -->
<form class="js-validate mb-2">
<h4 class="h6 text-white font-weight-medium mb-3">Stay up to date</h4>
<div class="form-row">
<div class="col-9">
<div class="js-form-message">
<label class="sr-only" for="subscribeSrEmail">Email address</label>
<div class="input-group">
<input type="email" class="form-control" name="email" id="subscribeSrEmail" placeholder="Email address" aria-label="Email address" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<div class="col-3">
<button type="submit" class="btn btn-primary">
<span class="fas fa-arrow-right"></span>
</button>
</div>
</div>
</form>
<!-- End Form -->
<p class="text-white-70 small mb-0">New UI kits or big discounts. Never spam.</p>
</div>
</div>
<p class="small text-white-70 mb-0">© 2019 Htmlstream. All rights reserved.</p>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<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');
});
</script>