Skip to content

Instantly share code, notes, and snippets.

@jakl

jakl/index.html

Created April 9, 2014 07:38
Show Gist options
  • Save jakl/10236778 to your computer and use it in GitHub Desktop.
Save jakl/10236778 to your computer and use it in GitHub Desktop.
Download ZIP
watermark
Raw
index.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
/* Mail Chimp Boiler Plate */
#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 */
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;}
/* /Mail Chimp Boiler Plate */
body {
background-color: #DFD7D6;
line-height: 150%;
}
.newsletter {
padding: 20px;
background-color: white;
}
.side-content {
background-color: #D2D8E6;
height: 536px;
width: 300px;
}
.main-content {
background-color: #D2D8E6;
padding: 20px;
}
.content-btn {
color: white;
font-size: 14px;
font-weight: bold;
background-color: #F7941E;
width: 110px;
padding-left: 15px;
}
.footer {
color: #666;
font-family: arial;
text-decoration: none;
}
#bodyCell {
padding-top: 80px;
padding-left: 200px;
padding-right: 200px;
padding-bottom: 50px;
}
.header {
font-size: 40px;
}
.main-text {
color: #003F7D;
font-family: arial;
text-decoration: none;
font-size: 30px;
}
.quote {
color: #003F7D;
font-family: arial;
font-size: 25px;
font-style: italic;
height: 50px;
}
.sub-text {
color: #7F0E47;
font-family: arial;
text-decoration: none;
font-size: 20px;
font-style: italic;
}
.navbar-links {
font-size: 16px;
}
.navbar-spacer {
padding-right: 15px;
}
.cusion15 {
padding-bottom: 15px;
}
.cusion5 {
padding-bottom: 5px;
}
.padding5 {
padding: 5px;
}
.padding15 {
padding: 15px;
}
.full-width {
width: 100%;
}
.header-img {
height: 180px;
}
.date {
font-size: 20px;
padding-bottom: 15px;
padding-top: 15px;
color: #003F7D;
font-family: arial;
}
.height200 {
height: 200px;
}
.full-height {
height: 100%;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<div class="newsletter">
<table class="full-width">
<tr><td class="cusion15">
<a class="header main-text" href="https://www.wearewatermark.org">W A T E R M A R K</a>
</td></tr>
<tr>
<td class="cusion5">
<a class="main-text navbar-links navbar-spacer" href="https://www.wearewatermark.org/events">EVENTS</a>
<a class="main-text navbar-links navbar-spacer" href="https://www.wearewatermark.org/membership-application">MEMBERSHIP</a>
<a class="main-text navbar-links navbar-spacer" href="https://www.wearewatermark.org/programs">PROGRAMS</a>
<a class="main-text navbar-links navbar-spacer" href="https://www.wearewatermark.org/communities">COMMUNITIES</a>
<a class="main-text navbar-links navbar-spacer" href="https://www.wearewatermark.org/about">ABOUT</a>
</td>
<td align="right">
<a class="main-text">F T L Y</a>
</td>
</tr>
<tr><td colspan="100%">
<div class="header-img main-content">Header Image</div>
</td></tr>
<tr><td>
<div class="date main-text">MARCH 2014</div>
</td></tr>
</table>
<table class="full-width">
<tr><td rowspan="100%" width=1>
<div class="side-content">Side Image</div>
</td></tr>
<tr><td colspan="100%">
<div class="main-content height200">
<div class="main-text">
Section Title
</div>
<div class="sub-text">
Sub-text
</div>
Some more text in the body
<div class="content-btn">READ MORE</div>
</div>
</td></tr>
<tr><td colspan="100%" class="quote" align="center" valign="center">
"Short Quote Highlight"
</td></tr>
<tr>
<td>
<div class="main-content height200">
<div class="main-text">
Section Title
</div>
<div class="sub-text">
Sub-text
</div>
Some more text in the body
<div class="content-btn">READ MORE</div>
</div>
</td>
<td>
<div class="main-content height200">
<div class="main-text">
Section Title
</div>
<div class="sub-text">
Sub-text
</div>
Some more text in the body
<div class="content-btn">READ MORE</div>
</div>
</td>
</tr>
</table>
<table class="full-width">
<tr>
<td>
<div class="main-content height200">
<div class="main-text">
Section Title
</div>
<div class="sub-text">
Sub-text
</div>
Some more text in the body
<div class="content-btn">READ MORE</div>
</div>
</td>
<td class="main-content height200">
Bottom Image
</td>
</tr>
</table>
</div>
<div class="cusion15"></div>
<table class="full-width footer">
<tr>
<td class="padding5">
<div>© 2014. Watermark</div>
<div>Women at the Top, Making Our Mark Together</div>
<div>All Rights Reserved</div>
<div>wearewatermark.org</div>
<div><a class="footer" href="mailto:[email protected]">[email protected]</a></div>
</td>
<td class="padding5" align="right" valign="top">
<div>Privacy Statement</div>
<div>Contact Us</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment