Everything passes except step 11.
- All your
td
elements should have theclass
ofavailable-#
, where#
is a number from0
to5
.
<!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>
<main>
<table>
<thead>
<tr>
<th>Time</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr class="sharp">
<th rowspan="2" class="time">9:00 am</th>
<td class="available-0"></td>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-3"></td>
<td class="available-4"></td>
<td class="available-5"></td>
<td class="available-1"></td>
</tr>
<tr class="half">
<td class="available-2"></td>
<td class="available-4"></td>
<td class="available-0"></td>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-1"></td>
<td class="available-3"></td>
</tr>
<tr class="sharp">
<th rowspan="2" class="time">10:00 am</th>
<td class="available-3"></td>
<td class="available-0"></td>
<td class="available-5"></td>
<td class="available-2"></td>
<td class="available-4"></td>
<td class="available-1"></td>
<td class="available-4"></td>
</tr>
<tr class="half">
<td class="available-1"></td>
<td class="available-4"></td>
<td class="available-2"></td>
<td class="available-0"></td>
<td class="available-5"></td>
<td class="available-3"></td>
<td class="available-2"></td>
</tr>
<tr class="sharp">
<th rowspan="2" class="time">11:00 am</th>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-4"></td>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-3"></td>
</tr>
<tr class="half">
<td class="available-3"></td>
<td class="available-1"></td>
<td class="available-5"></td>
<td class="available-4"></td>
<td class="available-2"></td>
<td class="available-0"></td>
<td class="available-2"></td>
</tr>
<tr class="sharp">
<th rowspan="2" class="time">12:00 pm</th>
<td class="available-4"></td>
<td class="available-5"></td>
<td class="available-1"></td>
<td class="available-0"></td>
<td class="available-3"></td>
<td class="available-2"></td>
<td class="available-0"></td>
</tr>
<tr class="half">
<td class="available-0"></td>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-4"></td>
<td class="available-1"></td>
</tr>
<tr class="sharp">
<th rowspan="2" class="time">1:00 pm</th>
<td class="available-2"></td>
<td class="available-3"></td>
<td class="available-1"></td>
<td class="available-4"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-3"></td>
</tr>
<tr class="half">
<td class="available-3"></td>
<td class="available-2"></td>
<td class="available-4"></td>
<td class="available-1"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-4"></td>
</tr>
<tr class="sharp">
<th rowspan="2" class="time">2:00 pm</th>
<td class="available-1"></td>
<td class="available-4"></td>
<td class="available-3"></td>
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-2"></td>
</tr>
<tr class="half">
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-1"></td>
<td class="available-4"></td>
<td class="available-0"></td>
<td class="available-3"></td>
<td class="available-3"></td>
</tr>
<tr class="sharp">
<th rowspan="2" class="time">3:00 pm</th>
<td class="available-0"></td>
<td class="available-1"></td>
<td class="available-4"></td>
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-3"></td>
<td class="available-1"></td>
</tr>
<tr class="half">
<td class="available-2"></td>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-4"></td>
<td class="available-1"></td>
<td class="available-2"></td>
</tr>
<tr class="sharp">
<th rowspan="2" class="time">4:00 pm</th>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-1"></td>
<td class="available-0"></td>
<td class="available-4"></td>
<td class="available-2"></td>
<td class="available-0"></td>
</tr>
<tr class="half">
<td class="available-0"></td>
<td class="available-2"></td>
<td class="available-4"></td>
<td class="available-1"></td>
<td class="available-5"></td>
<td class="available-3"></td>
<td class="available-4"></td>
</tr>
<tr class="sharp">
<th rowspan="2" class="time">5:00 pm</th>
<td class="available-4"></td>
<td class="available-1"></td>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-2"></td>
<td class="available-3"></td>
</tr>
</tbody>
</table>
<div id="legend">
<span id="legend-title">Availability</span>
<div id="legend-line"><span>0</span>
<div id="legend-gradient"></div><span>5+</span></div>
</div>
</main>
</body>
</html>