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.
Why is my code not passing? In the preview window it is showing perfectly.
I also tried with having two var(–color#) % for each color and still did not pass. What am i missing here?
I also tried in another browser and still did not pass.
Thank you for any help given ((:
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>
<div>
<table>
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr class="sharp">
<th class="time">9am</th>
<td class="available-1"></td>
<td class="available-0"></td>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-2"></td>
</tr>
<tr class="half">
<th class="time"> 10am</th>
<td class="available-5"></td>
<td class="available-3"></td>
<td class="available-4"></td>
<td class="available-0"></td>
<td class="available-1"></td>
</tr>
<tr class="sharp">
<th class="time">11am</th>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-3"></td>
<td class="available-0"></td>
</tr>
<tr class="half">
<th class="time">12pm</th>
<td class="available-4"></td>
<td class="available-0"></td>
<td class="available-5"></td>
<td class="available-2"></td>
<td class="available-2"></td>
</tr>
<tr class="sharp">
<th class="time">1pm</th>
<td class="available-5"></td>
<td class="available-5"></td>
<td class="available-3"></td>
<td class="available-1"></td>
<td class="available-4"></td>
</tr>
<tr class="half">
<th class="time">2pm</th>
<td class="available-1"></td>
<td class="available-4"></td>
<td class="available-5"></td>
<td class="available-3"></td>
<td class="available-4"></td>
</tr>
<tr class="sharp">
<th class="time">3pm</th>
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-3"></td>
<td class="available-2"></td>
</tr>
<tr class="half">
<th class="time">4pm</th>
<td class="available-3"></td>
<td class="available-5"></td>
<td class="available-3"></td>
<td class="available-4"></td>
<td class="available-2"></td>
</tr>
<tr class="sharp">
<th class="time">5pm</th>
<td class="available-3"></td>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-0"></td>
</tr>
</tbody>
</table>
</div>
<div id="legend">
<p><span>Availability</span></p>
<div id="legend-gradient">
</div>
</div>
</body>
</html>
/* file: styles.css */
:root {
--color0: rgb(250, 250, 250);
--color1: rgb(200, 250, 200);
--color2: rgb(150, 250, 150);
--color3: rgb(100, 250, 100);
--color4: rgb(50, 250, 50);
--color5: rgb(0, 250, 0);
--solid-border: 1px solid black;
--dashed-border: 1px dashed black;
}
body {
background-color: yellow;
}
table {
margin: 0 auto;
}
.sharp td {
border-bottom: var(--solid-border);
}
.half td {
border-bottom: var(--dashed-border);
}
.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);
}
#legend {
text-align: center;
}
#legend-gradient {
width: 150px;
height: 15px;
margin: 0 auto;
background-image: linear-gradient(90deg,
var(--color0) 0% 16.6%,
var(--color1) 16.6% 33.3%,
var(--color2) 33.3% 49.9%,
var(--color3) 49.9% 66.66%,
var(--color4) 66.66% 83.33%,
var(--color5) 83.33% 100%
);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0
Challenge Information:
Build an Availability Table - Build an Availability Table