css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--iPhone 6 through X off-center fix for gmail iOS 11-->
  <meta name="x-apple-disable-message-reformatting">
  <style type="text/css" data-premailer="ignore">
         /* Font-family declarations must not be inlined */
        @font-face {
            font-family: 'Fakt Pro';
            src: url(https://backgrounds.wetransfer.net/homerun/fonts/FaktProWeb-Normal.woff);
            font-weight: normal;
            font-style: normal;
         }
         
        p, span, a, div {
          font-family: 'Fakt Pro', sans-serif !important;
          font-style: normal !important;
          font-weight: 400 !important;
         }
         
        .header {
          outline: 20px solid #F5EBE1;
         }
         
        .footer {
          outline: 20px solid #000000;
         }
         
         /* Gmail app for iOS white border fix */
        /* iPhone 6, 6+ offcenter fix for gmail iOS 10 -- unclear if needed -- check */
        /*@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {*/
        /*   .email-container {*/
        /*       min-width: 375px !important;*/
        /*   }*/
        /*}*/
  </style>
</head>
<body class="body" style="margin: 0; padding: 0; border: none; width: 100%;">
  <!--START EMAIL CONTENT-->
  <table class="email-container" align="center" cellpadding="0" cellspacing="0" width="100%">
    <!--START HEADER-->
    <tbody><tr>
      <td>
        <table class="header" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #F5EBE1; padding: 10px 0 20px 0;">
          <tbody><tr>
            <td>
              <table align="center" width="560" cellpadding="0" cellspacing="0" style="padding: 30px 15px 0 15px;">
                <tbody><tr>
                  <td>
                    <table border="0" cellpadding="0" cellspacing="0" width="560" style="padding-bottom: 10px; border-bottom: 1px solid #CECAC1;">
                      <tbody><tr>
                        <td align="left" width="30%">
                          <table border="0" cellpadding="5" cellspacing="0" width="100%">
                            <tbody><tr>
                              <td class="leftColumnContent">
                                <a href="https://wetransfer.com/" target="_blank">
                                  <img src="https://marketing-image-production.s3.amazonaws.com/uploads/5784892ad6d9e599e8f63163cd55034ba159990c047c23ae95b5e6701624cd3abfeed72668314d3d33d401f3ba570b434d5a5156e449b386be47b8c23fc17105.png" width="34" style="max-width: 280" alt="wetransfer logo">
                                </a>
                              </td>
                            </tr>
                          </tbody></table>
                        </td>
                        <td align="right" width="70%">
                          <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tbody><tr>
                              <td class="rightColumnContent">
                                <p style="max-width: 390px; font-family: fakt pro, arial, helvetica, sans-serif; font-size: 14px; text-align: right; color: #17181A;">Unexpected stories about creative minds. <br>Curated and created by <a href="https://wetransfer.com/" style="color: #17181A" target="_blank">WeTransfer</a>.</p>
                              </td>
                            </tr>
                          </tbody></table>
                        </td>
                      </tr>
                    </tbody></table>
                  </td>
                </tr>
                <!--START HERO IMAGE-->
                <tr>
                  <td align="center" style="padding: 40px 0 15px 0;">
                    <img src="https://marketing-image-production.s3.amazonaws.com/uploads/6b87914174435c8a672fb23db4809157f1f9842ef461e351b6cacd05aab18b1533b48e6639624c2f4c0db0913f5af0acf52a5c5c03a2971980343413b71732e6.png" width="560" alt="jose roda" style="display: block; border: 0px; outline: none; height: auto;">
                  </td>
                </tr>
                <!--END HERO IMAGE-->
                <!--START HEADER TEXT-->
                <tr>
                  <td align="center" width="560" style="padding: 20px 15px 0px 15px; text-align: left;">
                    <table align="left" cellpadding="0" cellspacing="0" width="100%">
                      <tbody><tr style="text-align: left;">
                        <td>
                          <p style="font-size: 18px; color: #8F8A87;">Every month we ask a different creative to show us what their creative mind looks like. This issue it's artist José Roda.</p>
                        </td>
                      </tr>
                    </tbody></table>
                  </td>
              </tr>
              <!--END HEADER TEXT-->
          </tbody></table>
          </td>
          </tr>
        </tbody></table>
      </td>
    </tr>
    <!--END HEADER-->
      
    <!--START FEATURE -->
    <tr>
      <td style="background-color: #FFFFFF; padding: 50px 0 50px 0">
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <tbody><tr>
            <td align="center" style="padding: 20px 15px 10px 0; text-align: left;">
              <table align="left" width="560" cellpadding="0" cellspacing="0">
                <tbody><tr style="text-align: left;">
                  <td align="left" style="padding: 20px 15px 10px 15px; font-size: 22px;">
                    <p style="font-family:fakt pro, arial, helvetica, sans-serif; color: #17181A;">
                      We told you WeTransfer’s more than a file transfer service. You wanted to know more. We promised unexpected stories to spark creative ideas. You said yes please. Well, here they are.
                    </p>
                    <p style="font-family:fakt pro, arial, helvetica, sans-serif; color: #17181A;">
                      Let’s start with our favorite pieces from the WePresent archive, as chosen by our smiley, happy team. 
                    </p>
                  </td>
                </tr>
              </tbody></table>
            </td>
          </tr>
        </tbody></table>
      </td>
    </tr>
    <!--START FEATURE SECTION ONE-->
    <tr>
      <td style="padding: 20px 0 20px 0">
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <!--START FEATURE IMAGE-->
          <tbody><tr>
            <td align="center" style="padding: 0 15px 0 20px;">
              <a href="https://wetransfer.com/404/" target="_blank">
                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/2c07e5c4d5caa9c9bfdac6baa3260f96566e811876992da43d3d347d3f9654a837f4c74f9e9382f17b9b35ce7636638deca0bde7ddbf43462ce58d6efdf490b5.jpg" width="560" alt="alex griggs" style="display: block; border: 0px; outline: none; height: auto;">
              </a>
            </td>
          </tr>
          <!--END FEATURE IMAGE-->
          <!--START FEATURE TEXT-->
          <tr>
            <td align="center">
              <table>
                <tbody>
                  <tr>
                    <td width="475" style="padding: 40px 15px 30px 15px;">
                      <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                        <tbody><tr>
                          <td align="center">
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif;">
                              <a style="color: #9245DB; font-size: 22px; text-decoration: none;" href="https://wetransfer.com/404/" target="_blank">Trevor Noah on safe spaces</a><br>
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                              "I’m in awe of Alex Griggs' process for this outstanding animation. There's so much wit and knowledge in Trevor Noah's thoughts about safe spaces and the video really captures that." <br>
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                                Picked by Laszlito Kovacs, creative director
                            </p>
                          </td>
                        </tr>
                      </tbody></table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <!--END FEATURE TEXT-->
        </tbody></table>
      </td>
    </tr>
    <!--END FEATURE SECTION ONE-->
    <!--START FEATURE SECTION TWO-->
    <tr>
      <td style="padding: 20px 0 20px 0">
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <!--START FEATURE IMAGE-->
          <tbody><tr>
            <td align="center" style="padding: 0 15px 0 20px;">
              <a href="http://wepresent.wetransfer.com/story/world-press-photo-anna-boyiazis/?utm_campaign=wp_wp_news1%2F&amp;utm_medium=mail&amp;utm_source=newsletter" target="_blank">
                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/d51360d63ee8fda10c1f86f2d0e3b97f3b0bf0b51611ddebc41401f1250834032ae0da43c394b33a1a7e5134f356dce4dd4ef96535dc59d58cfa88dbb4fe69b8.jpg" width="560" alt="anna boyiazis" style="display: block; border: 0px; outline: none; height: auto;">
              </a>
            </td>
          </tr>
          <!--END FEATURE IMAGE-->
          <!--START FEATURE TEXT-->
          <tr>
            <td align="center">
              <table>
                <tbody>
                  <tr>
                    <td width="475" style="padding: 40px 15px 30px 15px;">
                      <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                        <tbody><tr>
                          <td align="center">
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif;">
                              <a style="color: #9245DB; font-size: 22px; text-decoration: none;" href="https://wetransfer.com/404/" target="_blank">The swimming women of Zanzibar</a> <br>
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                              "This picture of the floating swimmers is striking, plus it's such an unusual topic. It really got people’s attention. I love how Anna Boyiazis kept on fighting to get access to this story – things got really tough but she refused to give up."
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                                Picked by Lucy Pike, director of photography
                            </p>
                          </td>
                        </tr>
                      </tbody></table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <!--END FEATURE TEXT-->
        </tbody></table>
      </td>
    </tr>
    <!--END FEATURE SECTION TWO-->
    <!--START FEATURE SECTION THREE-->
    <tr>
      <td style="padding: 20px 0 20px 0">
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <!--START FEATURE IMAGE-->
          <tbody><tr>
            <td align="center" style="padding: 0 15px 0 20px;">
              <a href="https://wetransfer.com/404/" target="_blank">
                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/744bdc4a54fe07d7f5a132d1e7af4050a7220617cf9264830ca8c2a27c903c2e65469589a827ec81923080c65dff856964107e6b80251758b9dd2354419a0f01.jpg" width="560" alt="bjork and jesse kanda" style="display: block; border: 0px; outline: none; height: auto;">
              </a>
            </td>
          </tr>
          <!--END FEATURE IMAGE-->
          <!--START FEATURE TEXT-->
          <tr>
            <td align="center">
              <table>
                <tbody>
                  <tr>
                    <td width="475" style="padding: 40px 15px 30px 15px;">
                      <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                        <tbody><tr>
                          <td align="center">
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif;">
                              <a style="color: #9245DB; font-size: 22px; text-decoration: none;" href="https://wetransfer.com/404/" target="_blank">How creative soulmates <br> Björk &amp; Jesse Kanda work</a> <br>
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                              "This is a special opportunity to get a real insight into the creative process of Björk, one of the world’s foremost musical innovators, while also getting inside musical dynamo Jesse Kanda's mind, and the way they work together. "
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                                Picked by Jamal Dauda, director of music
                            </p>
                          </td>
                        </tr>
                      </tbody></table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <!--END FEATURE TEXT-->
        </tbody></table>
      </td>
    </tr>
    <!--END FEATURE SECTION THREE-->
    <!--START FEATURE SECTION FOUR-->
    <tr>
      <td style="padding: 20px 0 20px 0">
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <!--START FEATURE IMAGE-->
          <tbody><tr>
            <td align="center" style="padding: 0 15px 0 20px;">
              <a href="https://wetransfer.com/404/" target="_blank">
                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/a30cdc3bf929cb4736d30d7ba8e301f2b81e66d33f78b4c83e7207e87f1aa860285dfd54815f5ab32d9f3a98b02b030e8eb0b7e2c9c6a2e9a2f5365907f9afe2.jpg" width="560" alt="karabo poppy" style="display: block; border: 0px; outline: none; height: auto;">
              </a>
            </td>
          </tr>
          <!--END FEATURE IMAGE-->
          <!--START FEATURE TEXT-->
          <tr>
            <td align="center">
              <table>
                <tbody>
                  <tr>
                    <td width="475" style="padding: 40px 15px 30px 15px;">
                      <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                        <tbody><tr>
                          <td align="center">
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif;">
                              <a style="color: #9245DB; font-size: 22px; text-decoration: none;" href="https://wetransfer.com/404/" target="_blank">Striking South African illustrations</a> <br>
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                              "The bold style of the illustrations draws you in, but the fascinating South African context makes you appreciate Karabo Poppy's portraits even more."
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; display: block; color: #17181A;">
                                Picked by Suzanne Tromp, WePresent editor
                            </p>
                          </td>
                        </tr>
                      </tbody></table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <!--END FEATURE TEXT-->
        </tbody></table>
      </td>
    </tr>
    <!--END FEATURE SECTION FOUR-->
    <!--START FEATURE SECTION FIVE-->
    <tr>
      <td style="padding: 20px 0 20px 0">
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <!--START FEATURE IMAGE-->
          <tbody><tr>
            <td align="center" style="padding: 0 15px 0 20px;">
              <a href="https://wetransfer.com/404/" target="_blank">
                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/3dddd36a0466176f770a563495afddda2e5502427b3fa709d902d6c9b88cad81c855811612d6f5acf4422621619c137780537088c52604e7435c64cf36c66fe6.jpg" width="560" alt="gem fletcher and ken hermann" style="display: block; border: 0px; outline: none; height: auto;">
              </a>
            </td>
          </tr>
          <!--END FEATURE IMAGE-->
          <!--START FEATURE TEXT-->
          <tr>
            <td align="center">
              <table>
                <tbody>
                  <tr>
                    <td width="475" style="padding: 40px 15px 30px 15px;">
                      <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                        <tbody><tr>
                          <td align="center">
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif;">
                              <a style="color: #9245DB; font-size: 22px; text-decoration: none;" href="https://wetransfer.com/404/" target="_blank">Into the Indian well of death</a><br>
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                              "The most popular thing we’ve ever published on the site, but I’d pick it even if it wasn’t. A terrific story with stunning photographs and great insights from Gem Fletcher and Ken Hermann about shooting in India. I think this is WePresent storytelling at its best."
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; display: block; color: #17181A;">
                                Picked by Rob Alderson, editor-in-chief
                            </p>
                          </td>
                        </tr>
                      </tbody></table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <!--END FEATURE TEXT-->
        </tbody></table>
      </td>
    </tr>
    <!--END FEATURE SECTION FIVE-->
    <!--START FEATURE SECTION SIX-->
    <tr>
      <td style="padding: 20px 0 50px 0">
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <!--START FEATURE IMAGE-->
          <tbody><tr>
            <td align="center" style="padding: 0 15px 0 20px;">
              <a href="https://wetransfer.com/404/" target="_blank">
                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/4e784924a117de3edbbb5c7469da7e996f3b1a1ad88a616426b06ac0cdae0629143f8e0ceaf00b829d5e60de926ef3e96dc8949bc2368a920a6bc28cdaf47653.jpg" width="560" alt="gilles peterson and khruangbin" style="display: block; border: 0px; outline: none; height: auto;">
              </a>
            </td>
          </tr>
          <!--END FEATURE IMAGE-->
          <!--START FEATURE TEXT-->
          <tr>
            <td align="center">
              <table>
                <tbody>
                  <tr>
                    <td width="475" style="padding: 40px 15px 30px 15px;">
                      <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                        <tbody><tr>
                          <td align="center">
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif;">
                              <a style="color: #9245DB; font-size: 22px; text-decoration: none;" href="https://wetransfer.com/404/" target="_blank">Gilles Peterson's new music selections</a> <br>
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; color: #17181A;">
                              "Khruangbin gives props to Sade and Prince in back-to-back sentences, so it's my favorite by default. Besides that, our series of monthly music recs from Gilles Peterson leaves me looking smart at parties (and a little lighter in the wallet from the records I keep buying)."
                            </p>
                            <p style="font-family:fakt pro, arial, helvetica, sans-serif; font-size: 18px; display: block; color: #17181A;">
                                Picked by Stephen Canfield, VP of marketing
                            </p>
                          </td>
                        </tr>
                      </tbody></table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <!--END FEATURE TEXT-->
        </tbody></table>
      </td>
    </tr>
    <!--END FEATURE SECTION SIX-->    
   
    <!--END FEATURE -->
      
    <!--START FOOTER-->
    <tr>
      <td>
        <table class="footer" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #000000;">
          <!--START FOOTER LOGO-->
          <tbody><tr>
            <td align="center" style="padding: 30px 0 10px 0; background-color: #000000;">
              <a href="https://wetransfer.com/" target="_blank">
                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/2175f56a57acfb44eaa03fa27e3100b9e90492cfc5d59c8e24279342497cc08af4b35158c912c54a5591f25547757e829b6d6689f315b4c759dc9a5a395083da.png" alt="wetransfer logo" width="44" style="display: block;">
                </a>
            </td>
          </tr>
          <!--END FOOTER LOGO-->
          <!--START FOOTER TEXT-->
          <tr>
            <td align="center" style="padding: 10px 15px 50px 15px; background-color: #000000;">
              <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                <tbody><tr>
                  <td align="center" width="500" style="padding: 20px 15px 50px 15px; background-color: #000000;">
                    <p style="font-family:fakt pro, arial, helvetica, sans-serif; padding: 0 0 40px 0; color: #FFFFFF; font-size: 22px;">Send big files, share big ideas. <br> <a style="color: #FFFFFF" href="https://wetransfer.com/" target="_blank">WeTransfer</a>. Simple. Safe. Stylish. <br> Follow us on
                      <a style="color: #FFFFFF" href="https://twitter.com/WeTransfer?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank">Twitter</a>, <a style="color: #FFFFFF" href="https://www.facebook.com/wetransfer/" target="_blank">Facebook</a> &amp; <a style="color: #FFFFFF" href="https://www.instagram.com/wetransfer/" target="_blank">Instagram</a>.</p>
                    <p style="font-family:fakt pro, arial, helvetica, sans-serif; color: #6F7785; font-size: 14px;">Something not quite right? <a clicktracking="off" href="#" style="color: #6F7785;" target="_blank">View this as a web page</a>.<br>
                      You received this because you subscribed to updates from WeTransfer (legend).&nbsp;No longer a legend? Click <a href="#" style="color: #6F7785;" target="_blank">here</a> to unsubscribe.<br><br>
                      Oostelijke Handelskade 751, 1019 BW Amsterdam, NL<br>
                      2116 Zeno Pl, Venice, CA 90291, USA
                      (Send snacks.)</p>
                  </td>
                  </tr>
              </tbody></table>
            </td>
          </tr>
          <!--END FOOTER TEXT-->
        </tbody></table>
      </td>
    </tr>
    <!--END FOOTER-->
  </tbody></table>
  <!--END EMAIL CONTENT-->



  
</body>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console