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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <head>
    <title>Vimeo Newsletter</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
    </style>
    <style type="text/css">
        /* BOILERPLATE STYLES */
        #outlook a {padding: 0;}
        .ReadMsgBody {width: 100%;}
        .ExternalClass {width: 100%;}
        .ExternalClass,
        .ExternalClass span,
        .ExternalClass td,
        .ExternalClass div {line-height: 100%;}
        body,
        table,
        td,
        a {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
        table,
        td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
        img {-ms-interpolation-mode: bicubic;}
        body {height: 100% !important;margin: 0 !important;padding: 0 !important;width: 100% !important;}
        img {border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;}
        a[x-apple-data-detectors] {color: inherit !important;text-decoration: none !important;font-size: inherit !important;font-family: inherit !important;font-weight: inherit !important;line-height: inherit !important;}
        .link-hover:hover {text-decoration: none !important;}
        .nolink_body a {text-decoration: none!important;color: #7f8c8d;}
        .nolink_title a {text-decoration: none!important;color: #353a3e;}
        .gmail-show {width: auto !important;height: auto !important;max-height: none !important;max-width: none !important;display: block !important;overflow: visible !important;}
        u+.body .gmail-show {width: 0px!important;height: 0px!important;max-height: 0px!important;max-width: 0px!important;display: none!important;overflow: hidden!important;}
        [owa] .owactatext {line-height: 55px !important;}

        @media screen and (max-width: 800px) {
            .responsive-table-large {width: 100% !important;max-width: 100% !important;}
            .img-max-large {max-width: 100% !important;max-height: 100% !important;}
        }
      @media screen and (max-width: 640px) {
            .imgcolor1 {background-color: #D7D5F3;}
            .imgcolor2 {background-color: #92C9E9;}
            .imgcolor3 {background-color: #000000;}
        }

        @media screen and (max-width: 550px) {
            .ptop50,
            .ptop60 {padding-top: 25px !important;}
            .logo {text-align: left;padding: 0 0 20px 0 !important;}
            .mobile-hide {display: none !important;}
            .cardpad-large {padding-left: 0px!important;font-size:16px!important;padding-right: 0px!important;}
            .mobile-show {display: inline-block !important;width: auto !important;height: auto !important;max-width: none !important;max-height: none !important;overflow: visible !important;}
            .logo img {margin: 0 auto !important;}
            .img-max {max-width: 100% !important;max-height: 100% !important;}
            .img-max2 {width: auto !important;max-width: 100%!important;height: auto !important;}
            .img-max3 {width: 100% !important;max-width: 300px !important;height: auto !important;}
            .responsive-table {width: 100% !important;max-width: 320px !important;}
            .responsive-table-large {width: 100% !important;max-width: 320px !important;}
            td[class="pattern"] table {width: 100%;}
            td[class="pattern"] img {width: 100%;height: auto !important;}
            td[class="pattern"] .col {width: 50%;}
            img.pattern {max-width: 100%;height: auto !important;}
        }

        @media screen and (max-width: 440px) {
            .mobile-hide2 {display: none !important;}
            .nopad {padding-left: 0px!important;padding-right: 0px!important;}
            .mobilehide {padding-top: 0px!important;padding-bottom: 0px!important;}
            .learnpad {padding-left: 30px!important;padding-right: 20px!important;}
            .cardpad {padding-left: 30px!important;padding-right: 30px!important;}
            .staffpickvid {background-color:#ffffff!important;padding-left:30px!important;padding-right:30px!important;}
            .staffpicktable {width:100%!important;background-color: #f8f9fc!important;}
            
            td[class="smallerspace"] {height: 20px!important;}
            td[class="imgcolor1"] {width: 100%!important;display: block!important;}
            td[class="imgcolor2"] {width: 100%!important;display: block!important;}
            td[class="imgcolor3"] {width: 100%!important;display: block!important;}
            td[class="sidetext"]{padding-left:45px!important;padding-right:45px!important;text-align:center!important;font-size: 16px!important;}
            td[class="sidetextheader"]{padding-top:30px!important;text-align: center!important;font-size:21px!important;}
         
            .col {width: 100% !important;display: block !important;}
         
            td[class="pattern"] {width: 100%;display: block;}
            td[class="pattern"] .col1 {margin-bottom: 16px;}
            td[class="pattern"] .description span {display: block;max-width: 300px;}

            span[id=smallerfont] {font-size: 15px;}
            span[id=smallerfont2] {font-size: 16px;}
            td[class="biggercta"]{font-size: 18px!important;padding-left:45px!important;padding-right:45px!important;text-align:center!important;}
            /* Main Image Mobile Swap */
            .hide {display: none !important;}
            .thumbnail {width: 100%!important; height:auto!important;padding-bottom:0px!important;padding-top: 0px!important;padding-left:0px!important;padding-right:0px!important;}
            
            span[id=switcher] {display: block;background-image: url(http://a.vimeocdn.com/si/email/June-Newsletter-2018/mobile/stories/Albums/Albums_Mobile@2x.png) !important;background-repeat: no-repeat !important;background-position: center !important;background-size: 414px!important;width: 414px!important;height: 414px!important;}
            
            span[id=switcher2] {display: block;background-image: url(http://a.vimeocdn.com/si/email/June-Newsletter-2018/mobile/stories/NatureTimelapse/NatureTimelapse_@2x.png) !important;background-repeat: no-repeat !important;background-position: center !important;background-size: 414px!important;width: 414px!important;height: 414px!important;}
            
            img[id=houdini] {display: none !important;} 
            
            .vimeologo{
                padding-top:15px!important;
                padding-bottom:15px!important;

            }
         u + .body {min-width: 100vw;}
            
            
        }

        @media screen and (-webkit-min-device-pixel-ratio: 0) {
            .webkit-hide {display: none !important;}
            .webkit-show {height: auto !important;width: auto !important;max-width: none !important;max-height: none !important;overflow: auto !important;visibility: visible !important;display: block !important;}
            #font-weight-normal {font-weight: normal !important;}
        }
        
    </style>

</head>

<body style="margin: 0; padding: 0; background-color:#F8F9FC;" class="body"><style type="text/css">
div.preheader 
{ display: none !important; } 
</style>
<div class="preheader" style="font-size: 1px; display: none !important;">More ways to customize and showcase videos</div>
    <!-- COLORBAR -->
    <table cellpadding="0" cellspacing="0" border="0" height="2" width="100%">
        <tbody><tr>
            <td background="https://image.email.vimeo.com/lib/fe8812717363017573/m/1/ColorBar2.png" bgcolor="#F8F9FC" height="2" style="line-height:2px;background-size:cover; background-repeat:no-repeat;">
                <!--[if gte mso 9]>                 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:2px;">                   <v:fill type="tile" src="https://image.email.vimeo.com/lib/fe8812717363017573/m/1/ColorBar2.png" color="#F8F9FC" />                   <v:textbox inset="0,0,0,0">                 <![endif]-->
                <div>
                </div>
                <!--[if gte mso 9]>                   </v:textbox>                 </v:rect>                 <![endif]-->
            </td>
        </tr>
    </tbody></table>
    <!-- COLORBAR -->
    
    <table cellspacing="0" cellpadding="0" bgcolor="#F8F9FC" align="center" width="100%">
        <tbody><tr>
            <td align="center" bgcolor="#F8F9FC">

                <!--[if (gte mso 9)|(IE)]>                     <table align="center" border="0" cellspacing="0" cellpadding="0" width="640">                       <tr>                         <td align="center" valign="top" width="640">                   <![endif]-->
                
                
                
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:640px;" align="center">
                    <!--LOGO-->
                    <tbody><tr>
                        <td class="vimeologo" bgcolor="#F8F9FC" align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;padding-top: 30px;padding-bottom:30px;">
                            <a href="https://vimeo.com?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                <img class="vimeologo" src="http://a.vimeocdn.com/si/email/Vimeo_445566.png" width="106" height="30" alt="Vimeo">
                            </a>
                        </td>
                    </tr>
                    <!--LOGO-->
                    
                
                    <tr>
                        <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                            
                            
                            <!-- Story 1 -->
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="max-width" style="max-width:640px;" bgcolor="#4567E6" align="center">
                                <tbody><tr>
                                    <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tbody><tr>
                                                <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                                                    <!-- start lead-in image and copy -->
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">                                                   
                                                        <tbody><tr>
                                                            <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                                                                <a href="/log_in" target="_blank">
                                                                    <span id="switcher">
                                                                        <img id="houdini" class="img-max-large" src="http://a.vimeocdn.com/si/email/Albums_EmailHeader2.gif" style="display:block;" width="640" height="auto" border="0" alt="An album of videos and a cursor selecting different types of themes, with the option to embed as well.">
                                                                    </span>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    </tbody></table>
                                                </td>
                                            </tr>
                                        </tbody></table>
                                    </td>
                                </tr>
                            </tbody></table>
                               
                            
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="max-width" style="max-width:640px;">
                                    <tbody><tr>
                                        <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  font-size: 16px; line-height: 24px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #445566;" bgcolor="#ffffff">
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table-large">
                                                <tbody><tr>
                                                    <td height="50">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="center" style="font-family:'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 21px; line-height: 26px;  color: #445566; max-width: 600px;font-weight:bold;padding-right:20px;padding-left:20px;">More ways to showcase videos, beautifully
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td height="30">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="cardpad-large" align="center" style="font-family:'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; color: #445566; max-width: 600px;padding-left:100px;padding-right:100px;">
                                                        Videos are made to be shared. And this month, we’re rolling out even more ways to do exactly that. Add multiple videos to an album, and  if you’re a <a style="text-decoration: none; color: #00adef;" href="https://vimeo.com/upgrade?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">Vimeo Plus member</a>, you can create playlists to embed on your site. You can even showcase groups of videos with a customized, branded album if you <a style="text-decoration: none; color: #00adef;" href="https://vimeo.com/upgrade?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">upgrade to Vimeo PRO or above</a>.
                                                </td></tr>
                                                <tr>
                                                    <td height="30">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; ">
                                                        <table width="200" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidthcta">
                                                            <tbody><tr>
                                                                </tr><tr>
                                                                    <td align="center" style="width: 200px; height:42px; background: #00adef; font-size: 16px; line-height: 18px; text-align: center;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 18px; color: #ffffff; text-decoration: none; display: block;">
                                                                  
                                                                      <a href="/log_in" target="_blank" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  font-size: 16px; line-height: 18px; color: #ffffff; text-decoration: none; display: block; padding-top:12px;padding-bottom:12px;padding-right:15px;padding-left:15px;">Start creating</a>
                                                               
                                                                    </td>
                                                                </tr>
                                                        </tbody></table>
                                                    </td>
                                                    </tr>
                                                    <tr>
                                                        <td height="50">
                                                        </td>
                                                    </tr>
                                            </tbody></table>
                                        </td>
                                        </tr>
                                        <tr>
                                            <td class="hide" width="100%" height="30"></td>
                                        </tr>
                                </tbody></table>
                            
                            <!--Story 1-->
                            
                            
                            
                            <!--Story 2-->
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="max-width" style="max-width:640px;" bgcolor="#ffffff" align="center">
                                <tbody><tr>
                                    <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tbody><tr>
                                                <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                                                    <!-- start lead-in image and copy -->
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">                                                   
                                                        <tbody><tr>
                                                            <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                                                                <a href="https://vimeo.com/blog/post/keep-it-natural-with-these-gorgeous-time-lapses?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                    <span id="switcher2">
                                                                        <img id="houdini" class="img-max-large" src="http://a.vimeocdn.com/si/email/June-Newsletter-2018/desktop/stories/Nature Timelapse/Naturetimelapse_@2x.png" style="display:block;" width="640" height="auto" border="0" alt="A serene mountain town, split into two frames of day and night.">
                                                                    </span>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    </tbody></table>
                                                </td>
                                            </tr>
                                        </tbody></table>
                                    </td>
                                </tr>
                            </tbody></table>
                            
                            
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="max-width" style="max-width:640px;">
                                <tbody><tr>
                                    <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  font-size: 16px; line-height: 24px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #445566;" bgcolor="#ffffff">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table-large">
                                            <tbody><tr>
                                                <td height="50">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" style="font-family:'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 21px; line-height: 26px;  color: #445566; max-width: 600px;font-weight:bold;padding-right:20px;padding-left:20px;">Nature lovers, rejoice 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td height="30">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="cardpad-large" align="center" style="font-family:'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; color: #445566; max-width: 600px;padding-left:100px;padding-right:100px;">
                                                    The seasons are turning, the ice caps are melting, and there’s never been a better time to appreciate nature. Prepare to be thoroughly blown away by this planet of ours — from mountain slopes to island drone shots, and everywhere in between.  
                                            </td></tr>
                                            <tr>
                                                <td height="30">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; ">
                                                    <table width="200" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidthcta">
                                                        <tbody><tr>
                                                            </tr><tr>
                                                                <td align="center" style="width: 200px; height:42px; background: #00adef; font-size: 16px; line-height: 18px; text-align: center;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 18px; color: #ffffff; text-decoration: none; display: block;">

                                                                  <a href="https://vimeo.com/blog/post/keep-it-natural-with-these-gorgeous-time-lapses?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  font-size: 16px; line-height: 18px; color: #ffffff; text-decoration: none; display: block; padding-top:12px;padding-bottom:12px;padding-right:15px;padding-left:15px;">Take a trip</a>

                                                                </td>
                                                            </tr>
                                                    </tbody></table>
                                                </td>
                                                </tr>
                                                <tr>
                                                    <td height="50">
                                                    </td>
                                                </tr>
                                        </tbody></table>
                                    </td>
                                    </tr>
                                    <tr>
                                        <td class="hide" width="100%" height="30"></td>
                                    </tr>
                            </tbody></table>
                            <!--Story 2-->
                            
                            
                            <!--[if (gte mso 9)|(IE)]>                                                                                      </td>                    </tr>                </table>                <![endif]-->

                            <!-- end lead-in story copy -->
                            <!-- end lead-in story -->


                            
  

                         <!-- START STAFF PICK VIDS -->

                        <!--[if (gte mso 9)|(IE)]>                         <table align="center" border="0" cellspacing="0" cellpadding="0" width="640">                           <tr>                             <td align="center" valign="top" width="640">                        <![endif]-->
                                <!-- VIDEOS FOR GOOD -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 640px;">
                                    <tbody><tr>
                                        <td bgcolor="#ffffff" align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                                            <table class="staffpicktable" align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 640px;">
                                                <tbody><tr>

                                                    <td style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding-top: 40px; padding-bottom:15px; font-size: 15px; line-height: 22px;color: #445566;" align="center">
                                                        <span style="font-size:21px;font-weight:bold;">This month’s best Staff Picks</span>
                                                        <br>
                                                    </td>
                                                </tr>
                                            </tbody></table>
                                        </td>
                                    </tr>
                                </tbody></table>
                        <!--[if (gte mso 9)|(IE)]>                                   </td>                                 </tr>                               </table>                         <![endif]-->

                        <table cellpadding="0" cellspacing="0">
                            <tbody><tr>
                                <td class="pattern" width="640" align="center" bgcolor="#ffffff">
                                    <table cellpadding="0" cellspacing="0">
                                        <tbody><tr>

                                            <td class="thumbnail" style="background: #ffffff; padding: 20px 0;">
                                                <table cellpadding="0" cellspacing="0">
                                                    <tbody><tr>
                                                        <th class="col col1" width="300" align="center">
                                                            <table cellpadding="0" cellspacing="0">
                                                                <tbody><tr>
                                                                    <td class="thumbnail" align="center" style="padding: 0 10px;">
                                                                        <a href="https://vimeo.com/267520931?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                            <img class="thumbnail" src="http://a.vimeocdn.com/si/email/June-Newsletter-2018/desktop/SP-videos/LifeCycles.png" width="275" alt="Close-up of an illustrated hand painting." style="display: block;">
                                                                        </a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="staffpickvid" style="text-align:left;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding-left:15px;padding-right:15px;padding-bottom:12px;padding-top: 20px;font-size: 13px; line-height: 19px;color: #445566;">
                                                                        <b>Life Cycles</b>
                                                                        <br>
                                                                        <a style="text-decoration: none; color: #00adef; font-size: 11px;font-weight:400;" href="https://vimeo.com/rosshogg?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                            <span style="color: #445566;">from</span> Ross Hogg</a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="staffpickvid" style="text-align:left;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;padding-left:15px;padding-right:15px;padding-bottom:30px; font-size: 13px; line-height: 19px;color: #445566; font-weight: normal;">
                                                                        Are we creatures of habits, or can we break free? This wonderful animation digs way in.</td>
                                                                </tr>
                                                            </tbody></table>
                                                        </th>
                                                        <th class="col" width="300" align="center">
                                                            <table cellpadding="0" cellspacing="0">
                                                                <tbody><tr>
                                                                    <td class="thumbnail" align="center" style="padding: 0 10px;">
                                                                        <a href="https://vimeo.com/266748395?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                            <img class="thumbnail" src="http://a.vimeocdn.com/si/email/HurrayRifRaf.png" width="275" alt="A young girl is shouting or singing, seeming free, while sticking her face and arm out of a car window." style="display: block;">
                                                                        </a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="staffpickvid" style="text-align:left;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding-left:15px;padding-right:15px;padding-bottom:12px;padding-top: 20px;font-size: 13px; line-height: 19px;color: #445566;">
                                                                        <b>Hurray for the Riff Raff - Pa'lante</b>
                                                                        <br>
                                                                        <a style="text-decoration: none; color: #00adef; font-size: 11px;font-weight:400;" href="https://vimeo.com/krismerc?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                            <span style="color: #445566;">from</span> Kristian Mercado Figueroa</a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="staffpickvid" style="text-align:left;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;padding-left:15px;padding-right:15px;padding-bottom:30px; font-size: 13px; line-height: 19px;color: #445566; font-weight: normal;">
                                                                        Face family, intimacy, and more in the aftermath of Hurricane Maria in Puerto Rico.
                                                                    </td>
                                                                </tr>
                                                            </tbody></table>
                                                        </th>
                                                    </tr>
                                                </tbody></table>
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody></table>

                        <table cellpadding="0" cellspacing="0">
                            <tbody><tr>
                                <td class="pattern" width="640" align="center" bgcolor="#ffffff">
                                    <table cellpadding="0" cellspacing="0">
                                        <tbody><tr>
                                            <td style="background: #ffffff; padding: 0;">
                                                <table cellpadding="0" cellspacing="0">
                                                    <tbody><tr>
                                                        <th class="col col1" width="300" align="center">
                                                            <table cellpadding="0" cellspacing="0">
                                                                <tbody><tr>
                                                                    <td class="thumbnail" align="center" style="padding: 0 10px;">
                                                                        <a href="https://vimeo.com/267406224?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                            <img class="thumbnail" src="http://a.vimeocdn.com/si/email/June-Newsletter-2018/desktop/SP-videos/SandinSky.png" width="275" alt="A young child sits on a fluffy elephant chair in front of his crib, focused on something off camera." style="display: block;">
                                                                        </a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="staffpickvid" style="text-align:left;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding-left:15px;padding-right:15px;padding-bottom:12px;padding-top: 20px;font-size: 13px; line-height: 19px;color: #445566;">
                                                                        <b>Sand in the Sky</b>
                                                                        <br>
                                                                        <a style="text-decoration: none; color: #00adef; font-size: 11px;font-weight:400;" href="https://vimeo.com/gnarlybay?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                            <span style="color: #445566;">from</span> gnarly bay</a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="staffpickvid" style="text-align:left;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;padding-left:15px;padding-right:5px;padding-bottom:30px; font-size: 13px; line-height: 19px;color: #445566; font-weight: normal;">
                                                                        Travel through stunning North American landscapes, all from the perspective of a child.
                                                                    </td>
                                                                </tr>
                                                            </tbody></table>
                                                        </th>
                                                        <th class="col" width="300" align="center">
                                                          <!--[if (gte mso 9)|(IE)]>                                                              <table width="300" align="center" border="0" cellpadding="0" cellspacing="0">                                                                 <tr>                                                                     <td>                                                           <![endif]-->
                                                            <table cellpadding="0" cellspacing="0">
                                                                <tbody><tr>
                                                                    <td class="thumbnail" align="center" style="padding: 0 10px;">
                                                                        <a href="https://vimeo.com/266883659?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                            <img class="thumbnail" src="http://a.vimeocdn.com/si/email/June-Newsletter-2018/desktop/SP-videos/TheWildInside.png" width="275" alt="A man in his orange prison uniform stands in front of a wild horse kicking up dust." style="display: block;">
                                                                        </a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="staffpickvid" style="text-align:left;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding-left:15px;padding-right:15px;padding-bottom:12px;padding-top: 20px;font-size: 13px; line-height: 19px;color: #445566;">
                                                                        <b>The Wild Inside</b>
                                                                        <br>
                                                                        <a style="text-decoration: none; color: #00adef; font-size: 11px;font-weight:400;" href="https://vimeo.com/topicstories?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">
                                                                            <span style="color: #445566;">from</span> Topic</a><span style="font-size:11px;font-weight:400;color:#445566;"> by </span><a style="text-decoration: none; color: #00adef; font-size: 11px;font-weight:400;" href="https://vimeo.com/andrewellis?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">Andrew Michael Ellis</a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="staffpickvid" style="text-align:left;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;padding-left:15px;padding-right:15px;padding-bottom:30px; font-size: 13px; line-height: 19px;color: #445566; font-weight: normal;">
                                                                        Meet the inmates in the state-prison system who are breaking in wild horses.</td>
                                                                </tr>
                                                            </tbody></table>
                                                          <!--[if (gte mso 9)|(IE)]>                                                                 </td>                                                                 </tr>                                                                 </table>      <![endif]-->
                                                        </th>
                                                    </tr>
                                                </tbody></table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="10"></td>
                                        </tr>
                                    </tbody></table>
                                </td>
                            </tr>
                            <tr>
                                <td class="smallerspace" height="30">
                                </td>
                            </tr>
                       </tbody></table>
                            
                            
                 <!-- END STAFF PICK VIDEOS-->
                  <!--start outro -->
                           
                               
                            
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="max-width" style="max-width:640px;">
                                    <tbody><tr>
                                        <td align="center" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  font-size: 16px; line-height: 24px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #445566;" bgcolor="#ffffff">
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table-large">
                                                <tbody><tr>
                                                    <td height="50">
                                                    </td>
                                                </tr>
                                              
                                                <tr>
                                                    <td class="cardpad-large" align="center" style="font-family:'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; color: #445566; max-width: 600px;padding-left:100px;padding-right:100px;">Before we go, we’ve got one more suggestion: why not <a style="text-decoration: none; color: #00adef;" href="https://vimeo.com/upload?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">upload a video</a>? It’s totally free, you can do it right from your phone, and you’ll unlock everything Vimeo has to offer. You can keep your videos private or share with your friends and family, collaborate on projects with your favorite co-conspirators, and more. It all starts with an upload.


                                                <br>
                                                <br>
                                                <i>Love,<br>Vimeo</i>
                                                </td></tr>
                                               
                                                    <tr>
                                                        <td height="50">
                                                        </td>
                                                    </tr>
                                            </tbody></table>
                                        </td>
                                        </tr>
                                        
                                </tbody></table>
                            
                            <!--end outro-->  
                           
                            <!--space-->
                            <table align="center" cellpadding="0" cellspacing="0" border="0" width="120" class="devicewidthsocial" bgcolor="#F8F9FC">
                                <tbody><tr><td height="30"></td></tr>
                            </tbody></table>
<!--end space-->
            

                                                    <!--start of footer-->
                                                    <table align="center" cellpadding="0" cellspacing="0" border="0" width="120" class="devicewidthsocial" bgcolor="#F8F9FC">
                                                        
                                                        <tbody><tr>
                                                            <td valign="top" style="padding-right:0px;padding-top:5px; " class="social" align="center">
                                                                <a href="http://www.facebook.com/vimeo" target="_blank">
                                                                    <img src="http://a.vimeocdn.com/si/email/Facebook-icon@4x.png" style="border-style: none;" width="24" height="24" alt="Facebook">
                                                                </a>
                                                            </td>
                                                            <td valign="top" style="padding-right:0px;padding-top:5px; " class="social" align="center">
                                                                <a href="https://twitter.com/vimeo" target="_blank">
                                                                    <img src="http://a.vimeocdn.com/si/email/Twitter-icon@4x.png" style="border-style: none;" width="24" height="24" alt="Twitter">
                                                                </a>
                                                            </td>
                                                            <td valign="top" style="padding-right:0px;padding-top:5px; " align="center" class="social">
                                                                <a href="http://vimeo.tumblr.com/" target="_blank">
                                                                    <img src="http://a.vimeocdn.com/si/email/Tumblr-icon@4x.png" style="border-style: none;" width="24" height="24" alt="Tumblr">
                                                                </a>
                                                            </td>
                                                            <td valign="top" style="padding-right:0px;padding-top:5px; " align="center" class="social">
                                                                <a href="https://instagram.com/vimeo/" target="_blank">
                                                                    <img src="http://a.vimeocdn.com/si/email/Instagram-icon@4x.png" style="border-style: none;" width="24" height="24" alt="Instagram">
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    </tbody></table>
                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">

                                                        <tbody><tr>
                                                            <td width="100%">
                                                                <table align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthfoot">

                                                                    <tbody><tr>
                                                                        <td class="devicewidthfoot" style="font-family: Helvetica,Arial,sans-serif; font-size: 10px; color:#445566; line-height: 16px; padding-left: 40px; padding-right:40px; padding-bottom:20px; text-align:center">
                                                                            <span style="line-height:36px;">
                                                                                <a style="color:#445566;text-decoration:none;font-weight:bold;" href="#" target="_blank">
                                                                                    View this email in your web browser.</a>
                                                                            </span>
                                                                            <br>
                                                                            Featuring video from <a href="https://vimeo.com/parallelteeth" style="font-weight:bold;text-decoration:none;color:#445566;" target="_blank">Parallel Teeth</a><br>
                                                                            <br> You are receiving this email advertisement because
                                                                            you registered with Vimeo, Inc.
                                                                            <span class="mobilelink">(555 West 18th Street, New York, NY 10011)</span>
                                                                            and agreed to receive emails from us regarding
                                                                            new features, events and special offers.
                                                                            <br>
                                                                            <br> ™ + © Vimeo, Inc. All rights reserved.
                                                                            <br>
                                                                            <br>

                                                                            <a style="color:#445566; text-decoration:none;font-weight:bold;" href="https://vimeo.com/privacy?utm_source=email&amp;utm_medium=vimeo-junenewsletter-201806&amp;utm_campaign=34600" target="_blank">Privacy</a>&nbsp;&nbsp;&nbsp;

                                                                            <a style="color:#445566; text-decoration:none;font-weight:bold;" href="#" target="_blank">
                                                                                Unsubscribe
                                                                            </a>
                                                                        </td>
                                                                    </tr>
                                                                </tbody></table>
                                                            </td>
                                                        </tr>

                                                    </tbody></table>
                                                    <!--end of footer-->
                                                    <!--[if (gte mso 9)|(IE)]>                           </td>                       </tr>                           </table>                           <![endif]-->
                                                    </td>
                                                    </tr>
                                        </tbody></table>
                                       
                                            <!-- end custom tracker -->
                                            
            
            </td>
        </tr>
    </tbody></table>


 
</body>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console