Made with MJML App

email.mjml

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

      
      <!-- Company Header -->
<mj-section padding-bottom="0" padding-top="0" padding-bottom="0" padding-left="0">
  <mj-column>
    <mj-image padding-top="20" padding-left="15" padding-bottom="15" align="left" src="https://s3.eu-central-1.amazonaws.com/airfy-mail-assets/Logo.png" width="62px"/>

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

      <!-- Intro text -->
        <mj-section background-color="#fff" text-align="center" padding-top="30" padding-left="10px" padding-right="10px" padding-bottom="15">
        <mj-column>

          <mj-text padding-bottom="10" align="center" font-size="32"
                   font-family="AvenirNext-Regular"
                   color="#2C3235"
                   line-height="40">Welcome to Airfy Secure WiFi</mj-text>

            <mj-text font-family="AvenirNext-Regular" align="center" font-size="15" color="#2C3235;" line-height="24" padding-top="10">
           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" padding-top="0" padding-bottom="0">
        <mj-column>
        <mj-text padding-bottom="10" font-size="15" font-family="AvenirNext-Regular" color="#2C3235;" line-height="24px" align="center" padding-top="0">
                Your personal WiFi password for 8.000 Airfy HotSpots:
                
                
          </mj-text>
          
            <mj-text align="center" padding-top="0" padding-bottom="0">
                <p style="border:1px solid #5B946E; border-radius: 4px;padding:15px;color:#395d45;font-family: Arial-BoldMT;font-size:16px">XXX-XXX-XXX-XXX</p>
                

                

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

      <!-- Confirm email -->
      <mj-section background-color="#fff" padding-top="0">
        <mj-column>
        <mj-text padding-bottom="30" font-family="AvenirNext-Regular" font-size="15" color="#2C3235;" line-height="24px" align="center">Finally you need to confirm your email address to get started.</mj-text>
        <mj-button line-height="18" font-size="14" font-family="AvenirNext-DemiBold;" border-radius="4" color="#ffffff" background-color="#72ba8a">CONFIRM EMAIL ADDRESS</mj-button>
</mj-column>
      </mj-section>

                  
                  <mj-section background-color="#fff" padding-top="10">
          <mj-column width="100%" padding="0">

                <mj-divider padding="0" width="100%"  border-width="1px" border-style="solid" border-color="#e9eaea"></mj-divider>

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

                  
     <!-- Tips for using airfy -->
      <mj-section background-color="#fff" padding-top="10">
        <mj-column>
        <mj-text font-size="32"
                   font-family="AvenirNext-Regular"
                   color="#2C3235"
                   line-height="40px">Tips for using Airfy Secure</mj-text>
        <mj-text font-family="AvenirNext-Regular" font-size="15" color="#2C3235;" line-height="24px">Some devices randomly conntec known WiFi networks. To be sure you really use Airfy Secure and not the Free version please delete "Airfy Free WiFi" inside your network settings. If you are not sure if you need todo this you can do this later.</mj-text>
        <mj-button line-height="18" font-size="14" font-family="AvenirNext-DemiBold;" border-radius="4" color="#ffffff" background-color="#72ba8a" padding-bottom="40" padding-top="40">READ MORE</mj-button>
        </mj-column>
      </mj-section>



<mj-section>
  <mj-column>
    <mj-text align="center">
      <span>
        <a href="https://twitter.com/airfy">
          <img src="https://s3.eu-central-1.amazonaws.com/airfy-mail-assets/sm_twitter.png" width="25" height="25"></img></a>
        <a href="https://www.facebook.com/Airfy/">
          <img src="https://s3.eu-central-1.amazonaws.com/airfy-mail-assets/sm_facebook.png" width="25" height="25"></img></a>
        <a href="https://www.instagram.com/airfy/" >
          <img src="https://s3.eu-central-1.amazonaws.com/airfy-mail-assets/sm_instagram.png" width="25" height="25"></img>
        </a>
        <a href="https://www.linkedin.com/company/airfy">
          <img src="https://s3.eu-central-1.amazonaws.com/airfy-mail-assets/sm_linkedin.png" width="25" height="25"></img>
        </a>
      </span>
    </mj-text> 
  </mj-column>
</mj-section>

      <!-- Social icons -->
                <mj-section vertical-align="top" background-color="#f8f8f8" padding-top="0">
                  <mj-column>
            <mj-social color="#333333" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13" text-mode="true" twitter-icon-color="#95989A" facebook-icon-color="#95989A" instagram-icon-color="#95989A" linkedin-icon-color="#95989A" facebook-href="https://www.facebook.com/Airfy/" facebook-content=" " linkedin-content=" " linkedin-href="https://www.linkedin.com/company/airfy" instagram-href="https://www.instagram.com/airfy/" instagram-content=" " twitter-href="https://twitter.com/airfy" twitter-content=" " mode="horizontal" display="twitter:url facebook:url instagram:url linkedin:url" padding-left="0" padding-right="0" padding-bottom="10" padding-top="40">
              
              

            </mj-social>
            </mj-column>
          </mj-section>
      
      <!-- Site links -->
             <mj-section background-color="#f8f8f8" padding-bottom="40" border="none" padding-top="0">
               <mj-column>
     <mj-text align="center"><span><a href=“https://medium.com/@airfy” style="color:#95989A;text-decoration:none;font-size:11px;letter-spacing:0.2px; line-height:16px">Our blog</a> <a href=“http://survey.airfy.com/contact.html” style="margin-left:40px;margin-right:40px;color:#95989A;text-decoration:none;font-size:11px;letter-spacing:0.2px; line-height:16px">Contact us</a> <a href=“http://survey.airfy.com/impressum.html” style="color:#95989A;text-decoration:none;font-size:11px;letter-spacing:0.2px; line-height:16px">About us</a></span></mj-text> 
     </mj-column>
          </mj-section>
          
 
      
      <!-- footer text -->
      <mj-section background-color="#f8f8f8" padding-bottom="40" padding-top="0">
          <mj-column width="100%">
         
            <mj-text align="center" color="#2C3235" font-family="AvenirNext-Regular;" font-size="11"  padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
              &copy; 2016 Airfy GmbH, Ritterstraße 12-14, 10969 Berlin
            
            </mj-text>
                       <mj-text align="center" color="#2C3235" font-family="AvenirNext-Regular;" font-size="11"  padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
             <a href=“#” style="color:#95989A;text-decoration:none;font-size:11px;letter-spacing:0.2px; line-height:16px">Click here</a> to unsubscribe this E-Mail
           
            </mj-text>
            
                <mj-text align="center" color="#2C3235" font-family="AvenirNext-Regular;" font-size="11"  padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
        
              Open this <a href=“#” style="color:#95989A;text-decoration:none;font-size:11px;letter-spacing:0.2px; line-height:16px">email in Browser</a>
            </mj-text>
          </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>