Inboxes

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

+New inbox
Back
Back
Back 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
  <!-- utf-8 works for most cases -->
  <meta content="width=device-width" name="viewport"/>
  <!-- Forcing initial-scale shouldn't be necessary -->
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
  <!-- Use the latest (edge) version of IE rendering engine -->
  <title>
   Welcome to Ocado
  </title>
  <!-- WEB FONT / @font-face : BEGIN -->
  <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font for SourceSans AND Muli -->
  <!--[if mso]>
    <style type="text/css">
        .sourceSans_fallback {font-family: Trebuchet MS, Arial, sans-serif !important;}
        .muli_fallback {font-family: Trebuchet MS, Arial, sans-serif !important;}
        }
    </style>
    <![endif]-->
  <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: //stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
  <!--[if !mso]><!-->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css"/>
  <link href="https://fonts.googleapis.com/css?family=Muli: 400,600,700,800,900" rel="stylesheet" type="text/css"/>
  <!--<![endif]-->
  <!-- WEB FONT / @font-face : END -->
  <!-- CSS Reset -->
  <style type="text/css">
   /* What it does: Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html, body {
            Margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }
        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        /* What it does: Forces Outlook.com to display emails full width. */
        .ExternalClass {
            width: 100%;
        }
        /* What it does: Forces Outlook.com / Outlook 2016 to show line height 135%. */
        .ExternalClass *  {
            line-height:22px !important;
        }
        /* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin: 0 !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table, td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }
        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            Margin: 0 auto !important;
        }
        table table table {
            table-layout: auto;
        }
        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode: bicubic;
        }
        /* What it does: Overrides styles added when Yahoo's auto-senses a link. */
        .yshortcuts a {
            border-bottom: none !important;
        }
        /* What it does: A work-around for iOS meddling in triggered and blue links. */
        .mobile-link--footer a, a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
        }


        /* Progressive Enhancements */
        /* Progressive Enhancements */
        /* Progressive Enhancements */

        /* What it does: Hover styles for buttons */
        .button-td, .button-a, .button-td-charcoal, .button-td-apple, .button-td-blueberry, .button-td-cabbage, .button-td-raspberry, .button-td-lemon, .button-td-lemondark, .button-a-charcoal, .button-a-apple, .button-a-blueberry,  .button-a-cabbage, .button-a-raspberry, .button-a-lemon, .button-a-lemondark {
            transition: all 100ms ease-in;
        }
        /* default button */
        .button-td:hover, .button-a:hover {
            background: #444444 !important;
            border-color: #444444 !important;
        }
        .button-td-charcoal:hover, .button-a-charcoal:hover {
            background: #444444 !important;
            border-color: #444444 !important;
        }
        .button-td-apple:hover, .button-a-apple:hover {
            background: #6D712E !important;
            border-color: #6D712E !important;
        }
        .button-td-blueberry:hover, .button-a-blueberry:hover {
            background: #0057B8 !important;
            border-color: #0057B8 !important;
        }
        .button-td-cabbage:hover, .button-a-cabbage:hover {
            background: #722257 !important;
            border-color: #722257 !important;
        }
        .button-td-raspberry:hover, .button-a-raspberry:hover {
            background: #8A1538 !important;
            border-color: #8A1538 !important;
        }
        .button-td-lemon:hover, .button-a-lemon:hover {
            background: #FFDE54 !important;
            border-color: #FFDE54 !important;
        }
        .button-td-lemondark:hover, .button-a-lemondark:hover {
            background: #BD472A !important;
            border-color: #BD472A !important;
        }

        /* Media Queries */

        @media only screen and (max-width: 680px) {
            /* What it does: Hides 'View online' link in header on mobile. */
            .weblink a {
                display: none;
            }

            #intro {padding-top: 25px 0 0 0;border: 1px solid #333;}

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid, .fluid-centered {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                Margin-left: auto !important;
                Margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                Margin-left: auto !important;
                Margin-right: auto !important;
            }
            /* What it does: Forces table cells into full-width rows. */
            .stack-column, .stack-column-center {
                display: block !important;
                width: 100% !important;
                direction: ltr !important;
                max-width: 500px !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                Margin-left: auto !important;
                Margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;}
        }


        @media only screen and (max-width: 680px){
            /* What it does: Hides an image*/
            .hideIMGbelow480px {
                display: none !important;
            }
            /* What it does: Hides an image*/
            .hideTDbelow480px {
                display: none !important;
                padding: 0 !important;
            }

        }
  </style>
 </head>
 <!-- CORE TEMPLATE BODY : BEGIN -->
 <body bgcolor="#2D333A" style="margin: 0;" width="100%">
  <table bgcolor="#2D333A" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;" width="100%">
   <tr>
    <td valign="top">
     <center style="width: 100%;">
      <!-- PRE-HEADER TEXT HIDDEN : BEGIN -->
      <div style="display:none; font-size:1px; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; mso-hide:all; font-family: 'Muli', Arial, Helvetica, sans-serif;">
       Thanks for registering with us.
      </div>
      <!-- PRE-HEADER TEXT HIDDEN : END -->
      <!-- HEADER : BEGIN -->
      <div style="max-width: 680px;">
       <!--[if (gte mso 9)|(IE)]>
                <table cellspacing="0" cellpadding="0" border="0" width="680" align="center">
                    <tr>
                        <td>
                <![endif]-->
       <table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="max-width: 680px; border-bottom: solid 3px #4d216d;" width="100%">
        <tr>
         <td bgcolor="#2D333A" class="hideTDbelow480px" style="text-align: right; width: 100%; font-size: 10px; font-family: 'Muli', Arial, sans-serif; mso-height-rule: exactly; line-height:120%; padding:10px 0 10px 0;">
         </td>
        </tr>
        <tr>
         <td align="center" bgcolor="#FFFFFF" style="padding:0; text-align: center; font-family: 'Muli', Arial, sans-serif; background-color: FFFFFF; font-size: 0; line-height: 0;" valign="middle">
          <a style="color:#BCC811; text-decoration:none; display: block;font-size: 0; line-height: 0;">
           <img alt="Ocado" border="0" height="65" src="https://inboxflows.com/_/image/http%253A%252F%252Focado.emsecure.net%252Fimages%252Ftransactional%252F2020_OcadoLogo_w.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cCUzQSUyRiUyRm9jYWRvLmVtc2VjdSJ9:1mVYKR:j0_gQhFXoCIu1bSpPizQc3uhNO-4FdB1zlLR6Wqs3Go" style="font-family: 'Muli', Arial, sans-serif; color:#54585A; text-decoration:none; font-size:20px; color: #2D333A; max-height: 65px; line-height: 20px;" width="187"/>
          </a>
         </td>
        </tr>
       </table>
       <!-- HEADER : END -->
       <!-- BODY : BEGIN -->
       <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 680px;" width="100%">
        <!--  MODULES : BEGIN -->
        <!--  MODULES : BEGIN -->
        <!--  MODULES : BEGIN -->
        <!--  MODULES : BEGIN -->
        <!--  MODULES : BEGIN -->
        <tr>
         <td>
          <!--[if (gte mso 9)|(IE)]><center><table><tr><td width="560" style="width:560px;"><![endif]-->
          <div style="max-width: 560px; margin: 0 auto;">
           <table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="max-width: 560px;" width="100%">
            <tr>
             <td style="padding: 20px 10px 15px 20px; text-align: left; mso-height-rule: exactly;  font-family: 'Muli', Arial, Helvetica, sans-serif; font-style:normal; font-size: 24px; font-weight:bold; color:#4d216d; line-height:110%;">
              Thanks for registering with Ocado
             </td>
            </tr>
            <tr>
             <td style="padding: 0 20px 10px 20px; text-align:left; font-family: 'Muli', Arial, Helvetica, sans-serif; font-style:normal; font-size: 16px; color: #2D333A; line-height: 135%; mso-height-rule: exactly;">
              We're excited to welcome you to Ocado. Now that you're all signed up, you can start shopping for M&amp;S Food, Ocado Own Range produce, big-name brands and much more at
              <a style="text-decoration: none; color: #2D333A">
               ocado.com
              </a>
              .
             </td>
            </tr>
            <tr>
             <td style="padding: 0 20px 15px 20px; text-align:left; font-family: 'Muli', Arial, Helvetica, sans-serif; font-style:normal; font-size: 16px; color: #2D333A; line-height: 135%; mso-height-rule: exactly;">
              Book your first delivery slot today.
             </td>
            </tr>
            <tr>
             <td style="padding: 0 20px 5px 20px; text-align:left; font-family: 'Muli', Arial, Helvetica, sans-serif; font-style:normal; font-size: 16px; color: #2D333A; line-height: 135%; mso-height-rule: exactly;">
              See you soon.
             </td>
            </tr>
            <tr>
             <td style="padding: 0 20px 30px 20px; text-align:left; font-family: 'Muli', Arial, Helvetica, sans-serif; font-style:normal; font-size: 16px; color: #2D333A; line-height: 135%; mso-height-rule: exactly;">
              Ocado Customer Service team
             </td>
            </tr>
           </table>
          </div>
          <!--[if mso]></td></tr></table></center><![endif]-->
         </td>
        </tr>
        <!--  MODULES : END -->
       </table>
       <!-- BODY : END -->
       <!-- FOOTER : BEGIN -->
       <!-- * Footer 2017 - APP, CONTACT, SOCIAL (104) - BEGIN -->
       <!-- FOOTER_TOP : BEGIN -->
       <!-- FOOTER_APP : BEGIN -->
       <!-- SOCIAL ICONS : END -->
       <!-- FOOTER_TOP : END -->
       <!-- * Footer 2017 - APP, CONTACT, SOCIAL (104) - END -->
       <!-- * Footer 2017 - STANDARD OPT-IN (105) - BEGIN -->
       <table align="center" bgcolor="#2D333A" border="0" cellpadding="0" cellspacing="0" style="max-width: 500px;" width="90%">
        <tr>
         <td bgcolor="#2D333A" style="padding: 30px 0 0 0; width: 100%; font-size: 12px; font-family: 'Muli', Arial, Helvetica, sans-serif; mso-height-rule: exactly; line-height:16px; text-align: center; color: #FFFFFF;">
          You’ve received this message as it contains important information about your
          <a style="text-decoration: none; color: #ffffff">
           ocado.com
          </a>
          account.
         </td>
        </tr>
       </table>
       <table align="center" bgcolor="#2D333A" border="0" cellpadding="0" cellspacing="0" style="max-width: 500px;" width="90%">
        <tr>
         <td bgcolor="#2D333A" style="padding: 15px 0 30px 0; width: 100%; font-size: 12px; font-family: 'Source Sans Pro', 'Trebuchet MS', Arial, Helvetica, sans-serif; mso-height-rule: exactly; line-height:16px; text-align: center;">
          <a style="color:#FFFFFF; text-decoration:underline;">
           Privacy Policy
          </a>
          <br/>
          <br/>
          <span style="color:#FFFFFF; font-size:12px; ">
           © 2021 Ocado Retail Limited. Registered address:
           <span class="mobile-link--footer">
            Apollo Court, 2 Bishops Square, Hatfield Business Park, Hatfield, Herts, AL10 9EX.
           </span>
           Registered in England – company number:
           <span class="mobile-link--footer">
            03875000
           </span>
           .
          </span>
         </td>
        </tr>
       </table>
       <!-- * Footer 2017 - STANDARD OPT-IN (105) - END -->
       <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
      </div>
     </center>
    </td>
   </tr>
  </table>
 </body>
 <!-- CORE TEMPLATE BODY : END -->
</html>