cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Smiles Davis, download the free app!</title>
  <style type="text/css">
    @media only screen{
    		html{
    			min-height:100%;
    			background:#f3f3f3;
    		}
    
    }	@media only screen and (max-width: 510px){
    		.small-float-center{
    			margin:0 auto !important;
    			float:none !important;
    			text-align:center !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		.small-text-center{
    			text-align:center !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		.small-text-left{
    			text-align:left !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		.small-text-right{
    			text-align:right !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		.hide-for-large{
    			display:block !important;
    			width:auto !important;
    			overflow:visible !important;
    			max-height:none !important;
    			font-size:inherit !important;
    			line-height:inherit !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body table.container .hide-for-large,table.body table.container .row.hide-for-large{
    			display:table !important;
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body table.container .callout-inner.hide-for-large{
    			display:table-cell !important;
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body table.container .show-for-large{
    			display:none !important;
    			width:0;
    			mso-hide:all;
    			overflow:hidden;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body img{
    			width:auto;
    			height:auto;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body center{
    			min-width:0 !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body .container{
    			width:95% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body .columns,table.body .column{
    			height:auto !important;
    			-moz-box-sizing:border-box;
    			-webkit-box-sizing:border-box;
    			box-sizing:border-box;
    			padding-left:10px !important;
    			padding-right:10px !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body .columns .column,table.body .columns .columns,table.body .column .column,table.body .column .columns{
    			padding-left:0 !important;
    			padding-right:0 !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body .collapse .columns,table.body .collapse .column{
    			padding-left:0 !important;
    			padding-right:0 !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-1,th.small-1{
    			display:inline-block !important;
    			width:8.33333% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-2,th.small-2{
    			display:inline-block !important;
    			width:16.66667% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-3,th.small-3{
    			display:inline-block !important;
    			width:25% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-4,th.small-4{
    			display:inline-block !important;
    			width:33.33333% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-5,th.small-5{
    			display:inline-block !important;
    			width:41.66667% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-6,th.small-6{
    			display:inline-block !important;
    			width:50% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-7,th.small-7{
    			display:inline-block !important;
    			width:58.33333% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-8,th.small-8{
    			display:inline-block !important;
    			width:66.66667% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-9,th.small-9{
    			display:inline-block !important;
    			width:75% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-10,th.small-10{
    			display:inline-block !important;
    			width:83.33333% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-11,th.small-11{
    			display:inline-block !important;
    			width:91.66667% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		td.small-12,th.small-12{
    			display:inline-block !important;
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		.columns td.small-12,.column td.small-12,.columns th.small-12,.column th.small-12{
    			display:block !important;
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-1,table.body th.small-offset-1{
    			margin-left:8.33333% !important;
    			Margin-left:8.33333% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-2,table.body th.small-offset-2{
    			margin-left:16.66667% !important;
    			Margin-left:16.66667% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-3,table.body th.small-offset-3{
    			margin-left:25% !important;
    			Margin-left:25% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-4,table.body th.small-offset-4{
    			margin-left:33.33333% !important;
    			Margin-left:33.33333% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-5,table.body th.small-offset-5{
    			margin-left:41.66667% !important;
    			Margin-left:41.66667% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-6,table.body th.small-offset-6{
    			margin-left:50% !important;
    			Margin-left:50% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-7,table.body th.small-offset-7{
    			margin-left:58.33333% !important;
    			Margin-left:58.33333% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-8,table.body th.small-offset-8{
    			margin-left:66.66667% !important;
    			Margin-left:66.66667% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-9,table.body th.small-offset-9{
    			margin-left:75% !important;
    			Margin-left:75% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-10,table.body th.small-offset-10{
    			margin-left:83.33333% !important;
    			Margin-left:83.33333% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body td.small-offset-11,table.body th.small-offset-11{
    			margin-left:91.66667% !important;
    			Margin-left:91.66667% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body table.columns td.expander,table.body table.columns th.expander{
    			display:none !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body .right-text-pad,table.body .text-pad-right{
    			padding-left:10px !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.body .left-text-pad,table.body .text-pad-left{
    			padding-right:10px !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.menu{
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.menu td,table.menu th{
    			width:auto !important;
    			display:inline-block !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.menu.vertical td,table.menu.vertical th,table.menu.small-vertical td,table.menu.small-vertical th{
    			display:block !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.menu[align=center]{
    			width:auto !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.button.small-expand,table.button.small-expanded{
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.button.small-expand table,table.button.small-expanded table{
    			width:100%;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.button.small-expand table a,table.button.small-expanded table a{
    			text-align:center !important;
    			width:100% !important;
    			padding-left:0 !important;
    			padding-right:0 !important;
    		}
    
    }	@media only screen and (max-width: 510px){
    		table.button.small-expand center,table.button.small-expanded center{
    			min-width:0;
    		}
    
    }	@media (max-width: 412px){
    		.main .wrapper-inner{
    			padding:0 !important;
    		}
    
    }
  </style>
</head>

<body style="-moz-box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -webkit-text-size-adjust: 100%; Margin: 0; box-sizing: border-box; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">

  <span class="preheader" style="color: #f3f3f3; display: none !important; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; mso-hide: all !important; opacity: 0; overflow: hidden; visibility: hidden;"></span>
  <table class="body" style="Margin: 0; background: #f3f3f3; border-collapse: collapse; border-spacing: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; height: 100%; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
    <tbody>
      <tr style="padding: 0; text-align: left; vertical-align: top;">
        <td class="center" align="center" valign="top" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
          <center data-parsed="" style="min-width: 500px; width: 100%;">
            <table class="spacer float-center" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 100%;">
              <tbody>
                <tr style="padding: 0; text-align: left; vertical-align: top;">
                  <td height="40px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 40px; font-weight: normal; hyphens: auto; line-height: 40px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                </tr>
              </tbody>
            </table>
            <table align="center" class="container float-center" style="Margin: 0 auto; background: #fefefe; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 500px;">
              <tbody>
                <tr style="padding: 0; text-align: left; vertical-align: top;">
                  <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                    <table class="wrapper main" align="center" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                      <tbody>
                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                          <td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0px 70px; text-align: left; vertical-align: top; word-wrap: break-word;">
                            <table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                              <tbody>
                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                  <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; text-align: left; width: 490px;">
                                    <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                      <tbody>
                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                          <th style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left;">
                                            <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                              <tbody>
                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                  <td height="40px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 40px; font-weight: normal; hyphens: auto; line-height: 40px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                </tr>
                                              </tbody>
                                            </table>
                                            <center data-parsed="" style="min-width: 470px; width: 100%;">
                                              <img src="https://s3.amazonaws.com/static.and.co/img/newsletter/andco@3x.png" align="center" class="float-center andco" style="-ms-interpolation-mode: bicubic; Margin: 0 auto; clear: both; display: block; float: none; height: 35px; margin: 0 auto; max-width: 100%; outline: none; text-align: center; text-decoration: none; width: 103px;">
                                            </center>
                                            <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                              <tbody>
                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                  <td height="40px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 40px; font-weight: normal; hyphens: auto; line-height: 40px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                </tr>
                                              </tbody>
                                            </table>
                                            <h1 style="Margin: 0; Margin-bottom: 0; color: inherit; font-family: 'Source Sans Pro', sans-serif; font-size: 30px; font-weight: 400; line-height: 1.3; margin: 0; margin-bottom: 0; padding: 0; padding-bottom: 10px; text-align: left; word-wrap: normal;">Hey Smiles Davis</h1>
                                            <p style="Margin: 0; Margin-bottom: 10px; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0.54px; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Welcome again! Super awesome to have you join AND CO. Now let's get you set up even more properly and make sure you got the mobile app installed as well. It's available on iOS and Android.
                                            </p>

                                            <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                              <tbody>
                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                  <td height="30px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 30px; font-weight: normal; hyphens: auto; line-height: 30px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                </tr>
                                              </tbody>
                                            </table>

                                            <table class="button success large btn expand radius" style="Margin: 0 0 10px 0; border-collapse: collapse; border-spacing: 0; font-weight: 800; letter-spacing: 1.5px; margin: 0 0 10px 0; padding: 0; text-align: left; vertical-align: top; width: 100% !important;">
                                              <tbody>
                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                  <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                    <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                                      <tbody>
                                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                          <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background: #fabc3d; border: 0px solid #fabc3d; border-collapse: collapse !important; border-radius: 3px; color: #fefefe; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                            <center data-parsed="" style="min-width: 0; width: 100%;"><a href="https://itunes.apple.com/us/app/co-smart-back-office-for-freelancers/id1022961802" align="center" class="float-center" style="Margin: 0; border: 0 solid #fabc3d; border-radius: 3px; color: #ffffff; display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; font-weight: bold; line-height: 1.3; margin: 0; padding: 17.5px 20px 17.5px 20px; padding-left: 0; padding-right: 0; text-align: center; text-decoration: none; width: 100%;"
                                                                target="_blank">iOS APP</a></center>
                                                          </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                    <br>
                                                    <table class="button success large btn expand radius" style="Margin: 0 0 10px 0; border-collapse: collapse; border-spacing: 0; font-weight: 800; letter-spacing: 1.5px; margin: 0 0 10px 0; padding: 0; text-align: left; vertical-align: top; width: 100% !important;">
                                                      <tbody>
                                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                          <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                            <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                                              <tbody>
                                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                                  <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background: #fabc3d; border: 0px solid #fabc3d; border-collapse: collapse !important; border-radius: 3px; color: #fefefe; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                                    <center data-parsed="" style="min-width: 0; width: 100%;"><a href="https://play.google.com/store/apps/details?id=co.and.andco&amp;ah=UQ8UTboW0bGT9oM4JxyvdJByKBU" align="center" class="float-center" style="Margin: 0; border: 0 solid #fabc3d; border-radius: 3px; color: #ffffff; display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; font-weight: bold; line-height: 1.3; margin: 0; padding: 17.5px 20px 17.5px 20px; padding-left: 0; padding-right: 0; text-align: center; text-decoration: none; width: 100%;"
                                                                        target="_blank">ANDROID APP</a></center>
                                                                  </td>
                                                                </tr>
                                                              </tbody>
                                                            </table>


                                                          </td>
                                                          <td class="expander" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; vertical-align: top; visibility: hidden; width: 0; word-wrap: break-word;"></td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                  </td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </th>
                                          <th class="expander" style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </th>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <hr style="border: 1px solid #f0f2f2; width: 90%;">

                    <table class="wrapper main web-app" align="center" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                      <tbody>
                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                          <td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0px 70px; text-align: left; vertical-align: top; word-wrap: break-word;">
                            <table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                              <tbody>
                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                  <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; text-align: left; width: 490px;">
                                    <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                      <tbody>
                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                          <th style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left;">
                                            <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                              <tbody>
                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                  <td height="20px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 20px; font-weight: normal; hyphens: auto; line-height: 20px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                </tr>
                                              </tbody>
                                            </table>
                                            <img src="https://gallery.mailchimp.com/e9a542a982c3e347ef2dca69f/images/023e83a4-810b-41d5-b092-9f0b970088ec.png" class="device" style="-ms-interpolation-mode: bicubic; clear: both; display: block; height: 241px; max-width: 100%; outline: none; text-decoration: none; width: 460px;">
                                            <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                              <tbody>
                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                  <td height="10px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 10px; font-weight: normal; hyphens: auto; line-height: 10px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                </tr>
                                              </tbody>
                                            </table>
                                            <h1 style="Margin: 0; Margin-bottom: 0; color: inherit; font-family: 'Source Sans Pro', sans-serif; font-size: 30px; font-weight: 400; line-height: 1.3; margin: 0; margin-bottom: 0; padding: 0; padding-bottom: 10px; text-align: left; word-wrap: normal;">Download the App!</h1>
                                            <p style="Margin: 0; Margin-bottom: 10px; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0.54px; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Manage your business with the power of your thumb. Sound like an awkward sentence in an onboarding email? Well, it is. But it's also true!</p>
                                            <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                              <tbody>
                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                  <td height="10px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 10px; font-weight: normal; hyphens: auto; line-height: 10px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                </tr>
                                              </tbody>
                                            </table>
                                            <table class="button success large btn expand radius" style="Margin: 0 0 10px 0; border-collapse: collapse; border-spacing: 0; font-weight: 800; letter-spacing: 1.5px; margin: 0 0 10px 0; padding: 0; text-align: left; vertical-align: top; width: 100% !important;">
                                              <tbody>
                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                  <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                    <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                                      <tbody>
                                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                          <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background: #fabc3d; border: 0px solid #fabc3d; border-collapse: collapse !important; border-radius: 3px; color: #fefefe; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                            <center data-parsed="" style="min-width: 0; width: 100%;"><a href="https://itunes.apple.com/us/app/co-smart-back-office-for-freelancers/id1022961802" align="center" class="float-center" style="Margin: 0; border: 0 solid #fabc3d; border-radius: 3px; color: #ffffff; display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; font-weight: bold; line-height: 1.3; margin: 0; padding: 17.5px 20px 17.5px 20px; padding-left: 0; padding-right: 0; text-align: center; text-decoration: none; width: 100%;"
                                                                target="_blank">iOS APP</a></center>
                                                          </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                    <br>
                                                    <table class="button success large btn expand radius" style="Margin: 0 0 10px 0; border-collapse: collapse; border-spacing: 0; font-weight: 800; letter-spacing: 1.5px; margin: 0 0 10px 0; padding: 0; text-align: left; vertical-align: top; width: 100% !important;">
                                                      <tbody>
                                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                          <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                            <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                                              <tbody>
                                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                                  <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background: #fabc3d; border: 0px solid #fabc3d; border-collapse: collapse !important; border-radius: 3px; color: #fefefe; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                                                    <center data-parsed="" style="min-width: 0; width: 100%;"><a href="https://play.google.com/store/apps/details?id=co.and.andco&amp;ah=UQ8UTboW0bGT9oM4JxyvdJByKBU" align="center" class="float-center" style="Margin: 0; border: 0 solid #fabc3d; border-radius: 3px; color: #ffffff; display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; font-weight: bold; line-height: 1.3; margin: 0; padding: 17.5px 20px 17.5px 20px; padding-left: 0; padding-right: 0; text-align: center; text-decoration: none; width: 100%;"
                                                                        target="_blank">ANDROID APP</a></center>
                                                                  </td>
                                                                </tr>
                                                              </tbody>
                                                            </table>


                                                            <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                                              <tbody>
                                                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                                  <td height="20px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 20px; font-weight: normal; hyphens: auto; line-height: 20px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                                </tr>
                                                              </tbody>
                                                            </table>
                                                          </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                  </td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </th>
                                          <th class="expander" style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </th>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>


                    <table class="wrapper main" align="center" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                      <tbody>
                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                          <td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0px 70px; text-align: left; vertical-align: top; word-wrap: break-word;">
                            <table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                              <tbody>
                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                  <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; text-align: left; width: 490px;">
                                    <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                      <tbody>
                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                          <th style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left;">

                                          </th>
                                          <th class="expander" style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </th>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>


                    <hr style="border: 1px solid #f0f2f2; width: 90%;">

                    <table class="wrapper main" align="center" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                      <tbody>
                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                          <td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0px 70px; text-align: left; vertical-align: top; word-wrap: break-word;">
                            <table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                              <tbody>
                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                  <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; text-align: left; width: 490px;">
                                    <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                      <tbody>
                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                          <th style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left;">
                                            <center data-parsed="" style="min-width: 470px; width: 100%;">
                                              <table class="spacer float-center" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 100%;">
                                                <tbody>
                                                  <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                    <td height="120px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 120px; font-weight: normal; hyphens: auto; line-height: 120px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                              <a href="https://www.and.co" target="_blank"><img src="https://s3.amazonaws.com/static.and.co/img/newsletter/smart_app@3x.png" class="smart-app float-center" align="center" style="-ms-interpolation-mode: bicubic; Margin: 0 auto; clear: both; display: block; float: none; height: 23px; margin: 0 auto; max-width: 100%; outline: none; text-align: center; text-decoration: none; width: 237px;"></a>
                                              <table class="spacer float-center" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 100%;">
                                                <tbody>
                                                  <tr style="padding: 0; text-align: left; vertical-align: top;">
                                                    <td height="120px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 120px; font-weight: normal; hyphens: auto; line-height: 120px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </center>
                                          </th>
                                          <th class="expander" style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </th>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>

            <table align="center" class="wrapper footer float-center" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 100%;">
              <tbody>
                <tr style="padding: 0; text-align: left; vertical-align: top;">
                  <td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                    <table class="row" style="border-collapse: collapse; border-spacing: 0; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                      <tbody>
                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                          <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; text-align: left; width: 490px;">
                            <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                              <tbody>
                                <tr style="padding: 0; text-align: left; vertical-align: top;">
                                  <th style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left;">
                                    <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                      <tbody>
                                        <tr style="padding: 0; text-align: left; vertical-align: top;">
                                          <td height="20px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 20px; font-weight: normal; hyphens: auto; line-height: 20px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&nbsp;</td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <center data-parsed="" style="min-width: 470px; width: 100%;">
                                      <table align="center" class="menu float-center" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: auto !important;">
                                        <tbody>
                                          <tr style="padding: 0; text-align: left; vertical-align: top;">
                                            <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
                                              <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                                                <tbody>
                                                  <tr style="padding: 0; text-align: left; vertical-align: top;">

                                                    <th class="expander" style="Margin: 0; color: #222f3c; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </center>
                                  </th>
                                </tr>
                              </tbody>
                            </table>
                          </th>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- prevent Gmail on iOS font size manipulation -->
  <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
  <center>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
      <tbody>
        <tr>
          <td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
            <table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
              <tbody>
                <tr>
                  <td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
                    This email was sent to <a href="mailto:" target="_blank" style="color:#404040 !important;">hello@SmilesDavis.yeah</a>
                    <br>
                    <a href="http://and.us12.list-manage.com/about?u=e9a542a982c3e347ef2dca69f&amp;id=0bb654faac&amp;e=f1ff677618&amp;c=40a8b8e8ef" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a
                      href="#" style="color:#404040 !important;" target="_blank">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" style="color:#404040 !important;" target="_blank">update subscription preferences</a>
                      <br> AND CO · 221 Canal St · Floor 6 · New York, NY 10013 · USA
                      <br>
                      <br>

                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <style type="text/css">
      @media only screen and (max-width: 480px){
                        table#canspamBar td{font-size:14px !important;}
                        table#canspamBar td a{display:block !important; margin-top:10px !important;}
                    }
    </style>
  </center>

</body>
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console