<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> body { font-family: Calibri, Arial, Verdana; } table { border: 0; border-collapse: collapse; <!--[if mso]> border-spacing: 0px; table-layout: fixed; <![endif]--> } tr { display: flex; } #progressbar { color: #000; background-color: #f1f1f1; width: 100%; } {% if (percent >= 95) %} #progressbar { color: #fff; background-color: #FF0000; text-align: center; width: {{percent}}%; } {% elif (percent < 95) and (percent >= 80) %} #progressbar { color: #fff; background-color: #FF8C00; text-align: center; width: {{percent}}%; } {% else %} #progressbar { color: #fff; background-color: #00B000; text-align: center; width: {{percent}}%; } {% endif %} #graybar { background-color: #D8D8D8; width: {{100 - percent}}%; } a:link, a:visited { color: #858585; text-decoration: none; } a:hover, a:active { color: #4a81bf; } </style> </head> <body> <table> <tr> <td colspan="2"> Hi {{username}}!<br /><br /> Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br /><br /> </td> </tr> <tr> <td id="progressbar">{{percent}}%</td> <td id="graybar"></td> </tr> </table> </body> </html>