Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>The Best Framer x Dribbble Debut Shots (and your chance to score&nbsp;invites)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://use.typekit.net/aim2uqw.css">

  <style type="text/css">
		#outlook a{
			padding:0;
		}
		.ReadMsgBody{
			width:100%;
		}
		.ExternalClass{
			width:100%;
		}
		.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
			line-height:100%;
		}
		u+#new-gmail-hack{
			display:block !important;
		}
		body,table,td,p,a,li,blockquote{
			-webkit-text-size-adjust:100%;
			-ms-text-size-adjust:100%;
		}
		table,td{
			mso-table-lspace:0;
			mso-table-rspace:0;
		}
		img{
			-ms-interpolation-mode:bicubic;
		}
		body{
			margin:0;
			padding:0;
			font-family:"colfax-web",-apple-system,"Helvetica Neue",Helvetica,sans-serif;
		}
		img{
			border:0;
			height:auto;
			line-height:100%;
			outline:none;
			text-decoration:none;
		}
		table{
			border-collapse:collapse !important;
		}
		body,#bodyTable,#bodyCell{
			height:100% !important;
			margin:0;
			padding:0;
			width:100% !important;
		}
		#templateContainer{
			max-width:680px;
			width:100%;
			background:#fff;
		}
		body,#bodyTable{
			background:#f9f9f9;
		}
		#templateContainer{
			border:none;
		}
		h1,h2,h3,h4,p{
			display:block;
			color:#000 !important;
			font-family:"colfax-web",-apple-system,"Helvetica Neue",Helvetica,sans-serif;
			line-height:1.5;
			font-style:normal;
			letter-spacing:normal;
			margin-top:0;
			margin-right:0;
			margin-bottom:10px;
			margin-left:0;
		}
		h1{
			font-size:48px;
			font-weight:500;
		}
		h2{
			font-size:36px;
			font-weight:500;
		}
		p{
			line-height:150%;
			margin-bottom:0;
		}
		p.lead{
			font-size:18px;
			font-weight:400;
			color:#666;
		}
		strong{
			font-weight:500;
		}
		a:link,a:visited,a .yshortcuts{
			color:#0af;
			font-weight:normal;
			text-decoration:none;
		}
		#templateHeader{
			border-bottom:1px solid #f9f9f9;
		}
		.headerContent{
			font-weight:regular;
			line-height:100%;
			padding:20px;
			vertical-align:middle;
		}
		.headerContent p{
			margin:0;
			font-size:14px;
			display:inline-block;
			width:100%;
		}
		.headerContent p a{
			color:#0AF;
		}
		.headerContent img{
			width:14px;
			padding-right:10px;
		}
		.introContent{
			text-align:center;
			padding:60px 20px;
		}
		.introContent p{
			max-width:460px;
			margin:auto;
		}
		#templateBody{
			border-bottom:none;
		}
		.bodyWrapper{
			padding:0 20px;
		}
		.bodyContent{
			color:#111;
			font-family:"colfax-web",-apple-system,"Helvetica Neue",Helvetica,sans-serif;
			font-size:16px;
			line-height:150%;
			padding-top:20px;
			padding-right:20px;
			padding-bottom:20px;
			padding-left:20px;
			text-align:center;
		}
		.bodyContent img{
			display:inline;
			max-width:560px;
		}
		.bodyProject{
			padding-bottom:40px;
		}
		.bodyProject img{
			border:1px solid rgba(0,0,0,0.05);
			border-radius:6px;
			max-width:420px;
			width:100%;
			margin-bottom:20px;
		}
		.bodyProject_author{
			font-weight:400 !important;
		}
		.bodyResource td{
			padding-bottom:40px;
		}
		.bodyResource:last-child td{
			padding-bottom:0;
		}
		.bodyResourceThumb img{
			max-width:92px;
			border-radius:4px;
		}
		.bodyResourceInfo{
			text-align:left;
			padding-left:20px;
		}
		.templateFooter{
			background-color:#05f;
			background-image:linear-gradient(225deg,#0af 0%,#05f 100%);
			padding-left:40px;
			padding-right:40px;
			padding-bottom:20px;
			display:block;
			font-size:16px;
			line-height:1;
			transition:opacity .2s;
			text-align:left;
			margin-top:20px;
		}
		.templateCTA{
			padding:60px 0;
		}
		.templateCTA h2{
			color:#fff !important;
			padding-bottom:10px;
			font-weight:500;
		}
		.templateCTA .lead{
			color:#fff !important;
			max-width:420px;
			font-size:26px;
		}
		.templateCTA .button{
			background:white;
			padding:15px 20px 14px;
			line-height:1em;
			border-radius:4px;
			color:#08F;
			font-weight:500;
			display:inline-block;
			margin-top:20px;
			transition:opacity .2s;
			text-decoration:none;
		}
		.templateCTA .button:hover{
			opacity:.5;
		}
		.footerLinks a{
			color:#fff;
			font-size:13px;
			line-height:1;
		}
		.templateSocial{
			padding-bottom:10px;
		}
		.templateSocial img{
			width:24px;
			height:24px;
		}
		.footerSocial a{
			transition:opacity .2s;
			opacity:.75;
		}
		.footerSocial a:hover{
			opacity:1;
		}
		.footerLinks a{
			opacity:.75;
		}
	@media only screen and (max-width: 480px){
		body,table,td,p,a,li,blockquote{
			-webkit-text-size-adjust:none !important;
		}

}	@media only screen and (max-width: 480px){
		.headerContent p{
			font-size:12px !important;
		}

}	@media only screen and (max-width: 480px){
		body{
			width:100% !important;
			min-width:100% !important;
		}

}	@media only screen and (max-width: 480px){
		#bodyCell{
			padding:0;
		}

}	@media only screen and (max-width: 480px){
		.bodyContent{
			padding:0 20px;
		}

}	@media only screen and (max-width: 480px){
		h2{
			font-size:28px !important;
		}

}	@media only screen and (max-width: 480px){
		.headerContent{
			text-align:center;
		}

}	@media only screen and (max-width: 480px){
		.templateFooter{
			padding-left:20px;
			padding-right:20px;
		}

}	@media only screen and (max-width: 480px){
		.templateCTA{
			padding:20px 0;
		}

}	@media only screen and (max-width: 480px){
		.templateCTA p.lead{
			font-size:16px;
		}

}	@media only screen and (max-width: 480px){
		.introContent p.lead{
			font-size:16px;
		}

}	@media only screen and (max-width: 480px){
		p{
			font-size:14px;
		}

}</style></head>
  <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" class="body" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0;padding: 0;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;background: #f9f9f9;height: 100% !important;width: 100% !important;">
    <center>
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="680" id="bodyTable" style="height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;margin: 0;padding: 0;background: #f9f9f9;border-collapse: collapse !important;width: 100% !important;">
        <tbody><tr>
          <td align="center" valign="top" id="bodyCell" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
            <!-- BEGIN TEMPLATE // -->
            <table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;max-width: 680px;width: 100%;background: #fff;border: none;border-collapse: collapse !important;">
              <tbody><tr valign="top" id="templateHeader" style="border-bottom: 1px solid #f9f9f9;">
                <td class="headerContent" valign="middle" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;font-weight: regular;line-height: 100%;padding: 20px;vertical-align: middle;">
                  <table width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse !important;">
                    <tbody><tr>
                      <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
                        <a href="https://framer.com/?banner-exporting?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=framer_standouts_18jan2018&amp;utm_content=top_logo" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;"><img src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/72d196ee-525e-43c8-ab22-7ee590b68f37.png" alt="Framer" border="0" style="margin: 0;padding: 0;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;width: 14px;padding-right: 10px;"></a>
                      </td>
                      <td align="right" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
                        <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 150%;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;margin: 0;font-size: 14px;width: 100%;color: #000 !important;">Get ahead of the pack with <a href="https://framer.com/?banner-exporting?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=framer_standouts_18jan2018&amp;utm_content=top_banner" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0AF;font-weight: normal;text-decoration: none;">Framer</a></p>
                      </td>
                    </tr>
                  </tbody></table>
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" class="bodyWrapper" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;padding: 0 20px;">
                  <!-- BEGIN INTRO // -->
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateIntro" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse !important;">
                    <tbody><tr>
                      <td valign="top" class="introContent" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;text-align: center;padding: 60px 20px;">
                        <h1 style="display: block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 1.5;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;font-size: 48px;font-weight: 500;color: #000 !important;">Standouts</h1>
                        <p class="lead" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 150%;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;font-size: 18px;font-weight: 400;color: #000 !important;max-width: 460px;margin: auto;">This week we’re highlighting first-time Dribbblers who used Framer to design their debut shot. Want to show off your own work? Tweet <a href="https://twitter.com/framer" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;">@framer</a> a link to your prototype to score yourself a Dribbble invite!</p>
                      </td>
                    </tr>
                  </tbody></table>
                  <!-- BEGIN BODY // -->
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody" class="bodyContent" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #111;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 16px;line-height: 150%;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: center;border-bottom: none;border-collapse: collapse !important;">
                    <!-- Repeatable: Project // -->
                    <tbody><tr mc:repeatable="repeat_1" mc:repeatindex="0">
                      <td valign="top" class="bodyProject" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;padding-bottom: 40px;">
                        <a href="https://dribbble.com/shots/4014977-invitation-code" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;"><img src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/369805a9-859d-4c94-bf8d-fa943c0443f0.gif" alt="social-800x600.png?version=6" border="0" style="margin: 0;padding: 0;-ms-interpolation-mode: bicubic;border: 1px solid rgba(0,0,0,0.05);height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 420px;border-radius: 6px;width: 100%;margin-bottom: 20px;"></a>
                        <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 150%;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #000 !important;">
                        <strong style="font-weight: 500;"><a href="https://dribbble.com/shots/4014977-invitation-code" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;">Invitation</a></strong>&nbsp;<span class="bodyProject_author" style="font-weight: 400 !important;">by Steven Fu</span>
                      </p>
                    </td>
                  </tr><tr mc:repeatable="repeat_1" mc:repeatindex="1">
                      <td valign="top" class="bodyProject" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;padding-bottom: 40px;">
                        <a href="https://dribbble.com/shots/3965332-Hello-Dribbble" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;"><img src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/58d7af50-e31f-4de3-a2bd-99318171d24d.gif" alt="social-800x600.png?version=6" border="0" style="margin: 0;padding: 0;-ms-interpolation-mode: bicubic;border: 1px solid rgba(0,0,0,0.05);height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 420px;border-radius: 6px;width: 100%;margin-bottom: 20px;"></a>
                        <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 150%;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #000 !important;">
                        <strong style="font-weight: 500;"><a href="https://dribbble.com/shots/3965332-Hello-Dribbble" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;">Hello Dribbble!</a></strong>&nbsp;<span class="bodyProject_author" style="font-weight: 400 !important;">by Théo Rosel</span>
                      </p>
                    </td>
                  </tr><tr mc:repeatable="repeat_1" mc:repeatindex="2">
                      <td valign="top" class="bodyProject" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;padding-bottom: 40px;">
                        <a href="https://dribbble.com/shots/4064386-Constructing-Shots" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;"><img src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/7720e7e8-9e90-4605-9780-ca59142c1732.gif" alt="social-800x600.png?version=6" border="0" style="margin: 0;padding: 0;-ms-interpolation-mode: bicubic;border: 1px solid rgba(0,0,0,0.05);height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 420px;border-radius: 6px;width: 100%;margin-bottom: 20px;"></a>
                        <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 150%;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #000 !important;">
                        <strong style="font-weight: 500;"><a href="https://dribbble.com/shots/4064386-Constructing-Shots" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;">Constructing Shots</a></strong>&nbsp;<span class="bodyProject_author" style="font-weight: 400 !important;">by Charlie Chao</span>
                      </p>
                    </td>
                  </tr><tr mc:repeatable="repeat_1" mc:repeatindex="3">
                      <td valign="top" class="bodyProject" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;padding-bottom: 40px;">
                        <a href="https://dribbble.com/shots/4021514-Hi-Dribbble" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;"><img src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/74349118-c7a9-4d92-85b4-ab437395213b.gif" alt="social-800x600.png?version=6" border="0" style="margin: 0;padding: 0;-ms-interpolation-mode: bicubic;border: 1px solid rgba(0,0,0,0.05);height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 420px;border-radius: 6px;width: 100%;margin-bottom: 20px;"></a>
                        <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 150%;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #000 !important;">
                        <strong style="font-weight: 500;"><a href="https://dribbble.com/shots/4021514-Hi-Dribbble" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;">Game On</a></strong>&nbsp;<span class="bodyProject_author" style="font-weight: 400 !important;">by Guglielmo Civardi</span>
                      </p>
                    </td>
                  </tr><tr mc:repeatable="repeat_1" mc:repeatindex="4">
                      <td valign="top" class="bodyProject" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;padding-bottom: 40px;">
                        <a href="https://dribbble.com/shots/4003070-Daily-UI-05-App-Icon-Dribbble" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;"><img src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/612fa03c-3bd6-4171-b857-ae3187f5dcc6.gif" alt="social-800x600.png?version=6" border="0" style="margin: 0;padding: 0;-ms-interpolation-mode: bicubic;border: 1px solid rgba(0,0,0,0.05);height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;max-width: 420px;border-radius: 6px;width: 100%;margin-bottom: 20px;"></a>
                        <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 150%;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #000 !important;">
                        <strong style="font-weight: 500;"><a href="https://dribbble.com/shots/4003070-Daily-UI-05-App-Icon-Dribbble" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;">Slam Dunk</a></strong>&nbsp;<span class="bodyProject_author" style="font-weight: 400 !important;">by Namika Hamasaki</span>
                      </p>
                    </td>
                  </tr>
                </tbody></table>
                <!-- // END BODY -->
              </td>
            </tr>
            <tr>
              <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
                <!-- BEGIN FOOTER // -->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse !important;">
                  <tbody><tr>
                    <td valign="top" class="templateFooter" style="background:#05f linear-gradient(225deg,#0af 0%,#05f 100%);-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background-color: #05f;background-image: linear-gradient(225deg,#0af 0%,#05f 100%);padding-left: 40px;padding-right: 40px;padding-bottom: 20px;display: block;font-size: 16px;line-height: 1;transition: opacity .2s;text-align: left;margin-top: 20px;">
                      <table width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse !important;">
                        <tbody><tr>
                          <td align="center" class="templateCTA" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;padding: 60px 0;"><p class="lead" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: block;font-family: &quot;colfax-web&quot;,-apple-system,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;line-height: 150%;font-style: normal;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 0;font-size: 26px;font-weight: 400;color: #fff !important;max-width: 420px;">Create interactive designs from start to finish with Framer.</p>
<a class="button" href="https://framer.com/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=framer_standouts_18jan2018&amp;utm_content=bottom_banner" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #08F;font-weight: 500;text-decoration: none;background: white;padding: 15px 20px 14px;line-height: 1em;border-radius: 4px;display: inline-block;margin-top: 20px;transition: opacity .2s;">Start Free Trial</a></td>
                        </tr>
                        <tr>
                          <td class="templateSocial" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;padding-bottom: 10px;">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse !important;">
                              <tbody><tr>
                                <td valign="top" class="footerSocial" align="center" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;"><a href="https://twitter.com/framer" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;transition: opacity .2s;opacity: .75;" target="_blank"><img alt="twitter.png" src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/b483bf16-254a-4be7-874c-90d1c6c23738.png" style="-ms-interpolation-mode: bicubic;border: 0;height: 24px;line-height: 100%;outline: none;text-decoration: none;width: 24px;"></a> &nbsp;&nbsp; <a href="https://www.facebook.com/framerjs/" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;transition: opacity .2s;opacity: .75;" target="_blank"> <img alt="facebook.png" src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/0378d20b-e39c-4a38-a78e-6b28f942e17f.png" style="-ms-interpolation-mode: bicubic;border: 0;height: 24px;line-height: 100%;outline: none;text-decoration: none;width: 24px;"></a> &nbsp;&nbsp; <a href="https://dribbble.com/framer" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;transition: opacity .2s;opacity: .75;" target="_blank"> <img alt="dribbble.png" src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/b7d7240e-a1c0-4b6f-acc0-8f41cebdd5a6.png" style="-ms-interpolation-mode: bicubic;border: 0;height: 24px;line-height: 100%;outline: none;text-decoration: none;width: 24px;"></a> &nbsp;&nbsp; <a href="https://framer.slack.com/" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;transition: opacity .2s;opacity: .75;" target="_blank"> <img alt="slack.png" src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/e77b80a2-8e63-47be-8481-36d91d3559cc.png" style="-ms-interpolation-mode: bicubic;border: 0;height: 24px;line-height: 100%;outline: none;text-decoration: none;width: 24px;"></a> &nbsp;&nbsp; <a href="https://www.youtube.com/channel/UCW5gUZ7lKGrAbLOkHv2xfbw" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;transition: opacity .2s;opacity: .75;" target="_blank"> <img alt="youtube.png" src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/5ba352b7-2702-48fe-86fd-e4fad96f66ea.png" style="-ms-interpolation-mode: bicubic;border: 0;height: 24px;line-height: 100%;outline: none;text-decoration: none;width: 24px;"></a> &nbsp;&nbsp; <a href="https://blog.framer.com" target="_blank" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #0af;font-weight: normal;text-decoration: none;transition: opacity .2s;opacity: .75;"> <img alt="medium.png" src="https://gallery.mailchimp.com/b2ba7c4048c35e68366280a66/images/ed4eed5d-2b8f-45e9-8da1-3b1911727008.png" style="-ms-interpolation-mode: bicubic;border: 0;height: 24px;line-height: 100%;outline: none;text-decoration: none;width: 24px;"></a></td>
                                          </tr>
                                        </tbody></table>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td class="footerLinks" align="center" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
                                        <a href="#" style="return s=t.apply(a,r): ;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #fff;font-weight: normal;text-decoration: none;font-size: 13px;line-height: 1;opacity: .75;" target="_blank">Unsubscribe</a>
                                      </td>
                                    </tr>
                                  </tbody></table>
                                  <!-- // END FOOTER -->
                                </td>
                              </tr>
                            </tbody></table>
                            <!-- // END TEMPLATE -->
                          </td>
                        </tr>
                      </tbody></table>
                    </td>
                  </tr>
                </tbody></table>
              </center>
              <div id="new-gmail-hack" style="white-space:nowrap;font:15px courier;line-height:0;display:none;">
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              </div>
       
</body>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console