Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I’m working on the “Build an Availability Table” project and I’m stuck on test #35.
Test Failure: I keep getting this failure, no matter what I try:

“35. 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.”

My Code: This is my current CSS for the #legend-gradient:

CSS

#legend-gradient {
width: 100%;
max-width: 300px;
height

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>Availability Table</title>

  <link rel="stylesheet" href="styles.css">

</head>



<body>

<table>

  <thead>

  <tr>

    <th></th>

    <th>Monday</th>

    <th>Tuesday</th>

    <th>Wednesday</th>

  </tr>

  </thead>

  <tbody>

  <tr class="sharp">

   

    <th class="time">9am</th>

    <td class="available-0"></td>

    <td class="available-1"></td>

     <td class="available-4"></td>

  </tr>



  <tr class="half">

    <th class="time">10am</th>

    <td class="available-2"></td>

     <td class="available-0"></td>

    <td class="available-3"></td>

  </tr>



  <tr class="sharp">

    <th class="time">11am</th>

    <td class="available-4"></td>

    <td class="available-5"></td>

    <td class="available-0"></td>

  </tr>



  <tr class="half">

    <th class="time">12am</th>

    <td class="available-1"></td>

    <td class="available-3"></td>

     <td class="available-2"></td>

  </tr>

  



   

  </tbody>

  </table>

  <div>

    <div id="legend">

  <span id="text">Availability</span>

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

    </div>



     

     </div>

</body>



</html>

/* file: styles.css */
*{

box-sizing:border-box;}



body{height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

background-color:rgb(148, 230, 174)



}

table{width:80vw;

height:50vh;



}





:root{

 --color0:#e1e8fc;

 --color1:#c6dbef;

 --color2:#9ecae1;

 --color3:#6baed6;

 --color4:#3182bd;

 --color5:#08519c;

 --solid-border:3px solid #777;

 --dashed-border:3px dashed #777;}



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



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



#legend-gradient {
    width: 100%;
    max-width: 300px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #cbd5e0; 
    
    background-image: linear-gradient(to right,
        var(--color0) 0%,   var(--color0) 16%,
        var(--color1) 16%,  var(--color1) 32%,
        var(--color2) 32%,  var(--color2) 48%,
        var(--color3) 48%,  var(--color3) 64%,
        var(--color4) 64%,  var(--color4) 80%,
        var(--color5) 80%,  var(--color5) 100%
    );
}
#text{display:flex;

justify-content:center}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Please refer to this reference for an example of how to do that:

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color-stops