Get this deal before it ends
0 day(s) and 00 hours 00 minutes 00 seconds
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.