Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

  1. You should have the transitions from one color to the following color as a hard line for your #legend-gradient. Make sure your percentages are whole numbers.

is not complete, but I already did the task.

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

<body>
    <table>
        <tr class="sharp">
            <th class="time">08:00AM</th>
            <th class="time">10:00AM</th>
            <th class="time">11:00AM</th>
            <th class="time">01:00AM</th>
            <th class="time">02:00AM</th>
            <th class="time">03:00AM</th>
        </tr>
        <tr class="sharp">
            <th>yo</th>
            <td class="available-0">0</td>
            <td class="available-1">1</td>
            <td class="available-2">2</td>
            <td class="available-3">3</td>
            <td class="available-4">4</td>
            <td class="available-5">5</td>
        </tr>
        <tr class="half">
            <th></th>
            <td class="available-0">0</td>
            <td class="available-1">1</td>
            <td class="available-2">2</td>
            <td class="available-3">3</td>
            <td class="available-4">4</td>
            <td class="available-5">5</td>
        </tr>
        <tr class="half">
            <th></th>
            <td class="available-0">0</td>
            <td class="available-1">1</td>
            <td class="available-2">2</td>
            <td class="available-3">3</td>
            <td class="available-4">4</td>
            <td class="available-5">5</td>
        </tr>
        <tr>
            <th></th>
             <th></th>
           <td class="available-0">0</td>
            <td class="available-1">1</td>
            <td class="available-2">2</td>
            <td class="available-3">3</td>
            <td class="available-4">4</td>
            <td class="available-5">5</td>
        </tr>

        <div id="legend">
            <span>Availability</span>

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

</html>

/* file: styles.css */
:root {
  --color0: white;
  --color1: blue;
  --color2: green;
  --color3: red;
  --color4: purple;
  --color5: orange;
  --color6: aqua;
  --solid-border: 2px solid black;
  --dashed-border: 2px dashed blue;
}

.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: var(--solid-border);
  border-bottom: var(--solid-border);
}

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

#legend-gradient {
  width: 100%;
  height: 30px;
  background-image: linear-gradient(
    var(--color1) 5%,
    var(--color2) 20%,
    var(--color3) 30%,
    var(--color4) 40%,
    var(--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/26.2 Safari/605.1.15

Challenge Information:

Build an Availability Table - Build an Availability Table

2

this does not give hard lines, please review how to create hard lines transitions, and don’t forget about using all your colors