Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

#legend-gradient {
width: 100%;
height: 20px;
background-image: linear-gradient(
to right,
var(–color0) 0%, var(–color0) 16.666%,
var(–color1) 16.666%, var(–color1) 33.333%,
var(–color2) 33.333%, var(–color2) 50%,
var(–color3) 50%, var(–color3) 66.666%,
var(–color4) 66.666%, var(–color4) 83.333%,
var(–color5) 83.333%, var(–color5) 100%
);
}

This code is not passing the last test. What am I doing wrong?

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/134.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

2

you need to use the syntax with two percentage values after each color

see last example in the syntax: linear-gradient() - CSS: Cascading Style Sheets | MDN

3

Hi, Is this the right way because it is still not passing

#legend-gradient {
width: 100%;
height: 20px;
background-image: linear-gradient(
to right,
var(–color0) 16.666%,
var(–color1) 16.666% 33.333%,
var(–color2) 33.333% 50%,
var(–color3) 50% 66.666%,
var(–color4) 66.666% 83.333%,
var(–color5) 83.333%
);
}

4

The one below also does not pass.

#legend-gradient {
width: 100%;
height: 20px;
background-image: linear-gradient(
to right,
var(–color0) 0% 16.666%,
var(–color1) 16.666% 33.333%,
var(–color2) 33.333% 50%,
var(–color3) 50% 66.666%,
var(–color4) 66.666% 83.333%,
var(–color5) 83.333% 100%
);
}

5

Never mind, I was able to solve it. I just needed to stop using floats and use integers. Thank you for your help