<div class="container">
  <h1>Some of my Latest Tuts+ Tutorials</h1>
  <p>Click on each table row to view the tutorial</p>
  <table class="table-clickable">
    <thead>
      <tr>
        <th>Tutorial</th>
        <th>Last Updated</th>
        <th>Read Time</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="https://webdesign.tutsplus.com/tutorials/build-a-navigation-menu-with-an-animated-active-indicator--cms-106831?_ga=2.31003446.821080959.1685343986-134669035.1678436241" target="_blank">Build a Navigation Menu With an Animated Active Indicator (JavaScript)</a></td>
        <td><a href="https://webdesign.tutsplus.com/tutorials/build-a-navigation-menu-with-an-animated-active-indicator--cms-106831?_ga=2.31003446.821080959.1685343986-134669035.1678436241" target="_blank">May 2, 2023</a></td>
        <td><a href="https://webdesign.tutsplus.com/tutorials/build-a-navigation-menu-with-an-animated-active-indicator--cms-106831?_ga=2.31003446.821080959.1685343986-134669035.1678436241" target="_blank">4 min</a></td>
      </tr>
      <tr>
        <td><a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-mobile-menu-microinteraction-with-css--cms-106753?_ga=2.1645496.821080959.1685343986-134669035.1678436241" target="_blank">How to Build a Mobile Menu Microinteraction With CSS</a></td>
        <td><a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-mobile-menu-microinteraction-with-css--cms-106753?_ga=2.1645496.821080959.1685343986-134669035.1678436241" target="_blank">Apr 17, 2023</a></td>
        <td><a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-mobile-menu-microinteraction-with-css--cms-106753?_ga=2.1645496.821080959.1685343986-134669035.1678436241" target="_blank">6 min</a></td>
      </tr>
      <tr>
        <td><a href="https://webdesign.tutsplus.com/tutorials/smooth-scrolling-vanilla-javascript--cms-35165?_ga=2.1645496.821080959.1685343986-134669035.1678436241" target="_blank">How to Implement Smooth Scrolling With CSS & JavaScript</a></td>
        <td><a href="https://webdesign.tutsplus.com/tutorials/smooth-scrolling-vanilla-javascript--cms-35165?_ga=2.1645496.821080959.1685343986-134669035.1678436241" target="_blank">Apr 4, 2023</a></td>
        <td><a href="https://webdesign.tutsplus.com/tutorials/smooth-scrolling-vanilla-javascript--cms-35165?_ga=2.1645496.821080959.1685343986-134669035.1678436241" target="_blank">8 min</a></td>
      </tr>
      <tr>
        <td><a href="https://webdesign.tutsplus.com/tutorials/building-an-admin-dashboard-layout-with-css-and-a-touch-of-javascript--cms-33964?_ga=2.97081110.821080959.1685343986-134669035.1678436241" target="_blank">Building an Admin Dashboard Layout With CSS and a Touch of JavaScript</a></td>
        <td><a href="https://webdesign.tutsplus.com/tutorials/building-an-admin-dashboard-layout-with-css-and-a-touch-of-javascript--cms-33964?_ga=2.97081110.821080959.1685343986-134669035.1678436241" target="_blank">Mar 25, 2023</a></td>
        <td><a href="https://webdesign.tutsplus.com/tutorials/building-an-admin-dashboard-layout-with-css-and-a-touch-of-javascript--cms-33964?_ga=2.97081110.821080959.1685343986-134669035.1678436241" target="_blank">23 min</a></td>
      </tr>
    </tbody>
  </table>

</div>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET & BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --white: #fff;
  --darkblue: #1b4965;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: currentColor;
}

body {
  margin: 50px 0 150px;
}

.container {
  max-width: 1000px;
  padding: 0 15px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 1.5em;
  margin-bottom: 5px;
}

/* TABLE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.table-clickable {
  text-align: left;
  border-collapse: collapse;
  border-left: 1px solid var(--darkblue);
  border-right: 1px solid var(--darkblue);
  margin: 20px auto;
}

.table-clickable th,
.table-clickable tbody a {
  padding: 20px 10px;
}

.table-clickable th {
  color: var(--white);
  background: var(--darkblue);
}

.table-clickable tbody a {
  display: block;
  text-decoration: none;
  transition: all 0.25s ease-out;
}

.table-clickable tbody tr:not(:first-child) td a {
  border-top: 1px solid var(--darkblue);
}

.table-clickable tbody tr:last-child td a {
  border-bottom: 1px solid var(--darkblue);
}

.table-clickable tbody tr:hover a {
  color: var(--white);
  background: var(--darkblue);
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  background: var(--white);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const tableRows = document.querySelectorAll(".table-clickable tbody tr");

function setTableLinksHeights() {
  for (const tableRow of tableRows) {
    const tableRowLinks = tableRow.querySelectorAll("a");
    setEqualHeights(tableRowLinks);
  }
}

function setEqualHeights(el) {
  let counter = 0;
  for (let i = 0; i < el.length; i++) {
    el[i].style.removeProperty("height");
    const singleHeight = el[i].offsetHeight;

    if (counter < singleHeight) {
      counter = singleHeight;
    }
  }

  for (let i = 0; i < el.length; i++) {
    el[i].style.height = `${counter}px`;
  }
}

setTableLinksHeights();
window.addEventListener("resize", setTableLinksHeights);