<!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 ᰄ 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">—Creeps—</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’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>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.