While working on the availability app in the responsive website

freeCodeCamp Support
1

Here is my html: 

<link rel="stylesheet" href="styles.css">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Availability Table</title>

<table>

    <thead>

        <tr>

            <th></th>

            <th>Monday</th>

            <th>Tuesday</th>

            <th>Wednesday</th>

            <th>Thursday</th>

            <th>Friday</th>

        </tr>

    </thead>

    <tbody>

        <tr class="sharp">

            <th class="time">9:00</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="half">

            <th class="time">1:00</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="sharp">

            <th class="time">5:00</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="half">

            <th class="time">8:00</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>

    </tbody>

</table>



<div id="legend">

    <span>Availability</span>

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

</div>

and here is the CSS: :root {

–color0: lightgray;

–color1: green;

–color2: lightgreen;

–color3: yellow;

–color4: orange;

–color5: red;

–solid-border: 2px solid red;

–dashed-border: 2px dashed pink;

}

#legend-gradient {

height: 40px;

width: 300px;

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

}

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

}

Though I’ve tried everything, I can’t get past this error: 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. I would appreciate any thoughts that you might have.

2

Welcome to the forum @kim.ree.mosher

Try searching for that lab in the forum.

Click the magnifying glass icon in the top left corner of the viewport.

If you still have question, please reach out to the forum.

Happy coding