A fun little thing I made you can add to your website

[Rubbereon]

Pure HTML with inline CSS styling table of every month of the year, color-coded by season. I also treat the months of February, May, August and November as the "transitional" months of the 4 seasons, so they have a gradient instead. Genuinely August, despite being still apart of Summer technically until September really just feels like Fall has already arrived, it's getting fairly cold again which I'll happily welcome after this hell of a Summer.

Here's the code:

Code

<table style="height: 60px; float: right;" border="1" width="485"><caption>Months &amp; Seasons</caption>
<tbody>
<tr>
<td style="width: 33.0833px; background-color: #7777ff;">Jan</td>
<td style="width: 33.8333px; background-image: linear-gradient(to right, #7777ff, #00ff00);">Feb</td>
<td style="width: 34.7833px; background-color: #00ff00;">Mar</td>
<td style="width: 33.5px; background-color: #00ff00;">Apr</td>
<td style="width: 36.25px; background-image: linear-gradient(to right, #00ff00, #ffff00);">May</td>
<td style="width: 33.4px; background-color: #ffff00;">Jun</td>
<td style="width: 30.0667px; background-color: #ffff00;">Jul</td>
<td style="width: 35.4px; background-image: linear-gradient(to right, #ffff00, #ff7700);">Aug</td>
<td style="width: 35.0833px; background-color: #ff7700;">Sep</td>
<td style="width: 33.2167px; background-color: #ff7700;">Oct</td>
<td style="width: 35.4333px; background-image: linear-gradient(to right, #ff7700, #7777ff);">Nov</td>
<td style="width: 34.95px; background-color: #7777ff;">Dec</td>
</tr>
</tbody>
</table>
<progress style="float:right" value="32" max="365"> 32% </progress>

I suck at javascript, so I have yet to figure a way to make the progress bar follow along the months, so you'll quickly notice it's not finalized and kinda doesn't follow the structure correctly.

If you wanna take a peek at what it looks like you can paste the code into https://html.onlineviewer.net/, https://html5-editor.net/ or https://jsfiddle.net/