Skip to content

Instantly share code, notes, and snippets.

@cjmosure

cjmosure/international-top-five.html

Created July 1, 2017 18:56
Show Gist options
  • Save cjmosure/029d0b65161c25ba246d6f569aa5f5ab to your computer and use it in GitHub Desktop.
Save cjmosure/029d0b65161c25ba246d6f569aa5f5ab to your computer and use it in GitHub Desktop.
Download ZIP
July international top five
Raw
international-top-five.html
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:cctd="http://www.constantcontact.com/cctd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The International Top Five</title>
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
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;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body, #bodyTable{
/*@editable*/ background-color:#f7f7f7;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell{
/*@editable*/ border-top:4px solid #f7f7f7;
}
/**
* @tab Page
* @section email border
* @tip Set the border for your email.
*/
#templateContainer{
/*@editable*/ border:none;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:"Helvetica Neue", Helvetica;
/*@editable*/ font-size:24px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:center;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:"Helvetica Neue", Helvetica;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:"Helvetica Neue", Helvetica;
/*@editable*/ font-size:20px;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:120%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family:"Helvetica Neue", Helvetica;
/*@editable*/ font-size:14px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* ========== Header Styles ========== */
/**
* @tab Header
* @section preheader style
* @tip Set the background color and bottom border for your email's preheader area.
* @theme header
*/
#templatePreheader{
}
/**
* @tab Header
* @section preheader text
* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent{
/*@editable*/ color:#808080;
/*@editable*/ font-family:"Helvetica Neue", Helvetica;
/*@editable*/ font-size:10px;
/*@editable*/ line-height:125%;
/*@editable*/ text-align:left;
}
/**
* @tab Header
* @section preheader link
* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/**
* @tab Header
* @section header style
* @tip Set the background color and borders for your email's header area.
* @theme header
*/
#templateHeader{
}
/**
* @tab Header
* @section header text
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent{
/*@editable*/ color:#404040;
/*@editable*/ font-family:"Helvetica Neue", Helvetica;
/*@editable*/ font-size:20px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ padding-top:0;
/*@editable*/ padding-right:0;
/*@editable*/ padding-bottom:0;
/*@editable*/ padding-left:0;
/*@editable*/ text-align:left;
/*@editable*/ vertical-align:middle;
}
/**
* @tab Header
* @section header link
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#00aca1;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody{
/*@editable*/ background-color:#ffffff;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent{
/*@editable*/ color:#404040;
/*@editable*/ font-family:"Helvetica Neue", Helvetica;
/*@editable*/ font-size:16px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#00aca1;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
/**
* @tab Body
* @section articles
*/
.article {
}
.article p {
margin-top: 0;
margin-bottom:10px;
margin-right:0;
margin-left: 0;
padding:0;
font-weight:300;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent{
/*@editable*/ color:#808080;
/*@editable*/ font-family:"Helvetica Neue", Helvetica;
/*@editable*/ font-size:10px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#00aca1;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<OpenTracking/>
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" width="600px">
<tr>
<td align="center" valign="top">
<!-- BEGIN PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent" style="padding-top:10px;padding-bottom:20px;text-align:;left;" align="left">
<a href="http://www.ccwa.org/"><img src="https://gallery.mailchimp.com/5b8954d4b0b860300ed11e164/images/971716d6-7d4c-4ce8-b115-14075353bfd0.png" alt="Cleveland Council on World Affairs" /></a>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="50%" class="preheaderContent" style="padding-top:10px;padding-bottom:20px; text-align:right;" align="right">
<a href="http://globalcleveland.org"><img src="https://gallery.mailchimp.com/5b8954d4b0b860300ed11e164/images/24cda936-7549-4abb-9c27-09ae202e37f0.png" alt="Global Cleveland" /></a>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // END PREHEADER -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody" width="600px">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content00">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="40"></td>
</tr>
<tr>
<td>
<h1>The International Top Five</h1>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>
<table border="0" width="100%" cellpadding="0" cellspacing="0"><tr><td width="25%">&nbsp;</td><td width="50%"style="background:none; border-bottom: 2px solid #eaeaea; height:2px; width:50%; margin:0px 0px 0px 0px;">&nbsp;</td><td width="25%">&nbsp;</td></tr></table>
</td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<table id="article1" class="article" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="125">
<a href="https://www.cfr.org/conference-calls/understanding-qatars-diplomatic-crisis"><img src="https://gallery.mailchimp.com/5b8954d4b0b860300ed11e164/images/20399b73-7112-414c-8df8-15001a9acfdf.png" width="125px" height="125px" alt="" /></a>
</td>
<td width="20">
<p>&nbsp;</p>
</td>
<td valign="top">
<h3><a href="https://www.cfr.org/conference-calls/understanding-qatars-diplomatic-crisis" style="text-decoration:none; color:#404040;">Understanding Qatar’s Diplomatic Crisis</a></h3>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">CFR experts discuss the breakdown in diplomatic ties between Qatar and neighboring Arab states, consequences for relations across the Middle East, and implications for U.S. foreign policy in the region.</p>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a href="https://www.cfr.org/conference-calls/understanding-qatars-diplomatic-crisis" style="color: #00aca1; text-decoration:none; text-transform:uppercase; font-weight:300; font-size:12px;">Read More...</a></p>
</td>
</tr>
</table>
<table height="30" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>&nbsp;</td></tr></table>
<table id="article1" class="article" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="125">
<a href="https://www.nytimes.com/video/world/middleeast/100000004978256/major-sajjad-the-battle-for-mosul.html?rref=collection%2Fsectioncollection%2Fmultimedia&action=click&contentCollection=multimedia&region=stream&module=stream_unit&version=latest&contentPlacement=3&pgtype=sectionfront"><img src="https://gallery.mailchimp.com/5b8954d4b0b860300ed11e164/images/08f7380f-685d-49e0-81dc-094d011f4655.png" width="125px" height="125px" alt="" /></a>
</td>
<td width="20">
<p>&nbsp;</p>
</td>
<td valign="top">
<h3><a href="https://www.nytimes.com/video/world/middleeast/100000004978256/major-sajjad-the-battle-for-mosul.html?rref=collection%2Fsectioncollection%2Fmultimedia&action=click&contentCollection=multimedia&region=stream&module=stream_unit&version=latest&contentPlacement=3&pgtype=sectionfront" style="text-decoration:none; color:#404040;">Inside Iraqi Battle with ISIS</a></h3>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">Explore Iraq’s fight against ISIS from Major Sajjad al-Hour as he commands 150 men through the streets of Mosul.</p>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a href="https://www.nytimes.com/video/world/middleeast/100000004978256/major-sajjad-the-battle-for-mosul.html?rref=collection%2Fsectioncollection%2Fmultimedia&action=click&contentCollection=multimedia&region=stream&module=stream_unit&version=latest&contentPlacement=3&pgtype=sectionfront" style="color: #00aca1; text-decoration:none; text-transform:uppercase; font-weight:300; font-size:12px;">Read More...</a></p>
</td>
</tr>
</table>
<table height="30" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>&nbsp;</td></tr></table>
<table id="article1" class="article" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="125">
<a href="https://www.washingtonpost.com/graphics/2017/business/environment/florida-reef/?hpid=hp_hp-top-table-main_no-name%3Ahomepage%2Fstory&utm_term=.4f7e51dce5bc"><img src="https://gallery.mailchimp.com/5b8954d4b0b860300ed11e164/images/167a3f26-fd9f-4172-967d-d755e30081d6.png" width="125px" height="125px" alt="" /></a>
</td>
<td width="20">
<p>&nbsp;</p>
</td>
<td valign="top">
<h3><a href="https://www.washingtonpost.com/graphics/2017/business/environment/florida-reef/?hpid=hp_hp-top-table-main_no-name%3Ahomepage%2Fstory&utm_term=.4f7e51dce5bc" style="text-decoration:none; color:#404040;">The Race to Save Florida’s Coral Reef from Global Warming</a></h3>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">The Paris Climate Agreement is a key factor in preventing further damage to Earth’s various ecosystems, and the tourism and seafood industries are depending on it too.</p>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a href="https://www.washingtonpost.com/graphics/2017/business/environment/florida-reef/?hpid=hp_hp-top-table-main_no-name%3Ahomepage%2Fstory&utm_term=.4f7e51dce5bc" style="color: #00aca1; text-decoration:none; text-transform:uppercase; font-weight:300; font-size:12px;">Read More...</a></p>
</td>
</tr>
</table>
<table height="30" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>&nbsp;</td></tr></table>
<table id="article1" class="article" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="125">
<a href="http://www.dw.com/en/world-in-progress-refugee-tales/av-39350768"><img src="https://gallery.mailchimp.com/5b8954d4b0b860300ed11e164/images/0b7f8022-6bad-40dd-9c9c-6e48d1813168.png" width="125px" height="125px" alt="" /></a>
</td>
<td width="20">
<p>&nbsp;</p>
</td>
<td valign="top">
<h3><a href="http://www.dw.com/en/world-in-progress-refugee-tales/av-39350768" style="text-decoration:none; color:#404040;">World in Progress: Refugee Tales</a></h3>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">Listen to stories from refugees across the global who struggle to settle into new countries and one story from a boy who has grown up in a refugee camp.</p>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a href="http://www.dw.com/en/world-in-progress-refugee-tales/av-39350768" style="color: #00aca1; text-decoration:none; text-transform:uppercase; font-weight:300; font-size:12px;">Read More...</a></p>
</td>
</tr>
</table>
<table height="30" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>&nbsp;</td></tr></table>
<table id="article1" class="article" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="125">
<a href="https://nightmarketcle.com/"><img src="https://gallery.mailchimp.com/5b8954d4b0b860300ed11e164/images/88687089-32d8-4e11-a364-b6f238381328.png" width="125px" height="125px" alt="" /></a>
</td>
<td width="20">
<p>&nbsp;</p>
</td>
<td valign="top">
<h3><a href="https://nightmarketcle.com/" style="text-decoration:none; color:#404040;">Night Market Cleveland</a></h3>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">Night Market Cleveland is a dynamic nighttime experience which connects people to the distinctive culture, community and creativity of the St. Clair Superior, Campus and Asiatown districts.</p>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a href="https://nightmarketcle.com/" style="color: #00aca1; text-decoration:none; text-transform:uppercase; font-weight:300; font-size:12px;">Read More...</a></p>
</td>
</tr>
</table>
<table border="0" width="100%" cellpadding="0" cellspacing="0"><tr><td height="30">&nbsp;</td></tr><tr><td width="25%">&nbsp;</td><td width="50%"style="background:none; border-bottom: 2px solid #eaeaea; height:2px; width:50%; margin:0px 0px 0px 0px;">&nbsp;</td><td width="25%">&nbsp;</td></tr><tr><td height="40">&nbsp;</td></tr></table>
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td width="50%" valign="top">
<h4 style="text-align:center;">Cleveland Council of World Affairs</h4>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align:center; font-weight:300; font-size:14px;line-height:130%;">Our mission is to inspire engagement in international affairs and world cultures through education, citizen diplomacy and public dialogue. </p>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align:center; font-weight:300; font-size:14px; margin:0px;padding:0px;line-height:130%;"><a href="https://visitor.r20.constantcontact.com/manage/optin/ea?v=001_8_suNgqQhF8igosAH5PqQbQUogupNqGPdl2FKZ9jD6318Y1pxkrPgABahkonY9u-AW-sWnsLe0%3D" style="color:#00aca1; text-decoration:none; text-transform:uppercase;">Subscribe</a></p>
</td>
<td width="50%" valign="top">
<h4 style="text-align:center;">Global Cleveland</h4>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align:center; font-weight:300; font-size:14px;line-height:130%;">Global Cleveland attracts, welcomes and connects international newcomers to economic and social opportunities in Cleveland and Cuyahoga County.</p>
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align:center; font-weight:300; font-size:14px; margin:0px;padding:0px;line-height:130%;"><a href="http://globalcleveland.org/newsletter" style="color:#00aca1; text-decoration:none; text-transform:uppercase;">Subscribe</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<p style="font-weight:300; font-size:18px; line-height:140%;">The International Top Five is a partnership between the <a href="http://www.ccwa.org/" style="color: #00aca1; text-decoration:none;">Cleveland Council on World Affairs</a> & <a href="http://www.globalcleveland.org/" style="color: #00aca1; text-decoration:none;">Global Cleveland</a>.</p>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment