This theme offers a simple, but neat countdown timer as you would have seen in our demo. The countdown, much like all other elements, has been built to be as simple to use as possible so it uses a combination of simple “ul” lists and a custom data-attribute. Lets take a look at a typical example
<ul class="d-flex justify-content-around list-inline countdown-timer text-center" data-coutdown-date="12/24/2020 23:59:59" data-aos="fade-in" data-aos-delay="750"> <li class="list-inline"><span class="hero-1 mb-3 strong days">00</span><h5 class="days_text">Days</h5></li> <li class="list-inline"><span class="hero-1 mb-3 strong hours">00</span><h5 class="hours_text">Hours</h5></li> <li class="list-inline"><span class="hero-1 mb-3 strong minutes">00</span><h5 class="minutes_text">Minutes</h5></li> <li class="list-inline"><span class="hero-1 mb-3 strong seconds">00</span><h5 class="seconds_text">Seconds</h5></li> </ul>
At first this may look pretty heavy, but in reality its far from it.
To begin with we have a <ul> element with the class “countdown-timer” which is needed, as well as the special data attribute “data-countdown-date” which looks like this
data-coutdown-date="12/24/2020 23:59:59"
As you can probably guess, to set the date and time for the countdown to count to, just modify the date and time (keeping the same formatting you see in the example above) as you wish.
From there, simply add the denominators as <li> elements like you see above, and your all set.
This feature uses Countdown Clock JS – for more details on this or for more examples please see the repository here.
