My ideal day's schedule

index.html

<main>
  <div class="title-block">
  <h1>My ideal day's schedule</h1>
  <h2>(On holidays)</h2>
    </div>
  <table>
    <thead>
      <tr>
        <th>Time</th>
        <th>Activity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>7:00</td>
        <td>Wake up! ⏰</td>
      </tr>
      <tr>
        <td>7:10 - 8:00</td>
        <td>Green tea 🍵 + some inspiring book 📚</td>
      </tr>
      <tr>
        <td>8:00 - 9:00</td>
        <td>Yoga time 🕉️</td>
      </tr>
      <tr>
        <td>9:00 - 9:30</td>
        <td>Family breakfast 🍞</td>
      </tr>
      <tr>
        <td>9:30 - 12:00</td>
        <td>Enjoy the beach 🏖️</td>
      </tr>
      <tr>
        <td>12:00 - 13:00</td>
        <td>Board games at home 🎲</td>
      </tr>
      <tr>
        <td>13:00 - 15:00</td>
        <td>Cook & eat lunch 🧑‍🍳</td>
      </tr>
      <tr>
        <td>15:00 - 15:30</td>
        <td>Siesta 😴</td>
      </tr>
      <tr>
        <td>15:30 - 17:00</td>
        <td>Watch a movie 📺</td>
      </tr>
      <tr>
        <td>17:00 - 20:00</td>
        <td>Back to the beach ⛱️</td>
      </tr>
      <tr>
        <td>20:00 - 21:30</td>
        <td>Dinner 🥗 + ice cream 🍦</td>
      </tr>
      <tr>
        <td>21:30 - 22:00</td>
        <td>Kids to bed 🧸 + bed-time story 📖</td>
      </tr>
      <tr>
        <td>22:00 - 23:30</td>
        <td>Time with my spouse 👩‍❤️‍👨</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Iñaki Calvo - 2020</td>
      </tr>
    </tfoot>
  </table>
</main>

my-ideal-day-s-schedule.markdown

My ideal day's schedule

A Pen by Iñaki Calvo on CodePen.

License.

style.css

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:wght@700&display=swap");

body {
  background-image: url("https://source.unsplash.com/NLUkAA-nDdE/");
  background-size: cover;
  background-position: top;
  background-repeat: none;
  margin: 0;
}

h1 {
  text-align: center;
  margin: 2em auto 0.3em;
  color: whitesmoke;
  font-size: 3rem;
}

h2 {
  text-align: center;
  margin: 0 auto 1rem;
  color: whitesmoke;
}

tbody td {
  border-bottom: 2px solid black;
  padding: 5px;
  font-weight: 400;
}

tbody td:nth-child(even) {
  background-color: seashell;
}

tr:nth-child(odd) td:nth-child(even) {
  background-color: lightblue;
}

tbody td:nth-child(odd) {
  background-color: whitesmoke;
}

tfoot td {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.7);
}
table {
  margin: 6em auto;
  background-color: white;
  border-radius: 5px;
  max-width: 600px;
  min-width: 360px;
  -webkit-box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
  box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
  border-spacing: 10px;
}

th {
  text-transform: uppercase;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  text-align: left;
}

td {
  font-family: "Open Sans", sans-serif;
}

tr {
  margin-bottom: 55px;
}