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 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.

Quick-add: + add another resource

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.

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.

            
              <div class="container">

<h1>/windex-demo/</h1>
<table>
  <tr>
    <th valign="top">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[ICO]" width="24" height="24">
</svg>
    </th>
    <th>Name</th>
    <th>Size</th>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[PARENTDIR]" width="24" height="24" >
        <title>back</title>
        <path d="M33,6H21a3,3,0,0,0,0,6H33a9,9,0,0,1,0,18H10.2l3.9-3.9a3,3,0,0,0-4.2-4.2l-9,9a3,3,0,0,0,0,4.2l9,9a3,3,0,0,0,4.2-4.2L10.2,36H33A15,15,0,0,0,33,6Z" fill="#aaa"/>
      </svg>
    </a></td>
    <td><a href="#">Parent Directory</a></td>
    <td align="right">  - </td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[DIR]" width="24" height="24" >
        <title>folder</title>
        <path d="M47.4,13.2A3,3,0,0,0,45,12H18V10.5A4.5,4.5,0,0,0,13.5,6h-9A4.5,4.5,0,0,0,0,10.5V36.8A5.3,5.3,0,0,0,5.3,42H36.7a6,6,0,0,0,5.8-4.5l5.4-21.7A3,3,0,0,0,47.4,13.2ZM36.7,36H9.8l4.5-18H41.2Z" fill="#08f"/>
      </svg>
    </a></td>
    <td><a href="#">directory1/</a></td>
    <td align="right">  - </td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[DIR]" width="24" height="24" >
        <title>folder</title>
        <path d="M47.4,13.2A3,3,0,0,0,45,12H18V10.5A4.5,4.5,0,0,0,13.5,6h-9A4.5,4.5,0,0,0,0,10.5V36.8A5.3,5.3,0,0,0,5.3,42H36.7a6,6,0,0,0,5.8-4.5l5.4-21.7A3,3,0,0,0,47.4,13.2ZM36.7,36H9.8l4.5-18H41.2Z" fill="#08f"/>
      </svg>
    </a></td>
    <td><a href="#">directory2/</a></td>
    <td align="right">  - </td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[SND]" width="24" height="24" >
        <title>audio</title>
        <path d="M24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2ZM20,30.8a.5.5,0,0,1-.9.4L16,28H11.5A1.5,1.5,0,0,1,10,26.5v-5A1.5,1.5,0,0,1,11.5,20H16l3.1-3.1a.5.5,0,0,1,.9.4ZM24,26a2,2,0,1,1,2-2A2,2,0,0,1,24,26Zm5,4.5a1.5,1.5,0,0,1-1.1-2.6,5.5,5.5,0,0,0,0-7.8A1.5,1.5,0,0,1,30,18a8.5,8.5,0,0,1,0,12A1.5,1.5,0,0,1,29,30.5Zm5.3,3.8a1.5,1.5,0,0,1-2.1-2.1,11.5,11.5,0,0,0,0-16.3,1.5,1.5,0,0,1,2.1-2.1,14.5,14.5,0,0,1,0,20.5Z" fill="#318"/>
      </svg>
    </a></td>
    <td><a href="#">audio.mp3</a></td>
    <td align="right">6.5M</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[   ]" width="24" height="24" >
        <title>code</title>
        <path d="M39.4,9.6l-7-7A8.9,8.9,0,0,0,26,0H9A3,3,0,0,0,6,3V45a3,3,0,0,0,3,3H39a3,3,0,0,0,3-3V16A8.9,8.9,0,0,0,39.4,9.6ZM36,42H12V6h9a3,3,0,0,1,3,3v6a3,3,0,0,0,3,3h6a3,3,0,0,1,3,3ZM31,24H21a1,1,0,0,1-1-1V21a1,1,0,0,1,1-1H31a1,1,0,0,1,1,1v2A1,1,0,0,1,31,24ZM29,36H21a1,1,0,0,1-1-1V33a1,1,0,0,1,1-1h8a1,1,0,0,1,1,1v2A1,1,0,0,1,29,36Zm-3.9-6H16.9a.9.9,0,0,1-.9-.9V26.9a.9.9,0,0,1,.9-.9h8.2a.9.9,0,0,1,.9.9v2.2A.9.9,0,0,1,25.1,30ZM21,18H17a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v2A1,1,0,0,1,21,18Z" fill="#138"/>
      </svg>
    </a></td>
    <td><a href="#">code.jar</a></td>
    <td align="right"> 49K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[TXT]" width="24" height="24" >
        <title>spreadsheet</title>
        <path d="M46,6H2A2,2,0,0,0,0,8V40a2,2,0,0,0,2,2H46a2,2,0,0,0,2-2V8A2,2,0,0,0,46,6ZM14,12V22H4V12Zm0,18H4V26H14Zm4-4H44v4H18ZM4,34H14v4H4Zm14,4V34H44v4ZM44,22H18V12H44ZM11,20H7a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4A1,1,0,0,1,11,20Zm30,0H21a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v4A1,1,0,0,1,41,20Z" fill="#383"/>
      </svg>
    </a></td>
    <td><a href="#">data.csv</a></td>
    <td align="right">2.8K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[IMG]" width="24" height="24">
        <title>gif</title>
        <path d="M45,6H3A3,3,0,0,0,0,9V39a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V9A3,3,0,0,0,45,6Zm-3,6V35.9l-8.9-8.9a1.5,1.5,0,0,0-2.1,0L26,31.9,15.1,20.9a1.5,1.5,0,0,0-2.1,0L6,27.9V12ZM32,19a3,3,0,1,1-3-3A3,3,0,0,1,32,19Z" fill="#4a4"/>
      </svg>
    </a></td>
    <td><a href="#">image.gif</a></td>
    <td align="right"> 43K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[IMG]" width="24" height="24">
        <title>jpg</title>
        <path d="M45,6H3A3,3,0,0,0,0,9V39a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V9A3,3,0,0,0,45,6Zm-3,6V35.9l-8.9-8.9a1.5,1.5,0,0,0-2.1,0L26,31.9,15.1,20.9a1.5,1.5,0,0,0-2.1,0L6,27.9V12ZM32,19a3,3,0,1,1-3-3A3,3,0,0,1,32,19Z" fill="#e21"/>
      </svg>
    </a></td>
    <td><a href="#">image.jpg</a></td>
    <td align="right">489K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[IMG]" width="24" height="24">
        <title>png</title>
        <path d="M45,6H3A3,3,0,0,0,0,9V39a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V9A3,3,0,0,0,45,6Zm-3,6V35.9l-8.9-8.9a1.5,1.5,0,0,0-2.1,0L26,31.9,15.1,20.9a1.5,1.5,0,0,0-2.1,0L6,27.9V12ZM32,19a3,3,0,1,1-3-3A3,3,0,0,1,32,19Z" fill="#a2a"/>
      </svg>
    </a></td>
    <td><a href="#">image.png</a></td>
    <td align="right"> 67K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[   ]" width="24" height="24">
        <title>file</title>
        <path d="M39.4,9.6l-7-7A8.9,8.9,0,0,0,26,0H9A3,3,0,0,0,6,3V45a3,3,0,0,0,3,3H39a3,3,0,0,0,3-3V16A8.9,8.9,0,0,0,39.4,9.6ZM36,42H12V6h9a3,3,0,0,1,3,3v6a3,3,0,0,0,3,3h6a3,3,0,0,1,3,3Z" fill="#888"/>
      </svg>
    </a></td>
    <td><a href="#">LICENSE</a></td>
    <td align="right">1.1K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[   ]" width="24" height="24">
        <title>script</title>
        <path d="M45.9,4.9A10.4,10.4,0,0,0,37,0H14A10.4,10.4,0,0,0,4.7,15.1L12.1,30H5a3,3,0,0,0-2.7,1.7l-.6,1.3A10.4,10.4,0,0,0,11,48H34a10.4,10.4,0,0,0,9.3-15.1L35.9,18H43a3,3,0,0,0,2.7-1.7l.6-1.3A10.4,10.4,0,0,0,45.9,4.9Zm-31.1,35a4.4,4.4,0,0,1-7.5,0A4.3,4.3,0,0,1,6.9,36h8.2A4.3,4.3,0,0,1,14.8,39.9ZM38,35.6A4.4,4.4,0,0,1,34,42H20.4a10.3,10.3,0,0,0-.1-9.1L10,12.4A4.4,4.4,0,0,1,14,6a4.4,4.4,0,0,1,4,6.4l-.6,1.3A3,3,0,0,0,20,18h9.1ZM41.1,12H24.3a10.3,10.3,0,0,0-.9-6H37a4.4,4.4,0,0,1,4.1,6Z" fill="#d90"/>
      </svg>
    </a></td>
    <td><a href="#">script.js</a></td>
    <td align="right"> 62K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[TXT]" width="24" height="24" >
        <title>site</title>
        <path d="M39.4,9.6l-7-7A8.9,8.9,0,0,0,26,0H9A3,3,0,0,0,6,3V45a3,3,0,0,0,3,3H39a3,3,0,0,0,3-3V16A8.9,8.9,0,0,0,39.4,9.6ZM36,42H12V6h9a3,3,0,0,1,3,3v6a3,3,0,0,0,3,3h6a3,3,0,0,1,3,3ZM31,24H17a1,1,0,0,1-1-1V21a1,1,0,0,1,1-1H31a1,1,0,0,1,1,1v2A1,1,0,0,1,31,24ZM21,38H17a1,1,0,0,1-1-1V35a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v2A1,1,0,0,1,21,38Zm10,0H25a1,1,0,0,1-1-1V33a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v4A1,1,0,0,1,31,38ZM21,18H17a1,1,0,0,1-1-1V13a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4A1,1,0,0,1,21,18Zm0,14H17a1,1,0,0,1-1-1V27a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4A1,1,0,0,1,21,32Zm10-2H25a1,1,0,0,1-1-1V27a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v2A1,1,0,0,1,31,30Z" fill="#c25"/>
      </svg>
    </a></td>
    <td><a href="#">site.html</a></td>
    <td align="right">368 </td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[TXT]" width="24" height="24">
        <title>stylesheet</title>
        <path d="M43.7,32H30.7a43.6,43.6,0,0,1,0-16H43.7a3,3,0,0,0,2.9-3.8C44.5,4.5,40.7,0,36,0H12C6,0,0,8.2,0,24S6,48,12,48H36c4.7,0,8.5-4.5,10.6-12.2A3,3,0,0,0,43.7,32ZM36,6c.8,0,2.2,1.1,3.5,4H21.9a25.1,25.1,0,0,0-1.7-4ZM16.8,34.2C15.3,39.9,13,42,12,42S6,35.2,6,24,9.9,6,12,6s3.3,2.1,4.8,7.8A3,3,0,0,0,19.7,16h5a49.6,49.6,0,0,0,0,16h-5A3,3,0,0,0,16.8,34.2ZM36,42H20.2a25.1,25.1,0,0,0,1.7-4H39.5C38.2,40.9,36.8,42,36,42Z" fill="#d58"/>
      </svg>
    </a></td>
    <td><a href="#">style.css</a></td>
    <td align="right">1.3K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[TXT]" width="24" height="24">
        <title>text</title>
        <path d="M39.4,9.6l-7-7A8.9,8.9,0,0,0,26,0H9A3,3,0,0,0,6,3V45a3,3,0,0,0,3,3H39a3,3,0,0,0,3-3V16A8.9,8.9,0,0,0,39.4,9.6ZM36,42H12V6h9a3,3,0,0,1,3,3v5H18a2,2,0,0,0,0,4H33a3,3,0,0,1,3,3ZM32,22a2,2,0,0,1-2,2H18a2,2,0,0,1,0-4H30A2,2,0,0,1,32,22Zm0,12a2,2,0,0,1-2,2H18a2,2,0,0,1,0-4H30A2,2,0,0,1,32,34Zm0-6a2,2,0,0,1-2,2H18a2,2,0,0,1,0-4H30A2,2,0,0,1,32,28Z" fill="#486"/>
      </svg>
    </a></td>
    <td><a href="#">text.txt</a></td>
    <td align="right">5.9K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[IMG]" width="24" height="24">
        <title>vector</title>
        <path d="M39,48H9a3,3,0,0,1-3-3V3A3,3,0,0,1,9,0H39a3,3,0,0,1,3,3V45A3,3,0,0,1,39,48ZM12,42H36V6H12ZM30.5,22H27.9A7,7,0,1,0,20,27.9v4.6A1.5,1.5,0,0,0,21.5,34h9A1.5,1.5,0,0,0,32,32.5v-9A1.5,1.5,0,0,0,30.5,22ZM28,30H24V27.3A7,7,0,0,0,25.9,26H28Z" fill="#e62"/>
      </svg>
    </a></td>
    <td><a href="#">vector.svg</a></td>
    <td align="right">2.1K</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[VID]" width="24" height="24">
        <title>video</title>
        <path d="M45,6H3A3,3,0,0,0,0,9V39a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V9A3,3,0,0,0,45,6ZM8,37a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V35a1,1,0,0,1,1-1H7a1,1,0,0,1,1,1Zm0-8a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V27a1,1,0,0,1,1-1H7a1,1,0,0,1,1,1Zm0-8a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V19a1,1,0,0,1,1-1H7a1,1,0,0,1,1,1Zm0-8a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V11a1,1,0,0,1,1-1H7a1,1,0,0,1,1,1ZM34,29a.5.5,0,0,1-.8.4L28,25.5V28a2,2,0,0,1-2,2H18a2,2,0,0,1-2-2V20a2,2,0,0,1,2-2h8a2,2,0,0,1,2,2v2.5l5.2-3.9a.5.5,0,0,1,.8.4Zm10,8a1,1,0,0,1-1,1H41a1,1,0,0,1-1-1V35a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1Zm0-8a1,1,0,0,1-1,1H41a1,1,0,0,1-1-1V27a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1Zm0-8a1,1,0,0,1-1,1H41a1,1,0,0,1-1-1V19a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1Zm0-8a1,1,0,0,1-1,1H41a1,1,0,0,1-1-1V11a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1Z" fill="#333"/>
      </svg>
    </a></td>
    <td><a href="#">video.mov</a></td>
    <td align="right">1.7M</td>
  </tr>
  <tr>
    <td valign="top"><a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[   ]" width="24" height="24">
        <title>archive</title>
        <path d="M26,22h4v4H26a2,2,0,0,1-2-2h0A2,2,0,0,1,26,22Zm10,6h0a2,2,0,0,0-2-2H30v4h4A2,2,0,0,0,36,28ZM24,32h0a2,2,0,0,0,2,2h4V30H26A2,2,0,0,0,24,32Zm12,4h0a2,2,0,0,0-2-2H30v4h4A2,2,0,0,0,36,36ZM48,15V45a3,3,0,0,1-3,3H15a3,3,0,0,1-1.3-.3l-12-6A3,3,0,0,1,0,39V9A3,3,0,0,1,3,6H33a3,3,0,0,1,1.3.3l12,6A3,3,0,0,1,48,15Zm-6,3H34a2,2,0,0,1,0,4H30V18H18V42h8a2,2,0,0,1,0-4h4v4H42Z" fill="#850"/>
      </svg>
    </a></td>
    <td><a href="#">zip.zip</a></td>
    <td align="right">401K</td>
  </tr>
</table>
</div>

            
          
!
            
              /* Windex directory listing
------------------------- */

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #333;
  background: #EEE;
  padding-bottom: 120px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

a {
  text-decoration: none;
  color: #15E;
}
a:visited { color: #818;}
a:hover { color: #038;}

/* table */
table {
  width: 100%;
  border-collapse: collapse;
}

/* hide header row */
tr:first-child { display: none; }

/* icon */
td:nth-child(1) {
  width: 24px;
  vertical-align: middle;
}

td:nth-child(1) a { display: block; }

/* file name */
td:nth-child(2) {
  width: 100%;
}

td:nth-child(2) a {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  position: relative;
}

/* pointer for folders */
td:nth-child(2) a[href$="/"]:after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  position: absolute;
  right: 15px;
  top: 11px;
  transform: rotate(45deg);
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: #08F;
}

/* Parent directory */
/* select href="/folder/" but not "folder/" */
td:nth-child(2) a[href^="/"][href$="/"]:after {
  border-width:  0 0 3px 3px;
  border-color: #AAA;
  right: 11px
}

td:nth-child(2) a:hover {
  background: #CDF;
}

/* size */
td:nth-child(3) {
  color: #888;
  font-size: 0.9rem;
}

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

Console