<!DOCTYPE html>
<HTML LANG="en">

<HEAD>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

  <title>99_PUBLIC FILE TAB &#7172; ONE TAB ONLY!</title>

  <style>
    body {
      max-width: 950px;
      margin: 2rem auto;
      margin-bottom: 3.75rem;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      color: black;
    }

    .ctr {
      text-align: center
    }

    .title {
      text-align: center;
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
      font-family: 'special elite', serif;
      font-weight: 400;
      font-size: 2.25rem;
      line-height: 2.5rem;
    }

    .hilitea {
      position: relative;
      text-align: center;
      border-radius: 20px 20px 0px 0px;
      color: white;
      padding: 1rem 1rem 0;
      font-size: 2.5rem;
      line-height: 2.63rem;
      font-weight: bold;
    }

    .tab {
      border-bottom: 10px solid #000;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      display: flex;
      max-width: 500px;
      margin: auto;
      overflow:hidden;
    }

    .tab:after,
    .tab:before {
      content: "";
      flex: 1;
      box-shadow: 0 34px #000;
      /* this is necessary or a gap will show */
    }
    .tab:after {
      border-radius: 0 0 0 80px;
      margin-left:-8px;
    }
    .tab:before {
      border-radius: 0 0 80px 0;
      margin-right:-8px
    }

    .hilitea:before {
      content: "";
      pointer-events: none;
      position: absolute;
      inset: 0 0 0 0;
      z-index: -1;
      background: #000;
      transform: perspective(100px) rotateX(36deg) translateY(5px);
      border-radius: 20px 20px 0 0;
    }

    .tally {
      font-family: 'calistoga', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.38rem;
      color: crimson;
    }

    .notes {
      text-align: justify;
      color: black;
      margin: 2rem 2.5rem 1.25rem 2.5rem;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 400;
    }

    .table1 {
      width: 100%;
      text-align: left;
      vertical-align: middle;
      border-top: .63rem groove #00ffff;
      /* cyan */
      border-right: .63rem groove #00ffff;
      border-bottom: none;
      border-left: .63rem groove #00ffff;
      border-collapse: collapse;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      color: black;
    }

    td {
      padding-top: .6rem;
      padding-right: .6rem;
      padding-bottom: .2rem;
      padding-left: .7rem;
    }

    .table1 tbody tr:nth-child(odd) {
      background-color: #ffffcc;
      /* pastel yellow */
      border-bottom: .19rem solid black;
    }

    .table1 tbody tr:nth-child(even) {
      background-color: white;
      border-bottom: .19rem solid black;
    }

    /* FILLING OUT THE CELL BORDERS */
    .table1 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid black;
      text-align: left;
    }

    .table1 tbody tr td:nth-of-type(2) {
      border-right: .19rem solid black;
      text-align: left;
    }

    .table2 {
      width: 100%;
      border: .63rem groove #00ffff;
      /* cyan */
      border-collapse: collapse;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      color: black;
    }

    /* DEFINING THE HEADER */
    .table2 th {
      border: .38rem solid #00ffff;
      background-color: black;
      font-family: 'roboto slab', serif;
      font-size: 2rem;
      line-height: 2.13rem;
      color: white;
      font-weight: bold;
      padding: .94rem;
    }

    /* APPLYING THE STRIPES */
    .table2 tbody tr:nth-child(odd) {
      background-color: #ffffcc;
      /* pastel yellow */
      border-bottom: .19rem solid black;
    }

    .table2 tbody tr:nth-child(even) {
      background-color: white;
      border-bottom: .19rem solid black;
    }

    /* FILLING OUT THE CELL BORDERS */
    .table2 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid black;
      text-align: center;
    }

    .table2 tbody tr td:nth-of-type(2) {
      border-right: .19rem solid black;
      text-align: left;
    }
  </style>
</head>

<body>
  <div class="title">
    To-morrow, and to-morrow, and to-morrow,
  </div>

  <div class="tab"><span class="hilitea">&mdash;Creeps&mdash;</span></div>

  <table class="table1">
    <tr>
      <td colspan="3" style="background: #dddddd">
        <span class="tally">in this</span> petty pace<br>
        <span class="tally">from</span> day to day
      </td>
    </tr>
  </table>

  <table class="table2">
    <thead>
      <tr>
        <th style="color: #00ffff; text-align: center; border-collapse: collapse;">
          to
        </th>
        <th style="color: #00ffff; text-align: center; border-collapse: collapse;">
          the last syllable of recorded
        </th>
        <th width="100px" style="color: #fffff5; text-align: center;">
          time</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>And</td>
        <td>all our <i>yesterdays have lighted</i></td>
        <td class="cell1">fools</td>
      </tr>
      <tr>
        <td>the</td>
        <td><span class="blu">way to</span><br>
          dusty death.
        </td>
        <td>Out! Out!<br>
          brief<br>
          candle
        </td>
      </tr>
  </table>

  <div class="notes">
    Life&rsquo;s but a walking shadow,
    <br>
    <br>
    a poor player that struts and frets his hour upon the stage
    <br>
    <br>
    and then is heard no more.
    <br>
    <br>
  </div>

</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.