<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text color="#2c3e50"></mj-text>
      <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto:400,300,600"></mj-font>
      <mj-all font-size="14px" line-height="22px" font-family="Roboto,sans-serif,Arial"></mj-all>
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#f7f7f7">
    <mj-section>
      <mj-column><mj-text color="#222222" padding-top="10px" align="center">If this email is not displayed correctly, please view our web version
<a href="{webview_url}" style="color:#222222;text-decoration:underline;">here</a>.
           </mj-text></mj-column>
    </mj-section>
    <mj-wrapper background-color="#0c1a27" border-radius="5px" padding="15px" css-class="body-section">
      <mj-section>
        <mj-column>
           
          <mj-image src="https://int3rnal01.s3.eu-west-2.amazonaws.com/emailtemplates/images/logo_1-white.png" width="200px" alt="logo"></mj-image>
          <mj-text font-size="48px" padding="25px 15px 0px 15px" line-height="65px" font-weight="300" align="center" color="#fff">Imagine what you’ll accomplish together</mj-text>
          <mj-text color="#8a8b8b" align="center" line-height="28px" font-size="16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</mj-text>
          <mj-button href="#!" background-color="#33c588">GET STARTED</mj-button>
          <mj-image border-radius="5px" src="https://res.cloudinary.com/kissassets/image/upload/v1553069375/Frame_3.jpg" alt=""></mj-image>
        </mj-column>
      </mj-section>
      <mj-section padding="0px">
        <mj-column>
          <mj-text font-size="24px" padding="0px" font-weight="300" align="center" color="#fff">Features</mj-text>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-image width="80px" src="https://res.cloudinary.com/kissassets/image/upload/v1553078183/Group.png" alt=""></mj-image>
          <mj-text font-size="18px" align="center" padding-bottom="0px" color="#fff">Responsive</mj-text>
          <mj-text color="#8a8b8b" align="center">Lorem ipsum dolor sit amet, consectetur.</mj-text>
        </mj-column>
        <mj-column>
          <mj-image width="80px" src="https://res.cloudinary.com/kissassets/image/upload/v1556190460/focus.png" alt=""></mj-image>
          <mj-text font-size="18px" align="center" padding-bottom="0px" color="#fff">Auto focus</mj-text>
          <mj-text color="#8a8b8b" align="center">Lorem ipsum dolor sit amet, consectetur.</mj-text>
        </mj-column>
        <mj-column>
          <mj-image width="80px" src="https://res.cloudinary.com/kissassets/image/upload/v1553078561/Group_3.png" alt=""></mj-image>
          <mj-text font-size="18px" align="center" padding-bottom="0px" color="#fff">Atomic Updates</mj-text>
          <mj-text color="#8a8b8b" align="center">Lorem ipsum dolor sit amet, consectetur.</mj-text>
        </mj-column>
      </mj-section>
      <mj-section padding-top="0px">
        <mj-column>
          <mj-button href="#!" background-color="#33c588">View All</mj-button>
        </mj-column>
      </mj-section>
      <mj-section padding-bottom="0px">
        <mj-column padding="0px">
          <mj-text padding="0px" font-size="16px" color="#fff" align="center">Follow us on</mj-text>
        </mj-column>
      </mj-section>
      <mj-section padding-bottom="0px">
        <mj-group width="320px">
          <mj-column>
            <mj-image href="#!" src="https://res.cloudinary.com/kissassets/image/upload/v1556185916/facebook-white.png" width="20px" alt=""></mj-image>
          </mj-column>
          <mj-column>
            <mj-image href="#!" src="https://res.cloudinary.com/kissassets/image/upload/v1556185916/twitter-white.png" width="20px" alt=""></mj-image>
          </mj-column>
          <mj-column>
            <mj-image href="#!" src="https://res.cloudinary.com/kissassets/image/upload/v1556185916/instagram-white.png" width="20px" alt=""></mj-image>
          </mj-column>
        </mj-group>
        <mj-column></mj-column>
      </mj-section>
      <mj-section padding-top="0">
        <mj-column padding="0px">
          <mj-text color="#fff" padding-top="30px" align="center">This email was sent to {contactfield=email} because you have opted in to receive communications from us. If you think you have received this e-mail in error, or if you wish to take yourself off the mailing list, unsubscribe <a href="{unsubscribe_url}" style="color:#ddd;text-decoration:underline;">here</a>. <br />
            &copy; 2021 Company Name. All rights reserved</mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>