Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I’m unable to pass the last step i have tried all the possible ways.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Team Availability Schedule</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Team Availability Schedule</h1>
      <p class="subtitle">Check when team members are available this week</p>
    </header>

    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
          </tr>
        </thead>
        <tbody>
          <tr class="sharp">
            <th class="time">9 AM</th>
            <td class="available-2" title="2 people available">2</td>
            <td class="available-4" title="4 people available">4</td>
            <td class="available-3" title="3 people available">3</td>
            <td class="available-5" title="5 people available">5</td>
            <td class="available-1" title="1 person available">1</td>
          </tr>
          <tr class="half">
            <th class="time">10 AM</th>
            <td class="available-1" title="1 person available">1</td>
            <td class="available-0" title="No one available">0</td>
            <td class="available-3" title="3 people available">3</td>
            <td class="available-4" title="4 people available">4</td>
            <td class="available-2" title="2 people available">2</td>
          </tr>
          <tr class="sharp">
            <th class="time">11 AM</th>
            <td class="available-5" title="5 people available">5</td>
            <td class="available-4" title="4 people available">4</td>
            <td class="available-2" title="2 people available">2</td>
            <td class="available-0" title="No one available">0</td>
            <td class="available-3" title="3 people available">3</td>
          </tr>
          <tr class="half">
            <th class="time">12 PM</th>
            <td class="available-3" title="3 people available">3</td>
            <td class="available-2" title="2 people available">2</td>
            <td class="available-1" title="1 person available">1</td>
            <td class="available-5" title="5 people available">5</td>
            <td class="available-0" title="No one available">0</td>
          </tr>
          <tr class="sharp">
            <th class="time">1 PM</th>
            <td class="available-0" title="No one available">0</td>
            <td class="available-3" title="3 people available">3</td>
            <td class="available-4" title="4 people available">4</td>
            <td class="available-2" title="2 people available">2</td>
            <td class="available-5" title="5 people available">5</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div id="legend">
      <span>Availability</span>
      <div id="legend-gradient"></div>
    </div>
  </body>
</html>


/* file: :root {
  /* Color scale for availability */
  --color0: #ff6b6b;
  --color1: #ff9966;
  --color2: #ffd93d;
  --color3: #a8e6cf;
  --color4: #66d9ff;
  --color5: #3ba55d;

  /* Border styles */
  --solid-border: 3px solid #444;
  --dashed-border: 3px dashed #444;
}

body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #f6f7fb, #eaeef3);
  color: #222;
  text-align: center;
  padding: 2rem;
}

header {
  margin-bottom: 1.5rem;
}

h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.subtitle {
  color: #666;
  font-size: 0.9rem;
}

.table-container {
  overflow-x: auto;
}

table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 90%;
  max-width: 800px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

th,
td {
  padding: 1rem;
  text-align: center;
  border-right: 1px solid #ddd;
  transition: all 0.3s ease;
}

thead th {
  background-color: #1f2937;
  color: white;
  font-weight: 600;
}

.time {
  background-color: #374151;
  color: white;
}

.available-0 {
  background-color: var(--color0);
}
.available-1 {
  background-color: var(--color1);
}
.available-2 {
  background-color: var(--color2);
}
.available-3 {
  background-color: var(--color3);
}
.available-4 {
  background-color: var(--color4);
}
.available-5 {
  background-color: var(--color5);
}


/* Alternate row border styles */
.sharp td {
  border-bottom: var(--solid-border);
}
.half td {
  border-bottom: var(--dashed-border);
}

/* Legend styling */
#legend {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

#legend span {
  font-weight: 600;
}

#legend-gradient {
  width: 220px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #444;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%,
    var(--color0) 16%,
    var(--color1) 17%,
    var(--color1) 33%,
    var(--color2) 34%,
    var(--color2) 50%,
    var(--color3) 51%,
    var(--color3) 67%,
    var(--color4) 68%,
    var(--color4) 84%,
    var(--color5) 85%,
    var(--color5) 100%
  );
}

/* Responsive design */
@media (max-width: 600px) {
  th,
  td {
    padding: 0.6rem;
    font-size: 0.8rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  #legend-gradient {
    width: 160px;
  }
}
styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

2

try Gradient with multi-position color-stops