Skip to content

Instantly share code, notes, and snippets.

@skhani

skhani/gist:1a835257a46ce2a58b74

Created January 28, 2015 22:10
Show Gist options
  • Save skhani/1a835257a46ce2a58b74 to your computer and use it in GitHub Desktop.
Save skhani/1a835257a46ce2a58b74 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.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>
<!-- If you delete this tag, the sky will fall on your head -->
<style type="text/css">
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
}
* {
font-family: Arial, "Helvetica", Helvetica, sans-serif;
}
img {
max-width: 100%;
}
.collapse {
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #b0a59b;
}
.btn {
text-decoration: none;
color: #FFF;
background-color: #666;
padding: 10px 16px;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
}
p.callout {
/*padding: 15px;*/
background-color: #fff;
margin-bottom: 15px;
margin: 10px 60px 10px 60px;
line-height: 41px;
font-size: 33px;
color: #47413E;
text-align: center;
}
.callout a {
font-weight: bold;
color: #2BA6CB;
}
table.social {
/* padding:15px; */
background-color: #EEE9E4;
color: #b0a59b;
font-size: 12px;
line-height: 16px;
height: 240px;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap {
width: 100%;
}
.header.container table td.logo {
padding: 15px;
}
.header.container table td.label {
padding: 15px;
padding-left: 0px;
}
.header .content {
padding: 6px 15px 6px 15px;
max-width: 600px;
margin: 0 auto;
display: block;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
height: 32px
}
.blurb {
margin-left: 60px;
margin-right: 60px;
text-align: center;
font-size: 16px;
line-height: 27px;
color: #7A6E65;
}
.social-foot {
color: #b0a59b;
line-height: 16px;
font-size: 12px;
text-align: center;
margin: 0 60px 0 60px;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container td.content p {
border-top: 1px solid rgb(215, 215, 215);
padding-top: 15px;
}
.footer-wrap .container td.content p {
font-size: 10px;
font-weight: bold;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.1;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 900;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
.collapse {
margin: 0!important;
}
p,
ul {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
line-height: 1.6;
}
p.lead {
font-size: 17px;
}
p.last {
margin-bottom: 0px;
}
ul li {
margin-left: 5px;
list-style-position: inside;
}
/* -------------------------------------
SIDEBAR
------------------------------------- */
ul.sidebar {
background: #ebebeb;
display: block;
list-style-type: none;
}
ul.sidebar li {
display: block;
margin: 0;
}
ul.sidebar li a {
text-decoration: none;
color: #666;
padding: 10px 16px;
/* font-weight:bold; */
margin-right: 10px;
/* text-align:center; */
cursor: pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #FFFFFF;
display: block;
margin: 0;
}
ul.sidebar li a.last {
border-bottom-width: 0px;
}
ul.sidebar li a h1,
ul.sidebar li a h2,
ul.sidebar li a h3,
ul.sidebar li a h4,
ul.sidebar li a h5,
ul.sidebar li a h6,
ul.sidebar li a p {
margin-bottom: 0!important;
}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
/* makes it centered */
clear: both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
/*padding:15px;*/
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
.social .social-icons {
margin: 15px 0 15px 0;
text-align: center;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear {
display: block;
clear: both;
}
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) {
a[class="btn"] {
display: block!important;
margin-bottom: 10px!important;
background-image: none!important;
margin-right: 0!important;
}
div[class="column"] {
width: auto!important;
float: none!important;
}
table.social div[class="column"] {
width: auto!important;
}
}
</style>
<title></title>
</head>
<body bgcolor="#FFFFFF" style=" -webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;">
<!-- HEADER -->
<table class="head-wrap" bgcolor="#EEE9E4" style="width: 100%;">
<tr>
<td></td>
<td class="header container">
<div class="content" style="padding:6px 15px 6px 15px;
max-width:600px;
margin:0 auto;
display:block;">
<table bgcolor="#EEE9E4">
<tr>
<td align="center" style="text-align:center; font-size:11px; color:#929291; font-family:arial">Email not displaying correctly? <a href="%%VIEWONLINE%%" target="_blank" style="color:#47413E">View it in your browser</a>
</td>
<!-- <td align="right"><h6 class="collapse">Hero</h6></td> -->
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table>
<!-- /HEADER -->
<!--[if mso]>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<![endif]-->
<!-- BODY -->
<table class="body-wrap" style="width: 100%;">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF" style="display:block!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;">
<div class="content" style=" max-width:600px;
margin:0 auto;
display:block;">
<table>
<tr>
<td>
<table id="header" >
<tr>
<td class="imagetd" style="width:25%">
<h3><a href="http://www.rachaelrayshow.com" target="_blank"><img alt="Rachel" src="http://email.rachaelrayshow.com/cimages/cdb4daeef9acf553b6a97c59c8c97ad4/rachel-logo.jpg"></a></h3>
</td>
<td class="secondtd">
<table style="">
<tr>
<td style="border-bottom: 1px dotted #bbb;">
<span style="float:right;margin-bottom: 10px;">
<table border="0" cellspacing="0" cellpadding="0" class="socialicons" align="right">
<tbody>
<tr>
<td style="padding-right:15px;">
<a href="http://www.facebook.com/therachaelrayshow" target="_blank">
<img border="0" src="http://email.rachaelrayshow.com/cimages/cdb4daeef9acf553b6a97c59c8c97ad4/facebook-icon-small.jpg" alt="Facebook" style="display:block; border:0px;" title="Facebook" id="Facebook" />
</a>
</td>
<td style="padding-right:15px;">
<a href="http://www.twitter.com/rachaelrayshow" target="_blank">
<img border="0" src="http://email.rachaelrayshow.com/cimages/cdb4daeef9acf553b6a97c59c8c97ad4/twitter-icon-small.jpg" alt="Twitter" style="display:block; border:0px;" title="Twitter" id="Twitter" />
</a>
</td>
<td style="padding-right:15px;">
<a href="https://plus.google.com/+RachaelRayShow" target="_blank">
<img border="0" src="http://email.rachaelrayshow.com/cimages/cdb4daeef9acf553b6a97c59c8c97ad4/googleplus-icon-small.jpg" alt="Google+" style="display:block; border:0px;" title="Google+" id="Google+" />
</a>
</td>
<td style="">
<a href="http://pinterest.com/rachaelrayshow/" target="_blank">
<img border="0" src="http://email.rachaelrayshow.com/cimages/cdb4daeef9acf553b6a97c59c8c97ad4/pinterest-icon-small.jpg" alt="Instagram" style="display:block; border:0px;" title="Instagram" id="Instagram" />
</a>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
<tr>
<td style="padding-top:5px">
<span style="float:right; font-size:17px">
<span style="color:#FF3800">Recipe of the Week</span>
<span style="color:#c5a55f">/</span>
<span style="color:#7A6E65">Fri, January 22, 2015</span>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<!-- A Real Hero (and a real human being) -->
<p>
<a href="http://www.rachaelrayshow.com" target="_blank"><img src="http://email.rachaelrayshow.com/cimages/cdb4daeef9acf553b6a97c59c8c97ad4/rr-recipe-image.jpg" /></a>
</p>
<!-- /hero -->
<!-- Callout Panel -->
<p class="callout" style="background-color: #fff;
margin-bottom: 15px;
margin : 10px 60px 10px 60px;
line-height: 39px;
font-size: 33px;
color: #47413E;
text-align: center;">
<a href="http://www.rachaelrayshow.com" target="_blank" style="color: #47413E; text-decoration: none;">
Weeknight Porchetta Tenderloin on Ciabatta, Muffaletta-Style
</a>
</p>
<!-- /Callout Panel -->
<p style="text-align:center; margin:10px 0px">
<img src="http://email.rachaelrayshow.com/cimages/cdb4daeef9acf553b6a97c59c8c97ad4/divider.jpg" />
</p>
<p class="blurb" style="margin-left: 60px;
margin-right: 60px;
text-align: center;
font-size: 16px;
line-height: 27px;
color: #7A6E65;">
<a href="http://www.rachaelrayshow.com" target="_blank" style=" text-decoration: none;">
Music Lengend Donny Osmond is Rach's co-host when she's cooking Prochetta Tenderloin on Ciabatta in a Muffaletta-Style.
</a>
</p>
<br/>
<br/>
<!-- Social Footer -->
<!-- social & contact -->
<!-- social class -->
<table class="" width="100%" style="background-color: #EEE9E4;
color:#b0a59b;
font-size:12px;
line-height: 16px;
padding:5px 0px 10px 0px;
">
<tr>
<td>
<p class="social-icons" style="margin:15px 0 15px 0;
text-align:center;">
<img src="http://email.rachaelrayshow.com/cimages/cdb4daeef9acf553b6a97c59c8c97ad4/social-button-bar.jpg" usemap="#socialmap" />
<!-- http://imagemap-generator.dariodomi.de/ -->
<map name="socialmap" id="socialmap">
<area alt="Facebook" title="Facebook" href="http://www.facebook.com/therachaelrayshow" shape="poly" coords="22,1,44,22,24,42,3,23" />
<area alt="Twitter" title="Twitter" href="http://www.twitter.com/rachaelrayshow" shape="poly" coords="75,1,97,20,78,41,56,22" />
<area alt="Google Plus" title="Google Plust" href="https://plus.google.com/+RachaelRayShow" shape="poly" coords="129,1,151,21,132,43,110,22" />
<area alt="Pintrest" title="Pintrest" href="http://pinterest.com/rachaelrayshow/" shape="poly" coords="184,1,205,22,186,42,165,24" />
</map>
</p>
<p class="social-foot" style=" color: #b0a59b;
line-height: 16px;
font-size: 12px;
text-align: center;
margin: 0 60px 0 60px;
padding:10px 0px 10px 0px;
">
You are receiving this email because you opted to receive information about CBS, Entertainment Tonight, and/or Daily First. If you feel that you've received this email in error, you can <a href="%%OPTOUT%%">unsubscribe here</a>
</p>
<p class="social-foot" style="color: #b0a59b;
line-height: 16px;
font-size: 12px;
text-align: center;
margin: 0 60px 0 60px;
padding:10px 0px 10px 0px;">
Having trouble viewing the images in this email? <a href="%%VIEWONLINE%%" target="_blank">Click here to view it in your browser</a>
</p>
<p style="border-bottom: 1px solid #dad5d2;
text-align: center;
margin: 0px 40px 0px 40px;"></p>
<p class="social-foot" style="color: #b0a59b;
line-height: 16px;
font-size: 12px;
text-align: center;
margin: 0 60px 0 60px;
padding:10px 0px 10px 0px;
">
<strong>CBS Television Distribution, 4024 Radford Ave., Studio City, CA 91604</strong>
<br/>All Rights Reserved. <a href="https://cbsi.secure.force.com/CBSi/articles/FAQ/CBSInteractive-Terms-of-Use?template=template_touzd&referer=touzd.com&data=&cfs=default" target="_blank">Terms of Use</a>&nbsp;&nbsp;<a href="https://cbsi.secure.force.com/CBSi/articles/FAQ/Privacy-Policy?categories=CBS_Interactive%3AmPrivacy&template=template_mobilePrivacy&referer=mobileprivacy.com&data=&cfs=default" target="_blank">Privacy Policy</a>
</p>
<!--- column 1 -->
<!-- <table class="column">
<tr>
<td>
You are receiving this email because you opted to receive information about CBS, Entertainment Tonight, and/or Daily First. If you feel that you’ve received this email in error, you can unsubscribe here
</td>
</tr>
</table>-->
<!-- /column 1 -->
<span class="clear" style="display: block; clear: both;"></span>
</td>
</tr>
</table>
<!-- /social & contact -->
<!-- Social Footer -->
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
<!-- /BODY -->
<p>&nbsp;</p>
<!-- FOOTER -->
<!-- /FOOTER -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment