S2770156 - Text Version

Daily Greens

by dixalex

HTML

<table class='dailyGreens'>
    <tbody>
        <tr>
            <td colspan='2' class='banner'><img src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S277015601/Images/&amp;File=dailyGreensBanner.png"></td>
        </tr>
        <tr>
            <td class='canwe'>
                <p class='canwe'><span>Can we
                    <br/> ask you
                    <br/> some-
                    <br/>thing?</span>

                </p>
            </td>
            <td class='bottles'><img src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S277015601/Images/&amp;File=dailyGreensBottle.png"></td>
        </tr>
        <tr>
            <td class='takeour' colspan='2'>
                <p class='takeour'>
                    Take our survey and we'll give you
                    <br/>$15 in FREE coupons for
                    <br/>Daily Greens juice products!
                </p>
                <p class='hurry'>
                    Hurry, space is limited!
                </p>
            </td>
        </tr>
        <tr>
            <td class='surveyLink' colspan='2'>
                <span class='surveyLink'><a href='##SurveyURL###' class='surveyLink'><span class='turnWhite'>&#160;&#160;Take the survey&#160;&#160;</span></a>
                </span>
            </td>
        </tr>
        <tr>
            <td class='standardLanguage' colspan='2'>
                <p class='standardLanguage'>
                    Restrictions apply. Must complete the entire survey.
                    <br/>Coupons will be mailed within 14 days. No purchase necessary.
                </p>
            </td>
        </tr>
        <tr>
            <td colspan='2' class='optOut'><a href='##OptOutURL##'>Un-subscribe</a></td>
        </tr>
    </tbody>
</table>

CSS

td {
    border: solid 1px #eff4e5;
    padding: 0;
    background-color: #eff4e5;
}

td.banner {
    border-top: solid 1px blue;
    border-left: solid 1px blue;
    border-right: solid 1px blue;
}

table.dailyGreens {
    border-collapse: collapse;
    border: solid 1px blue;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    font-family: arial;
    width: 800px;
}

p.canwe {
    font-size: 3.5em;
    color: #a3bb4d;
    padding: 2px;
    font-family: impact;
    margin: 5px;
    line-height: 65px;
}

td.canwe {
    width: 400px;
    max-width: 400px;
    border-left: solid 1px blue;
}

a,
a:active,
a:hover,
a:visited {
    color: blue;
    border: none;
    text-decoration: none;
    font-family: arial;
    font-size: .83em;
    padding: 0;
    margin: 0;
}

td.surveyLink {
    text-align: center;
    padding: 0;
    height: 56px !important;
    max-height: 56px;
    border-right: solid 1px blue;
    border-left: solid 1px blue;
}

a.surveyLink {
    color: #b2c55f;
    text-decoration: none;
}

span.surveyLink {
    background-color: #b2c55f;
    width: 380px;
    max-width: 380px;
    margin: 0 auto;
    font-weight: bold;
    font-size: 3.25em;
    display: block;
    height: 56px !important;
    max-height: 56px;
}

span.turnWhite {
    color: #FFF;
    display: block;
    height: 56px !important;
    max-height: 56px;
}

p.standardLanguage {
    color: #000;
    font-size: 1.35em;
    margin: 5px auto 10px auto;
}

p.takeour {
    font-size: 2.18em;
    color: #b2c55f;
    font-weight: bold;
    margin: 0 auto;
}

p.hurry {
    font-size: 2.18em;
    color: #b2c55f;
    font-weight: bold;
    margin: 10px auto 0 auto;
}

td.bottles {
    width: 400px;
    max-width: 400px;
    border-right: solid 1px blue;
}

td.takeour {
    width: 400px;
    max-width: 400px;
    border-right: solid 1px blue;
    border-left: solid 1px blue;
}

td.bottles img {
    height: 315px;
}

td.standardLanguage {
    border-right: solid 1px blue;
    border-left:...