Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

step 35 is giving me issues, I don’t why cause i have cleared all the requirements

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

<body>
    <table>
        <thead >
            <th class="time">9AM</th>
            <th class="time">10AM</th>
            <th class="time">8AM</th>
            <th class="time">6AM</th>
            <th class="time">5AM</th>
        </thead>
        <tbody>
            <tr class="sharp">
                <td class="available-0 sharp">monday</td>
                <td class="available-0 sharp">tuesday</td>
                <td class="available-1 sharp">wednesday</td>
                <td class="available-1 sharp">thursday</td>
                <td class="available-2 sharp">friday</td>
            </tr>
            <tr class="sharp">
                <td class="available-3 sharp">y</td>
                <td class="available-4 sharp">y</td>
                <td class="available-5 sharp">y</td>
                <td class="available-1 sharp"></td>
                <td class="available-0 sharp"></td>
            </tr>
            <tr class="half">
                <td class="available-0 half">y</td>
                <td class="available-1 half">y</td>
                <td class="available-2 half">y</td>
                <td class="available-3 half"></td>
                <td class="available-4 half"></td>
            </tr>
            <tr class='half'>
                <td class="available-0 half">y</td>
                <td class="available-1 half">y</td>
                <td class="available-4 half">y</td>
                <td class="available-5 half"></td>
                <td class="available-3 half"></td>
            </tr>
            <tr class="sharp">
                <td class="available-4 sharp">y</td>
                <td class="available-2 sharp">y</td>
                <td class="available-2 sharp">y</td>
                <td class="available-1 sharp"></td>
                <td class="available-0 sharp"></td>
            </tr>
        </tbody>
    </table>
    <div id="legend">
        <span>Availability</span> 
        0<div id="legend-gradient"></div>5
    </div>
</body>

</html>

/* file: styles.css */
:root{
  --color0: #4A90E2;
  --color1: #5ae3f5;
  --color2: #7da4e3;
  --color3: #0e4567;
  --color4: #D7BDE2;
  --color5: #A3E4D7;
  --solid-border: 3.5px solid #394e5f;
  --dashed-border: 3px dashed #456789;
}
th,tr{
  padding: 20px;
  width: 100px;
  height: 50px
}
.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 {
  text-align: center;
  margin-top: 10px;
}
#legend-gradient {
  background-image: linear-gradient(
    90deg,
    var(--color0) 0% 16.66%,
    var(--color1) 16.66% 33.33%,
    var(--color2) 33.33% 50%,
    var(--color3) 50% 66.66%, 
    var(--color4) 66.66% 83.33%,
    var(--color5) 83.33% 100%

  );
  height: 20px;
  width: 50%;
  margin: 20px 100px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0

Challenge Information:

Build an Availability Table - Build an Availability Table

2

i just changed the percentages to whole number and they worked

1 Like