Build an Availability Table

1

This text will be blurred

:root {
justify-content: center;
text-align: center;
–color0: hsl(210, 80%, 70%);
–color1: hsl(210, 90%, 80%);
–color2: hsl(210, 95%, 85%);
–color3: hsl(210, 80%, 90%);
–color4: hsl(210, 80%, 95%);
–color5: hsl(210, 80%, 100%);
–solid-border: 4px solid brown;
–dashed-border: 4px solid brown;
background-color: gray;
color: #42fac1;
}
.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 {
width: 100vw;
height: 100vh;
position: relative;
background-image: hsl(90deg, #ff0000, #000ff0, #00ff00);

}
#legend-gradient {
background-image: linear-gradient(to right,

var(–color1)red 50%,
var(–color1)orange 50%,
var(–color2)yellow 40%,
var(–color2)green 40%,
var(–color3)blue 20%,
var(–color3)lightblue 20%,
var(–color4)pink 20%
var(–color4)brown 20%
var(–color5)gold 20%
var(–color3)darkred 20%);
width: 100%;
height: 100vh;
display: flex;
align-items: center;
}

2

this is not valid syntax for a linear gradient, please review linear gradients

for next time you want help please use the help wanted button

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

3

Thank you, sorry about that. :wink: