Responsive Relationship Tracker

Relationship Tracker

Name	Relationship	Favorability	Notes
John Doe	Friend	75%	John has been a supportive friend since college.

Code:

[style]#pride {--accent1: #201C1E; --accent2: #30282D; --accent3: #365050; --accent4: #F1D5E7; --accent5: #FFFFFE;}#pride {font-family: "Roboto", sans-serif; margin: 0; padding: 20px; display: flex; justify-content: center;}#pride .container {max-width: 800px; width: 100%;}#pride h1 {text-align: center; color: var(--accent3); margin-bottom: -30px;}#pride table {width: 100%; border-collapse: collapse; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: var(--accent4);}#pride thead th {background-color: var(--accent3); color: var(--accent4); padding: 10px; text-align: centre; font-weight: bold;}#pride tbody td {padding: 10px; border-bottom: 1px solid var(--accent4); color: var(--accent3);}#pride tbody tr:hover {background-color: var(--accent5);}#pride .progress-bar {background-color: var(--accent5); border-radius: 3px; overflow: hidden; width: 100%; height: 10px; display: inline-block; vertical-align: middle; margin-right: 8px;}#pride .progress {background-color: var(--accent3); height: 100%; transition: width 0.3s ease;}#pride .percentage {font-size: 0.9em; color: var(--accent3); vertical-align: middle;}#pride tbody td:last-child {font-size: 0.9em; color: #555;}
[/style]

  <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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

<div id="pride">
  <div class="container">
    <h1>Relationship Tracker</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Relationship</th>
          <th>Favorability</th>
          <th>Notes</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td>John Doe</td>
          <td>Friend</td>
          <td>
            <div class="progress-bar">
              <div class="progress" style="width: 75%;"></div>
            </div>
            <span class="percentage">75%</span>
          </td>
          <td>John has been a supportive friend since college.</td>
        </tr>


      </tbody>
    </table>
    </div></div>