Made with MJML App

email.mjml

  <mjml>
  <mj-body>
    <mj-container background-color="#ccc">

      
      <!-- Company Header -->
<mj-section padding-bottom="0" background-color="#fff">
  <mj-column width="100%">
    <mj-image align="left" src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" width="50px"/>

      
  </mj-column>
</mj-section>

      <!-- Intro text -->
        <mj-section background-color="#fff">
        <mj-column>

          <mj-text font-size="32"
                   font-family="Helvetica Neue"
                   color="#2C3235"
                   line-height="40px">Welcome to Airfy Secure WiFi</mj-text>

            <mj-text font-size="15" color="#2C3235;" line-height="24px">
           Gratualtions to your new Airfy Secure service. You only have to enter the password one time. The next time, your device will automatically connect to every Airfy HotSpot, Airfy feels like home WiFi everywhere.
          </mj-text>
          
          

           

    </mj-column>
  </mj-section>

      <!-- Wifi-password -->
      <mj-section background-color="#fff">
        
        <mj-text font-size="15" color="#2C3235;" line-height="24px" align="center">
                Your personal WiFi password for 8.000 Airfy HotSpots:
                
                
          </mj-text>
          
            <mj-text align="center">
                <p style="border:1px solid #5B946E; border-radius: 4px;padding:10px;color:#395d45;font-family: Arial-BoldMT;font-size:16px">#E90Win</p>
                

                

          </mj-text>
          
          <mj-text font-size="15" color="#2C3235;" line-height="24px" align="center">
            Use your password at this network:
          </mj-text>
        
        <mj-text color="#395d45" align="center" font-size="16">
          Airfy Secure WiFi
        </mj-text>
        
      </mj-section>

      <!-- Confirm email -->
      <mj-section background-color="#fff">
        
        <mj-text>confirm email</mj-text>
        <mj-button line-height="28px" font-size="14" font-family="Arial-BoldMT" border-radius="0" border="1px solid #72BA8A" color="#ffffff" background-color="#72ba8a">CONFIRM EMAIL ADDRESS</mj-button>

      </mj-section>


     <!-- Tips for using airfy -->
      <mj-section background-color="#fff">
        
        <mj-text>tips for using it</mj-text>
        <mj-text>tips for using it</mj-text>
        <mj-button color="#ffffff" background-color="#72ba8a">Read more</mj-button>
      </mj-section>
      


      <!-- Social icons -->
                <mj-section vertical-align="top" background-color="#fff">
            <mj-social color="#333333" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13" text-mode="true" facebook-href="[[SHORT_PERMALINK]]" facebook-content=" " linkedin-content=" " linkedin-href="[[SHORT_PERMALINK]]" instagram-href="[[SHORT_PERMALINK]]" instagram-content=" " twitter-href="[[SHORT_PERMALINK]]" twitter-content=" " mode="horizontal" display="twitter facebook instagram linkedin" padding-left="25" padding-right="25" padding-bottom="10" padding-top="10">

            </mj-social>
          </mj-section>
      
      <!-- Site links -->
             <mj-section background-color="#fff" vertical-align="top" border="none">
     <mj-text align="center" color="#000000"><span><a href=“#” style="color:red">Our blog</a> <a href=“#”>Contact us</a> <a href=“#”>About us</a></span></mj-text> 
          </mj-section>
      
      <!-- footer text -->
      <mj-section background-color="#fff" padding-bottom="20" padding-top="20">
          <mj-column width="100%" vertical-align="middle">
            <mj-text align="center" color="#000000" font-size="11" locked="true" editable="false" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
              <p style="font-size:11px">[[DELIVERY_INFO]]</p>
            </mj-text>
            <mj-text align="center" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="11" locked="true" editable="true" type="user-address" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
              <p style="font-size:11px">&copy; 2016 Airfy GmbH, [something] 12-14, 10969 Berlin</p>
              <p><a href="#">Click here</a> to unsubscribe this E-Mail</p>
              <p>Open this <a href="#">email in Browser</a></p>
            </mj-text>
          </mj-column>
      </mj-section>

    </mj-container>
  </mj-body>
</mjml>