IMPORTANT

by alexcat

HTML

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Email</title>
    
    <style>
    
    
    
    </style>
    
</head>
<body>

<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma !important;}
</style>
<![endif]-->

<table style="width: 100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            
            
            
            <table class="header-wrapper" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td class="header" align="center">
      <h1 class="header-text">
      CHALLENGELY
      </h1>
    </td>
  </tr>
</table>

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td class="side-border"></td>
    <td class="side-border-margin"></td>
    <td class="main-content-wrapper" align="center">
      
      <!-- content -->
      <h2>LET THE GOOD TIMES ROLL</h2>
<p>Time to tell every living thing on the planet about it. 
Just click Share and shout it out.</p>

<!-- cta -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="cta">
  <tr>
    <td align="center">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center">
            <a href="#" target="_blank">SHARE THE CHALLENGE</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!-- /cta -->

<p>We’ll let you know when your donation goal is
hit and it’s time to do that thing you promised to do</p>
      <!-- content -->
      
    </td>
    <td class="side-border-margin"></td>
    <td class="side-border"></td>
  </tr>
  <tr>
    <td class="side-border"></td>
    <td class="side-border-margin"></td>
    <td class="side-border-bottom"></td>
    <td class="side-border-margin"></td>
    <td class="side-border"></td>
  </tr>
</table>

<table cellspacing="0" cellpadding="0"...

CSS

body {
  background: #f2f2f2;
  font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif !important;
}

.header-wrapper {
  margin-top: 20px;
}

.header {
    width: 800px;
    background: #FC8385;
    color: #fff;
  }

.header-text {
  margin-top: 18px;
  margin-bottom: 18px;
  font-size: 21px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
}
  
.side-border {
  width: 100px;
}

.side-border-margin {
  width: 70px;
  background: #FFF;
}

.side-border-bottom {
  background: #fff;
  width: 460px;
  height: 25px;
}

.main-content-wrapper {
  width: 460px;
  background: #fff;
}

.footer-wrapper {
  margin-top: 50px;
  margin-bottom: 50px;
}

.company {
  color: #777e8b;
  font-size: 12px;
}

.unsubscribe {
  color: #777e8b;
  font-size: 12px;
}


.footer {
    width: 800px;
  }
  
p {
  margin-bottom: 20px;
  font-size: 19px;
  color: #777e8b;
  line-height: 27px;
}

h2 {
  margin-top: 56px;
  margin-bottom: 30px;
  color: #2196f3;
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
}

.cta {
  margin-top: 35px;
  margin-bottom: 33px;
}

.cta a {
    font-size: 17.2px;
    font-weight: 300;
    color: #ffffff;
    text-decoration: none;
    border-radius: 100px;
    background-color: #FC8385;
    border-top: 12px solid #FC8385;
    border-bottom: 12px solid #FC8385;
    border-right: 53px solid #FC8385;
    border-left: 53px solid #FC8385;
    display: inline-block;
    text-transform: uppercase;
}