HTML Countdown Timer for Email with Coupon Card

Important Notes for Email Implementation:
JavaScript Limitations: Most email clients don't support JavaScript, so the countdown won't update in most cases. 

For a more reliable solution:

Consider using a static expiration time ("Offer expires May 31, 2023")

Or use a service that generates a new image with the current countdown time when the email is opened

Image Hosting: Replace placeholder image URLs with your actual hosted images.

Email Client Testing: Always test your email in various clients (Outlook, Gmail, Apple Mail, etc.) as rendering can vary significantly.

Fallback Content: The static "24:00:00" display serves as a fallback for clients that don't support JavaScript.

Responsive Design: This template is designed to work on mobile devices as well as desktop.

For a more reliable countdown in emails, you might want to consider using an animated GIF or linking to a web page with the live countdown.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Limited Time Offer</title> </head> <body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f5f5f5;"> <!-- Email container --> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f5f5;"> <tr> <td align="center" valign="top"> <!-- Main content table (600px max width for email clients) --> <table border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #ffffff; border-collapse: collapse;"> <!-- Header --> <tr> <td align="center" style="padding: 20px 0; background-color: #ffffff;"> <img src="https://via.placeholder.com/150x50" alt="Company Logo" width="150" style="display: block;"> </td> </tr> <!-- Hero image --> <tr> <td> <img src="https://via.placeholder.com/600x200" alt="Special Offer" width="600" style="display: block; width: 100%; max-width: 600px;"> </td> </tr> <!-- Offer section --> <tr> <td style="padding: 30px 40px; text-align: center;"> <h1 style="margin: 0 0 20px 0; color: #333333; font-size: 28px;">Limited Time Offer!</h1> <p style="margin: 0 0 30px 0; color: #666666; font-size: 16px; line-height: 24px;"> Your exclusive discount is waiting! Use the coupon code below before time runs out. </p> <!-- Countdown timer --> <table border="0" cellpadding="0" cellspacing="0" align="center" style="margin: 0 auto 30px auto; background-color: #f8f8f8; border-radius: 8px; padding: 15px;"> <tr> <td align="center" style="padding: 5px;"> <div style="font-size: 14px; color: #666666; font-weight: bold; margin-bottom: 5px;">OFFER EXPIRES IN</div> </td> </tr> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding: 0 5px;"> <div style="background-color: #e74c3c; color: #ffffff; border-radius: 5px; padding: 10px; min-width: 40px; text-align: center; font-weight: bold; font-size: 20px;" id="countdown-hours">24</div> <div style="font-size: 10px; color: #666666; text-align: center; padding-top: 5px;">HOURS</div> </td> <td style="padding: 0 5px;"> <div style="background-color: #e74c3c; color: #ffffff; border-radius: 5px; padding: 10px; min-width: 40px; text-align: center; font-weight: bold; font-size: 20px;" id="countdown-minutes">00</div> <div style="font-size: 10px; color: #666666; text-align: center; padding-top: 5px;">MINUTES</div> </td> <td style="padding: 0 5px;"> <div style="background-color: #e74c3c; color: #ffffff; border-radius: 5px; padding: 10px; min-width: 40px; text-align: center; font-weight: bold; font-size: 20px;" id="countdown-seconds">00</div> <div style="font-size: 10px; color: #666666; text-align: center; padding-top: 5px;">SECONDS</div> </td> </tr> </table> </td> </tr> </table> <!-- Coupon card --> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 2px dashed #e74c3c; border-radius: 10px; margin-bottom: 30px;"> <tr> <td align="center" style="padding: 20px;"> <div style="font-size: 16px; color: #666666; margin-bottom: 10px;">USE CODE AT CHECKOUT</div> <div style="font-size: 28px; font-weight: bold; color: #e74c3c; letter-spacing: 3px; padding: 10px 20px; background-color: #f8f8f8; border-radius: 5px; display: inline-block;">SAVE20</div> <div style="font-size: 16px; color: #666666; margin-top: 15px;">20% OFF YOUR NEXT PURCHASE</div> </td> </tr> </table> <!-- CTA button --> <table border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td align="center" style="border-radius: 5px;" bgcolor="#e74c3c"> <a href="https://example.com/redeem" target="_blank" style="font-size: 16px; color: #ffffff; text-decoration: none; border-radius: 5px; padding: 12px 30px; border: 1px solid #e74c3c; display: inline-block; font-weight: bold;">SHOP NOW & SAVE</a> </td> </tr> </table> </td> </tr> <!-- Footer --> <tr> <td style="padding: 20px 40px; background-color: #f8f8f8; text-align: center; font-size: 12px; color: #999999;"> <p style="margin: 0;">© 2023 Your Company. All Rights Reserved.</p> <p style="margin: 10px 0 0 0;"> <a href="#" style="color: #999999; text-decoration: underline;">Privacy Policy</a> | <a href="#" style="color: #999999; text-decoration: underline;">Unsubscribe</a> </p> </td> </tr> </table> </td> </tr> </table> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


        /* Client-specific styles */
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
        
        /* Reset styles */
        body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
        
        /* iOS BLUE LINKS */
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


 // Set the date we're counting down to (24 hours from now)
        var countDownDate = new Date();
        countDownDate.setHours(countDownDate.getHours() + 24);
        
        // Update the count down every 1 second
        var x = setInterval(function() {
            // Get today's date and time
            var now = new Date().getTime();
            
            // Find the distance between now and the count down date
            var distance = countDownDate - now;
            
            // Time calculations for hours, minutes and seconds
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            // Display the result
            document.getElementById("countdown-hours").innerHTML = hours < 10 ? "0" + hours : hours;
            document.getElementById("countdown-minutes").innerHTML = minutes < 10 ? "0" + minutes : minutes;
            document.getElementById("countdown-seconds").innerHTML = seconds < 10 ? "0" + seconds : seconds;
            
            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("countdown-hours").innerHTML = "00";
                document.getElementById("countdown-minutes").innerHTML = "00";
                document.getElementById("countdown-seconds").innerHTML = "00";
            }
        }, 1000);
We hope you would like this Calculator using html css and javascript code

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome