Inboxes

Create an inbox to save and track emails. It's free!

+New inbox
Back
Back
Back 
<!DOCTYPE html>
<!-- Set the language of your main document. This helps screenreaders use the proper language profile, pronunciation, and accent. -->
<html lang="en">
 <head>
  <!-- The title is useful for screenreaders reading a document. Use your sender name or subject line. -->
  <title>
   An Accessible Account Update Email
  </title>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  <!-- Never disable zoom behavior! Fine to set the initial width and scale, but allow users to set their own zoom preferences. -->
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
  <style type="text/css">
   /* CLIENT-SPECIFIC STYLES */
    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;
    }

    /* RESET STYLES */
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }

    table {
      border-collapse: collapse !important;
    }

    body {
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
    }

    /* iOS BLUE LINKS */
    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;
    }

    /* GMAIL BLUE LINKS */
    u + #body a {
      color: inherit;
      text-decoration: none;
      font-size: inherit;
      font-family: inherit;
      font-weight: inherit;
      line-height: inherit;
    }

    /* SAMSUNG MAIL BLUE LINKS */
    #MessageViewBody a {
      color: inherit;
      text-decoration: none;
      font-size: inherit;
      font-family: inherit;
      font-weight: inherit;
      line-height: inherit;
    }

    /* These rules set the link and hover states, making it clear that links are, in fact, links. */
    /* Embrace established conventions like underlines on links to keep emails accessible. */
    a {
      color: #B200FD;
      font-weight: 600;
      text-decoration: underline;
    }

      a:hover {
        color: #000000 !important;
        text-decoration: none !important;
      }

    /* These rules adjust styles for desktop devices, keeping the email responsive for users. */
    /* Some email clients don't properly apply media query-based styles, which is why we go mobile-first. */
    @media screen and (min-width:600px) {
      h1 {
        font-size: 48px !important;
        line-height: 48px !important;
      }

      .intro {
        font-size: 24px !important;
        line-height: 36px !important;
      }
    }
  </style>
 </head>
 <body style="margin: 0 !important; padding: 0 !important;">
  <!-- This ghost table is used to constrain the width in Outlook. The role attribute is set to presentation to prevent it from being read by screenreaders. -->
  <!--[if (gte mso 9)|(IE)]>
  <table cellspacing="0" cellpadding="0" border="0" width="720" align="center" role="presentation"><tr><td>
  <![endif]-->
  <!-- The role and aria-label attributes are added to wrap the email content as an article for screen readers. Some of them will read out the aria-label as the title of the document, so use something like "An email from Your Brand Name" to make it recognizable. -->
  <!-- Default styling of text is applied to the wrapper div. Be sure to use text that is large enough and has a high contrast with the background color for people with visual impairments. -->
  <div aria-label="An email from Your Brand Name" lang="en" role="article" style="background-color: white; color: #2b2b2b; font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; font-weight: 400; line-height: 28px; margin: 0 auto; max-width: 720px; padding: 40px 20px 40px 20px;">
   <!-- Logo section and header. Headers are useful landmark elements. -->
   <header>
    <!-- Since this is a purely decorative image, we can leave the alternative text blank. -->
    <!-- Linking images also helps with Gmail displaying download links next to them. -->
    <center>
     <img alt="" height="70" src="https://inboxflows.com/_/image/https%253A%252F%252Fcdn2.hubspot.net%252Fhubfs%252F2890561%252FFlipd_Logo_SOLO_Cream_NO%2520R2048.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjZG4yLmh1YnNwbyJ9:1kXMar:LdXwDlKf8361C9r9CNkOm8RjeOxdFNUftgnKKJWKBvA" width="70"/>
    </center>
    <!-- The h1 is the main heading of the document and should come first. -->
    <!-- We can override the default styles inline. -->
    <h1 style="color: #4563cd; font-size: 32px; font-weight: 800; line-height: 24px; margin: 48px 0; text-align: center;">
     Login to Flipd
    </h1>
   </header>
   <!-- Main content section. Main is a useful landmark element. -->
   <main>
    <!-- This div is purely presentational, providing a container for the message. -->
    <div style="background-color: #F3F6F9; border-radius: 4px; padding: 24px 48px;">
     <!-- This ghost table is used solely for padding in Word-based Outlook clients. -->
     <!--[if (gte mso 9)|(IE)]>
        <table cellspacing="0" cellpadding="0" border="0" width="720" align="center" role="presentation"><tr><td style="background-color: #F3F6F9; padding: 24px 48px 24px 48px;">
        <![endif]-->
     <!-- Body copy -->
     <strong>
      From your phone
     </strong>
     tap the link below to login to your Flipd account. This link expires two hours from when you received this message.
     <!-- This link uses descriptive text to inform the user what will happen with the link is tapped. -->
     <!-- It also uses inline styles since some email clients won't render embedded styles from the head. -->
     <p>
      <a style="color: #4563cd; text-decoration: underline;">
       Login to Flipd on your device
      </a>
     </p>
     <p>
      <strong>
       Having trouble?
      </strong>
      Try logging in with Facebook or Google instead, or
      <a style="color: #4563cd; text-decoration: underline;">
       go here to resolve
      </a>
     </p>
     <!--[if (gte mso 9)|(IE)]>
        </td></tr></table>
        <![endif]-->
    </div>
   </main>
   <!-- Footer information. Footer is a useful landmark element. -->
   <footer>
    <!-- Since this is a transactional email, you aren't required to include opt-out language. -->
    <p style="font-size: 12px; font-weight: 400; line-height: 12px; margin-top: 48px; text-align: center">
     You received this email because you signed up to use Flipd.
    </p>
    <!-- The address element does exactly what it says. By default, it is block-level and italicizes text. You can override this behavior inline. -->
    <address style="font-size: 12px; font-style: normal; font-weight: 400; line-height: 12px; text-align: center">
     <strong>
      Sent with 🍁 from your friends @ Flipd 10 Dundas Street East, Toronto, Canada
     </strong>
    </address>
   </footer>
  </div>
  <!--[if (gte mso 9)|(IE)]>
  </td></tr></table>
  <![endif]-->
  <p style="font-size: 10px; font-weight: 400; text-align: center">
   <a>
    Unsubscribe from all emails
   </a>
  </p>
  <img alt="" border="0" height="1" src="https://inboxflows.com/_/image/http%253A%252F%252Fem1.flipdapp.co%252Fwf%252Fopen%253Fupn%253DYiV0FSzgDEDrVGpzgknGmApOH-2B4hnvBwC-2Flj5y-2BfGM7vhJ8WbZFd5hit7GOdrrDm9n5ZsMZn6PFjtTddnADgwJfVb0IpVI-2Fv-2B2bVCICaSXkhsYHnw5r5M4cUOcw4W-2FsMUpXL6hQtfvF1TQC3coSsNWEtU2AyDOfjg5KTX3arkEe1x6CJdHMadUhR1Hm43n1bVyaC62O28wbQ2gVWJU3mcD9SjEQRs0m-2Bq45cyppHPGo-3D/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cCUzQSUyRiUyRmVtMS5mbGlwZGFwcCJ9:1kXMar:zVx2-qhiC8uD-4FNG5LCAMDkch00DXpIafoa7nmX0bQ" style="height:1px !important;width:1px !important;border-width:0 !important;margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;" width="1"/>
 </body>
</html>