Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I am unable to pass step 35 of the lab. I do not know what to do.

Your code so far

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

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

<body>
   <h1>Weekly Availability Schedule</h1>
    
    <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 AM</th>
                <td class="available-2">2</td>
                <td class="available-3">3</td>
                <td class="available-1">1</td>
                <td class="available-4">4</td>
                <td class="available-2">2</td>
            </tr>
            <tr class="half">
                <th class="time">9:30 AM</th>
                <td class="available-3">3</td>
                <td class="available-4">4</td>
                <td class="available-2">2</td>
                <td class="available-5">5</td>
                <td class="available-3">3</td>
            </tr>
            <tr class="sharp">
                <th class="time">10:00 AM</th>
                <td class="available-4">4</td>
                <td class="available-5">5</td>
                <td class="available-3">3</td>
                <td class="available-4">4</td>
                <td class="available-5">5</td>
            </tr>
            <tr class="half">
                <th class="time">10:30 AM</th>
                <td class="available-1">1</td>
                <td class="available-2">2</td>
                <td class="available-0">0</td>
                <td class="available-3">3</td>
                <td class="available-1">1</td>
            </tr>
        </tbody>
    </table>

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

</html>


/* file: styles.css */
:root {
            --color0: #f0f0f0;
            --color1: #ffcccc;
            --color2: #ffaa99;
            --color3: #ff8866;
            --color4: #ff6644;
            --color5: #ff4422;
            --solid-border: 2px solid #333;
            --dashed-border: 2px dashed #666;
        }

        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th, td {
            padding: 12px;
            text-align: center;
        }

        th {
            background-color: #333;
            color: white;
            font-weight: bold;
        }

        .time {
            background-color: #555;
            color: white;
            font-weight: bold;
        }

        .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;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
        }

        #legend span {
            font-weight: bold;
            font-size: 16px;
        }

        #legend-gradient {
  flex: 1;
  height: 30px;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%,
    var(--color0) 16.67%,
    var(--color1) 16.67%,
    var(--color1) 33.34%,
    var(--color2) 33.34%,
    var(--color2) 50%,
    var(--color3) 50%,
    var(--color3) 66.67%,
    var(--color4) 66.67%,
    var(--color4) 83.34%,
    var(--color5) 83.34%,
    var(--color5) 100%
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

Build an Availability Table - Build an Availability Table

2

try the following syntax:

linear-gradient( direction, color1 start% end%, color2 start% end%, ...)

also try removing the decimals and use integers for the start and end percentages. :))