Build an Availability Table

HTML-CSS
1

I cannot get this to pass the last two steps. I have tried everything i can think of. I read a bunch of different forums talking about the same problem, but all of their solutions are not working for me. The exact issue is that it’s saying that the #legend-gradient needs a background image set. It is. 35. Also, it says this You should use two color-stops (expressed in percentage) to make the transition from one color to the following color a hard line for your #legend-gradient. Remember to use your --color# variables. I have it set and it doesnt work.

<!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>
        <thead>
          <th></th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
        </thead>
        <tbody>
        <tr class="sharp first">
            <th class="time">9am</th>
            <td class="available-2"></td>
            <td class="available-0"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
        </tr>
        <tr class="half">
            <th class="time">10am</th>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-5"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
        </tr>
        <tr class="sharp">
            <th class="time">11am</th>
            <td class="available-5"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
        </tr>
        <tr class="half">
            <th class="time">12am</th>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-1"></td>
        </tr>
        <tr class="sharp">
            <th class="time">1pm</th>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-0"></td>
        </tr>
        <tr class="half">
            <th class="time">2pm</th>
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
        </tr>
        <tr class="sharp">
            <th class="time">3pm</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-0"></td>
        </tr>
        <tr class="half">
            <th class="time">4pm</th>
            <td class="available-2"></td>
            <td class="available-0"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
        </tr>
        <tr class="sharp">
            <th class="time">5pm</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
        </tr>
        </tbody>
        <div id="legend">
            <span>Availability</span>
            <div class="legend-gradient-container">
                0
            <div id="legend-gradient"></div>
            5
            </div>

        </div>
    </table>

</body>

</html>

:root {
  --color0: white;
  --color1: #8A9B6D;
  --color2: #D1A3A3;
  --color3: #F2E3BB;
  --color4: #A8BBA3;
  --color5: #A3C1AD;
  --solid-border: 1px solid;
  --dashed-border: 1px dashed;
}

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column-reverse;
}

table {
  width: 450px;
  overflow: wrap;
  border-collapse: collapse;
}

td {
  width: 20%;
  margin: 0;
}

#legend {
  margin: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#legend-gradient {
  width: 100px;
  height: 20px;
  border: 1px solid;
  display: flex;
  justify-content: center;
}

.legend-gradient-container {
  display: flex;
  justify-content: space-between;
  width: 150px;
}

.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);
}

.sharp td {
  border-bottom: var(--solid-border);
  border-right: 1px solid;
  border-left: 1px solid; 
}

.half td {
  border-bottom: var(--dashed-border);
  border-top: 1px solid;
  border-right: 1px solid;
  border-left: 1px solid; 
}

.first td {
  border-top: 1px solid;
}

#legend-gradient {
  background: linear-gradient(
    90deg,
    var(--color0) 0% 16%,
    var(--color1) 16% 32%,
    var(--color2) 32% 48%,
    var(--color3) 48.6% 65%,
    var(--color4) 65% 81%,
    var(--color5) 81% 100%
  );
}
2

this is not background-image

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.