Tell us what’s happening:
- You should use two color-stops (expressed in percentage) to make the transition from one color to the following color a hard line for your #legend-gradient. Remember to use your --color# variables.
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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
</thead>
<tbody>
<tr class="sharp">
<th class="time">5PM</th>
<td class="available-2"></td>
<td class="available-1"></td>
<td class="available-4"></td>
</tr>
<tr class="half">
<th class="time">6PM</th>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-2"></td>
</tr>
<tr class="sharp">
<th class="time">7PM</th>
<td class="available-4"></td>
<td class="available-1"></td>
<td class="available-3"></td>
</tr>
<tr class="half">
<th class="time">8PM</th>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-2"></td>
</tr>
</tbody>
</table>
<div id="legend"><span>Availability</span>
<div id="legend-gradient"></div>
</div>
</body>
</html>
/* file: styles.css */
:root{
--color0:rgb(250, 250, 250);
--color1:rgb(134, 214, 127);
--color2:rgb(105, 221, 84);
--color3:rgb(53, 156, 35);
--color4:rgb(12, 60, 4);
--color5:rgb(3, 23, 2);
--solid-border: 1px solid red;
--dashed-border: 1px dasded 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-bottom: var(--solid-border);
}
.half td{
border-bottom: var(--dashed-border);
}
#legend-gradient {
width: 600px;
height: 100px;
background-image: linear-gradient(
to right,
var(--color0) 0%, var(--color0) 17%,
var(--color1) 17%, var(--color1) 33%,
var(--color2) 33%, var(--color2) 50%,
var(--color3) 50%, var(--color3) 67%,
var(--color4) 67%, var(--color4) 83%,
var(--color5) 83%, var(--color5) 100%
);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Challenge Information:
Build an Availability Table - Build an Availability Table
