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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE]>
  <html xmlns="http://www.w3.org/1999/xhtml" class="ie">
  <![endif]-->
  <!--[if !IE]><!-->
    <html style="margin: 0;padding: 0;" xmlns="http://www.w3.org/1999/xhtml">
    <!--<![endif]-->
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title></title>
      <!--[if !mso]>
        <!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!--<![endif]-->
      <meta name="viewport" content="width=device-width">
      <style type="text/css">
        @media only screen and (min-width: 620px){.wrapper{min-width:600px !important}.wrapper h1{}.wrapper h1{font-size:44px !important;line-height:50px !important}.wrapper h2{}.wrapper h2{font-size:44px !important;line-height:50px !important}.wrapper h3{}.wrapper h3{font-size:22px !important;line-height:31px !important}.column{}.wrapper .size-8{font-size:8px !important;line-height:14px !important}.wrapper .size-9{font-size:9px !important;line-height:16px !important}.wrapper .size-10{font-size:10px !important;line-height:18px !important}.wrapper .size-11{font-size:11px !important;line-height:19px !important}.wrapper .size-12{font-size:12px !important;line-height:19px !important}.wrapper .size-13{font-size:13px !important;line-height:21px !important}.wrapper .size-14{font-size:14px !important;line-height:21px !important}.wrapper .size-15{font-size:15px !important;line-height:23px 
        !important}.wrapper .size-16{font-size:16px !important;line-height:24px !important}.wrapper .size-17{font-size:17px !important;line-height:26px !important}.wrapper .size-18{font-size:18px !important;line-height:26px !important}.wrapper .size-20{font-size:20px !important;line-height:28px !important}.wrapper .size-22{font-size:22px !important;line-height:31px !important}.wrapper .size-24{font-size:24px !important;line-height:32px !important}.wrapper .size-26{font-size:26px !important;line-height:34px !important}.wrapper .size-28{font-size:28px !important;line-height:36px !important}.wrapper .size-30{font-size:30px !important;line-height:38px !important}.wrapper .size-32{font-size:32px !important;line-height:40px !important}.wrapper .size-34{font-size:34px !important;line-height:43px !important}.wrapper .size-36{font-size:36px !important;line-height:43px !important}.wrapper 
        .size-40{font-size:40px !important;line-height:47px !important}.wrapper .size-44{font-size:44px !important;line-height:50px !important}.wrapper .size-48{font-size:48px !important;line-height:54px !important}.wrapper .size-56{font-size:56px !important;line-height:60px !important}.wrapper .size-64{font-size:64px !important;line-height:63px !important}}
      </style>
      <style type="text/css">
        body {
          margin: 0;
          padding: 0;
        }
        table {
          border-collapse: collapse;
          table-layout: fixed;
        }
        * {
          line-height: inherit;
        }
        [x-apple-data-detectors],
        [href^="tel"],
        [href^="sms"] {
          color: inherit !important;
          text-decoration: none !important;
        }
        .wrapper .footer__share-button a:hover,
        .wrapper .footer__share-button a:focus {
          color: #ffffff !important;
        }
        .btn a:hover,
        .btn a:focus,
        .footer__share-button a:hover,
        .footer__share-button a:focus,
        .email-footer__links a:hover,
        .email-footer__links a:focus {
          opacity: 0.8;
        }
        .preheader,
        .header,
        .layout,
        .column {
          transition: width 0.25s ease-in-out, max-width 0.25s ease-in-out;
        }
        .layout,
        div.header {
          max-width: 400px !important;
          -fallback-width: 95% !important;
          width: calc(100% - 20px) !important;
        }
        div.preheader {
          max-width: 360px !important;
          -fallback-width: 90% !important;
          width: calc(100% - 60px) !important;
        }
        .snippet,
        .webversion {
          Float: none !important;
        }
        .column {
          max-width: 400px !important;
          width: 100% !important;
        }
        .fixed-width.has-border {
          max-width: 402px !important;
        }
        .fixed-width.has-border .layout__inner {
          box-sizing: border-box;
        }
        .snippet,
        .webversion {
          width: 50% !important;
        }
        .ie .btn {
          width: 100%;
        }
        [owa] .column div,
        [owa] .column button {
          display: block !important;
        }
        .ie .column,
        [owa] .column,
        .ie .gutter,
        [owa] .gutter {
          display: table-cell;
          float: none !important;
          vertical-align: top;
        }
        .ie div.preheader,
        [owa] div.preheader,
        .ie .email-footer,
        [owa] .email-footer {
          max-width: 560px !important;
          width: 560px !important;
        }
        .ie .snippet,
        [owa] .snippet,
        .ie .webversion,
        [owa] .webversion {
          width: 280px !important;
        }
        .ie div.header,
        [owa] div.header,
        .ie .layout,
        [owa] .layout,
        .ie .one-col .column,
        [owa] .one-col .column {
          max-width: 600px !important;
          width: 600px !important;
        }
        .ie .fixed-width.has-border,
        [owa] .fixed-width.has-border,
        .ie .has-gutter.has-border,
        [owa] .has-gutter.has-border {
          max-width: 602px !important;
          width: 602px !important;
        }
        .ie .two-col .column,
        [owa] .two-col .column {
          max-width: 300px !important;
          width: 300px !important;
        }
        .ie .three-col .column,
        [owa] .three-col .column,
        .ie .narrow,
        [owa] .narrow {
          max-width: 200px !important;
          width: 200px !important;
        }
        .ie .wide,
        [owa] .wide {
          width: 400px !important;
        }
        .ie .two-col.has-gutter .column,
        [owa] .two-col.x_has-gutter .column {
          max-width: 290px !important;
          width: 290px !important;
        }
        .ie .three-col.has-gutter .column,
        [owa] .three-col.x_has-gutter .column,
        .ie .has-gutter .narrow,
        [owa] .has-gutter .narrow {
          max-width: 188px !important;
          width: 188px !important;
        }
        .ie .has-gutter .wide,
        [owa] .has-gutter .wide {
          max-width: 394px !important;
          width: 394px !important;
        }
        .ie .two-col.has-gutter.has-border .column,
        [owa] .two-col.x_has-gutter.x_has-border .column {
          max-width: 292px !important;
          width: 292px !important;
        }
        .ie .three-col.has-gutter.has-border .column,
        [owa] .three-col.x_has-gutter.x_has-border .column,
        .ie .has-gutter.has-border .narrow,
        [owa] .has-gutter.x_has-border .narrow {
          max-width: 190px !important;
          width: 190px !important;
        }
        .ie .has-gutter.has-border .wide,
        [owa] .has-gutter.x_has-border .wide {
          max-width: 396px !important;
          width: 396px !important;
        }
        .ie .fixed-width .layout__inner {
          border-left: 0 none white !important;
          border-right: 0 none white !important;
        }
        .ie .layout__edges {
          display: none;
        }
        .mso .layout__edges {
          font-size: 0;
        }
        .layout-fixed-width,
        .mso .layout-full-width {
          background-color: #ffffff;
        }
        @media only screen and (min-width: 620px) {
          .column,
          .gutter {
            display: table-cell;
            Float: none !important;
            vertical-align: top;
          }
          div.preheader,
          .email-footer {
            max-width: 560px !important;
            width: 560px !important;
          }
          .snippet,
          .webversion {
            width: 280px !important;
          }
          div.header,
          .layout,
          .one-col .column {
            max-width: 600px !important;
            width: 600px !important;
          }
          .fixed-width.has-border,
          .fixed-width.ecxhas-border,
          .has-gutter.has-border,
          .has-gutter.ecxhas-border {
            max-width: 602px !important;
            width: 602px !important;
          }
          .two-col .column {
            max-width: 300px !important;
            width: 300px !important;
          }
          .three-col .column,
          .column.narrow {
            max-width: 200px !important;
            width: 200px !important;
          }
          .column.wide {
            width: 400px !important;
          }
          .two-col.has-gutter .column,
          .two-col.ecxhas-gutter .column {
            max-width: 290px !important;
            width: 290px !important;
          }
          .three-col.has-gutter .column,
          .three-col.ecxhas-gutter .column,
          .has-gutter .narrow {
            max-width: 188px !important;
            width: 188px !important;
          }
          .has-gutter .wide {
            max-width: 394px !important;
            width: 394px !important;
          }
          .two-col.has-gutter.has-border .column,
          .two-col.ecxhas-gutter.ecxhas-border .column {
            max-width: 292px !important;
            width: 292px !important;
          }
          .three-col.has-gutter.has-border .column,
          .three-col.ecxhas-gutter.ecxhas-border .column,
          .has-gutter.has-border .narrow,
          .has-gutter.ecxhas-border .narrow {
            max-width: 190px !important;
            width: 190px !important;
          }
          .has-gutter.has-border .wide,
          .has-gutter.ecxhas-border .wide {
            max-width: 396px !important;
            width: 396px !important;
          }
        }
        @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
          .fblike {
            background-image: url(http://i7.cmail20.com/static/eb/master/13-the-blueprint-3/images/fblike@2x.png) !important;
          }
          .tweet {
            background-image: url(http://i10.cmail20.com/static/eb/master/13-the-blueprint-3/images/tweet@2x.png) !important;
          }
          .linkedinshare {
            background-image: url(http://i8.cmail20.com/static/eb/master/13-the-blueprint-3/images/lishare@2x.png) !important;
          }
          .forwardtoafriend {
            background-image: url(http://i9.cmail20.com/static/eb/master/13-the-blueprint-3/images/forward@2x.png) !important;
          }
        }
        @media (max-width: 321px) {
          .fixed-width.has-border .layout__inner {
            border-width: 1px 0 !important;
          }
          .layout,
          .column {
            min-width: 320px !important;
            width: 320px !important;
          }
          .border {
            display: none;
          }
        }
        .mso div {
          border: 0 none white !important;
        }
        .mso .w560 .divider {
          Margin-left: 260px !important;
          Margin-right: 260px !important;
        }
        .mso .w360 .divider {
          Margin-left: 160px !important;
          Margin-right: 160px !important;
        }
        .mso .w260 .divider {
          Margin-left: 110px !important;
          Margin-right: 110px !important;
        }
        .mso .w160 .divider {
          Margin-left: 60px !important;
          Margin-right: 60px !important;
        }
        .mso .w354 .divider {
          Margin-left: 157px !important;
          Margin-right: 157px !important;
        }
        .mso .w250 .divider {
          Margin-left: 105px !important;
          Margin-right: 105px !important;
        }
        .mso .w148 .divider {
          Margin-left: 54px !important;
          Margin-right: 54px !important;
        }
        .mso .size-8,
        .ie .size-8 {
          font-size: 8px !important;
          line-height: 14px !important;
        }
        .mso .size-9,
        .ie .size-9 {
          font-size: 9px !important;
          line-height: 16px !important;
        }
        .mso .size-10,
        .ie .size-10 {
          font-size: 10px !important;
          line-height: 18px !important;
        }
        .mso .size-11,
        .ie .size-11 {
          font-size: 11px !important;
          line-height: 19px !important;
        }
        .mso .size-12,
        .ie .size-12 {
          font-size: 12px !important;
          line-height: 19px !important;
        }
        .mso .size-13,
        .ie .size-13 {
          font-size: 13px !important;
          line-height: 21px !important;
        }
        .mso .size-14,
        .ie .size-14 {
          font-size: 14px !important;
          line-height: 21px !important;
        }
        .mso .size-15,
        .ie .size-15 {
          font-size: 15px !important;
          line-height: 23px !important;
        }
        .mso .size-16,
        .ie .size-16 {
          font-size: 16px !important;
          line-height: 24px !important;
        }
        .mso .size-17,
        .ie .size-17 {
          font-size: 17px !important;
          line-height: 26px !important;
        }
        .mso .size-18,
        .ie .size-18 {
          font-size: 18px !important;
          line-height: 26px !important;
        }
        .mso .size-20,
        .ie .size-20 {
          font-size: 20px !important;
          line-height: 28px !important;
        }
        .mso .size-22,
        .ie .size-22 {
          font-size: 22px !important;
          line-height: 31px !important;
        }
        .mso .size-24,
        .ie .size-24 {
          font-size: 24px !important;
          line-height: 32px !important;
        }
        .mso .size-26,
        .ie .size-26 {
          font-size: 26px !important;
          line-height: 34px !important;
        }
        .mso .size-28,
        .ie .size-28 {
          font-size: 28px !important;
          line-height: 36px !important;
        }
        .mso .size-30,
        .ie .size-30 {
          font-size: 30px !important;
          line-height: 38px !important;
        }
        .mso .size-32,
        .ie .size-32 {
          font-size: 32px !important;
          line-height: 40px !important;
        }
        .mso .size-34,
        .ie .size-34 {
          font-size: 34px !important;
          line-height: 43px !important;
        }
        .mso .size-36,
        .ie .size-36 {
          font-size: 36px !important;
          line-height: 43px !important;
        }
        .mso .size-40,
        .ie .size-40 {
          font-size: 40px !important;
          line-height: 47px !important;
        }
        .mso .size-44,
        .ie .size-44 {
          font-size: 44px !important;
          line-height: 50px !important;
        }
        .mso .size-48,
        .ie .size-48 {
          font-size: 48px !important;
          line-height: 54px !important;
        }
        .mso .size-56,
        .ie .size-56 {
          font-size: 56px !important;
          line-height: 60px !important;
        }
        .mso .size-64,
        .ie .size-64 {
          font-size: 64px !important;
          line-height: 63px !important;
        }
      </style>
      <!--[if !mso]>
        <!-->
        <style type="text/css">
          @import url(https://fonts.googleapis.com/css?family=Bitter:400,700,400italic);
        </style>
        <link href="https://fonts.googleapis.com/css?family=Bitter:400,700,400italic"
        rel="stylesheet" type="text/css">
      <!--<![endif]-->
      <style type="text/css">
        body{background-color:#f7e34a}.logo a:hover,.logo a:focus{color:#fff !important}.mso .layout-has-border{border-top:1px solid #d2bb09;border-bottom:1px solid #d2bb09}.mso .layout-has-bottom-border{border-bottom:1px solid #d2bb09}.mso .border,.ie .border{background-color:#d2bb09}.mso h1,.ie h1{}.mso h1,.ie h1{font-size:44px !important;line-height:50px !important}.mso h2,.ie h2{}.mso h2,.ie h2{font-size:44px !important;line-height:50px !important}.mso h3,.ie h3{}.mso h3,.ie h3{font-size:22px !important;line-height:31px !important}.mso .layout__inner,.ie .layout__inner{}.mso .footer__share-button p{}.mso .footer__share-button p{font-family:Avenir,sans-serif}
      </style>
    </head>
    <!--[if mso]>
      
      <body class="mso">
      <![endif]-->
      <!--[if !mso]>
        <!-->
        
        <body class="half-padding" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;">
        <!--<![endif]-->
        <table class="wrapper" style="border-collapse: collapse;table-layout: fixed;min-width: 320px;width: 100%;background-color: #f7e34a;"
        cellpadding="0" cellspacing="0" role="presentation">
          <tbody>
            <tr>
              <td>
                <div role="banner">
                  <div class="preheader" style="Margin: 0 auto;max-width: 560px;min-width: 280px; width: 280px;width: calc(28000% - 167440px);">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                      <!--[if (mso)|(IE)]>
                        <table align="center" class="preheader" cellpadding="0" cellspacing="0" role="presentation">
                          <tr>
                            <td style="width: 280px" valign="top">
                            <![endif]-->
                            <div class="snippet" style="display: table-cell;Float: left;font-size: 12px;line-height: 19px;max-width: 280px;min-width: 140px; width: 140px;width: calc(14000% - 78120px);padding: 10px 0 5px 0;color: #000;font-family: Avenir,sans-serif;">
                              <p style="Margin-top: 0;Margin-bottom: 0;">Little Books for Big Ideas</p>
                            </div>
                            <!--[if (mso)|(IE)]>
                            </td>
                            <td style="width: 280px" valign="top">
                            <![endif]-->
                            <div class="webversion" style="display: table-cell;Float: left;font-size: 12px;line-height: 19px;max-width: 280px;min-width: 139px; width: 139px;width: calc(14100% - 78680px);padding: 10px 0 5px 0;text-align: right;color: #000;font-family: Avenir,sans-serif;">
                              <p style="Margin-top: 0;Margin-bottom: 0;">No Images?
                                <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #000;"
                                href="#">Click here</a>
                              </p>
                            </div>
                            <!--[if (mso)|(IE)]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
                    </div>
                  </div>
                  <div class="header" style="Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% - 167400px);"
                  id="emb-email-header-container">
                    <!--[if (mso)|(IE)]>
                      <table align="center" class="header" cellpadding="0" cellspacing="0" role="presentation">
                        <tr>
                          <td style="width: 600px">
                          <![endif]-->
                          <div class="logo emb-logo-margin-box" style="font-size: 26px;line-height: 32px;Margin-top: 0px;Margin-bottom: 0px;color: #c3ced9;font-family: Roboto,Tahoma,sans-serif;Margin-left: 20px;Margin-right: 20px;"
                          align="center">
                            <div class="logo-center" align="center" id="emb-email-header">
                              <a style="text-decoration: none;transition: opacity 0.1s ease-in;color: #c3ced9;"
                              href="https://scoutbooks.com/?utm_medium=email&utm_campaign=B%20Corp%20Announcement&utm_content=B%20Corp%20Announcement+CID_a3678d357e3d64fb151eec61509ea4e6&utm_source=newsletter&utm_term=Scout%20Books">
                                <img style="display: block;height: auto;width: 100%;border: 0;max-width: 311px;"
                                src="http://i1.cmail20.com/ei/r/5A/82D/0FE/023040/csfinal/EmailLogo1.png" alt="Scout Books"
                                width="311">
                              </a>
                            </div>
                          </div>
                          <!--[if (mso)|(IE)]>
                          </td>
                        </tr>
                      </table>
                    <![endif]-->
                  </div>
                </div>
                <div role="section">
                  <div class="layout one-col fixed-width" style="Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
                    <div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #f7e34a;">
                      <!--[if (mso)|(IE)]>
                        <table align="center" cellpadding="0" cellspacing="0" role="presentation">
                          <tr class="layout-fixed-width" style="background-color: #f7e34a;">
                            <td style="width: 600px" class="w560">
                            <![endif]-->
                            <div class="column" style="text-align: left;color: #000;font-size: 14px;line-height: 21px;font-family: Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% - 167400px);">
                              <div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 12px;">
                                <div style="line-height:35px;font-size:1px">&nbsp;</div>
                              </div>
                              <div style="font-size: 12px;font-style: normal;font-weight: normal;" align="center">
                                <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #000;"
                                href="https://scoutbooks.com/?utm_campaign=B+Corp+Announcement&utm_content=B+Corp+Announcement+CID_a3678d357e3d64fb151eec61509ea4e6&utm_medium=email&utm_source=newsletter&utm_term=Make+it+Better">
                                  <img class="gnd-corner-image gnd-corner-image-center gnd-corner-image-bottom"
                                  style="border: 0;display: block;height: auto;width: 100%;max-width: 900px;" alt="Make it Better"
                                  width="600" src="http://i1.cmail20.com/ei/r/5A/82D/0FE/023041/csfinal/MakeItBetter_f111.png">
                                </a>
                              </div>
                            </div>
                            <!--[if (mso)|(IE)]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
                    </div>
                  </div>
                  <div class="layout one-col fixed-width" style="Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
                    <div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #f7e34a;">
                      <!--[if (mso)|(IE)]>
                        <table align="center" cellpadding="0" cellspacing="0" role="presentation">
                          <tr class="layout-fixed-width" style="background-color: #f7e34a;">
                            <td style="width: 600px" class="w560">
                            <![endif]-->
                            <div class="column" style="text-align: left;color: #000;font-size: 14px;line-height: 21px;font-family: Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% - 167400px);">
                              <div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 12px;">
                                <p class="size-15" style="Margin-top: 0;Margin-bottom: 0;font-size: 15px;line-height: 23px;"
                                lang="x-size-15">Dear friends,</p>
                                <p class="size-15" style="Margin-top: 20px;Margin-bottom: 0;font-size: 15px;line-height: 23px;"
                                lang="x-size-15">One of our core values at Scout Books is to Make it Better and today we have wonderful
                                  news to share about achieving an important milestone in becoming better as a business.
                                  After more than eighteen months of hard work, <strong>Scout Books is now a <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #000;" href="http://bcorporation.eu/community/scout-books">certified B Corp</a>! &#127881;</strong>
                                </p>
                                <p class="size-15" style="Margin-top: 20px;Margin-bottom: 0;font-size: 15px;line-height: 23px;"
                                lang="x-size-15">We are proud to be Portland&#8217;s first custom notebook brand to join the ranks
                                  of Patagonia, Etsy, New Seasons Market, Seventh Generation, and more than 2000
                                  other B Corp certified companies worldwide who are working hard to use their business
                                  as a force for good.</p>
                                <p class="size-15" style="Margin-top: 20px;Margin-bottom: 0;font-size: 15px;line-height: 23px;"
                                lang="x-size-15">We chose to pursue B Corp Certification because we wanted a tangible and transparent
                                  way to measure our impact and make meaningful improvements to how we operate.</p>
                                <p
                                class="size-15" style="Margin-top: 20px;Margin-bottom: 0;font-size: 15px;line-height: 23px;"
                                lang="x-size-15">We&#8217;re planning a party to celebrate on October 12th, so please save the
                                  date! I also welcome you to read more about our process and motivations in the
                                  post I've linked below.</p>
                                  <p class="size-15" style="Margin-top: 20px;Margin-bottom: 0;font-size: 15px;line-height: 23px;"
                                  lang="x-size-15">Thank you so much for being part of the Scout Books community, and thank you for
                                    joining us in being the change we want to see in the world.</p>
                                  <p class="size-15"
                                  style="Margin-top: 20px;Margin-bottom: 20px;font-size: 15px;line-height: 23px;"
                                  lang="x-size-15">With love,
                                    <br>Laura Whipple
                                    <br>CEO / Co-Founder of Scout Books</p>
                              </div>
                              <div style="Margin-left: 20px;Margin-right: 20px;">
                                <div style="line-height:20px;font-size:1px">&nbsp;</div>
                              </div>
                              <div style="Margin-left: 20px;Margin-right: 20px;">
                                <div class="btn btn--flat fullwidth btn--large" style="Margin-bottom: 20px;text-align: center;">
                                  <![if !mso]>
                                    <a style="border-radius: 4px;display: block;font-size: 14px;font-weight: bold;line-height: 24px;padding: 12px 24px;text-align: center;text-decoration: none !important;transition: opacity 0.1s ease-in;color: #ffffff !important;background-color: #1fc3e0;font-family: Avenir, sans-serif;"
                                    href="https://scoutbooks.com/b-corp-better-business/?utm_medium=email&utm_campaign=B%20Corp%20Announcement&utm_content=B%20Corp%20Announcement+CID_a3678d357e3d64fb151eec61509ea4e6&utm_source=newsletter&utm_term=READ%20ABOUT%20OUR%20B%20CORP%20JOURNEY">READ ABOUT OUR B CORP JOURNEY</a>
                                  <![endif]>
                                  <!--[if mso]>
                                    <p style="line-height:0;margin:0;">&nbsp;</p>
                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://scoutbooks.com/b-corp-better-business/?utm_medium=email&utm_campaign=B%20Corp%20Announcement&utm_content=B%20Corp%20Announcement+CID_a3678d357e3d64fb151eec61509ea4e6&utm_source=newsletter&utm_term=READ%20ABOUT%20OUR%20B%20CORP%20JOURNEY"
                                    style="width:560px" arcsize="9%" fillcolor="#1FC3E0" stroke="f">
                                      <v:textbox style="mso-fit-shape-to-text:t" inset="0px,11px,0px,11px">
                                        <center style="font-size:14px;line-height:24px;color:#FFFFFF;font-family:Avenir,sans-serif;font-weight:bold;mso-line-height-rule:exactly;mso-text-raise:4px">READ ABOUT OUR B CORP JOURNEY</center>
                                      </v:textbox>
                                    </v:roundrect>
                                  <![endif]-->
                                </div>
                              </div>
                              <div style="Margin-left: 20px;Margin-right: 20px;Margin-bottom: 12px;">
                                <div style="line-height:20px;font-size:1px">&nbsp;</div>
                              </div>
                            </div>
                            <!--[if (mso)|(IE)]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
                    </div>
                  </div>
                  <div style="line-height:20px;font-size:20px;">&nbsp;</div>
                  <div role="contentinfo">
                    <div class="layout email-footer" style="Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
                      <div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]>
                          <table align="center" cellpadding="0" cellspacing="0" role="presentation">
                            <tr class="layout-email-footer">
                              <td style="width: 400px;" valign="top" class="w360">
                              <![endif]-->
                              <div class="column wide" style="text-align: left;font-size: 12px;line-height: 19px;color: #000;font-family: Avenir,sans-serif;Float: left;max-width: 400px;min-width: 320px; width: 320px;width: calc(8000% - 47600px);">
                                <div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 10px;Margin-bottom: 10px;">
                                  <table class="email-footer__links emb-web-links" style="border-collapse: collapse;table-layout: fixed;"
                                  role="presentation">
                                    <tbody>
                                      <tr role="navigation">
                                        <td class="emb-web-links" style="padding: 0;width: 26px;">
                                          <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #000;"
                                          href="https://www.facebook.com/scoutbooks/?ref=hl">
                                            <img style="border: 0;" src="http://i2.cmail20.com/static/eb/master/13-the-blueprint-3/images/facebook.png"
                                            width="26" height="26">
                                          </a>
                                        </td>
                                        <td class="emb-web-links" style="padding: 0 0 0 3px;width: 26px;">
                                          <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #000;"
                                          href="https://twitter.com/">
                                            <img style="border: 0;" src="http://i3.cmail20.com/static/eb/master/13-the-blueprint-3/images/twitter.png"
                                            width="26" height="26">
                                          </a>
                                        </td>
                                        <td class="emb-web-links" style="padding: 0 0 0 3px;width: 26px;">
                                          <a style="text-decoration: 
underline;transition: opacity 0.1s ease-in;color: #000;" href="https://www.instagram.com/scoutbooks/">
                                            <img style="border: 0;" src="http://i5.cmail20.com/static/eb/master/13-the-blueprint-3/images/instagram.png"
                                            width="26" height="26">
                                          </a>
                                        </td>
                                        <td class="emb-web-links" style="padding: 0 0 0 3px;width: 26px;">
                                          <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #000;"
                                          href="https://www.pinterest.com/scoutbooks/">
                                            <img style="border: 0;" src="http://i8.cmail20.com/static/eb/master/13-the-blueprint-3/images/pinterest.png"
                                            width="26" height="26">
                                          </a>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <div style="font-size: 12px;line-height: 19px;Margin-top: 20px;">
                                    <div>Scout Books
                                      <br>2130 SE 10th Avenue
                                      <br>Portland, OR 97214</div>
                                  </div>
                                  <div style="font-size: 12px;line-height: 19px;Margin-top: 18px;">
                                    <div>You're receiving this email because you're a collaborator, client or friend of
                                      Scout Books!</div>
                                  </div>
                                  <!--[if mso]>&nbsp;<![endif]-->
                                </div>
                              </div>
                              <!--[if (mso)|(IE)]>
                              </td>
                              <td style="width: 200px;" valign="top" class="w160">
                              <![endif]-->
                              <div class="column narrow" style="text-align: left;font-size: 12px;line-height: 19px;color: #000;font-family: Avenir,sans-serif;Float: left;max-width: 320px;min-width: 200px; width: 320px;width: calc(72200px - 12000%);">
                                <div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 10px;Margin-bottom: 10px;">
                                  <div class="footer__share-button">
                                    <div style="Margin-bottom: 6px;mso-line-height-rule: exactly;">
                                      <a style="text-decoration: none;transition: opacity 0.1s ease-in;color: #ffffff;border-radius: 2px;display: inline-block;font-size: 11px;font-weight: bold;line-height: 19px;text-align: left;border-style: solid;border-width: 4px 7px 3px 4px;mso-border-width-alt: 4px 8px 8px 8px;background-color: #7c7225;border-color: #7c7225;mso-border-color-alt: #7c7225;"
                                      href="#"
                                      rel="cs_facebox">&nbsp;
                                        <img style="border: 0;display: inline-block;margin-right: 2px;vertical-align: -3px;"
                                        src="http://i9.cmail20.com/static/eb/master/13-the-blueprint-3/images/fblike-icon@2x.png"
                                        width="16" height="16" border="0" alt=""> <span style="font-size: 11px;mso-text-raise: 3px;">Like&nbsp;</span>

                                      </a>
                                    </div>
                                    <div style="Margin-bottom: 6px;mso-line-height-rule: exactly;">
                                      <a style="text-decoration: none;transition: opacity 0.1s ease-in;color: #ffffff;border-radius: 2px;display: inline-block;font-size: 11px;font-weight: bold;line-height: 19px;text-align: left;border-style: solid;border-width: 4px 7px 3px 4px;mso-border-width-alt: 4px 8px 8px 8px;background-color: #7c7225;border-color: #7c7225;mso-border-color-alt: #7c7225;"
                                      href="#">&nbsp;
                                        <img style="border: 0;display: inline-block;margin-right: 2px;vertical-align: -3px;"
                                        src="http://i10.cmail20.com/static/eb/master/13-the-blueprint-3/images/tweet-icon@2x.png"
                                        width="16" height="16" border="0" alt=""> <span style="font-size: 11px;mso-text-raise: 3px;">Tweet&nbsp;</span>

                                      </a>
                                    </div>
                                    <div style="Margin-bottom: 6px;mso-line-height-rule: exactly;">
                                      <a style="text-decoration: none;transition: opacity 0.1s ease-in;color: #ffffff;border-radius: 2px;display: inline-block;font-size: 11px;font-weight: bold;line-height: 19px;text-align: left;border-style: solid;border-width: 4px 7px 3px 4px;mso-border-width-alt: 4px 8px 8px 8px;background-color: #7c7225;border-color: #7c7225;mso-border-color-alt: #7c7225;"
                                      href="#"
                                      lang="en">&nbsp;
                                        <img style="border: 0;display: inline-block;margin-right: 2px;vertical-align: -3px;"
                                        src="http://i2.cmail20.com/static/eb/master/13-the-blueprint-3/images/forward-icon@2x.png"
                                        width="16" height="16" border="0" alt=""> <span style="font-size: 11px;mso-text-raise: 3px;">Forward&nbsp;</span>

                                      </a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <!--[if (mso)|(IE)]>
                              </td>
                            </tr>
                          </table>
                        <![endif]-->
                      </div>
                    </div>
                    <div class="layout one-col email-footer" style="Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
                      <div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]>
                          <table align="center" cellpadding="0" cellspacing="0" role="presentation">
                            <tr class="layout-email-footer">
                              <td style="width: 600px;" class="w560">
                              <![endif]-->
                              <div class="column" style="text-align: left;font-size: 12px;line-height: 19px;color: #000;font-family: Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% - 167400px);">
                                <div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 10px;Margin-bottom: 10px;">
                                  <div style="font-size: 12px;line-height: 19px;">
                                    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #000;"
                                    href="#">Unsubscribe</a>
                                  </div>
                                </div>
                              </div>
                              <!--[if (mso)|(IE)]>
                              </td>
                            </tr>
                          </table>
                        <![endif]-->
                      </div>
                    </div>
                  </div>
                  <div style="line-height:40px;font-size:40px;">&nbsp;</div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        
        </body>
    
    </html>
            
          
!
999px
Loading ..................

Console