Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I can’t figure out the last step. What am i doin wrong>

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Availability Table</title>
    <link href="./styles.css">
</head>

<body>
    <table>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th> 
            <th>Wednesday</th>
            <th>Thursday</th>
        </tr>
        <tr class="sharp">
            <th class="time">6:00am</th>
            <td class="available-0"></td>
            <td class="available-5"></td>
            <td class="available-1"></td>
        </tr>
        <tr class="sharp">
            <th class="time">6:00am</th>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
        </tr>
        <tr class="half">
            <th class="time">7:00am</th>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
        </tr>
        <tr class="half">
            <th class="time">7:00am</th>
            <td class="available-3"></td>
            <td class="available-5"></td>
            <td class="available-5"></td> 
        </tr>
    </table>
    <div id="legend">
        <span>Availability</span>
            <div id="legend-gradient"></div>
    </div>
</body>

</html>

/* file: styles.css */
:root{
  --color0: rgb(200,200,30);
  
  --color1: rgb(10,120,240);
  
  --color2: rgb(linear-gradient(rgb(120,45,200))),rgb(223,104,112),rgb(222,111,001);
  
  --color3: linear-gradient(red,white,blue);
  
  --color4: linear-gradient(olive,brown,purple);
    
    --color5: linear-gradient(to right,silver 33%,violet 33%, crimson 34%);

 --solid-border: 2px solid #000;
 --dashed-border: 2px dashed #000;   

}
.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{
  background-image: linear-gradient(--color1 50%,--color5 50%); 
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Challenge Information:

Build an Availability Table - Build an Availability Table

2

How do you use a custom variable in CSS? Compare this to some of the other places you are using custom variables.

4

In addition to the advice from @bbsmooth you need to have 2 color steps for each colour value expressed as percentages to make the transition from 0% to 100% between all 5 colors.

Please only post 1 topic for the same step. I’ll delete your other one.