Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

#legend-gradient {
width: 75%;
height: 16px;
border: 1px solid #bbb;
border-radius: 6px;
background-image: linear-gradient(
to right,
var(–color0) 0%, var(–color0) 16%,
var(–color1) 16%, var(–color1) 33%,
var(–color2) 33%, var(–color2) 49%,
var(–color3) 49%, var(–color3) 66%,
var(–color4) 66%, var(–color4) 83%,
var(–color5) 83%, var(–color5) 100%
);
}

i do thisn but my last test is not vom,pleting it show a bug every time

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Availability Table</title>
<style>
  :root{
    /* colors */
    --color0: #f2f2f2;
    --color1: #d6e9f8;
    --color2: #bfe3d0;
    --color3: #ffe8b3;
    --color4: #ffd0d0;
    --color5: #e0d6ff;
    /* borders */
    --solid-border: 2px solid #333;
    --dashed-border: 2px dashed #666;
  }

  table{ border-collapse: collapse; width: 100%; max-width: 700px; margin: 1rem auto; }
  th, td{ padding: .6rem .8rem; text-align: center; border: 1px solid #ccc; }
  thead th{ background: #222; color: #fff; }
  th.time{ width: 8rem; text-align: left; }

  /* availability colors */
  .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 / half borders */
  .sharp td{ border-bottom: var(--solid-border); }
  .half td{ border-bottom: var(--dashed-border); }

#legend-gradient {
  width: 75%;
  height: 16px;
  border: 1px solid #bbb;
  border-radius: 6px;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%,   var(--color0) 16%,
    var(--color1) 16%,  var(--color1) 33%,
    var(--color2) 33%,  var(--color2) 49%,
    var(--color3) 49%,  var(--color3) 66%,
    var(--color4) 66%,  var(--color4) 83%,
    var(--color5) 83%,  var(--color5) 100%
  );
}

</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Time</th>
      <th>Room A</th>
      <th>Room B</th>
      <th>Room C</th>
    </tr>
  </thead>
  <tbody>
    <tr class="sharp">
      <th class="time">09:00</th>
      <td class="available-0"></td>
      <td class="available-1"></td>
      <td class="available-2"></td>
    </tr>
    <tr class="half">
      <th class="time">09:30</th>
      <td class="available-3"></td>
      <td class="available-4"></td>
      <td class="available-5"></td>
    </tr>
    <tr class="sharp">
      <th class="time">10:00</th>
      <td class="available-2"></td>
      <td class="available-1"></td>
      <td class="available-0"></td>
    </tr>
    <tr class="half">
      <th class="time">10:30</th>
      <td class="available-5"></td>
      <td class="available-4"></td>
      <td class="available-3"></td>
    </tr>
    <tr class="sharp">
      <th class="time">11:00</th>
      <td class="available-1"></td>
      <td class="available-2"></td>
      <td class="available-3"></td>
    </tr>
  </tbody>
</table>

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

</body>
</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/139.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table
https://www.freecodecamp.org/learn/full-stack-developer/lab-availability-table/build-an-availability-table

Build an Availability Table - Build an Availability Table
2

this is an example of the requested syntax: Gradient with multi-position color-stops
You need to use that specific syntax, not the single color stop