<!DOCTYPE html>
<html>
  
  <head>
    <style type="text/css">
      body{
      			text-align:center;
      			background-color:#F5F6F7;
      			font-family:sans-serif;
      		}
      		#container{
      			padding-top:30px;
      			padding-bottom:30px;
      			background-color:#FFF;
      			width:500px;
      			margin:0 auto;
      		}
      		#lonelyheart{
      			display:block;
      			margin:0 auto 10px auto;
      			width:50px;
      		}
      		#thanks{
      			width:500px;
      			margin-bottom:-10px;
      		}
      		.red{
      			color:#F05B60;
      		}
      		.button{
      			text-transform:uppercase;
      			background-color:#F05B60;
      			width:300px;
      			margin:0 auto;
      			border-radius:2px;
      			color:#FFF;
      			padding:20px;
      		}
      		#verify{
      			display:block;
      			margin-top:20px;
      			text-decoration:none;
      			font-weight:bold;
      		}
      		#shop{
      			text-decoration:none;
      		}
      		hr{
      			width:350px;
      			margin:30px auto;
      		}
      		.expectation{
      			margin-top:30px;
      		}
      		.expectation img{
      			width:50px;
      			float:left;
      			margin-left:100px;
      		}
      		.expectation .description{
      			margin-left:180px;
      			text-align:left;
      		}
      		.expectation h4{
      			text-align:left;
      			display:inline;
      		}
      		#footer{
      			padding:20px 0 10px 0;
      			background-color:#F05B60;
      			width:500px;
      			margin:0 auto 20px auto;
      			color:#FFF;
      			text-align:center;
      		}
      		#app{
      			width:50px;
      			margin-bottom:15px;
      		}
      		.get{
      			margin:15px 0px;
      		}
      		.social{
      			margin-bottom:20px;
      		}
      		.social a{
      			margin:0 10px;
      		}
      		.address{
      			font-size:12px;
      			color:#666;
      		}
      		.address div{
      			margin-bottom:3px;
      		}
      		h4{
      			font-size:1.35em;
      			font-weight:500;
      			letter-spacing:.5px;
      		}
      		.getps{
      			font-size:.85em;
      			margin:0;
      			padding:0;
      			font-weight:300;
      		}
      		.tagline{
      			font-size:.85em;
      			font-weight:100;
      			margin:4px 0;
      			padding:0;
      		}
      		.cta-link{
      			font-size:.85em;
      			color:#f15a5f;
      			font-weight:100;
      		}
    </style>
  </head>
  
  <body style="text-align: center;background-color: #F5F6F7;font-family: sans-serif; padding: 20px 0">
    <img id="lonelyheart" src="https://s3.amazonaws.com/socialps-assets/join/lonelyheart.png?a=2"
    style="display: block;margin: 0 auto 20px auto;width: 48px; margin-top:40px; padding-top: 25px">
    <img id="thanks" src="https://s3.amazonaws.com/socialps-assets/join/ThanksForJoiningimage.jpg?a=2"
    style="width: 500px;margin-bottom: -10px;">
    <div id="container" style="padding-top: 60px;padding-bottom: 30px;background-color: #FFF;width: 500px;margin: 0 auto;"> <strong class="red" style="color: #F05B60;">
                Please verify your email for us.
            </strong>

      <a id="verify" href="https://accounts.socialprintstudio.com/verify/e2024649bfe1bbc0f74e1ead"
      style="display: block;margin-top: 20px;text-decoration: none;font-weight: bold;">
        <div class="button" style="text-transform: uppercase;background-color: #F05B60;width: 300px;margin: 0 auto;border-radius: 2px;color: #FFF;padding: 26px; font-size:smaller; letter-spacing:.5px;">Verify Now</div>
      </a>
      <hr style="width: 350px;margin: 60px auto; height: 0;
    border: 0;border-top: 1px solid #eee;">
       <h3 style="font-size:1.5em; color:#6d6d6d; margin: 2em 0;">
                Here's what to expect:
            </h3>

      <div class="expectation" style="margin-top: 30px;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/addressbookicon.png?a=2"
        style="width: 50px;float: left;margin-left: 100px; margin-top: 8px;">
        <div class="description" style="margin-left: 180px;text-align: left;">
           <h4 style="text-align: left;display: inline;font-size: 1.35em;font-weight: 500;letter-spacing: .5px;">Address Book</h4>

          <br>
          <p class="tagline" style="font-size: .85em;font-weight: 100;margin: 4px 0;padding: 0;">save multiple addresses</p>
          <a href="/?next=%2Faddressbook" class="cta-link" style="font-size: .85em;color: #f15a5f;font-weight: 100;">Add Contacts ></a>
        </div>
      </div>
      <div class="expectation" style="margin-top: 30px;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/reordericon.png?a=2" style="width: 50px;float: left;margin-left: 100px; margin-top: 4px;">
        <div class="description" style="margin-left: 180px;text-align: left;">
           <h4 style="text-align: left;display: inline;font-size: 1.35em;font-weight: 500;letter-spacing: .5px;">Re-ordering</h4>

          <br>
          <p class="tagline" style="font-size: .85em;font-weight: 100;margin: 4px 0;padding: 0;">Never remake a photobook again</p>
          <a href="#" class="cta-link" style="pointer-events: none;cursor: default;font-size: .85em;color: #f15a5f;font-weight: 100;">Coming soon...</a>
        </div>
      </div>
      <div class="expectation" style="margin-top: 30px;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/surpriseicon.png?a=2"
        style="width: 50px;float: left;margin-left: 100px; margin-top: 8px;">
        <div class="description" style="margin-left: 180px;text-align: left;">
           <h4 style="text-align: left;display: inline;font-size: 1.35em;font-weight: 500;letter-spacing: .5px;">Surprises</h4>

          <br>
          <p class="tagline" style="font-size: .85em;font-weight: 100;margin: 4px 0;padding: 0;">We want fun times with you.</p>
          <a href="http://www.gifff.in/" class="cta-link"
          style="font-size: .85em;color: #f15a5f;font-weight: 100;">Surprise me now ></a>
        </div>
      </div>
      <hr style="width: 350px;margin: 60px auto; height: 0;
    border: 0;border-top: 1px solid #eee;">
      <a id="shop" href="https://www.socialprintstudio.com/" style="text-decoration: none; font-weight:bold;">
        <div class="button" style="text-transform: uppercase;background-color: #F05B60;width: 300px;margin: 0 auto;border-radius: 2px;color: #FFF;padding: 26px; font-size:smaller; letter-spacing:.5px;">shop now</div>
      </a>
    </div>
    <div id="footer" style="padding: 30px 0 15px 0;background-color: #F05B60;width: 500px;margin: 0 auto 30px auto;color: #FFF;text-align: center;">
      <img id="app" src="https://s3.amazonaws.com/socialps-assets/join/appImage.png?a=2"
      style="width: 62px;margin-bottom: 15px;">
      <div>
        <p class="getps" style="font-size: .85em;margin: 0;padding: 0;font-weight: 300;">PRINT STUDIO is available for iOS and Android</p>
      </div>
      <div>
        <a href="https://itunes.apple.com/us/app/print-studio/id601882801">
          <img class="get" src="https://s3.amazonaws.com/socialps-assets/join/appStore.png?a=2"
          style="max-height:36px;margin: 15px 1px;">
        </a>
        <a href="https://play.google.com/store/apps/details?id=com.socialprintstudio.printstudio">
          <img class="get" src="https://s3.amazonaws.com/socialps-assets/join/play.png?a=2"
          style="max-height:36px; margin: 15px 1px;">
        </a>
      </div>
    </div>
    <div class="social" style="margin-bottom: 20px;">
      <a href="https://www.instagram.com/socialps/" style="margin: 0 10px;text-decoration:none;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/ig.png?a=2" style="max-height: 25px;">
      </a>
      <a href="https://www.pinterest.com/socialps/" style="margin: 0 10px;text-decoration:none;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/pinterest.png?a=2" style="max-height: 25px;">
      </a>
      <a href="https://www.facebook.com/socialprintstudio" style="margin: 0 10px;text-decoration:none;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/fb.png?a=2" style="max-height: 25px;">
      </a>
      <a href="https://vimeo.com/socialprintstudio" style="margin: 0 10px;text-decoration:none;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/vimeo.png?a=2" style="max-height: 25px;">
      </a>
      <a href="https://twitter.com/socialps" style="margin: 0 10px;text-decoration:none;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/twitter.png?a=2" style="max-height: 25px;">
      </a>
      <a href="http://blog.socialprintstudio.com" style="margin: 0 10px;text-decoration:none;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/tumblr.png?a=2" style="max-height: 25px;">
      </a>
      <a href="https://www.youtube.com/user/SocialPs" style="margin: 0 10px;">
        <img src="https://s3.amazonaws.com/socialps-assets/join/youtube.png?a=2" style="max-height: 25px;">
      </a>
    </div>
    <div class="address" style="font-size: 13px;color: #666; margin-top:30px; font-weight: 100;">
      <div style="margin-bottom: 4px;">Social Print Studio</div>
      <div style="margin-bottom: 4px;">275 8th St.</div>
      <div style="margin-bottom: 4px;">San Francisco,</div>
      <div style="margin-bottom: 20px;">CA 94103</div>
    </div>
   
  </body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.