Copperhead Email

E-mail design and build I created for Copperhead Brewery as a personal project, my html code can be viewed below.

 

<!doctype html>
<html>
<!– <head>
help to make the email responsive –>
<!– <meta name=”viewport” content=”width-device-width, initial-scale=1″> –>

<!– help with the Windows phone –>
<!– <meta http-equiv=”X-UA-Compatible” content=”IE=edge”/> –>

<!– defines character set, eg plain english letters a-z
Unicode Transformation Format.–>

<!–<meta charset=”utf-8″>

<style type=”text/css”>

@media screen and (max-width: 600px) {

table[class=”responsive-table”] {
width: 100% !important;
}

img[class=”responsive-image”] {
max-width: 100% !important;
height: auto !important;
}

img[class=”can-images”]
{
max-width: 100% !important;
height: auto !important;
display: block;
margin: 0 auto;
}

td[class=”responsive-h1″] {
font-size: 32px !important;
}

td[class=”responsive-h2″] {
font-size: 26px !important;
}

}

</style>
</head> –>

<!– 600px MAX WIDTH body –>
<body style=”
width: 100%;
max-width: 600px;
padding: 0;
margin: 0 auto;
font-family: sans-serif;”>

<!– FULL WIDTH container 100% –>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”width: 100%;
“>
<tr>
<!–aligns nested table to center–>
<td align=”center”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″
class=”responsive-table”
style=”
background-color: #E34C7D;
color:#ffffff;
padding-bottom: 60px;”>
<tr>
<td align=”center” height=”86″
style=”background-color: #F5C408;
“>
<img src=”imgs/copperhead-logo.png” alt=”copperhead-logo”
style=”width: 65px;
height: 65px;” class=”responsive-image” />
</td>
</tr>

<tr>
<td align=”center” style=”
background-image: url(‘imgs/bg-img.png’);
background-size: contain;
background-repeat: no-repeat;”>

<img src=”imgs/alpha-can.png” alt=”alpha can” style=”
width: 60%;

margin-left: auto;
margin-right: auto;
left: 0;
right: 0;”/>

<!– <img src=”imgs/bg-img.png” alt=”alpha artwork” class=”responsive-image”
style=”width: 100%;”> –>
</td>
</tr>
<tr>
<td align=”center” class=”responsive-h1″
style=”font-size: 48px;
padding-top: 70px;
font-weight: 600;”
>
NEW
</td>
</tr>

<tr>
<td align=”center” class=”responsive-h2″ style=”background-color: #E34C7D;
font-size: 36px;
color: #ffffff;
font-family: sans-serif;
font-weight: 600;
padding-top: 25px;”>
ALPHA SERPENTIS IPA
</td>
</tr>

<tr>
<td align=”center”
style=”padding-top: 25px;
font-size: 18px;
padding-left:15%;
padding-right: 15%;
line-height: 26px;”>
From a galaxy far, far away comes a special new IPA… ALPHA SERPENTIS IPA is brewed with &amp; dry hopped twice with special Galaxy hops. Find it on tap at our brewery or in your local Conroe grocery store!
</td>
</tr>
<tr>
<td align=”center”
style=”padding-top: 25px;
font-size: 18px;
padding-left:15%;
padding-right: 15%;
line-height: 26px;”>
6.9% alc./vol. | 87 IBU
</td>
</tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ border=”0″ class=”responsive-table”>
<tr>
<td align=”center” class=”responsive-h2″ style=”padding-top: 50px;
font-size: 36px;
font-weight: 600;
“>
New IPAs
</td>
</tr>
<tr>
<td align=”center”
style=”padding-top: 25px;
font-size: 18px;
padding-left:15%;
padding-right: 15%;
line-height: 26px;”>
Love IPA? Check out our new Mongoose Slayer IPA, Alpha Serpentis IPA, Feeding Frenzy IPA &amp; our old favorite Stiker IPA.
</td>
</tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ border=”0″ class=”responsive-table”
style=”width:100%;
padding-top: 50px;”>

<tr>
<td align=”center”>
<img src=”imgs/1st-can.jpg” alt=”mongoose slayer ipa”
style=”padding: 6px;
width: 214px;”/>

<img src=”imgs/2nd-can.jpg” alt=”mongoose slayer ipa”
style=”padding: 6px;
width: 214px;”/>
</td>
</tr>
<tr>
<td align=”center”>
<img src=”imgs/3rd-can.jpg” alt=”mongoose slayer ipa”
style=”padding: 6px;
width: 214px;”/>

<img src=”imgs/4th-can.jpg” alt=”mongoose slayer ipa”
style=”padding: 6px;
width: 214px;”/>
</td>
</tr>

<!– CTA BUTTON –>
<tr>
<td align=”center” style=”padding-top: 50px;
padding-bottom: 50px;”
>
<a href=”#” target=”_blank”
style=”font-size: 16px;
font-family: sans-serif;
font-weight: 600;
color: #FFFFFF;
text-decoration: none;
display: inline-block;
padding: 15px;
border-radius: 50px;
background-color: #BA232A;

“>VIEW ALL BEERS</a>
</td>
</tr>

<!– brewery tasting –>
<tr bgcolor=”#EA853E”>
<td align=”center” style=”background-color: #EA853E;
color: #FFFFFF;
padding-top: 44px;
font-size: 26px;
font-weight: 600;
letter-spacing: 1px;
line-height: 28px;”>Brewery Tasting:
</td>
</tr>
<tr bgcolor=”#EA853E”>
<td align=”center” style=”background-color: #EA853E;
color: #FFFFFF;
line-height: 28px;
font-size: 18px;
line-height: 28px;
padding-top: 20px;”
>Tues – Fri: 4pm – 7pm
</td>
</tr>
<tr bgcolor=”#EA853E”>
<td align=”center” style=”background-color: #EA853E;
color: #FFFFFF;
line-height: 28px;
font-size: 18px;
line-height: 28px;
padding-bottom: 44px;”
>Sat: Noon – 8pm
</td>
</tr>
<tr bgcolor=”#1F1F1F”>
<td align=”center”>
<a href=”www.copperheadbrewery.com”><img src=”imgs/copperhead-logo.png” alt=”copperhead-logo” class=”responsive-image” style=”padding-top: 23px;
padding-bottom: 23px;
width: 65px;
height: 65px;”></a>
</td>
</tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ border=”0″ class=”responsive-table” bgcolor=”#1F1F1F”
style=”padding-bottom: 50px; “>
<tr>
<td align=”center”
style=”width: 300px;”>

<img src=”imgs/instagram-icon.png” alt=”instagram”
style=”padding-right: 37px;
width: 40px;
height: 40px;”>

<img src=”imgs/fb-icon.png” alt=”instagram”
style=”padding-right: 37px;
width: 40px;
height: 40px;”>

<img src=”imgs/twitter-icon.png” alt=”instagram”
style=”padding-right: 37px;
width: 40px;
height: 40px;”>

<img src=”imgs/untappd.png” alt=”instagram”
style=”width: 40px;
height: 40px;”>
</td>
</tr>
<tr>
<td align=”center”
style=”padding-left:15%;
padding-top: 50px;
padding-right: 15%;
color: #ffffff;
font-size: 10px;
line-height: 25px;”>
http://www.copperheadbrewery.com/
To stop receiving these e-mails reply with ‘STOP’
Copperhead Brewery, 822 N. Frazier, Conroe, TX 77301
Copyright © 2018 Copperhead Brewery TX, All rights reserved.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Share