Logo v4.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Content
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid List
  • Directory
    Grid List
  • Testimonials
  • Blogs
    Grid List
  • Tables
  • E-commerce
  • Pricing
  • Team Sections
  • Breadcrumb
  • Call-to-Action (CTA)
  • Modals
  • Portfolio
  • Gallery
  • Clients
  • Countdown
  • FAQ
  • Lists
  • Collapse/Accordion
  • Comments
  • Feedback & Reviews
  • User Profile
  • Sidebar Examples
  • Calendar View
  • Notification
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Directory
  • Subscribe
  • Account
  • Wizard & Steps
  • Contact / Footer
  • Contact Sections
  • Footer

Countdown

Component #1

  • 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-md-flex">
                  <div class="container d-md-flex align-items-md-center vh-md-100 content-space-t-3 content-space-b-1 content-space-b-md-3 content-space-md-0">
                    <div class="row justify-content-md-between align-items-md-center flex-grow-1">
                      <div class="col-9 col-md-5 mb-5 mb-md-0">
                        <img class="img-fluid" src="../assets/svg/illustrations/oc-yelling.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 border">
                            <div class="input-card-form">
                              <label for="subscribeForm" class="form-label visually-hidden">Enter email</label>
                              <input type="text" 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 -->
                <script src="../node_modules/countdown/countdown.js"></script>

                <script>
                  (function () {
                    // 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>