Lab Project - Availability table

HTML-CSS
1

In this project, test 35 (which says that I 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) never approves me.

The problem supposedly is in the root or in the linear-gradientblock.
Here are those code blocks:
:root{

–color0: #f44336;

–color1: #ff9800;

–color2: #ffeb3b;

–color3: #8bc34a;

–color4: #4caf50;

–color5: #2e7d32;

–solid-border: 2px solid #333;

–dashed-border: 2px dashed #333;

}

#legend-gradient {

height: 20px;

width: 200px;

border: 1px solid #333;

background-image: linear-gradient(to right,

var(–color0) 0%, var(–color0) 16.66%,

var(–color1) 16.66%, var(–color1) 33.33%,

var(–color2) 33.33%, var(–color2) 50%,

var(–color3) 50%, var(–color3) 66.66%,

var(–color4) 66.66%, var(–color4) 83.33%,

var(–color5) 83.33%, var(–color5) 100%

);

}

Someone please help me :slight_smile:

2

Please refer to this reference for an example of how that linear gradient should be done:

Note that the percentages should be integers.

3

specifically this example here: Gradient with multi-position color-stops