Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I have been trying to pass step 35 on the Build an Availability Table and I can’t seem to figure out what I am doing wrong. Please help!

Here is my code so far:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Availability Table</title>
    <link rel="stylesheet" href="styles.css"/>
</head>

<body>
  <table>
      <tbody>
        
        <tr class=" dow">
<th>Sunday</th>
             <th>Monday</th>
         <th>Tuesday</th>
              <th>Wednesday</th>
              <th>Thursday</th>
              <th>Friday</th>
              <th>Saturday</th>
          </tr>
          <tr class="half">
              <th class="time">9am</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <tr class="sharp">
              <th class="time">10am</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <tr class="half">
              <th class="time">11am</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <tr class="sharp">
              <th class="time">12pm</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <tr class="half">
              <th class="time">1pm</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <tr class="sharp">
              <th class="time">2pm</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <tr class="half">
              <th class="time">3pm</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <tr class="sharp">
              <th class="time">4pm</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <tr class="half">
              <th class="time">5pm</th>
              <td class="available-0 sun"></td>
              <td class="available-2 mon"></td>
              <td class="available-1 tue"></td>
              <td class="available-3 wed"></td>
              <td class="available-2 thu"></td>
              <td class="available-5 fri"></td>
              <td class="available-4 sat"></td>
          </tr>
          <div id="legend"><span>Availability</span>
            <div id="legend-gradient"></div>
      </tbody>
  </table>
</body>

</html>

:root {
  --color0: #3366f8;
  --color1: #3399cc;
  --color2: #3399aa;
  --color3: #339990;
  --color4: #339965;
  --color5: #339935;
  --color6: #339905;
  --solid-border: 2px solid black;
  --dashed-border: 2px dashed black;
}


.time {
  display: flex;
  align-items: flex-start;
  justify-content: left;
  margin: 0 auto;
  padding: 5px;
}


.available-0 {
  background-color: var(--color0);
  height: 13px;  width: 40px;
  position: absolute;
}

.available-1 {
  background-color: var(--color1);
  width: 40px;
  height: 13px;
}

.available-2 {
  background-color: var(--color2);
  width: 40px;
  height: 13px;
}

.available-3 {
  background-color: var(--color3);
  width: 40px;
  height: 13px;
}

.available-4 {
  background-color: var(--color4);
  width: 40px;
  height: 13px;
}

.available-5 {
  background-color: var(--color5);
  width: 40px;
  height: 13px;
}

.sharp td {
  border-bottom: var(--solid-border);
}

.half td {
  border-bottom: var(--dashed-border);
}

#legend-gradient {
  border: var(--dashed-border);
  background-image: linear-gradient(
var(--color0)0% 20%, var(--color5)20% 40%,
var(--color1)40% 60%,
var(--color4)60% 80%,
var(--color2)80% 90%,
var(--color3)90% 100%
);
}

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Hi @iloveyoumikey.4ever

For the gradient colour stops, add a single space between the variable and the first colour stop.

Happy coding

3

Thank you!! That was the problem!

1 Like