<div class="highPage">
<div class="skulls">
<h1>High Scores</h1>
<table>
<thead>
<tr>
<th>Rank</th>
<th>Score</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2nd</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3rd</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>4th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>5th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>6th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>7th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>8th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>9th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>10th</td>
<td>0</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
background: black;
}
.highPage {
position: relative;
color: #0b0;
font-size: 21px;
line-height: 1.5;
padding: 32px 16px;
max-width: 960px;
margin: 0 auto;
font-family: 'Press Start 2P', cursive;
}
.skulls {
position: relative;
padding: 16px 0 24px;
max-width: 600px;
margin: 0 auto;
border: 24px solid;
border-image: url(https://skullctf.com/images/skull-border.svg) 32 round;
}
.highPage h1 {
text-align: center;
}
.highPage table {
text-transform: uppercase;
width: 440px;
margin: 0 auto;
}
.highPage table th {
min-width: 140px;
text-align: left;
}
.highPage table tr:nth-child(1) td {
color: red;
}
.highPage table tr:nth-child(2) td {
color: purple;
}
.highPage table tr:nth-child(3) td {
color: salmon;
}
.highPage table tr:nth-child(4) td {
color: orange;
}
.highPage table tr:nth-child(5) td {
color: yellow;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.