Build an Availability Table Lab: step #35

HTML-CSS
1 
<!-- file: index.html -->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Availability Table</title>

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

</head>

<body>



<table>

  <tr>

    <th></th>

    <th>Monday</th>

    <th>Tuesday</th>

    <th>Wednesday</th>

  </tr>



  <tr class="sharp">

    <th class="time">9:00</th>

    <td class="available-0"></td>

    <td class="available-1"></td>

    <td class="available-2"></td>

  </tr>



  <tr class="half">

    <th class="time">10:00</th>

    <td class="available-3"></td>

    <td class="available-4"></td>

    <td class="available-5"></td>

  </tr>



  <tr class="sharp">

    <th class="time">11:00</th>

    <td class="available-1"></td>

    <td class="available-2"></td>

    <td class="available-3"></td>

  </tr>



  <tr class="half">

    <th class="time">12:00</th>

    <td class="available-4"></td>

    <td class="available-5"></td>

    <td class="available-0"></td>

  </tr>

</table>



<div id="legend">

  <span>Availability</span>

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

</div>



</body>

</html>

/\* file: styles.css \*/
:root {
–color0: #ffffff;
–color1: #d6ecff;
–color2: #add8ff;
–color3: #7fbfff;
–color4: #4fa3ff;
–color5: #1f87ff;

–solid-border: 2px solid black;
–dashed-border: 2px dashed black;
}

table {
border-collapse: collapse;
}

th,
td {
border: 1px solid black;
width: 100px;
height: 40px;
text-align: center;
}

.time {
font-weight: bold;
}

/\* availability colors \*/
.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); }

/\* row border styles \*/
.sharp td {
border-bottom: var(–solid-border);
}

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

/\* legend \*/
#legend {
margin-top: 20px;
}

#legend-gradient {
height: 20px;
width: 300px;
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%
);
}
2

Hi, can somebody please help me with step 35? I’ve read the other responses, but I couldn’t figure out the issue. Could you please pinpoint the exact mistakes? Thank you.

3

Just remove the commas after the first percentage. You can refer to this example for the syntax:

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color-stops

4

Thank You so much!!!

5

Note - it helps if you say more about where you got stuck figuring out tho problems instead of just asking us to find the problems for you. It helps us help you better