Form Layouts: Subscribe
Component #1
Get industry insights that you won't delete, straight in your inbox
<!-- Subscribe -->
<div class="overflow-hidden">
<div class="container content-space-1">
<div class="position-relative bg-soft-primary rounded-3 p-7">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-6 mb-3 mb-lg-0">
<h2>Get industry insights that you won't delete, straight in your inbox</h2>
</div>
<!-- End Col -->
<div class="col-lg-5">
<form>
<!-- Input Card -->
<div class="input-card input-card-sm mb-3">
<div class="input-card-form">
<label for="subscribeFormEg1" class="form-label visually-hidden">Enter email</label>
<input type="email" class="form-control form-control-lg" id="subscribeFormEg1" placeholder="Enter email" aria-label="Enter email">
</div>
<button type="button" class="btn btn-primary btn-lg" id="heroNameAddOnEg1">Subscribe</button>
</div>
<!-- End Input Card -->
</form>
<a class="link link-pointer" href="../page-login.html">Create a free account</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- SVG Shape -->
<figure class="position-absolute top-0 end-0 zi-n1 d-none d-md-block mt-10 me-n10" style="width: 4rem;">
<img class="img-fluid" src="../assets/svg/components/pointer-up.svg" alt="Image Description">
</figure>
<!-- End SVG Shape -->
<!-- SVG Shape -->
<figure class="position-absolute bottom-0 start-0 zi-n1 ms-n10 mb-n10" style="width: 15rem;">
<img class="img-fluid" src="../assets/svg/components/curved-shape.svg" alt="Image Description">
</figure>
<!-- End SVG Shape -->
</div>
</div>
</div>
<!-- End Subscribe -->
Component #2
Subscribe for Beta and be the first to try our Web Application!
<!-- Subscribe -->
<div class="container content-space-1">
<!-- Heading -->
<div class="w-lg-65 text-center mx-lg-auto mb-7">
<h3>Subscribe for Beta and be the first to try our Web Application!</h3>
</div>
<!-- End Heading -->
<div class="text-center mx-auto" style="max-width: 32rem;">
<form>
<!-- Input Card -->
<div class="input-card border mb-5">
<div class="input-card-form">
<label for="subscribeFormEg2" class="form-label visually-hidden">Enter email</label>
<input type="email" class="form-control form-control-lg" id="subscribeFormEg2" placeholder="Enter email" aria-label="Enter email">
</div>
<button type="button" class="btn btn-primary btn-lg" id="heroNameAddOnEg2">Subscribe</button>
</div>
<!-- End Input Card -->
</form>
<a class="link" href="../page-login.html">Create a free account <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Subscribe -->
Component #3
We're coming soon.
Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.
Days
Hours
Mins
Secs
<!-- Content -->
<div class="d-sm-flex">
<div class="container d-sm-flex align-items-sm-center vh-sm-100 content-space-t-3 content-space-b-1 content-space-b-sm-3 content-space-sm-0">
<div class="row justify-content-md-between align-items-md-center flex-grow-1">
<div class="col-9 col-md-5 col-md-4 mb-5 mb-md-0">
<img class="img-fluid" src="../assets/svg/illustrations/plane.svg" alt="SVG Illustration">
</div>
<!-- End Col -->
<div class="col-md-6">
<!-- Heading -->
<div class="mb-4">
<h1>We're coming soon.</h1>
<p>Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.</p>
</div>
<!-- End Heading -->
<div class="js-countdown row mb-5">
<div class="col-3">
<h2 class="js-cd-days h1 text-primary mb-0"></h2>
<h5 class="mb-0">Days</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-hours h1 text-primary mb-0"></h2>
<h5 class="mb-0">Hours</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-minutes h1 text-primary mb-0"></h2>
<h5 class="mb-0">Mins</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-seconds h1 text-primary mb-0"></h2>
<h5 class="mb-0">Secs</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<form>
<!-- Input Card -->
<div class="input-card input-card-sm">
<div class="input-card-form">
<label for="subscribeForm" class="form-label visually-hidden">Enter email</label>
<input type="email" class="form-control form-control-lg" id="subscribeForm" placeholder="Enter email" aria-label="Enter email">
</div>
<button type="button" class="btn btn-primary btn-lg">Subscribe</button>
</div>
<!-- End Input Card -->
</form>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Content -->
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [..] -->
<script src="../node_modules/countdown/countdown.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF NAVBAR
// =======================================================
new HSHeader('#header').init()
// INITIALIZATION OF MEGA MENU
// =======================================================
const megaMenu = new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
// INITIALIZATION OF COUNTDOWN
// =======================================================
const oneYearFromNow = new Date()
document.querySelectorAll('.js-countdown').forEach(item => {
const days = item.querySelector('.js-cd-days'),
hours = item.querySelector('.js-cd-hours'),
minutes = item.querySelector('.js-cd-minutes'),
seconds = item.querySelector('.js-cd-seconds')
countdown(oneYearFromNow.setFullYear(
oneYearFromNow.getFullYear() + 1),
ts => {
days.innerHTML = ts.days
hours.innerHTML = ts.hours
minutes.innerHTML = ts.minutes
seconds.innerHTML = ts.seconds
},
countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS
)
})
})()
</script>