Skip to content

Instantly share code, notes, and snippets.

@AJarombek

AJarombek/email.css

Created June 17, 2018 21:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AJarombek/5e8df26bcb3ca8f8f6b4d66640381141 to your computer and use it in GitHub Desktop.
Save AJarombek/5e8df26bcb3ca8f8f6b4d66640381141 to your computer and use it in GitHub Desktop.
Download ZIP
Creating HTML and CSS emails
Raw
email.css
/*
* Styling for a welcome email when a user subscribes
* Author: Andrew Jarombek
* Date: 6/6/2018
* Sources: [https://bit.ly/2kKJuH8, https://bit.ly/2JrEzrm]
*/
/* Apple Mail does not support max-width so set the width in a media query */
@media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
body {
font-weight: normal;
font-style: normal;
letter-spacing: 0.4px;
font-size: 18px;
background-image: url("cid:background@jarombek.com");
margin: 0;
padding: 0;
min-width: 100% !important;
}
/*
For emails styling the body tag is not fully supported, so apply the background image
style to a container table.
*/
.emailBody {
background-image: url("cid:background@jarombek.com");
}
.emailContent {
display: block;
width: 100%;
max-width: 600px;
padding: 10px;
margin: 20px auto;
background-color: white;
}
/* Displays a preview in some mail clients. Do not show in the actual email */
.emailPreheader {
color: transparent;
display: none;
height: 0;
width: 0;
overflow: hidden;
line-height: 0;
float: left;
}
.emailMain {
width: 100%;
}
.emailh5 {
padding: 40px 30px 20px 30px;
text-align: center;
font-weight: bold;
font-style: normal;
letter-spacing: 0.4px;
font-size: 28px;
}
.emailp {
padding: 0;
}
.emailTopPaddingCell {
padding: 20px 0 0 0;
}
.emailPicture img {
padding-top: 30px;
height: 60px;
}
.emailFooter a {
text-decoration: underline;
color: #aaa;
text-decoration-color: #ccc;
}
.emailButton {
letter-spacing: 0.4px;
border-radius: 4px;
margin: 4px 2px 4px 2px;
padding: 0 30px 0 30px;
cursor: pointer;
outline: none;
text-align: center;
height: 40px;
width: 150px;
border: 1.5px solid #30e3ff;
font-size: 18px;
background: #30e3ff;
box-shadow: 0 1px 5px #aaa;
}
.emailButton a {
text-decoration: none;
color: #444 !important;
}
.emailSignature {
width: 250px;
}
.emailPostSignature {
margin-top: 0;
margin-left: 12px;
font-size: 16px;
}
.emailBottom, .emailVerifyButton {
margin: 0 auto;
}
.emailLogo {
width: 60px;
}
Raw
email.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to Andrew Jarombek's Website</title>
<link rel="stylesheet" href="./welcomeEmail.css">
</head>
<!-- specify certain styles in the HTML since some mail clients aren't supportive of
certain CSS styling -->
<body bgcolor="#f6f8f1">
<table class="emailBody" width="100%" bgcolor="#f6f8f1" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="emailContent">
<span class="emailPreheader">
Thank you for subscribing to my software development website!
</span>
<table class="emailMain" width="100%" align="center" border="0"
cellpadding="10" cellspacing="10">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<p class="emailh5">
Andrew Jarombek - Software Development
</p>
<p class="emailp">
Thank you for subscribing to my software development website!
</p>
<p class="emailp">
I started developing software the summer of 2016. This website is the
central hub for all the work I do and love. I am really excited you are
joining me on my Software Development journey!
</p>
<p class="emailp">
Every month I will send you an email with updates on my progress and
cool technologies I discovered. I am trying to write 1-2 blog posts a
week, and I will inform you about those as well. Also included will be
updates on the website and some of my other applications!
</p>
<p class="emailp">
Please confirm your email address by clicking the link below. For now
this will do nothing, but in the future you will have the ability to
comment on my blog posts and more!
</p>
<table class="emailVerifyButton" align="center"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="emailButton" height="40" width="150">
<a href="https://jarombek.com/verify/{{verify}}">
VERIFY EMAIL
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p class="emailp">
Thank you!
</p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="250">
<img class="emailSignature"
src="cid:signature@jarombek.com" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p class="emailp emailPostSignature">
Andrew Jarombek
</p>
<table class="emailBottom" align="center"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="60">
<img class="emailLogo" src="cid:jarombek@jarombek.com" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="emailBottom" align="center"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="60" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="60">
<div class="emailFooter" align="center">
<a href="https://jarombek.com/unsub/{{unsub}}">
<p>Unsubscribe</p>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment