cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <!DOCTYPE html>
<html>
  
  <head>
    <title>Strava</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width" name="viewport">
  </head>
  
  <body style="background: #f5f5f5; font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; padding: 15px; text-align: center"
  bgcolor="#f5f5f5">
    <style type="text/css">
      .vh:active {
      position: static; clip: auto; width: auto; height: auto; margin: 0; overflow: visible;
      }
      .vh:focus {
      position: static; clip: auto; width: auto; height: auto; margin: 0; overflow: visible;
      }
      .sr-only:active {
      position: static; clip: auto; width: auto; height: auto; margin: 0; overflow: visible;
      }
      .sr-only:focus {
      position: static; clip: auto; width: auto; height: auto; margin: 0; overflow: visible;
      }
      .clear:after {
      clear: both; content: " "; display: table;
      }
      .clear:after {
      clear: both; content: " "; display: table;
      }
      .clearfix:after {
      clear: both; content: " "; display: table;
      }
      .clearfix:after {
      clear: both; content: " "; display: table;
      }
      @font-face {
      font-family: 'MaisonNeue'; src: url("/assets/maison/MaisonNeueWEB-Bold-9ed84f4e6451f5d8ad70499af6bda7ca.woff2") format("woff2"),url("/assets/maison/MaisonNeueWEB-Bold-233d73ab7442cd12fb1abd97020f6234.woff") format("woff"); font-weight: 700; font-style: normal;
      }
      @font-face {
      font-family: 'MaisonNeue'; src: url("/assets/maison/MaisonNeueWEB-Book-3f07d457a350b183b68f47a9a77760ea.woff2") format("woff2"),url("/assets/maison/MaisonNeueWEB-Book-4cbe2bd1cb409c74299d5bac45f8ae92.woff") format("woff"); font-weight: 400; font-style: normal;
      }
      @font-face {
      font-family: 'MaisonNeue'; src: url("/assets/maison/MaisonNeueWEB-BookItalic-b7a84deccd434b4995d14028f52a0fa4.woff2") format("woff2"),url("/assets/maison/MaisonNeueWEB-BookItalic-31cc819d4bfbb1c4d56a48dbebc43424.woff") format("woff"); font-weight: 400; font-style: italic;
      }
      body {
      font-family: "MaisonNeue","Helvetica Neue",Helvetica,Arial,sans-serif; background-color: #f5f5f5; text-align: center; padding: 15px;
      }
      img {
      max-width: 100%;
      }
      @media screen and (max-width: 480px) and (max-device-width: 480px) {
        td > div > div > table td {
          display: block !important; width: 100% !important; padding: 0 !important; text-align: left !important;
        }
        td > div > div > table td img {
          margin: 0 auto 20px !important; float: none !important; max-width: 124px;
        }
        table td > div > span {
          display: block !important;
        }
      }
    </style>
    <div id="s-email-container">
      <style data-premailer="ignore" type="text/css">
</style>
      <!--[if mso]>
        <center>
          <table>
            <tr>
              <td width='600' align='center'>
              <![endif]-->
              <div class="pre-header-text" style="color: #F5F5F5; display: none; font-size: 1px; height: 0; max-height: 0; max-width: 0; mso-hide: all; overflow: hidden; width: 0">
                <!--[if mso]><font color='#ffffff' size='1'><![endif]-->

<!--[if mso]></font>
                <![endif]-->
              </div>
              <table cellpadding="0" cellspacing="0" id="s-email-layout" style="margin: 0 auto; max-width: 600px">
                <tr>
                  <td>
                    <div class="section mt-md" style="background: #FFF; font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; margin-bottom: 15px; margin-top: 20px">
                      <a href="https://strava.app.link/3p?%243p=e_sg&%24android_url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.strava%26hl%3Den&%24desktop_url=http%3A%2F%2Fwww.strava.com%2Fupload%2Fmanual_new&%24ios_url=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fstrava-running-and-cycling-gps%2Fid426826309%3Fmt%3D8&%24original_url=strava%3A%2F%2Frecord&channel=email&tags=welcome_v2+record+screen"
                      universal="true" style="color: #fc4c02; text-decoration: none">
                        <img alt="Welcome" src="http://d3nn82uaxijpm6.cloudfront.net/assets/email/welcome/welcome_mf_run-3de428e1084c8ccb2a8f739824630546.jpg"
                        style="max-width: 100%">
                      </a>
                      <div class="sub-section" style="padding: 40px 0; text-align: center" align="center">
                        
<h1 style="font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 42px; font-style: normal; font-weight: 700; margin-bottom: 15px; margin-top: 0; padding-left: 30px; padding-right: 30px">You're In</h1>

                        <p style="color: #383838; font-size: 18px; line-height: 28px; margin-top: 15px; padding-left: 30px; padding-right: 30px">Strava is a community of millions of athletes from all over the world, and we’re
                          so happy that you’ve joined us. Welcome! However you enjoy your sport, we think
                          you’ll like it even more on Strava.</p>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="section" id="s-email-content" style="background: #FFF; font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; margin-bottom: 15px; text-align: left"
                  align="left" bgcolor="#FFF">
                    <div class="inset" style="margin-bottom: 0; margin-top: 0; padding: 20px">
                      
<h1 class="text-center bottomless" style="font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 30px; font-style: normal; font-weight: 300; margin-bottom: 0; margin-top: 0; padding-bottom: 0; text-align: center"
                      align="center">Welcome to Strava!</h1>

                    </div>
                    <div class="content" style="text-align: center" align="center">
                      <div class="section" id="feature-section" style="background: #FFF; font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; margin-bottom: 15px">
                        <div class="sub-section" style="padding: 40px 0; text-align: center" align="center">
                          <img alt="Track &amp; Analyze" src="http://d3nn82uaxijpm6.cloudfront.net/assets/email/welcome/Track-f3068a3461a9a0608470b1f13895952d.png"
                          width="60" style="margin-bottom: 30px; max-width: 100%">
                          <h2 style="font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 24px; font-style: normal; font-weight: 200; line-height: 1.2em; margin-bottom: 15px; margin-top: 0; padding-left: 30px; padding-right: 30px">Track &amp; Analyze</h2>

                          <p style="color: #383838; font-size: 18px; line-height: 28px; margin-top: 15px; padding-left: 30px; padding-right: 30px">Strava is a tracking app that records your workouts, races and adventures and
                            provides insightful and fun activity analysis. We work with your favorite GPS device,
                            too.</p>
                        </div>
                        <div class="sub-section" style="padding: 40px 0; text-align: center" align="center">
                          <img alt="Share &amp; Connect" src="http://d3nn82uaxijpm6.cloudfront.net/assets/email/welcome/Share-050db82a55b8a6badd01808ca9db9e57.png"
                          width="60" style="margin-bottom: 30px; max-width: 100%">
                          <h2 style="font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 24px; font-style: normal; font-weight: 200; line-height: 1.2em; margin-bottom: 15px; margin-top: 0; padding-left: 30px; padding-right: 30px">Share &amp; Connect</h2>

                          <p style="color: #383838; font-size: 18px; line-height: 28px; margin-top: 15px; padding-left: 30px; padding-right: 30px">We're the social network for athletes, and you can use Strava to connect with
                            your friends, join clubs, follow your favorite brands and get new sport-related
                            content.</p>
                        </div>
                        <div class="sub-section" style="padding: 40px 0 15px; text-align: center" align="center">
                          <img alt="Explore &amp; Compete" src="http://d3nn82uaxijpm6.cloudfront.net/assets/email/welcome/Explore-b18ca181f153377ed976e2d9b7dfee73.png"
                          width="60" style="margin-bottom: 30px; max-width: 100%">
                          <h2 style="font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 24px; font-style: normal; font-weight: 200; line-height: 1.2em; margin-bottom: 15px; margin-top: 0; padding-left: 30px; padding-right: 30px">Explore &amp; Compete</h2>

                          <p style="color: #383838; font-size: 18px; line-height: 28px; margin-top: 15px; padding-left: 30px; padding-right: 30px">Strava provides tools to help you find a new trail, compete with friends, and
                            discover events, races, workouts and groups of people like you.</p>
                        </div>
                      </div>
                      <div class="section" style="background: #FFF; font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; margin-bottom: 15px">
                        <a href="https://strava.app.link/3p?%243p=e_sg&%24android_url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.strava%26hl%3Den&%24desktop_url=http%3A%2F%2Fwww.strava.com%2Fupload%2Fmanual_new&%24ios_url=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fstrava-running-and-cycling-gps%2Fid426826309%3Fmt%3D8&%24original_url=strava%3A%2F%2Frecord&channel=email&tags=welcome_v2+record+screen"
                        universal="true" style="color: #fc4c02; text-decoration: none">
                          <img alt="Visualized Data" src="http://d3nn82uaxijpm6.cloudfront.net/assets/email/welcome/Visual_Record-e18c6e311fd88321c182bbebbeb8b9a1.jpg"
                          style="max-width: 100%">
                        </a>
                        <div class="sub-section no-top-space" style="padding: 0 0 40px; text-align: center"
                        align="center">
                          <p style="color: #383838; font-size: 18px; line-height: 28px; margin-top: 15px; padding-left: 30px; padding-right: 30px">The best way to get started is to record an activity (if you haven’t already).
                            When you’re ready for your first run, ride or swim, open the app or follow this
                            <a
                            href="https://strava.app.link/3p?%243p=e_sg&%24android_url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.strava%26hl%3Den&%24desktop_url=http%3A%2F%2Fwww.strava.com%2Fupload%2Fmanual_new&%24ios_url=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fstrava-running-and-cycling-gps%2Fid426826309%3Fmt%3D8&%24original_url=strava%3A%2F%2Frecord&channel=email&tags=welcome_v2+record+screen"
                            style="color: #fc4c02; text-decoration: none">link</a>:</p>
                          <a href="https://strava.app.link/3p?%243p=e_sg&%24android_url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.strava%26hl%3Den&%24desktop_url=http%3A%2F%2Fwww.strava.com%2Fupload%2Fmanual_new&%24ios_url=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fstrava-running-and-cycling-gps%2Fid426826309%3Fmt%3D8&%24original_url=strava%3A%2F%2Frecord&channel=email&tags=welcome_v2+record+screen"
                          class="cta-button" universal="true" style="background: #fc4c02; border-radius: 40px; border: 2px solid #fc4c02; color: #fff; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 16px; margin-bottom: 15px; padding: 20px 40px; text-align: center; text-decoration: none; width: 160px">Record an Activity</a>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="text-small" id="s-email-footer" style="display: block; font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; margin: 15px auto 0; max-width: 600px; text-align: center"
                  align="center">
                    <div class="section" style="background: #FFF; font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; margin-bottom: 15px; padding: 60px 20px">
                      
<h3 class="topless" style="color: #A4A4A4; font-family: 'MaisonNeue','Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 1.45em; margin-bottom: 0; margin-top: 0">Follow Strava</h3>

                      <center class="padded" style="padding: 30px 0">
                        <table class="social-bar" style="border-collapse: collapse">
                          <tr>
                            <td style="padding: 0 10px; text-align: center" align="center">
                              <a href="https://www.facebook.com/strava" style="color: #333; padding: 0; text-decoration: underline; width: 50px">
                                <img alt="Facebook" src="http://d3nn82uaxijpm6.cloudfront.net/assets/application/mailer/social/facebook-a060d492474054743c19b0aba1685b6d.png"
                                width="45" style="border: none; max-width: 100%">
                              </a>
                            </td>
                            <td style="padding: 0 10px; text-align: center" align="center">
                              <a href="https://twitter.com/strava" style="color: #333; padding: 0; text-decoration: underline; width: 50px">
                                <img alt="Twitter" src="http://d3nn82uaxijpm6.cloudfront.net/assets/application/mailer/social/twitter-5949c656133342df7ca8d5e69cd0e336.png"
                                width="45" style="border: none; max-width: 100%">
                              </a>
                            </td>
                            <td style="padding: 0 10px; text-align: center" align="center">
                              <a href="https://www.snapchat.com/add/stravasnaps" style="color: #333; padding: 0; text-decoration: underline; width: 50px">
                                <img alt="Snapchat" src="http://d3nn82uaxijpm6.cloudfront.net/assets/application/mailer/social/snapchat-15fe2e89b48bde221d3324a693b3b01d.png"
                                width="45" style="border: none; max-width: 100%">
                              </a>
                            </td>
                            <td style="padding: 0 10px; text-align: center" align="center">
                              <a href="https://www.instagram.com/stravacycling/" style="color: #333; padding: 0; text-decoration: underline; width: 50px">
                                <img alt="Instagram" src="http://d3nn82uaxijpm6.cloudfront.net/assets/application/mailer/social/instagram-14da715b9da5fbd079e26fe302927dcc.png"
                                width="45" style="border: none; max-width: 100%">
                              </a>
                            </td>
                            <td style="padding: 0 10px; text-align: center" align="center">
                              <a href="https://strava.app.link/3p?%243p=e_sg&%24android_url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.strava%26hl%3Den&%24desktop_url=www.strava.com%2Fclubs%2Fstrava&%24ios_url=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fstrava-running-and-cycling-gps%2Fid426826309%3Fmt%3D8&%24original_url=strava%3A%2F%2Fclubs%2Fstrava&channel=email&tags=email+view+club"
                              universal="true" style="color: #333; padding: 0; text-decoration: underline; width: 50px">
                                <img alt="Strava" src="http://d3nn82uaxijpm6.cloudfront.net/assets/application/mailer/social/strava-270b24c57d88aea7bae6db771523c9d3.png"
                                width="45" style="border: none; max-width: 100%">
                              </a>
                            </td>
                          </tr>
                        </table>
                      </center>
                      <p class="address" style="color: #A4A4A4; font-size: 12px; line-height: 16px; margin: 10px 0">© 2017 Strava, Inc., All rights reserved.
                        <br>500 Third Street, Suite 110, San Francisco, CA 94107</p>
                      <p style="color: #A4A4A4; font-size: 12px; line-height: 16px; margin: 10px 0 0">You received this message because you are a member of
                        <a href="https://www.strava.com/"
                        style="color: #333; text-decoration: underline">Strava</a>.</p>
                      <p style="color: #A4A4A4; font-size: 12px; line-height: 16px; margin: 10px 0 0">Manage your email notifications from your
                        <a style="border: none; color: #333; text-decoration: none"
                        href="#">account settings page</a>.</p>
                    </div>
                  </td>
                </tr>
              </table>
              <!--[if mso]>
              </td>
            </tr>
          </table>
        </center>
      <![endif]-->
    </div>
   
  </body>

</html>
            
          
!
999px
Loading ..................

Console