Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Spirit Airlines</title>
    <style type="text/css">
        .style1
        {
            width: 91px;
        }
    </style>
</head>
<body style="padding: 0px; margin: 0px;"><img src="http://l.spiritairlines.com/rts/open.aspx?tp=i-H8B-5c-1LI-52e7lH-2C-7NMWI-1c-G-4mYOiB-1qn0kl" height="1" width="1" style="display:none">
   <table width="800" height="1200" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
        <td colspan="3" align="left" valign="bottom" width="800" height="11" style="padding: 0px;">
             <img src="http://namwpm.eccmp.com/wpm/348/ContentUploads/Images/Transactional/redesign/status_arrived_email_spirit_header_line.png" alt="spirit headerline" width="800" height="11" border="0" style="float: left;" />
        </td>
    </tr>
        <tr>
            <td colspan="3" align="left" valign="bottom" width="800" height="97" style="padding: 0px;">
                <a href="http://l.spiritairlines.com/rts/go2.aspx?h=138606&tp=i-H8B-5c-1LI-52e7lH-2C-7NMWI-1c-G-4mYOiB-1qn0kl">
                    <img src="http://namwpm.eccmp.com/wpm/348/ContentUploads/Images/Transactional/redesign/status_arrived_email_spirit_header.png" width="800" height="111" alt="Spirit Airlines"
                        border="0" style="float: left;" /></a>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top" width="101" height="861" style="padding: 0px;">
                <img src="http://namwpm.eccmp.com/wpm/348/ContentUploads/Images/Transactional/redesign/status_arrived_email_left.png" width="101" height="870" alt="Left img" style="border: 0px;
                    float: left;" />
            </td>
            <td align="left" valign="top" width="598" height="861" style="padding: 0px; background-color: #ffffff;">
                <table cellpadding="0" cellspacing="0" border="0" style="padding: 0px;">
                    <tr>
                        <td align="left" width="598" height="25" style="padding: 0px;">
                        </td>
                    </tr>
                    <tr>
                        <td align="left" valign="bottom" width="598" height="30" style="padding: 0px; text-align: left;">
                            <h1 style="padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: normal; font-family: Arial,Helvetica,sans-serif;
                                font-size: 30px; color: #333333; font-weight: normal;">
                                Hello there,</h1>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="25" style="padding: 0px;">
                        </td>
                    </tr>
                     <tr>                    
                        <td>
                        <p style="width: 540px; padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: 27px; font-family: Arial,Helvetica,sans-serif; 
                            font-size: 18px; color: #333333; font-weight: normal; text-align: left;">We want to inform you of the following gate update:</p>
                         </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="25" style="padding: 0px;">
                        </td>
                    </tr>
                    <tr>                    
                        <td align="left" width="598">
                        <p style="width: 540px; padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: 27px; font-family: Arial,Helvetica,sans-serif; 
                            font-size: 12px; text-transform:uppercase; color: #333333; font-weight: normal; text-align: right;"><b>Monday December 05</b></p>
                         </td>
                    </tr>
                   <tr>
                         <td align="left" width="598" height="53">
                            <table cellpadding="0" cellspacing="0" border="0" align="left" width="540" background="images/flight_header_bg.jpg" style="line-height: 27px;font-family: Arial,Helvetica,sans-serif; font-size: 18px; color: #000000; font-weight: normal; text-align: left; padding: 0px; margin: 0px; margin-left:29px; margin-right:29px; background:#000000 url('images/flight_header_bg.jpg') no-repeat;">
                                 <tr>
                                    <td width="15" style="padding: 0px;"></td>
                                    <td height="53" width="37" style="padding: 0px; margin: 0px;">
                                         <img src="http://cache1.cv47.net/wpm/348/ContentUploads/UploadedContent_58249/images/status_gate_email_departed.png" width="24" height="17" alt="Departure" style="border: 0px;" />
                                    </td>
                                    <td width="43%" align="left">
                                         <p style="padding: 0px; margin: 0px; line-height: 30px; font-family: Arial,Helvetica,sans-serif; 
                                font-size: 24px; color: #ffffff; font-weight: normal; text-align: left;">Los Angeles, CA</p>
                                    </td>
                                    <td width="15" style="padding:0;"></td>
                                    <td height="53" width="37" align="left">
                                        <img src="http://cache1.cv47.net/wpm/348/ContentUploads/UploadedContent_58249/images/status_gate_email_arrived.png" width="27" height="15" alt="Arrived" style="border: 0px;" />                                       
                                    </td>
                                    <td align="left">
                                         <p style="padding: 0px; margin: 0px; line-height: 30px; font-family: Arial,Helvetica,sans-serif; 
                                font-size: 24px; color: #ffffff; font-weight: normal; text-align: left;">Chicago, IL - O'Hare </p>
                                    </td>
                                  </tr>
                              </table>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="8" style="padding: 0px;">
                        </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="auto" style="padding:0px;">
                            <table cellpadding="0" cellspacing="0" bgcolor="#efefef" style="width: 540px; padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: 27px;
                                    font-family: Arial,Helvetica,sans-serif; font-size: 18px; color: #333333; font-weight: normal; background-color:#efefef; border-style:solid; border-width:1px; border-color:#cfcfcf;">
                                     <tr>
                                        <td height="10" colspan="3"></td>
                                     </tr>
                                     <tr>
                                        <td align="left" width="15"></td>
                                        <td style="padding: 0px;" height="auto">
                                            <p style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; 
                                    font-size: 14px; color: #333333; font-weight: normal; text-align: left;">Los Angeles, CA  LAX </p>
                                        </td>
                                        <td align="left">
                                             <p style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; 
                                    font-size: 14px; color: #333333; font-weight: normal; text-align: left;">Chicago, IL - O'Hare   ORD </p>
                                            </td>
                                     </tr>
                                     <tr>
                                       <td colspan="3" height="3" style="padding: 0px;" align="left">
                                        </td>
                                     </tr>
                                     <tr>
                                        <td align="left" width="15"></td>
                                        <td style="padding: 0px;" height="auto">                                            
                                            <span style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; &#xA;			    font-size: 24px; color: #333333; font-weight: normal; text-align: left; text-decoration:line-through;" xmlns:ms="urn:schemas-microsoft-com:xslt" xmlns:dt="urn:schemas-microsoft-com:datatypes">5:30 PM</span> 
			<span style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; &#xA;			    font-size: 24px; color: #333333; font-weight: bold; text-align: left;" xmlns:ms="urn:schemas-microsoft-com:xslt" xmlns:dt="urn:schemas-microsoft-com:datatypes">6:00 PM</span>

                                        </td>
                                        <td align="left">                                              
<span style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; &#xA;			    font-size: 24px; color: #333333; font-weight: normal; text-align: left; text-decoration:line-through;" xmlns:ms="urn:schemas-microsoft-com:xslt" xmlns:dt="urn:schemas-microsoft-com:datatypes">11:28 PM</span> 
			<span style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; &#xA;			    font-size: 24px; color: #333333; font-weight: bold; text-align: left;" xmlns:ms="urn:schemas-microsoft-com:xslt" xmlns:dt="urn:schemas-microsoft-com:datatypes">11:58 PM</span>

                                            </td>
                                       </tr>
<tr>
	<td width="15" align="left">
	</td>
	<td align="left" style="padding: 0px; margin: 0px;"><p style="padding: 0px; margin: 0px; line-height: 1px; font-family: Arial,Helvetica,sans-serif; 
	    font-size: 10px; color: #333333; font-weight: bold; text-align: left;"></p>
	</td> 
	<td align="left" style="padding: 0px; margin: 0px;"><p style="padding: 0px; margin: 0px; line-height: 1px; font-family: Arial,Helvetica,sans-serif; 
	    font-size: 10px; color: #333333; font-weight: bold; text-align: left;"></p>
	</td>                                                
    </tr>                               
                                      <tr>
                                              <td width="15" align="left">
                                              </td>
                                              <td style="padding: 0px; margin: 0px;" align="left">
                                              </td> 
                                              <td style="padding: 0px; margin: 0px;" align="left"><p style="padding: 0px; margin: 0px; line-height: 1px; font-family: Arial,Helvetica,sans-serif; 
                                        font-size: 10px; color: #333333; font-weight: bold; text-align: left;"></p>
                                             </td>                                                
                                      </tr>                                    
                                     <tr>
                                       <td colspan="3" height="3" style="padding: 0px;" align="left">
                                        </td>
                                     </tr>                                                  
                                     <tr>
                                        <td height="5" colspan="3"></td>
                                     </tr>
                                     <tr>
                                        <td align="left"></td>
                                        <td style="padding: 0px; margin: 0px;">
                                            <p style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; 
                                    font-size: 18px; color: #333333; font-weight: normal; text-align: left;"><i>Terminal:</i>&nbsp;&nbsp; 
												<span style="padding: 0px; margin: 0px; font-family: Arial,Helvetica,sans-serif;color: #333333; font-weight: normal; text-align: left; text-decoration:line-through;"></span>
												<span style="padding: 0px; margin: 0px; font-family: Arial,Helvetica,sans-serif; 
                                             color: #333333; font-weight: bold; text-align: left;">5</span>
											</p>
                                        </td>
                                        <td align="left">
                                             <p style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; 
                                    font-size: 18px; color: #333333; font-weight: normal; text-align: left;"><i>Terminal:</i>&nbsp;&nbsp; 
												<span style="padding: 0px; margin: 0px; font-family: Arial,Helvetica,sans-serif;color: #333333; font-weight: normal; text-align: left; text-decoration:line-through;"></span>
												<span style="padding: 0px; margin: 0px; font-family: Arial,Helvetica,sans-serif; 
                                             color: #333333; font-weight: bold; text-align: left;">3</span>
											</p>
                                            
                                        </td>                                    
                                     </tr>
                                     <tr>
                                        <td height="10"></td>
                                         <td height="10"></td>
                                          <td height="10"></td>
                                     </tr>                                     
                                     <tr>
                                        <td align="left"></td>
                                        <td style="padding: 0px; margin: 0px;">
                                            <p style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; 
                                    font-size: 18px; color: #333333; font-weight: normal; text-align: left;"><i>Gate:</i>&nbsp;&nbsp; 
												<span style="padding: 0px; margin: 0px; font-family: Arial,Helvetica,sans-serif;color: #333333; font-weight: normal; text-align: left; text-decoration:line-through;">Not Assigned</span>
												<span style="padding: 0px; margin: 0px; font-family: Arial,Helvetica,sans-serif; 
                                             color: #333333; font-weight: bold; text-align: left;">54A</span>
											</p>
                                        </td>
                                        <td align="left">
                                             <p style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; 
                                    font-size: 18px; color: #333333; font-weight: normal; text-align: left;"><i>Gate:</i>&nbsp;&nbsp; 
												<span style="padding: 0px; margin: 0px; font-family: Arial,Helvetica,sans-serif;color: #333333; font-weight: normal; text-align: left; text-decoration:line-through;">Not Assigned</span>
												<span style="padding: 0px; margin: 0px; font-family: Arial,Helvetica,sans-serif; 
                                             color: #333333; font-weight: bold; text-align: left;">L5</span>
											</p>
                                        </td>                                    
                                     </tr>
                                     <tr>
                                        <td height="10"></td>
                                         <td height="10"></td>
                                          <td height="10"></td>
                                     </tr>
                                     <tr>
                                        <td colspan="3" height="1">
                                        <img src="http://cache1.cv47.net/wpm/348/ContentUploads/UploadedContent_58249/images/status_gate_email.png" alt="" width="538" height="1"/>                                        
                                        </td>                                                                     
                                     </tr>
                                     <tr>
                                        <td height="10" colspan="3"></td>
                                     </tr>
                                     <tr>
                                       <td align="left"></td>
                                       <td style="padding: 0px; margin: 0px;">
                                            <p style="padding: 0px; margin: 0px; line-height: 24px; font-family: Arial,Helvetica,sans-serif; 
                                    font-size: 18px; color: #333333; font-weight: normal; text-align: left;"><i>Flight:</i> &nbsp;&nbsp; 650</p>
                                        </td>
                                        <td align="left">
                                            <table>
                                              <tr>
                                                <td width="100" height="33" valign="middle" bgcolor="#ffde00"> <p style="text-align:center; padding:0px; margin: 0px; font-family: Arial,Helvetica,sans-serif; 
                                            font-size: 12px; color: #000000; font-weight: bold; text-transform:uppercase;">Delayed</p></td>
                                             
                                              </tr>
                                             </table>                                            
                                        </td>                                                                         
                                     </tr>
                                     <tr>
                                        <td height="5" colspan="3"></td>
                                     </tr>                                     
                            </table>
                         </td>
                     </tr>
                     <tr>
                        <td align="left" width="598" height="25" style="padding: 0px;">                       
                         </td>
                     </tr>
                     <tr>
                        <td align="left" width="598" height="auto" style="padding: 0px;">
                         </td>
                     </tr>                   
                     <tr>
                        <td align="left" width="598" height="25" style="padding: 0px;">                       
                         </td>
                     </tr>
                     <tr>
                        <td>
                        <p style="width: 540px; padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: 27px; font-family: Arial,Helvetica,sans-serif; 
                            font-size: 18px; color: #333333; font-weight: normal; text-align: left;">Please check the Flight Status page on <a href="http://l.spiritairlines.com/rts/go2.aspx?h=138607&tp=i-H8B-5c-1LI-52e7lH-2C-7NMWI-1c-G-4mYOiB-1qn0kl" name="Flight Status" style="color: #FF0020; font-size:18px; text-decoration: none; font-weight: bold;">spirit.com</a> for the latest information.</p>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="25" style="padding: 0px;">
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <p style="width: 540px; padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: 27px; font-family: Arial,Helvetica,sans-serif; 
                            font-size: 18px; color: #333333; font-weight: normal; text-align: left;">Thank you. </p>
                        </td>
                    </tr>
                    <tr>
                        <td width="598" height="50" align="left" style="padding: 0px;">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="598" height="1" style="padding: 0px;">
                            <img src="http://cache1.cv47.net/wpm/348/ContentUploads/UploadedContent_58249/images/status_gate_email.png" alt="" height="1" width="540" style="margin: 0px; margin-left: 29px; margin-right: 29px;"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" valign="middle" width="598" height="auto" style="padding: 0px;">
                            <p style="width: 540px; padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: 18px; font-family: Arial,Helvetica,sans-serif; 
                            font-size: 12px; color: #333333; font-weight: normal; text-align: left;">Flight Status Notifications begin seven (7) days prior to the original scheduled departure time of a flight, for any change of thirty (30) minutes or more.<br><br>At Spirit Airlines, we hold your <a href="http://l.spiritairlines.com/rts/go2.aspx?h=35324&tp=i-H8B-5c-1LI-52e7lH-2C-7NMWI-1c-G-4mYOiB-1qn0kl" style="font-weight: normal; color: #FF0020; text-decoration: none;"><b>privacy</b></a> concerns in the highest regard and we will never send spam.</p>
                            </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="3" style="padding: 0px;">
                        </td>
                    </tr>
                    


                    <tr>
                        <td align="left" width="598" height="3" style="padding: 0px;">
                        </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="3" style="padding: 0px;">
                        <p style="width: 540px; padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: 18px; font-family: Arial,Helvetica,sans-serif; 
                            font-size: 12px; color: #333333; font-weight: normal; text-align: left;">Please do not reply to this email address as it is used solely for outgoing emails. 
                            </p>                     
                        </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="3" style="padding: 0px;">
                        </td>
                    </tr>
                    <tr>
                        <td align="left" width="598" height="3" style="padding: 0px;">
                        <p style="width: 540px; padding: 0px; margin: 0px; margin-left: 29px; margin-right: 29px; line-height: 18px; font-family: Arial,Helvetica,sans-serif; 
                            font-size: 12px; color: #333333; font-weight: normal; text-align: left;">If you need help or have a question please visit the <a href="http://l.spiritairlines.com/rts/go2.aspx?h=138608&tp=i-H8B-5c-1LI-52e7lH-2C-7NMWI-1c-G-4mYOiB-1qn0kl" style="font-weight: normal; color: #FF0020; text-decoration: none;"><b>HELP section on spirit.com</b></a>.</p>                     
                        </td>
                    </tr>
                </table>
            </td>
            <td align="left" valign="top" width="101" height="861" style="padding: 0px;">
                <img src="http://namwpm.eccmp.com/wpm/348/ContentUploads/Images/Transactional/redesign/status_arrived_email_right.png" width="101" height="870" alt="Right img" style="border: 0px;
                    float: left;" />
            </td>
        </tr>
        <tr>
                <td colspan="3" align="left" valign="top" width="800" height="52">
                   <img src="http://namwpm.eccmp.com/wpm/348/ContentUploads/Images/Transactional/redesign/status_arrived_email_spirit_footer.png" alt="" width="800" height="52" />
                </td>
        </tr>
        <tr>        
            <td colspan="3" background="images/status_gate_email_footer_bg.jpg" align="left"
                valign="top" width="800" height="151" style="padding: 0px; text-align: center;background: #000000 url('images/status_gate_email_footer_bg.jpg') no-repeat;
                font-family: Arial,Helvetica,sans-serif; color: #ffffff;">
                <table cellpadding="0" cellspacing="0" align="center" style="font-family: Arial,Helvetica,sans-serif; color: #ffffff;">
                    <tr>
                       <td align="center">
                         <p style="padding: 0px; margin: 0px; margin-top: 19px; line-height: 24px; font-size: 12px;
                        font-weight: normal;">Spirit Airlines, 2800 Executive Way, Miramar, FL 33025 <br />
                        <a href="http://l.spiritairlines.com/rts/go2.aspx?h=138606&tp=i-H8B-5c-1LI-52e7lH-2C-7NMWI-1c-G-4mYOiB-1qn0kl" name="Help" style="color: #ffffff; font-size:14px; text-decoration: none; font-weight: bold;">www.spirit.com</a>
                        <br />
                        </p>
                       </td>
                    </tr>
                     <tr>
                        <td align="left" height="10" style="padding: 0px;">
                        </td>
                    </tr>
                    <tr>
                       <td align="center" height="5"  style="
                           border-bottom-color:#5f5e5e; border-bottom-style:solid; border-bottom-width:2px;
                          border-top-color:#2b2b2b; border-top-style:solid; border-top-width:2px;
                          border-left-color:#424242; border-left-style:solid; border-left-width:3px;
                          border-right-color:#484848; border-right-style:solid; border-right-width:3px;
                           border-radius:15px;">
                        <p style="color:Black; font-size:12px; margin:auto; padding-top:9px; padding-right:23px; padding-bottom:9px; padding-left:23px; background:#ffffff;
                          border-bottom-color:#5f5e5e; border-bottom-style:solid; border-bottom-width:2px;
                          border-top-color:#2b2b2b; border-top-style:solid; border-top-width:2px;
                          border-left-color:#424242; border-left-style:solid; border-left-width:2px;
                          border-right-color:#484848; border-right-style:solid; border-right-width:2px;
                          border-radius:15px;">&copy; 2016 Spirit Airlines, Inc.&nbsp; All Rights Reserved</p>          
                       </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td colspan="3" align="left" valign="bottom" width="800" height="2" style="padding: 0px;">
                <img src="http://namwpm.eccmp.com/wpm/348/ContentUploads/Images/Transactional/redesign/status_arrived_email_spirit_footer_line.png" alt="" border="0" style="float: left;" />
            </td>
        </tr>
   </table>
</body>
</html>

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console