Skip to content

Instantly share code, notes, and snippets.

@abhinavjonnada82

abhinavjonnada82/newsletterWinterSnow.html

Last active December 14, 2022 14:53
Show Gist options
  • Save abhinavjonnada82/e58001f727e6d60cddb27c87e4b929f5 to your computer and use it in GitHub Desktop.
Save abhinavjonnada82/e58001f727e6d60cddb27c87e4b929f5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
newsletterWinterSnow.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="color-scheme:light dark;supported-color-schemes:light dark;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>HTML Email Template</title>
<style type="text/css">
/* Custom Dark Mode Colors */
@media (prefers-color-scheme: dark) {
.darkmode-bg {
background: #2d2d2d!important;
color: #ffffff!important;
}
p {
color: #ffffff!important;
margin: 0;
}
.dark-btn {
background-color: #FFBF17;
color: #000000!important;
}
.darkmode-transparent {
background-color: transparent!important;
}
.dark-hyperlink {
color: #ffffff!important;
font-weight: bold;
}
}
</style>
</head>
<body style="margin:0;background-color:#cccccc;">
<table class="main" style="border-spacing:0;background-color:#2A72A5;margin:0 auto;width:300%;max-width:800px;border-spacing:20px;font-family:sans-serif;color:#171a1b;">
<!--[if (gte mso 9)|(IE)]>
<table width="300%" style="max-width: 800px;" role="presentation">
<![endif]-->
<tr>
<td style="padding: 14px 0 4px;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding: 0 32px 10px;">
<p style="margin:0;color: #ffffff;font-size: 14px; font-weight: bold; letter-spacing: 0; text-align: right; ;">View in <a class="dark-hyperlink" href="https://episphere.github.io/dashboard/newsletter/" target="_blank" style="color: #ffffff;">browser</a>
</p>
</td>
</tr>
<tr>
<td class="two-columns" style="padding:0;text-align:center;font-size:0;">
<table class="column" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;text-align:center;">
<tr>
<td style="padding: 0 18px 10px;">
<a href="https://cancer.gov/connect-prevention-study/news" target="_blank"><img src="https://github.com/episphere/dashboard/blob/dev/siteManagerDashboard/assets/images/connectlogo.png?raw=true" width="180" style="border:0;"></a>
</td>
</tr>
</table>
<table class="column" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;text-align:center;">
<tr>
<td style="padding: 10px 120px;">
<p style="margin:0;height: 25px; width: 164px;font-family: sans-serif; font-size: 22px; letter-spacing: 0; line-height: 21.8px; text-align: right; color: white;">December 2022</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding: 0 32px 3px 15px;">
<p style="margin:0;box-sizing: border-box; height: 1px; width: 760px; border: 1px solid #FFFFFF; ;"></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 32px 10px;">
<p style="margin:0;height: 33px; width: 560px; color: #ffffff; font-family: sans-serif; font-size: 28px; font-weight: bold; letter-spacing: 0; line-height: 30.8px;">What's New with Connect</p>
</td>
</tr>
<tr>
<td style="padding: 0 32px 10px;">
<a href="https://cancer.gov/connect-prevention-study/news" target="_blank"><img src="https://github.com/episphere/dashboard/blob/dev/siteManagerDashboard/assets/images/snow.gif?raw=true" alt="" width="700px" style="border:0;"></a>
<!--[if (gte mso 9)|(IE)]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:374px;">
<v:fill type="tile" src="https://github.com/episphere/dashboard/blob/dev/siteManagerDashboard/assets/images/snow.gif?raw=true" />
<v:textbox inset="0,0,0,0">
<![endif]-->
</td>
</tr>
<tr>
<td style="padding: 0 32px 10px;">
<p style="margin:0;height: 99px; width: 760px; color: #FFFFFF; font-family: sans-serif; font-size: 32px; letter-spacing: 2; line-height: 48px;">The Connect team is hard at work to grow the study and build impact!</p>
</td>
</tr>
<tr>
<td style="padding: 0 40px 10px; padding-bottom:30px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="padding:0;">
<a style="color:#171a1b;text-decoration:none;padding:12px 20px;border-radius:5px;font-weight:bold;height: 38px; width: 109px; background-color: #FFBF17;" href="https://www.cancer.gov/connect-prevention-study/news/whats-new-updates-122022" class="button dark-btn" target="_blank">Read More</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0;height: 350px; width: 900px; border-radius: 3px; background-color: #FFFFFF;" class="darkmode-bg">
<table width="100%" style="border-spacing:0;">
<tr>
<td class="two-columns last" style="padding:0;text-align:center;font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing: 0;" role="presentation">
<tr>
<td width="30" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;text-align:center;margin-right: 60px;">
<tr>
<td class="padding" style="padding:0;padding:40px;">
<table class="content" style="border-spacing:0;font-size:15px;line-height:20px;text-align:left;">
<tr>
<td style="padding:0;">
<p style="margin:0;padding-top: 10px; height: 31px; width: 294px; color: #606060; font-family: sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 0; line-height: 24.8px;">Meet La’Verne Adams from Kaiser Permanente Northwest</p>
<p style="margin:0;padding-top: 35px; height: 148px; width: 294px; color: #2E2E2E; font-family: sans-serif; font-size: 18px; letter-spacing: 0; line-height: 24px;">La’Verne shares why bringing voice and information to diverse communities is important for Connect.
<a href="https://www.cancer.gov/connect-prevention-study/news/spotlight-laverneadams-122022" class="dark-hyperlink" style="height: 24px; width: 294px; color: #2A72A5; font-family: sans-serif; font-size: 18px;
font-weight: bold; letter-spacing: 0; line-height: 24px;" target="_blank"> Read more </a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="30" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;text-align:center;">
<tr>
<td class="padding" style="padding:0;padding:40px;">
<table class="content" style="border-spacing:0;font-size:15px;line-height:20px;text-align:left;">
<tr>
<td style="padding:0;">
<a href="https://www.cancer.gov/connect-prevention-study/news/spotlight-laverneadams-122022" target="_blank"><img src="https://github.com/episphere/dashboard/blob/dev/siteManagerDashboard/assets/images/headshotimg3.jpeg?raw=true" style="border:0;max-width: 360px; margin-top: 10px; float: right;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 32px 15px;">
<p style="margin:0;"></p>
</td>
</tr>
<tr>
<td style="padding:0;height: 401px; width: 560px; border-radius: 3px; background-color: #FFFFFF; padding-bottom: 25px;" class="darkmode-bg">
<table width="100%" style="border-spacing:0;">
<tr>
<td class="two-columns last" style="padding:0;text-align:center;font-size:0;margin-right: 40px;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing: 0;" role="presentation">
<tr>
<td width="300" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;text-align:center;">
<tr>
<td style="padding:0;">
<table class="content" style="border-spacing:0;font-size:15px;line-height:20px;text-align:left;">
<tr>
<td style="padding:0;">
<p style="margin:0;padding-top: 40px; height: 50px; width: 294px; color: #606060; font-family: Tahoma; font-size: 21px; font-weight: bold; letter-spacing: 0; line-height: 24.8px;">Did You Know?</p>
<p style="margin:0;height: 100px; width: 294px; color: #2E2E2E; font-family: sans-serif; font-size: 16px; letter-spacing: 0; line-height: 20px;">The “winter blues” is real. Each year, about 16.6 million
people in the U.S. experience Seasonal Affective Disorder (SAD), also known as the “winter blues,” a type of depression related to the change in seasons. We have tips to help you feel your best this winter.
<a href="https://www.cancer.gov/connect-prevention-study/news/didyouknow-122022" class="dark-hyperlink" style="height: 24px; width: 294px; color: #2A72A5; font-family: sans-serif; font-size: 14px;
font-weight: bold; letter-spacing: 0; line-height: 20px;" target="_blank"> Read more </a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;text-align:center;">
<tr>
<td class="padding" style="padding:0;padding:40px;">
<table class="content" style="border-spacing:0;font-size:15px;line-height:20px;text-align:left;padding-left: 25px;">
<tr>
<td style="padding:0;">
<a href="https://www.cancer.gov/connect-prevention-study/news/didyouknow-122022" target="_blank"><img src="https://github.com/episphere/dashboard/blob/dev/siteManagerDashboard/assets/images/didyouknowimg.jpg?raw=true" style="border:0;max-width: 360px; margin-top: 10px; float: right;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr width="100%">
<td style="padding: 20px 0 10px 30px;">
<p style="margin:0;height: 75px; width: 760px; color: #FFFFFF; font-family: sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 0; line-height: 24px; text-align: center;">We want to hear from you! Which
topics would you like to see covered in future newsletters? Are you interested in sharing why you joined Connect? Send your feedback to <a href="mailto:[email protected]" style="color: white" target="_blank">[email protected] </a>
<br/></p>
</td>
</tr>
<tr>
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding: 0 32px 3px 15px;">
<p style="margin:0;box-sizing: border-box; height: 1px; width: 760px; border: 1px solid #FFFFFF; ;"></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0;background-color: #2A72A5; padding-bottom: 20px;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="height: 92px; width: 559px; color: #FFFFFF; font-family: sans-serif; font-size: 18px; letter-spacing: 0;
line-height: 24px; text-align: center; padding: 10px 0 20px 20px;">
<p style="margin:0;">Connect for Cancer Prevention Study</p>
<a href="https://www.cancer.gov/" style="color: white" target="_blank">National Cancer Institute</a> | <a href="https://www.nih.gov" style="color: white" target="_blank">National Institutes of Health</a><a> |
</a><a href="https://www.hhs.gov/" style="color: white" target="_blank">U.S. Department of Health and Human Services</a> | <a href="https://www.usa.gov/" style="color: white" target="_blank">USA.gov</a>
</td>
</tr>
</table>
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding:0;height: 64px; width: 559px; color: #FFFFFF; font-family: sans-serif; font-size: 15px; letter-spacing: 0; line-height: 21px; text-align: center;">
<p style="margin:0;">Connect for Cancer Prevention Study, the Connect for Cancer Prevention Study logo, and “Connect today. Prevent cancer tomorrow.”
are trademarks of the U.S. Department of Health and Human Services (HHS).®</p>
</td>
</tr>
</table>
</td>
</tr>
<!--[if (gte mso 9)|(IE)]>
</table>
<![endif]-->
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment