Cuéntanos qué está pasando:
Entre que no entiendo el inglés y que las traducciones mezclan etiquetas con palabras, estoy muy liado. Me falta este paso que entiendo que use para cada color, 2 porcentajes y eso es lo que hago pero me da fallo.
- 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.
Tu código hasta el momento
<!-- 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>
<tr>
<th class="blanck"></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
</thead>
<tbody>
<tr class="sharp">
<th class="time">9:00 AM</th>
<td class="available-3"></td>
<td class="available-1"></td>
<td class="available-5"></td>
</tr>
<tr class="half">
<th class="time">10:00 AM</th>
<td class="available-2"></td>
<td class="available-0"></td>
<td class="available-4"></td>
</tr>
<tr class="sharp">
<th class="time">11:00 AM</th>
<td class="available-4"></td>
<td class="available-3"></td>
<td class="available-2"></td>
</tr>
<tr class="half">
<th class="time">12:00 PM</th>
<td class="available-5"></td>
<td class="available-1"></td>
<td class="available-0"></td>
</tr>
</tbody>
</table>
<div id="legend">
<span>Availability</span>
<div id="legend-gradient"></div>
</div>
</body>
</html>
/* file: styles.css */
:root{
--color0:#fff3f0;
--color2:#f5f8d1;
--color1:#f1fee2;
--color3:#00de00;
--color4:#33e022;
--color5:#10ff00;
--solid-border:2px solid #ddd;
--dashed-border:2px dashed #000;
}
body{
display:flex-block;
align-items:center;
margin:1px auto;
padding: 20px;
background-color:rgb(211, 201, 201);
}
table{
width: 500px;
height:250px;
margin:0 auto;
background-color:yellow;
padding: 20px;
}
#legend{
display:fex;
align-items:center;
gap:10px;
margin:10px auto;
text-align: center;
width: 300px;
}
#legend-gradient{
width: 100%;
height: 20px;
background-image: linear-gradient(90deg,
var(--color0)0%, var(--color0)10%,
var(--color1)11%, var(--color1)22%,
var(--color2)23%, var(--color2)44%,
var(--color3)45%, var(--color3)68%,
var(--color4)69%, var(--color4)85%,
var(--color5)86%, var(--color5)100%);
}
.blanck {
border: none !important;
}
#legend span {
display: inline-block;
width: 4.5rem;
height: 2.1rem;
}
th, td{
border: 3px solid red !important;
}
.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);
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0
Información del Desafío:
Build an Availability Table - Build an Availability Table