Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Kindly help with this.
I am stuck with step 35.
Please help me.

  1. 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.

Your code so far

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


 :root{
  --color0: #fff;
  --color1: #b6e9c4;
  --color2: #91e7a9;
  --color3: #5ed27e;
  --color4: #31dc2b;
  --color5: #12970e;
  --solid-border: solid; 
  --dashed-border: dashed
}

.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: 100px;
  height: 30px;
  background-image: linear-gradient(to right, 
    var(--color0) 0%,      var(--color0) 16.67%, 
    var(--color1) 16.67%,  var(--color1) 33.33%,
    var(--color2) 33.33%,  var(--color2) 50%,
    var(--color3) 50%,      var(--color3) 66.67%,
    var(--color4) 66.67%,   var(--color4) 83.33%,
    var(--color5) 83.33%,   var(--color5) 100%
  );
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Here’s an example from MDN on how to do a linear-gradient like that: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color-stops

3

I checked out but only step 35 is not passing!!
Rest all was okay.

4

and the suggesion from @fcc4b6d10c4-b540-4e2 is on how to pass step 25. Also, you should use integeres (whole numbers)

5

But step 25 has passed!!
Every parameter passed changed the percentage values to nearest whole numbers still Step 35 is not passed.

6

sorry, I meant it is for step 35, you need to follow that example for the gradient

7

Yes it passed at last!!
Thank you @ ILM and @ fcc4b6d10c4-b540-4e2 for the help.