Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pixel </title>
  </head>
  <body>    
    <center>
    <table border="0" cellspacing="0" cellpadding="5">
     <tr bgcolor="#ff0000">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#ff0000">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="974807"</td>
       <td bgcolor="974807"></td>
       <td bgcolor="974807"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="000000"></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="974807"></td>
       <td></td>
       <td bgcolor="974807"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="000000"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="974807"></td>
       <td></td>
       <td bgcolor="974807"></td>
       <td bgcolor="974807"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="000000"></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
           <tr bgcolor="fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="974807"></td>
       <td bgcolor="974807"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="000000"></td>
       <td bgcolor="000000"></td>
       <td bgcolor="000000"></td>
       <td bgcolor="000000"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#ff0000">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#ff0000">

       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#ff0000">

       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td bgcolor="0070c0"></td>
       <td bgcolor="0070c0"></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="0070c0">

       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="ff0000"></td>
       <td></td>
       <td bgcolor="ffff00"></td>
       <td></td>
       <td></td>
       <td bgcolor="ffff00"></td>
       <td></td>
       <td bgcolor="ff0000"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fffff"></td>
     </tr>
           <tr bgcolor="0070c0">

       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="0070c0">

       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="0070c0">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="974807">

       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="974807">

       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
     </tr>
    </table>
      <table cellpadding="20"> 
        <tr> <td></td></tr></table>
  
    <table border="0" cellspacing="0" cellpadding="5">
     <tr bgcolor="21b24d">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="21b24d">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="462401"</td>
       <td bgcolor="462401"></td>
       <td bgcolor="462401"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="000000"></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="462401"></td>
       <td></td>
       <td bgcolor="462401"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="000000"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="462401"></td>
       <td></td>
       <td bgcolor="462401"></td>
       <td bgcolor="462401"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="000000"></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
           <tr bgcolor="fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="462401"></td>
       <td bgcolor="462401"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="000000"></td>
       <td bgcolor="000000"></td>
       <td bgcolor="000000"></td>
       <td bgcolor="000000"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="fac090">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="21b24d">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="#21b24d">

       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="21b24d">

       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="0070c0"></td>
       <td bgcolor="0070c0"></td>
       <td bgcolor="0070c0"></td>
       <td bgcolor="0070c0"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="0070c0">

       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="21b24d"></td>
       <td></td>
       <td bgcolor="ffff00"></td>
       <td></td>
       <td></td>
       <td bgcolor="ffff00"></td>
       <td></td>
       <td bgcolor="21b24d"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fffff"></td>
     </tr>
           <tr bgcolor="0070c0">

       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="0070c0">

       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="fac090"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="0070c0">

       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="462401">

       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
     </tr>
           <tr bgcolor="462401">

       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td bgcolor="ffffff"></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td bgcolor="ffffff"></td>
     </tr>
    </table>
    </center>
  </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console