Countdown with background image

A countdown timer shows the remaining time to a target. You can provide a background with an overlay to achieve cool results without much work.

Show Full Syntax...

Syntax

{{< countdown-1
add-days-count="Any number"
background-image="Any valid image link"
date="Any date. Ex: 26 may 2023"
expired-message-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
expired-message-text="Any text"
is-open-in-new="true|false"
link="Any valid http link"
link-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
loading-text="Any text"
loading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /countdown-1 >}}

Default Sample

Loading...

Other Samples

Loading...

Loading...