Logo v3.2.2
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v3.2.2
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Foundations
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid List
  • Testimonials
  • Pricing
  • Team Sections
  • Call-to-Action (CTA)
  • Gallery
  • Clients
  • FAQ
  • Comments
  • User Profile
  • Sidebar Examples
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Subscribe
  • Contact / Footer
  • Contact Sections
  • Footer

Form Layouts: Subscribe

Component #1

  • Preview
  • HTML

Get industry insights that you won't delete, straight in your inbox

Create a free account
Image Description
Image Description
              
                <!-- 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

  • Preview
  • HTML

Subscribe for Beta and be the first to try our Web Application!

Create a free account
              
                <!-- 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

  • Preview
  • HTML
  • JS
SVG Illustration

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>