cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-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.

            
              <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700"
    rel="stylesheet">
    <style type="text/css">
      html { -webkit-text-size-adjust: none; -ms-text-size-adjust: none;}
    
      @media only screen and (min-device-width: 750px) {
        .table750 {width: 750px !important;}
      }
      @media only screen and (max-device-width: 750px), only screen and (max-width: 750px){
          table[class="table750"] {width: 100% !important;}
          .mob_b {width: 93% !important; max-width: 93% !important; min-width: 93% !important;}
          .mob_b1 {width: 100% !important; max-width: 100% !important; min-width: 100% !important;}
          .mob_left {text-align: left !important;}
          .mob_center {text-align: center !important;}
          .mob_soc {width: 50% !important; max-width: 50% !important; min-width: 50% !important;}
          .mob_menu {width: 50% !important; max-width: 50% !important; min-width: 50% !important; box-shadow: inset -1px -1px 0 0 rgba(255, 255, 255, 0.2); }
          .mob_btn {width: 100% !important; max-width: 100% !important; min-width: 100% !important;}
          .mob_pad {width: 15px !important; max-width: 15px !important; min-width: 15px !important;}
          .min_pad2 {height: 30px !important; max-height: 30px !important; min-height: 15px !important;}
          .top_pad {height: 15px !important; max-height: 15px !important; min-height: 15px !important;}
          .top_pad2 {height: 50px !important; max-height: 50px !important; min-height: 50px !important;}
          .top_pad3 {height: 20px !important; max-height: 20px !important; min-height: 20px !important;}
          .mob_title1 {font-size: 36px !important; line-height: 40px !important;}
          .mob_title2 {font-size: 26px !important; line-height: 33px !important;}
          .mob_txt {font-size: 20px !important; line-height: 25px !important;}
      }
       @media only screen and (max-device-width: 550px), only screen and (max-width: 550px){
          .mod_div {display: block !important;}
       }
      .table750 {width: 750px;}
    
      h1 {
        font-size: 3rem;
      }
      h2 {
        font-size: 2rem;
      }
      h3 {
        font-size: 1.5rem;
      }
      h4 {
        font-size: 1rem;
      }
      p {
        font-size: 1rem;
      }
    </style>
  </head>
  <body style="margin: 0; padding: 0; font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #000000; font-size: 20px; line-height: 28px;">
  <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background:
  #f5f8fa; min-width: 340px; font-size: 1px; line-height: normal;">
  <tr>
    <td align="center" valign="top">
      <!--[if (gte mso 9)|(IE)]>
         <table border="0" cellspacing="0" cellpadding="0">
         <tr><td align="center" valign="top" width="750"><![endif]-->
      <table cellpadding="0" cellspacing="0" border="0" width="750
 " class="table750" style="width: 100%; max-width: 750px; min-width: 340px; background:
  #f5f8fa;">
        <tr>
               <td class="mob_pad" width="25" style="width: 25px; max-width:
  25px; min-width: 25px;">&nbsp;</td>
          <td align="center" valign="top" style="background: #ffffff;">

                  <table cellpadding="0" cellspacing="0" border="0
 " width="100%" style="width: 100% !important; min-width: 100%; max-width: 100%; background:
  #f5f8fa;">
                     <tr>
                        <td align="right" valign="top">
                           <div class="top_pad" style="height: 25px; line-height:
  25px; font-size: 23px;">&nbsp;</div>
                        </td>
                     </tr>
                  </table>

                  <table cellpadding="0" cellspacing="0" border="0
 " width="88%" style="width: 88% !important; min-width: 88%; max-width: 88%;">
   <tr>
      <td align="center" valign="top">
         <div style="height: 40px; line-height: 40px; font-size: 38px;">&nbsp;</div>
         <a href="http://post.spmailtechn.com/f/a/DUCPjq4UFxy8-uZNIXP7Kg~~/AAJxtwA~/RgRbxghCP0EIACzv81Ib_PtXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YAw1Mi4zOS41MS4xODRIC3VzZXIuZm9sbG93QgoAAMLU5FnK9hT9UhptYXR0aGV3QGZhdGhvbWFuZGRyYWZ0LmNvbQlRBAAAAABEFGh0dHA6Ly9oaXJlY2x1Yi5jb20vR157ImFjdGl2aXR5X2lkIjoiNDg3OTciLCJub3RpZmljYXRpb25faWQiOiIyMjQ1OSIsImNhbXBhaWduX2lkIjoidXNlci5mb2xsb3ciLCJ1c2VyX2lkIjoiMjg3OCJ9Ew~~
 " style="display: block; max-width: 192px;">
            <img src="http://hireclub.com/images/email_logo.png" alt="HireClub
 " width="192" border="0" style="display: block; width: 192px;" />
         </a>
         <div class="top_pad2" style="height: 48px; line-height: 48px; font-size:
  46px;">&nbsp;</div>
      </td>
   </tr>
</table>

                  <table cellpadding="0" cellspacing="0" border="0
 " width="88%" style="width: 88% !important; min-width: 88%; max-width: 88%;">
                     <tr>
                        <td align="center" valign="top">
                           <font class="mob_title1" face=" 'Source Sans Pro',
  sans-serif" color="#1a1a1a" style="font-size: 52px; line-height: 55px; font-weight:
  300; letter-spacing: -1.5px;">
                              <span class="mob_title1" style="font-family:
  'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a; font-size: 52px; line-height:
  55px; font-weight: 300; letter-spacing: -1.5px;">
                                  Ketan Anjaria followed you on HireClub!
                              </span>
                           </font>
                           <div class="top_pad3" style="height: 30px; line-height:
  30px; font-size: 28px;">
                             &nbsp;
                           </div>
                        </td>
                     </tr>
                  </table>

                  <table cellpadding="0" cellspacing="0" border="0
 " width="65%" style="width: 65% !important; min-width: 270px; max-width: 65%; border-width:
  1px; border-style: solid; border-color: #e5e5e5; border-radius: 5px;">
                     <tr>
                        <td width="15" style="width: 15px; max-width: 15px;
  min-width: 15px;">
                          &nbsp;
                        </td>
                        <td align="center" valign="top">

                           <div style="height: 38px; line-height: 38px; font-size:
  36px;">&nbsp;</div>

                           <a href="http://post.spmailtechn.com/f/a/JEMdoohssW6fAwZW_MxTTQ~~/AAJxtwA~/RgRbxghCP0EIACzv81Ib_PtXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YAw1Mi4zOS41MS4xODRIC3VzZXIuZm9sbG93QgoAAMLU5FnK9hT9UhptYXR0aGV3QGZhdGhvbWFuZGRyYWZ0LmNvbQlRBAAAAABEYGh0dHA6Ly9oaXJlY2x1Yi5jb20va2lkYm9tYmF5P3V0bV9zb3VyY2U9dHJhbnNhY3Rpb25hbCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9jYW1wYWlnbj11c2VyLmZvbGxvd0deeyJ1c2VyX2lkIjoiMjg3OCIsImFjdGl2aXR5X2lkIjoiNDg3OTciLCJjYW1wYWlnbl9pZCI6InVzZXIuZm9sbG93Iiwibm90aWZpY2F0aW9uX2lkIjoiMjI0NTkifRM~
 " style="display: block; max-width: 100px;">
                              <img src="https://res-3.cloudinary.com/hireclub/image/upload/c_fill,f_auto,g_north,h_200,q_auto,w_200/ob2phnmrugkosc9qjed3
 " alt="img" width="100" border="0" style="display: block; width: 100px; border-radius:
  100px;" />
                           </a>

                           <div style="height: 15px; line-height: 15px; font-size:
  13px;">&nbsp;</div>

                           <a href="http://post.spmailtechn.com/f/a/oz9JsaUPkl_3lohLJHXz_A~~/AAJxtwA~/RgRbxghCP0EIACzv81Ib_PtXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YAw1Mi4zOS41MS4xODRIC3VzZXIuZm9sbG93QgoAAMLU5FnK9hT9UhptYXR0aGV3QGZhdGhvbWFuZGRyYWZ0LmNvbQlRBAAAAABEYGh0dHA6Ly9oaXJlY2x1Yi5jb20va2lkYm9tYmF5P3V0bV9zb3VyY2U9dHJhbnNhY3Rpb25hbCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9jYW1wYWlnbj11c2VyLmZvbGxvd0deeyJhY3Rpdml0eV9pZCI6IjQ4Nzk3Iiwibm90aWZpY2F0aW9uX2lkIjoiMjI0NTkiLCJjYW1wYWlnbl9pZCI6InVzZXIuZm9sbG93IiwidXNlcl9pZCI6IjI4NzgifRM~
 " style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a;
  font-size: 19px; line-height: 25px; font-weight: 600; text-decoration: none;">
                              <font face=" 'Source Sans Pro', sans-serif
 " color="#1a1a1a" style="font-size: 19px; line-height: 25px; font-weight: 600; text-decoration:
  none;">
                                 <span style="font-family: 'Source Sans Pro',
  Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a; font-size: 19px; line-height:
  25px; font-weight: 600; text-decoration: none;">
                                   Ketan Anjaria
                                 </span>
                              </font>
                           </a>

                           <div style="height: 3px; line-height: 3px; font-size:
  1px;">&nbsp;</div>

                           <a href="http://post.spmailtechn.com/f/a/2HNBE8O2mavDQp3AiBSAwA~~/AAJxtwA~/RgRbxghCP0EIACzv81Ib_PtXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YAw1Mi4zOS41MS4xODRIC3VzZXIuZm9sbG93QgoAAMLU5FnK9hT9UhptYXR0aGV3QGZhdGhvbWFuZGRyYWZ0LmNvbQlRBAAAAABEYGh0dHA6Ly9oaXJlY2x1Yi5jb20va2lkYm9tYmF5P3V0bV9zb3VyY2U9dHJhbnNhY3Rpb25hbCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9jYW1wYWlnbj11c2VyLmZvbGxvd0deeyJjYW1wYWlnbl9pZCI6InVzZXIuZm9sbG93IiwiYWN0aXZpdHlfaWQiOiI0ODc5NyIsIm5vdGlmaWNhdGlvbl9pZCI6IjIyNDU5IiwidXNlcl9pZCI6IjI4NzgifRM~
 " style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #5E5E5E;
  font-size: 19px; line-height: 22px; text-decoration: none;">
                              <font face=" 'Source Sans Pro', sans-serif
 " color="#5E5E5E" style="font-size: 19px; line-height: 22px; text-decoration: none;">
                                 <span style="font-family: 'Source Sans Pro',
  Arial, Tahoma, Geneva, sans-serif; color: #5E5E5E; font-size: 19px; line-height:
  22px; text-decoration: none;">
                                       Founder
                                       ·
                                       HireClub
                                 </span>
                              </font>
                           </a>

                           <div style="height: 40px; line-height: 40px; font-size:
  38px;">&nbsp;</div>

                             <table class="mob_btn" cellpadding="0
 " cellspacing="0" border="0" style="background: #6070E9; border-radius: 4px;">
   <tr>
      <td align="center" valign="top"> 
         <a href="#" target="_blank" style="display: block; border: 1px solid #6070E9; border-radius: 4px;
  padding: 19px 27px; font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, Geneva,
  sans-serif; color: #ffffff; font-size: 26px; line-height: 30px; text-decoration:
  none; white-space: nowrap; font-weight: 600;">
            <font face=" 'Source Sans Pro', sans-serif" color="#ffffff
 " style="font-size: 26px; line-height: 30px; text-decoration: none; white-space: nowrap;
  font-weight: 600;">
               <span style="font-family: 'Source Sans Pro', Arial, Verdana, Tahoma,
  Geneva, sans-serif; color: #ffffff; font-size: 26px; line-height: 30px; text-decoration:
  none; white-space: nowrap; font-weight: 600;">Follow Ketan</span>
            </font>
         </a>
      </td>
   </tr>
</table>
                             <div style="height: 18px; line-height: 18px; font-size:
  16px;">&nbsp;</div>
                             <a href="http://post.spmailtechn.com/f/a/ipKY3xnAjgdda6nT7pa3qg~~/AAJxtwA~/RgRbxghCP0EIACzv81Ib_PtXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YAw1Mi4zOS41MS4xODRIC3VzZXIuZm9sbG93QgoAAMLU5FnK9hT9UhptYXR0aGV3QGZhdGhvbWFuZGRyYWZ0LmNvbQlRBAAAAABEYGh0dHA6Ly9oaXJlY2x1Yi5jb20va2lkYm9tYmF5P3V0bV9zb3VyY2U9dHJhbnNhY3Rpb25hbCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9jYW1wYWlnbj11c2VyLmZvbGxvd0deeyJhY3Rpdml0eV9pZCI6IjQ4Nzk3IiwidXNlcl9pZCI6IjI4NzgiLCJjYW1wYWlnbl9pZCI6InVzZXIuZm9sbG93Iiwibm90aWZpY2F0aW9uX2lkIjoiMjI0NTkifRM~
 " target="_blank" style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif;
  color: #5E5E5E; font-size: 19px; line-height: 22px; text-decoration: uppercase;">   
    <font face=" 'Source Sans Pro', sans-serif" color="#5E5E5E" style="font-size:
  19px; line-height: 22px; text-decoration: uppercase;">
       <span style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif;
  color: #5E5E5E; font-size: 19px; line-height: 22px; text-decoration: uppercase;">View Profile</span>
    </font>
 </a>

                           <div style="height: 34px; line-height: 34px; font-size:
  32px;">&nbsp;</div>

                        </td>
                        <td width="15" style="width: 15px; max-width: 15px;
  min-width: 15px;">&nbsp;</td>
                     </tr>
                  </table>

                  <div class="top_pad2" style="height: 70px; line-height: 70px;
  font-size: 68px;">&nbsp;</div>

                  <table cellpadding="0" cellspacing="0" border="0
 " width="100%" style="width: 100% !important; min-width: 100%; max-width: 100%; background:
  #f5f8fa;">
   <tbody>
      <tr>
         <td align="center" valign="top">

            <div style="height: 34px; line-height: 34px; font-size: 32px;">&nbsp;</div>

            <table cellpadding="0" cellspacing="0" border="0" width="88%
 " style="width: 88% !important; min-width: 88%; max-width: 88%;">
               <tbody><tr>
                  <td align="center" valign="top">
                     <table cellpadding="0" cellspacing="0" border="0
 " width="78%" style="min-width: 300px;">
                        <tbody><tr>
                           <td align="center" valign="top" width="23%">                                             
                              <a href="mailto:help@hireclub.com" style="font-family:
  'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a; font-size: 14px; line-height:
  20px; text-decoration: none; white-space: nowrap; font-weight: bold;">
                                 <font face=" 'Source Sans Pro', sans-serif
 " color="#1a1a1a" style="font-size: 14px; line-height: 20px; text-decoration: none; white-space:
  nowrap; font-weight: bold;">
                                    <span style="font-family:
  'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a; font-size: 14px; line-height:
  20px; text-decoration: none; white-space: nowrap; font-weight: bold;">HELP</span>
                                 </font>
                              </a>
                           </td>
                           <td align="center" valign="top" width="10%">
                              <font face=" 'Source Sans Pro', sans-serif
 " color="#1a1a1a" style="font-size: 17px; line-height: 17px; font-weight: bold;">
                                 <span style="font-family: 'Source Sans Pro',
  Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a; font-size: 17px; line-height:
  17px; font-weight: bold;">•</span>
                              </font>
                           </td>
                           <td align="center" valign="top" width="23%">
                              <a href="#" style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a;
  font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap;
  font-weight: bold;">
                                 <font face=" 'Source Sans Pro', sans-serif
 " color="#1a1a1a" style="font-size: 14px; line-height: 20px; text-decoration: none; white-space:
  nowrap; font-weight: bold;">
                                    <span style="font-family:
  'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a; font-size: 14px; line-height:
  20px; text-decoration: none; white-space: nowrap; font-weight: bold;">SETTINGS</span>
                                 </font>
                              </a>
                           </td>
                              <td align="center" valign="top" width="10%">
                                 <font face=" 'Source Sans Pro', sans-serif
 " color="#1a1a1a" style="font-size: 17px; line-height: 17px; font-weight: bold;">
                                    <span style="font-family:
  'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a; font-size: 17px; line-height:
  17px; font-weight: bold;">•</span>
                                 </font>
                              </td>
                              <td align="center" valign="top" width="23%">
                                 <a href="#" style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a;
  font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap;
  font-weight: bold;">
                                    <font face=" 'Source Sans Pro', sans-serif
 " color="#1a1a1a" style="font-size: 14px; line-height: 20px; text-decoration: none; white-space:
  nowrap; font-weight: bold;">
                                       <span style="font-family:
  'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a; font-size: 14px; line-height:
  20px; text-decoration: none; white-space: nowrap; font-weight: bold;">PROFILE</span>
                                    </font>
                                 </a>
                              </td>
                        </tr>
                     </tbody></table>

                     <div style="height: 34px; line-height: 34px; font-size:
  32px;">&nbsp;</div>

                     <font face=" 'Source Sans Pro', sans-serif" color="#868686
 " style="font-size: 15px; line-height: 20px;">
                        <span style="font-family: 'Source Sans Pro', Arial, Tahoma,
  Geneva, sans-serif; color: #868686; font-size: 15px; line-height: 20px;">
                           HireClub
                           <br>
                           385 29th St. Suite 3 · San Francisco, CA · 94131</span>
                     </font>

                     <div style="height: 4px; line-height: 4px; font-size: 2px;">&nbsp;</div>
                        <a target="_blank" href="#" style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a;
  font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap;
  font-weight: bold;">
                           Unsubscribe
                        </a>
                     <div style="height: 3px; line-height: 3px; font-size: 1px;">&nbsp;</div>

<!--                      <font face=" 'Source Sans Pro', sans-serif
 " color="#1a1a1a" style="font-size: 17px; line-height: 20px;">
                        <span style="font-family: 'Source Sans Pro', Arial, Tahoma,
  Geneva, sans-serif; color: #1a1a1a; font-size: 17px; line-height: 20px;
 "><a href="mailto:help@hireclub.com" style="font-family: 'Source Sans Pro', Arial, Tahoma,
  Geneva, sans-serif; color: #1a1a1a; font-size: 17px; line-height: 20px; text-decoration:
  none;">help@hireclub.com</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank
 " style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva, sans-serif; color: #1a1a1a;
  font-size: 17px; line-height: 20px; text-decoration: none;
 ">1(800)232-90-26</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="#" target="_blank" style="font-family: 'Source Sans Pro', Arial, Tahoma, Geneva,
  sans-serif; color: #1a1a1a; font-size: 17px; line-height: 20px; text-decoration:
  none;">Unsubscribe</a></span>
                     </font> 

                     <div style="height: 35px; line-height: 35px; font-size:
  33px;">&nbsp;</div>

                     <table cellpadding="0" cellspacing="0" border="0">
                        <tbody><tr>
                           <td align="center" valign="top">
                              <a href="#" target="_blank" style="display: block;
  max-width: 19px;">
                                 <img src="images/soc_1.png" alt="img
 " width="19" border="0" style="display: block; width: 19px;">
                              </a>
                           </td>
                           <td width="45" style="width: 45px; max-width: 45px;
  min-width: 45px;">&nbsp;</td>
                           <td align="center" valign="top">
                              <a href="#" target="_blank" style="display: block;
  max-width: 18px;">
                                 <img src="images/soc_2.png" alt="img
 " width="18" border="0" style="display: block; width: 18px;">
                              </a>
                           </td>
                           <td width="45" style="width: 45px; max-width: 45px;
  min-width: 45px;">&nbsp;</td>
                           <td align="center" valign="top">
                              <a href="#" target="_blank" style="display: block;
  max-width: 21px;">
                                 <img src="images/soc_3.png" alt="img
 " width="21" border="0" style="display: block; width: 21px;">
                              </a>
                           </td>
                           <td width="45" style="width: 45px; max-width: 45px;
  min-width: 45px;">&nbsp;</td>
                           <td align="center" valign="top">
                              <a href="#" target="_blank" style="display: block;
  max-width: 25px;">
                                 <img src="images/soc_4.png" alt="img
 " width="25" border="0" style="display: block; width: 25px;">
                              </a>
                           </td>
                        </tr>
                     </tbody></table>
                     -->

                     <div style="height: 35px; line-height: 35px; font-size:
  33px;">&nbsp;</div>
                     
                  </td>
               </tr>
            </tbody></table>
         </td>
      </tr>
   </tbody>
</table>

               </td>
               <td class="mob_pad" width="25" style="width: 25px; max-width:
  25px; min-width: 25px;">&nbsp;</td>
            </tr>
         </table>
         <!--[if (gte mso 9)|(IE)]>
         </td></tr>
         </table><![endif]-->
      </td>
   </tr>
</table>

</body>
</html>


        
            
          
!
999px
Loading ..................

Console