HTML email templates for anything.

View a live version of this template here.

Steps

1. Download this repo
2. View template.html to see examples of how different elements were created
3. Make changes to template.html to fit your messaging
4. Copy and paste template.html into your email service
5. Make sure to replace line 9 with the entire contents of style.min.css
6. It should look like this

<style>
#outlook a{padding:0}.ReadMsgBody{width:100%}.ExternalClass{width:100%}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%}body,table,td,p,a,li,blockquote{-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}body{margin:0;padding:0}img{border:0;height:auto;line-height:100%;outline:none;text-decoration:none}table{border-collapse:collapse !important}body,#bodyTable,#bodyCell{height:100% !important;margin:0;padding:0;width:100% !important}table{border-collapse:separate}a,a:link,a:visited{text-decoration:none;color:#00788a}a:hover{text-decoration:underline}h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht{color:#000 !important}p{margin-bottom:0}.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td{line-height:100%}.ExternalClass{width:100%}h1,h2,h3,h4,h5,h6{letter-spacing:1px !important;font-weight:bold !important;font-family:Helvetica,Arial,sans-serif}.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{color:#2c3e50}.highlight h1,.highlight h2,.highlight h3,.highlight h4,.highlight h5,.highlight h6,.highlight a,.highlight p{color:#fff !important;margin:0}p,.container,.container p{line-height:1.6;font-family:Helvetica,Arial,sans-serif}hr{height:3px;border:none;background:#ecf0f1}h1{font-size:24px !important;line-height:1.2 !important}h2{font-size:20px !important;line-height:1.2 !important}h3{font-size:18px !important;line-height:1.2 !important}h4{font-size:15px !important;line-height:1.4 !important}h5{font-size:12px !important;line-height:1.4 !important}h6{font-size:10px !important;line-height:1.4 !important}.button{background:#3498db;color:#fff !important;padding:10px !important;border-radius:3px !important;font-size:18px !important;line-height:45px;white-space:nowrap}.button:hover{opacity:0.8}.button,.highlight .button{margin-top:1em;margin-bottom:1em}.button a{color:#fff}.button-light{background:#ecf0f1}.button-facebook{background:#3b5998}.button-twitter{background:#55acee}.button-instagram{background:#3f729b}.box{padding:10px;border:3px solid #d5dadd;border-radius:3px;background:#ecf0f1}.light-text{opacity:0.8}.lighter-text{opacity:0.5}.center-text{text-align:center}.big-text{font-size:18px !important;line-height:1.4 !important;opacity:0.9 !important}.bigger-text{font-size:42px !important;line-height:1.4 !important}.small-text{font-size:12px !important;line-height:1.4 !important;opacity:0.7}.no-margin{margin:0px}.full{width:100%}.split-table{width:100% !important;border-radius:3px}.split-table td{width:50% !important;padding:10px !important;vertical-align:top}.vertical-border td{border:3px solid #d5dadd}.table-hover:hover{background:#fff}.table-color{border:3px solid #d5dadd;border-radius:3px;background:#ecf0f1}body{margin:0;font-family:Helvetica, Arial, sans-serif;line-height:1.618;word-break:break-word;color:#555;background:#ecf0f1}table.body{margin:0 auto;max-width:100%;width:100%;background:#ecf0f1}table.row,table.columns{width:100%}.container{padding:10px;margin:10px;margin-top:0px;margin-bottom:0px;width:95%;max-width:580px}.column{padding:25px;padding-left:10%;padding-right:10%}.top-corner{border-top-right-radius:5px;border-top-left-radius:5px}.bottom-corner{border-bottom-right-radius:5px;border-bottom-left-radius:5px}.background{background:#ecf0f1}.content{background:#fff}.highlight{background:#2c3e50;color:#fff !important}.highlight a{text-decoration:underline}img{max-width:100%}
/*# sourceMappingURL=style.min.css.map */
</style>

Some email services require that you inline all your styles. This can be done using something like this.

1. Follow above steps and paste final code into the inliner tool
2. Resulting code should work almost everywhere!