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 lin

HTML-CSS
1

Hi, I’m trying to solve this exercise, but even after removing any additional structure, I’m still getting the message that I need to use linear-gradient to style my element with the id “#legend-gradient”.

Here’s my HTML and CSS code.

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 rel="stylesheet" href="styles.css" >
</head>

<body>
    <table>
        
      <tr>
        <th></th>
        <th class="time">Monday</th>
        <th class="time">Tusday</th>
        <th class="time">Wensday</th>
        <th class="time">Thuesday</th>
        <th class="time">Friday</th>
      </tr>

      <tr class="sharp">
        <th class="time">1 PM</th>
        <td class="available-0"></td>
        <td class="available-0"></td>
        <td class="available-0"></td>
        <td class="available-0"></td>
        <td class="available-0"></td>
      </tr>
      <tr class="half">
        <th class="time">2 PM</th>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
      </tr>
      <tr class="sharp">
        <th class="time">3 PM</th>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
      </tr>
      <tr class="half">
        <th class="time">4 PM</th>
        <td class="available-3"></td>
        <td class="available-3"></td>
        <td class="available-3"></td>
        <td class="available-3"></td>
        <td class="available-3"></td>
      </tr>
      <tr class="sharp">
        <th class="time">5 PM</th>
        <td class="available-4"></td>
        <td class="available-4"></td>
        <td class="available-4"></td>
        <td class="available-4"></td>
        <td class="available-4"></td>
      </tr>
      <tr class="half">
        <th class="time">6 PM</th>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
      </tr>

    </table>
    <div id="legend">
      <div id="legend-gradient"></div>
      <span>Availability</span>
    </div>

    
</body>

</html>

CSS

:root {
--color0: #22ff22;
--color1: #22aa22;
--color2: #228822;
--color3: #226622;
--color4: #224422;
--color5: #222222;

--solid-border: 1px solid black;
--dashed-border: 1px dashed black;
}

.sharp {
border-bottom: var(--solid-border);
}
.sharp td {
border-bottom: var(--solid-border);
}

.half {
border-bottom: var(--dashed-border);
}
.half td {
border-bottom: var(--dashed-border);
}

.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);
}

#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%);


/*linear-gradient(to right, var(--color0) 0%,
var(--color0) 16%, 
var(--color1) 16%,
var(--color1) 32%, 
var(--color2) 32%,
var(--color2) 48%, 
var(--color3) 48%,
var(--color3) 62%, 
var(--color4) 62%,
var(--color4) 80%, 
var(--color5) 80%,
var(--color5) 100%);*/

width: 100px;
height: 20px;
}
2

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 Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The 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

You can follow this example:

4

I have updated your formatting. It is important to include a link to what you’re working on.