I'm currently working on Step 35 of the "Build an Availability Table" project in freeCodeCamp's Full Stack Certification. The task requires me to create a linea

HTML-CSS
1

I’m currently working on Step 35 of the “Build an Availability Table” project in freeCodeCamp’s Full Stack Certification. The task requires me to create a linear gradient for the #legend-gradient element using my predefined CSS variables.

The instruction says:

“Use two color-stops (expressed in percentage) to make the transition from one color to the following color a hard line. Remember to use your --color# variables.”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Availability Schedule</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <h1>Team Availability Schedule</h1>
        <table>
            <tr>
                <th></th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
            <tr class="sharp">
                <th class="time">9:00 AM</th>
                <td class="available-2"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-1"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="half">
                <th class="time">10:00 AM</th>
                <td class="available-1"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="sharp">
                <th class="time">11:00 AM</th>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-0"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="half">
                <th class="time">12:00 PM</th>
                <td class="available-5"></td>
                <td class="available-1"></td>
                <td class="available-2"></td>
                <td class="available-3"></td>
                <td class="available-0"></td>
            </tr>
            <tr class="sharp">
                <th class="time">1:00 PM</th>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-1"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="half">
                <th class="time">2:00 PM</th>
                <td class="available-0"></td>
                <td class="available-2"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="sharp">
                <th class="time">3:00 PM</th>
                <td class="available-1"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="half">
                <th class="time">4:00 PM</th>
                <td class="available-5"></td>
                <td class="available-0"></td>
                <td class="available-3"></td>
                <td class="available-2"></td>
                <td class="available-4"></td>
            </tr>
            <tr class="sharp">
                <th class="time">5:00 PM</th>
                <td class="available-4"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-1"></td>
                <td class="available-3"></td>
            </tr>
        </table>

        <div id="legend">
            <span>Availability</span>
            <div id="legend-gradient"></div>
            <div class="legend-labels">
                <span>0</span>
                <span>5+</span>
            </div>
        </div>
    </div>
</body>

</html>

:root {
    --color0: #fee2e2;
    --color1: #fde68a;
    --color2: #bbf7d0;
    --color3: #86efac;
    --color4: #4ade80;
    --color5: #16a34a;
    --solid-border: 2px solid #006400	;
    --dashed-border: 2px dashed #006400	;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f3f4f6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

h1 {
    text-align: center;
    color: #1f2937;
    margin-bottom: 2rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

th,
td {
    padding: 1rem;
    text-align: center;
}

th {
    background-color: #f8fafc;
    color: #1f2937;
    font-weight: 600;
}

.time {
    text-align: right;
    width: 100px;
}

.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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

#legend span {
    font-weight: 600;
    color: #1f2937;
}

#legend-gradient {
    width: 200px;
    height: 20px;
    border-radius: 4px;
    background-image: linear-gradient(
        to right,
        var(--color0) 0% 16.666%,
        var(--color1) 16.666% 33.333%,
        var(--color2) 33.333% 50%,
        var(--color3) 50% 66.666%,
        var(--color4) 66.666% 83.333%,
        var(--color5) 83.333% 100%
    );
}



.legend-labels {
    width: 200px;
    display: flex;
    justify-content: space-between;
    color: #6b7280;
    font-size: 0.875rem;
}
2

try using integer numbers

I’ve edited your code for readability. When you enter a code block into a forum post, 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 (').

3

“Use two color-stops (expressed in percentage) to make the transition from one color to the following color a hard line. Remember to use your --color# variables.”

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Availability Schedule</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <h1>Team Availability Schedule</h1>
        <table>
            <tr>
                <th></th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
            <tr class="sharp">
                <th class="time">9:00 AM</th>
                <td class="available-2"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-1"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="half">
                <th class="time">10:00 AM</th>
                <td class="available-1"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="sharp">
                <th class="time">11:00 AM</th>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-0"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="half">
                <th class="time">12:00 PM</th>
                <td class="available-5"></td>
                <td class="available-1"></td>
                <td class="available-2"></td>
                <td class="available-3"></td>
                <td class="available-0"></td>
            </tr>
            <tr class="sharp">
                <th class="time">1:00 PM</th>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-1"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="half">
                <th class="time">2:00 PM</th>
                <td class="available-0"></td>
                <td class="available-2"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="sharp">
                <th class="time">3:00 PM</th>
                <td class="available-1"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="half">
                <th class="time">4:00 PM</th>
                <td class="available-5"></td>
                <td class="available-0"></td>
                <td class="available-3"></td>
                <td class="available-2"></td>
                <td class="available-4"></td>
            </tr>
            <tr class="sharp">
                <th class="time">5:00 PM</th>
                <td class="available-4"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-1"></td>
                <td class="available-3"></td>
            </tr>
        </table>

        <div id="legend">
            <span>Availability</span>
            <div id="legend-gradient"></div>
            <div class="legend-labels">
                <span>0</span>
                <span>5+</span>
            </div>
        </div>
    </div>
</body>

</html>```
```:root {
    --color0: #fee2e2;
    --color1: #fde68a;
    --color2: #bbf7d0;
    --color3: #86efac;
    --color4: #4ade80;
    --color5: #16a34a;
    --solid-border: 2px solid #006400	;
    --dashed-border: 2px dashed #006400	;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f3f4f6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

h1 {
    text-align: center;
    color: #1f2937;
    margin-bottom: 2rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

th,
td {
    padding: 1rem;
    text-align: center;
}

th {
    background-color: #f8fafc;
    color: #1f2937;
    font-weight: 600;
}

.time {
    text-align: right;
    width: 100px;
}

.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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

#legend span {
    font-weight: 600;
    color: #1f2937;
}

#legend-gradient {
    width: 200px;
    height: 20px;
    border-radius: 4px;
    background-image: linear-gradient(
        to right,
        var(--color0) 0 16%,
        var(--color1) 16% 33%,
        var(--color2) 33% 50%,
        var(--color3) 50% 66%,
        var(--color4) 66% 83%,
        var(--color5) 83% 100%
    );
}



.legend-labels {
    width: 200px;
    display: flex;
    justify-content: space-between;
    color: #6b7280;
    font-size: 0.875rem;
}```
4

what update do you have?

5

“The issue is not resolved yet. The case is still failing. Please check again.”

6

let’s see… one of your numbers is not a percentage

7

Thank you for your time and help! I :blush: