Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Build an Availability Table 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.

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/140.0.0.0 Safari/537.36 Edg/140.0.0.0

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

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

PS: the example to follow is this Gradient with multi-position color-stops

3

Here is the code

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

  <span>Availability</span>

</div>

#legend-gradient {

background-image: linear-gradient(90deg, 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%);

width: 100px;

height: 20px;

}

4

follow this example, also you need to use whole numbers