Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <title>Google Chromecast</title>
  <style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);

    .ExternalClass {
      width: 100%;
    }

    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }

    body {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: none;
      margin: 0;
      padding: 0;
    }

    table {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
      margin: 0;
      padding: 0;
      border-collapse: collapse;
    }

    table td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
      margin: 0;
      padding: 0;
      border-collapse: collapse;
    }

    img {
      -ms-interpolation-mode: bicubic;
      text-decoration: none;
      outline: none;
    }

    a img {
      border: none;
    }

    p {
      margin: 0;
      margin-bottom: 0;
      padding: 0;
    }

    .fix-gmail {
      display: none;
      display: none !important;
    }

    [data-browser="useragent"] {
      display: none;
    }


    .ios-link a {
      /* Blue links on iOS */
      color: #4285F4 !important;
      text-decoration: none !important;
    }

    .footer .addr,
    .footer .copy {
      padding: 0 0 20px !important;
      font-size: 10px !important;
      color: #999999 !important;
      line-height: 14px !important;
    }


    @media only screen and (max-width: 480px) {
      #ios-gmail-fix {
        width: 100% !important
      }
    }
  </style>

  <style type="text/css">
    @media screen and (max-width: 600px) {
      .hero-img .headline {
        padding: 30px 30px 0 !important;
        font-size: 24px !important;
        line-height: 30px !important
      }
      .hero-img .subhead {
        padding: 20px 40px !important;
        font-size: 14px !important;
        line-height: 22px !important
      }
      .help .col .copy {
        padding: 0 10px !important;
        font-weight: 300 !important;
        font-size: 11px !important;
        line-height: 18px !important
      }
    }
  </style>
</head>

<body style="-premailer-bgcolor:#f9f9f9; -webkit-text-size-adjust:100%; height:100%" bgcolor="#f9f9f9" height="100%">
  <!--[if mso]>
<style type="text/css">
body, table, td, center {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->

  <div class="fix-gmail" style="font:15px courier; line-height:0; white-space:nowrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>

  <img height="1" src="https://www.google.com/appserve/mkt/img/AIQrb_62u6j9tKuHs8QFp-X8K4BtByEQ1pWIWdeLEExbcEjW.gif" width="3">
  <table id="table-parent" style="-premailer-bgcolor:#f9f9f9; -premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; background-color:#f9f9f9; border:0 none; border-collapse:collapse; margin:0 auto; min-width:480px; mso-table-lspace:0; mso-table-rspace:0; padding:0"
    bgcolor="#f9f9f9" border="0" cellpadding="0" cellspacing="0" width="100%">

    <tbody>
      <tr>
        <td id="td-parent" style="-premailer-align:center; -premailer-bgcolor:#f9f9f9; background-color:#f9f9f9; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0" align="center" bgcolor="#f9f9f9">
          <!--[if mso]>
    <table width="480" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; table-width:fixed;" align="center">
    <tr><td style="width:480px !important;">
    <![endif]-->
          <div id="email" style="background-color:#f9f9f9; margin:0 auto; padding:20px 10px" bgcolor="#f9f9f9">

            <table class="bodyWrap" align="center" style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0; max-width:600px; mso-table-lspace:0; mso-table-rspace:0; padding:0; width:480px"
              border="0" cellpadding="0" cellspacing="0" width="480">
              <tbody>
                <tr>
                  <td class="bodyWrap-td" style="border:1px solid #eeeeee; border-collapse:collapse; font-family:Roboto, sans-serif">
                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0">

                      <tbody>
                        <tr>
                          <td class="header-content" style="-premailer-bgcolor:#ffffff; -premailer-width:100%; background-color:#ffffff; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0 0 15px" bgcolor="#ffffff" width="100%">
                            <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                              width="100%">
                              <tbody>
                                <tr>
                                  <td class="preheader" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#898989; font-family:Roboto, sans-serif; font-size:10px; line-height:14px; padding:20px 0 0; text-align:center"
                                    align="center" width="100%">Learn how to stream from your phone to your TV.</td>
                                </tr>
                                <tr>
                                  <td class="logo" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:20px 0 0; text-align:center" align="center" width="100%"><a href="https://www.google.com/intl/en_us/chromecast/?utm_source=chromecast.com" style="color:#4285f4; text-decoration:none" target="_blank"><img src="http://services.google.com/fh/files/emails/chromecast_logo_ffffff_220x27_x2.png" title="Google Chromecast" alt="Google Chromecast" style="-premailer-border:0; -premailer-width:220; border:0 none; display:block; height:auto; margin:0 auto; max-height:auto; max-width:220px" border="0" width="220" height="auto"></a></td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>

                        <tr>
                          <td class="body-content" style="-premailer-align:center; -premailer-bgcolor:#ffffff; -premailer-valign:top; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0; text-align:center" align="center" bgcolor="#ffffff"
                            valign="top" width="100%">
                            <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                              width="100%">
                              <tbody>
                                <tr>
                                  <td class="hero-img" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                      width="100%">
                                      <tbody>
                                        <tr>
                                          <td class="img" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="100%" valign="top"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_newuser_201610_heroimg_480x273_ani_en_us.gif" title="" alt="" style="-premailer-border:0; -premailer-width:480; border:0 none; display:block; height:auto; max-height:auto; max-width:480px"
                                              border="0" width="480" height="auto"></td>
                                        </tr>
                                        <tr>
                                          <td class="headline" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#444444; font-family:Roboto, sans-serif; font-size:30px; line-height:36px; padding:30px 80px 0; text-align:center; vertical-align:top"
                                            align="center" width="100%" valign="top">Let the fun begin</td>
                                        </tr>
                                        <tr>
                                          <td class="subhead" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:16px; font-weight:300; line-height:24px; padding:20px 80px; text-align:center; vertical-align:top"
                                            align="center" width="100%" valign="top">A world of endless entertainment is ahead, and these top tips make it easy for you to watch your favorite entertainment on your TV.</td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="divider-icon" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="100%" valign="top"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_newuser_divider_icon_480x52.png" style="-premailer-border:0; -premailer-width:480; border:0 none; display:block; height:auto; max-height:auto; max-width:480px"
                                      border="0" width="480" height="auto"></td>
                                </tr>
                                <tr>
                                  <td class="img-copy" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:15px 0 0; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                      width="100%">
                                      <tbody>
                                        <tr>
                                          <td class="row" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                            <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                              width="100%">
                                              <tbody>
                                                <tr>
                                                  <td class="copy-1" style="-premailer-align:center; -premailer-left:left; -premailer-width:75%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0 0 0 30px; text-align:center; vertical-align:top" align="center" left="left"
                                                    width="75%" valign="top">
                                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                                      width="100%">
                                                      <tbody>
                                                        <tr>
                                                          <td class="title" style="-premailer-align:center; -premailer-left:left; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:18px; font-weight:500; line-height:24px; text-align:left; vertical-align:top"
                                                            align="left" left="left" width="100%" valign="top">Discover Chromecast-enabled&nbsp;apps</td>
                                                        </tr>
                                                        <tr>
                                                          <td class="copy" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:16px; font-weight:300; line-height:24px; padding:15px 0 0; padding-right:20px; text-align:left; vertical-align:top"
                                                            align="left" width="100%" valign="top">Your new Chromecast works with apps you already know and love. Just click on the Cast icon in your favorite apps to start streaming to your TV. With 1000+ Chromecast-enabled apps, there's always
                                                            something fun to watch.<br><a href="https://www.google.com/intl/en_us/chromecast/tv/chromecast/apps/?utm_source=chromecast.com" style="color:#4285f4; text-decoration:none" target="_blank">Browse all Chromecast-enabled apps</a>
                                                          </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                  </td>
                                                  <td class="img-1" style="-premailer-align:right; -premailer-width:25%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="25%" valign="top"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_newuser_201610_imgcopy_apps_180x295_x2.gif" style="-premailer-border:0; -premailer-width:180; border:0 none; display:block; height:auto; max-height:auto; max-width:160px"
                                                      border="0" width="180" height="auto"></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td class="divider" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; font-size:0; line-height:0; padding:20px 0; text-align:center; vertical-align:top"
                                            align="center" width="100%" valign="top">
                                            <table style="-premailer-align:center; -premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:12%; border:0 none; border-collapse:collapse; display:inline-table; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0"
                                              align="center" border="0" cellpadding="0" cellspacing="0" width="12%">
                                              <tbody>
                                                <tr>
                                                  <td style="-premailer-align:center; -premailer-height:1; -premailer-width:100%; border:none; border-collapse:collapse; border-top:1px solid #e0e0e0; font-family:Roboto, sans-serif; font-size:0; line-height:0; text-align:center; vertical-align:top"
                                                    align="center" height="1" width="100%" valign="top"></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td class="row" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                            <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                              width="100%">
                                              <tbody>
                                                <tr>
                                                  <td class="img-2" style="-premailer-align:left; -premailer-width:30%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="30%" valign="top">
                                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                                      width="100%">
                                                      <tbody>
                                                        <tr>
                                                          <td height="65" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center"
                                                            width="100%" valign="top">&nbsp;</td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                    <img src="http://services.google.com/fh/files/emails/chromecast_welcome_newuser_201610_imgcopy_options_210x195_x2.jpg" style="-premailer-border:0; -premailer-width:180; border:0 none; display:block; height:auto; max-height:auto; max-width:210px" border="0"
                                                      width="180" height="auto">
                                                  </td>
                                                  <td class="copy-2" style="-premailer-align:center; -premailer-left:left; -premailer-width:70%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0 30px 0 25px; text-align:center; vertical-align:top" align="center" left="left"
                                                    width="70%" valign="top">
                                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                                      width="100%">
                                                      <tbody>
                                                        <tr>
                                                          <td class="title" style="-premailer-align:center; -premailer-left:left; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:18px; font-weight:500; line-height:24px; text-align:left; vertical-align:top"
                                                            align="left" left="left" width="100%" valign="top">Check out all the ways to start streaming</td>
                                                        </tr>
                                                        <tr>
                                                          <td class="copy" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:16px; font-weight:300; line-height:24px; padding:15px 0 0; text-align:left; vertical-align:top"
                                                            align="left" width="100%" valign="top">From your phone, tablet, or laptop: we've got you covered. Stream content from your favorite Chromecast-enabled apps, Chrome browser, or even mirror the screen from an Android phone straight to
                                                            your TV.<br><a href="https://www.google.com/chromecast/learn-tv/?utm_source=GCE-10002936-100048391-Learn_more&amp;utm_medium=email&amp;utm_content=user&amp;utm_term=Learn_more&amp;language=en-us"
                                                              style="color:#4285f4; text-decoration:none" target="_blank">Learn more »</a>
                                                          </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                  </td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td class="divider" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; font-size:0; line-height:0; padding:20px 0; text-align:center; vertical-align:top"
                                            align="center" width="100%" valign="top">
                                            <table style="-premailer-align:center; -premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:12%; border:0 none; border-collapse:collapse; display:inline-table; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0"
                                              align="center" border="0" cellpadding="0" cellspacing="0" width="12%">
                                              <tbody>
                                                <tr>
                                                  <td style="-premailer-align:center; -premailer-height:1; -premailer-width:100%; border:none; border-collapse:collapse; border-top:1px solid #e0e0e0; font-family:Roboto, sans-serif; font-size:0; line-height:0; text-align:center; vertical-align:top"
                                                    align="center" height="1" width="100%" valign="top"></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td class="row" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                            <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                              width="100%">
                                              <tbody>
                                                <tr>
                                                  <td class="copy-3" style="-premailer-align:center; -premailer-left:left; -premailer-width:65%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0 15px 0 30px; text-align:center; vertical-align:top" align="center" left="left"
                                                    width="65%" valign="top">
                                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                                      width="100%">
                                                      <tbody>
                                                        <tr>
                                                          <td class="title" style="-premailer-align:center; -premailer-left:left; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:18px; font-weight:500; line-height:24px; text-align:left; vertical-align:top"
                                                            align="left" left="left" width="100%" valign="top">Explore the Google Home app</td>
                                                        </tr>
                                                        <tr>
                                                          <td class="copy" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:16px; font-weight:300; line-height:24px; padding:15px 0 0; text-align:left; vertical-align:top"
                                                            align="left" width="100%" valign="top">It's your one-stop destination for everything you can do with your Chromecast. Control your settings, and even get recommendations on what to stream next.<br><a href="https://support.google.com/chromecast/answer/6283676?utm_source=GCE-10002936-100048391-Learn_app&amp;utm_medium=email&amp;utm_content=user&amp;utm_term=Learn_app&amp;language=en-us"
                                                              style="color:#4285f4; text-decoration:none" target="_blank">Learn about the app »</a>
                                                          </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                  </td>
                                                  <td class="img-3" style="-premailer-align:center; -premailer-width:40%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0 0 0 10px; text-align:center; vertical-align:top" align="center" width="40%" valign="top"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_newuser_201610_imgcopy_home_155x220_x2_en_us.jpg" style="-premailer-border:0; -premailer-width:155; border:0 none; display:inline; height:auto; max-height:auto; max-width:155px"
                                                      border="0" width="155" height="auto"></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="divider-icon" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="100%" valign="top"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_newuser_divider_icon_480x52.png" style="-premailer-border:0; -premailer-width:480; border:0 none; display:block; height:auto; max-height:auto; max-width:480px"
                                      border="0" width="480" height="auto"></td>
                                </tr>
                                <tr>
                                  <td class="help" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:5px 25px 20px; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                      width="100%">
                                      <tbody>
                                        <tr>
                                          <td class="title" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#444444; font-family:Roboto, sans-serif; font-size:24px; line-height:42px; text-align:center; vertical-align:top" align="center" width="100%"
                                            valign="top">Learn more</td>
                                        </tr>
                                        <tr>
                                          <td style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                            <table class="col" style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0"
                                              cellspacing="0" width="100%">
                                              <tbody>
                                                <tr>
                                                  <td class="icon" style="-premailer-align:center; -premailer-width:33%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:15px 0; text-align:center; vertical-align:top" align="center" width="33%" valign="top"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_icon_learnmore_ffffff_cast_40x40_x2.gif" title="Options" alt="Options" style="-premailer-border:0; -premailer-width:40; border:0 none; display:inline; height:auto; max-height:auto; max-width:40px"
                                                      border="0" width="40" height="auto"></td>
                                                  <td class="icon" style="-premailer-align:center; -premailer-width:33%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:15px 0; text-align:center; vertical-align:top" align="center" width="33%" valign="top"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_icon_learnmore_ffffff_tips_40x40_x2.gif" title="Apps" alt="Apps" style="-premailer-border:0; -premailer-width:40; border:0 none; display:inline; height:auto; max-height:auto; max-width:40px"
                                                      border="0" width="40" height="auto"></td>
                                                  <td class="icon" style="-premailer-align:center; -premailer-width:33%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:15px 0; text-align:center; vertical-align:top" align="center" width="33%" valign="top"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_icon_learnmore_ffffff_faq_40x40_x2.gif" title="Google Home" alt="Google Home" style="-premailer-border:0; -premailer-width:40; border:0 none; display:inline; height:auto; max-height:auto; max-width:40px"
                                                      border="0" width="40" height="auto"></td>
                                                </tr>
                                                <tr>
                                                  <td class="copy" style="-premailer-align:center; -premailer-width:33%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:11px; font-weight:300; line-height:18px; padding:0 13px; text-align:center; vertical-align:top"
                                                    align="center" width="33%" valign="top">Learn how to stream to your TV from your <a href="https://support.google.com/chromecast/answer/3006709?utm_source=GCE-10002936-100048391-Learn_mobile&amp;utm_medium=email&amp;utm_content=user&amp;utm_term=Learn_mobile&amp;language=en-us"
                                                      style="color:#4285f4; text-decoration:none" target="_blank">phone, tablet, or the Chrome browser</a>
                                                  </td>
                                                  <td class="copy" style="-premailer-align:center; -premailer-width:33%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:11px; font-weight:300; line-height:18px; padding:0 13px; text-align:center; vertical-align:top"
                                                    align="center" width="33%" valign="top">For answers to common questions, check out <a href="https://support.google.com/chromecast/answer/3210071?utm_source=GCE-10002936-100048391-FAQs&amp;utm_medium=email&amp;utm_content=user&amp;utm_term=FAQs&amp;language=en-us"
                                                      style="color:#4285f4; text-decoration:none" target="_blank">these FAQs</a>
                                                  </td>
                                                  <td class="copy" style="-premailer-align:center; -premailer-width:33%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:11px; font-weight:300; line-height:18px; padding:0 13px; text-align:center; vertical-align:top"
                                                    align="center" width="33%" valign="top">Looking for more tips? Visit the <a href="https://support.google.com/chromecast/troubleshooter/2995236?utm_source=GCE-10002936-100048391-Tips&amp;utm_medium=email&amp;utm_content=user&amp;utm_term=Tips&amp;language=en-us"
                                                      style="color:#4285f4; text-decoration:none" target="_blank">Tips &amp; Troubleshooting</a> page</td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="footer-social" style="-premailer-align:center; -premailer-bgcolor:#f2f2f2; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:30px; text-align:center; vertical-align:top" align="center" bgcolor="#f2f2f2"
                                    width="100%" valign="top">
                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                      width="100%">
                                      <tbody>
                                        <tr>
                                          <td class="title" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:14px; font-weight:300; line-height:24px; text-align:center; text-transform:uppercase; vertical-align:top"
                                            align="center" width="100%" valign="top">Stay Connected</td>
                                        </tr>
                                        <tr>
                                          <td class="icons" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:25px 0 0; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                            <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                              width="100%">
                                              <tbody>
                                                <tr>
                                                  <td class="icon-l" style="-premailer-align:right; -premailer-width:50%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0 15px 0; text-align:right; vertical-align:middle" align="right" width="50%" valign="middle"><a href="https://www.youtube.com/channel/UCIG1k8umaCIIrujZPzZPIMA/?utm_source=GCE-10002936-100048391-youtube&amp;utm_medium=email&amp;utm_content=user&amp;utm_term=youtube&amp;language=en-us" style="color:#4285f4; text-decoration:none"
                                                      target="_blank"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_socialicon_f2f2f2_youtube_42x42.png" title="YouTube" alt="YouTube" style="-premailer-border:0; -premailer-width:42; border:0 none; display:inline; height:auto; max-height:auto; max-width:42px" border="0" width="42" height="auto"></a></td>
                                                  <td class="icon-r" style="-premailer-align:left; -premailer-width:50%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:0 0 0 15px; text-align:left; vertical-align:top" align="left" width="50%" valign="top"><a href="https://twitter.com/madebygoogle/?utm_source=GCE-10002936-100048391-twitter&amp;utm_medium=email&amp;utm_content=user&amp;utm_term=twitter&amp;language=en-us" style="color:#4285f4; text-decoration:none"
                                                      target="_blank"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_socialicon_f2f2f2_twitter_42x42.png" title="Twitter" alt="Twitter" style="-premailer-border:0; -premailer-width:42; border:0 none; display:inline; height:auto; max-height:auto; max-width:42px" border="0" width="42" height="auto"></a></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>

                                <tr>
                                  <td class="divider" height="1" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; font-size:0; line-height:0; padding:0; text-align:center; vertical-align:top"
                                    align="center" width="100%" valign="top">
                                    <table class="full-width" style="-premailer-align:center; -premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; display:inline-table; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0"
                                      align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                      <tbody>
                                        <tr>
                                          <td class="white" style="-premailer-align:center; -premailer-height:1; -premailer-width:100%; border:none; border-collapse:collapse; border-top:1px solid #ffffff; font-family:Roboto, sans-serif; font-size:0; line-height:0; text-align:center; vertical-align:top"
                                            align="center" height="1" width="100%" valign="top"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="footer" style="-premailer-align:center; -premailer-bgcolor:#f2f2f2; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:30px 50px; text-align:center; vertical-align:top" align="center" bgcolor="#f2f2f2"
                                    width="100%" valign="top">
                                    <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                      width="100%">
                                      <tbody>
                                        <tr>
                                          <td class="title" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#666666; font-family:Roboto, sans-serif; font-size:14px; font-weight:300; line-height:24px; text-align:center; text-transform:uppercase; vertical-align:top"
                                            align="center" width="100%" valign="top">Was this email helpful?</td>
                                        </tr>
                                        <tr>
                                          <td class="icons" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; padding:30px 50px; text-align:center; vertical-align:top" align="center" width="100%" valign="top">
                                            <table style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; -premailer-width:100%; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0" border="0" cellpadding="0" cellspacing="0"
                                              width="100%">
                                              <tbody>
                                                <tr>
                                                  <td class="icon-l" style="-premailer-align:right; -premailer-width:33%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:right; vertical-align:middle" align="right" width="33%" valign="middle"><a href="#" style="color:#4285f4; text-decoration:none"
                                                      target="_blank"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_faceicon_f2f2f2_sad_42x42.png" title="sad_face" alt="sad_face" style="-premailer-border:0; -premailer-width:42; border:0 none; display:inline; height:auto; max-height:auto; max-width:42px" border="0" width="42" height="auto"></a></td>
                                                  <td class="icon-c" style="-premailer-align:center; -premailer-width:33%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:center; vertical-align:top" align="center" width="33%" valign="top"><a href="#" style="color:#4285f4; text-decoration:none"
                                                      target="_blank"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_faceicon_f2f2f2_stun_42x42.png" title="neutral_face" alt="neutral_face" style="-premailer-border:0; -premailer-width:42; border:0 none; display:inline; height:auto; max-height:auto; max-width:42px" border="0" width="42" height="auto"></a></td>
                                                  <td class="icon-r" style="-premailer-align:left; -premailer-width:33%; border:none; border-collapse:collapse; font-family:Roboto, sans-serif; text-align:left; vertical-align:top" align="left" width="33%" valign="top"><a href="#" style="color:#4285f4; text-decoration:none"
                                                      target="_blank"><img src="http://services.google.com/fh/files/emails/chromecast_welcome_faceicon_f2f2f2_smile_42x42.png" title="happy_face" alt="happy_face" style="-premailer-border:0; -premailer-width:42; border:0 none; display:inline; height:auto; max-height:auto; max-width:42px" border="0" width="42" height="auto"></a></td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td class="copy" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#999999; font-family:Roboto, sans-serif; font-size:10px; line-height:14px; padding:0 0 20px; text-align:center; vertical-align:top"
                                            align="center" width="100%" valign="top">Certain streaming services may charge subscription fees and/or require membership.</td>
                                        </tr>
                                        <tr>
                                          <td class="addr" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#999999; font-family:Roboto, sans-serif; font-size:10px; line-height:14px; padding:0 0 20px; text-align:center; vertical-align:top"
                                            align="center" width="100%" valign="top"><span style="color:#999999; cursor:text; font-size:10px; line-height:14px; text-decoration:none"><font><a style="color:#999999; cursor:text; font-size:10px; line-height:14px; text-decoration:none" target="_blank">Google Inc. 1600 Amphitheatre Parkway, Mountain View, CA 94043</a></font></span></td>
                                        </tr>
                                        <tr>
                                          <td class="copy" style="-premailer-align:center; -premailer-width:100%; border:none; border-collapse:collapse; color:#999999; font-family:Roboto, sans-serif; font-size:10px; line-height:14px; padding:0 0 20px; text-align:center; vertical-align:top"
                                            align="center" width="100%" valign="top">This message was sent to <span class="ios-link" style="color:#4285F4; cursor:text; font-size:10px; line-height:14px; text-decoration:none"><font><a href="#notalink" style="color:#4285f4; font-size:10px; line-height:14px; text-decoration:none" target="_blank">hello@SmilesDavis.yeah</a></font></span>                                            because you asked us to keep you up-to-date with the latest tips and tricks, new features and apps, offers, and more from Google Chromecast. If you do not wish to receive these emails, please <a href="#"
                                              style="color:#4285f4; font-size:10px; line-height:14px; text-decoration:none" target="_blank">unsubscribe here</a>.
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>

                              </tbody>
                            </table>
                          </td>
                        </tr>

                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>

          </div>
          <!--[if mso]>
    </td></tr></table>
    <![endif]-->
        </td>
      </tr>

    </tbody>
  </table>

  <table width="480" id="ios-gmail-fix" bgcolor="#f9f9f9" style="-premailer-border:0; -premailer-cellpadding:0; -premailer-cellspacing:0; background-color:#f9f9f9; border:0 none; border-collapse:collapse; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0; padding:0"
    cellpadding="0" cellspacing="0" border="0">
    <tbody>
      <tr>
        <td style="-moz-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-text-size-adjust:none; border:none; border-collapse:collapse; color:#f9f9f9; font-family:Arial, sans-serif; font-size:10px; text-size-adjust:none">————————</td>
        <td style="-moz-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-text-size-adjust:none; border:none; border-collapse:collapse; color:#f9f9f9; font-family:Arial, sans-serif; font-size:10px; text-size-adjust:none">————————</td>
        <td style="-moz-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-text-size-adjust:none; border:none; border-collapse:collapse; color:#f9f9f9; font-family:Arial, sans-serif; font-size:10px; text-size-adjust:none">————————</td>
        <td style="-moz-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-text-size-adjust:none; border:none; border-collapse:collapse; color:#f9f9f9; font-family:Arial, sans-serif; font-size:10px; text-size-adjust:none">————————</td>
        <td style="-moz-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-text-size-adjust:none; border:none; border-collapse:collapse; color:#f9f9f9; font-family:Arial, sans-serif; font-size:10px; text-size-adjust:none">————————</td>
        <td style="-moz-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-text-size-adjust:none; border:none; border-collapse:collapse; color:#f9f9f9; font-family:Arial, sans-serif; font-size:10px; text-size-adjust:none">——————</td>
      </tr>
    </tbody>
  </table>

</body>
            
          
!

CSS

            
              
            
          
!

JS

            
              
            
          
!
999px

Console