Home › Countdowns

Put the data-countdown attribute (data-countdown="Year-Month-Day Hour:Minutes") to the div containing the .content-overlay class. For example <div class="content-overlay" countdown="2017-01-20 12:00"> or <div class="content-overlay" data-countdown="2017-01-20 12:00" server-time="<?php echo date('Y-m-d H:i') ?>">.

The client browser's clock is used to calculate the difference. You probably want to use the server time, which can be set with the data-server-time attribute. With PHP it would look like this: data-server-time="<?php echo date('Y-m-d H:i') ?>"

Each block can have a background color and/or image. For example a rgba transparent color over an image. If the background is dark and the text needs to be light, add the .text-light class to the div with the .content class.

Back

Sale ends in 0 day(s) and 00h 00m 00s

Get this deal before it ends

0 day(s) and 00 hours 00 minutes 00 seconds

0 day(s) and 00h 00m 00s

Before our new website launches!

0 day(s) and 00h 00m 00s

Before the deal expires

Get it while it's hot

0 day(s) and 00 hours 00 minutes 00 seconds

We'll launch in 0 day(s) and 00h 00m 00s

Online in 0 day(s) and 00h 00m 00s