Build an Availability Table - Build an Availability Table

HTML-CSS
1

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">
    <link rel="stylesheet" href="styles.css">
    <title>Availability Table</title>
</head>

<body>

    <div id="legend">
    <span>Availability</span>
    <div id="legend-gradient"></div>
  </div>
  
    <table>
        <tr>
            <th></th>
            <th>Monday</th>
            <th>Tuesday</th>
      <th>Wednesday</th>
    </tr>

    <tr class="sharp">
        <th class="time">9.00 am</th>
        <td class="available-1"></td>
      <td class="available-3"></td>
      <td class="available-0"></td>
    </tr>

    <tr class="half">
        <th class="time">10.00 am</th>
         <td class="available-2"></td>
      <td class="available-4"></td>
      <td class="available-1"></td>
    </tr>
    <tr class="sharp">
      <th class="time">11:00 AM</th>
      <td class="available-0"></td>
      <td class="available-5"></td>
      <td class="available-3"></td>
    </tr>
    <tr class="half">
      <th class="time">12:00 PM</th>
      <td class="available-2"></td>
      <td class="available-3"></td>
      <td class="available-1"></td>
    </tr>
    </table>  

</body>

</html>

/* file: styles.css */
:root {
  --color0: #e0f7fa;
  --color1: #b2ebf2;
  --color2: #80deea;
  --color3: #4dd0e1;
  --color4: #26c6da;
  --color5: #00bcd4;

  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #666;
}

body{
  font-family:Arial,sans-serif;
  padding: 20px;

}

table{
  width: 100%;
  border-collapse:collapse;
  text-align: center;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

th.time {
  text-align: left;
  background-color: #f0f0f0;
}

.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 {
  margin-bottom: 20px;
}


#legend span {
  font-weight: Bold;
  margin-right: 10px;
}

#legend-gradient {
  width: 300px;
  height: 20px;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%, var(--color0) 16.66%,
    var(--color1) 16.66%, var(--color1) 33.32%,
    var(--color2) 33.32%, var(--color2) 49.98%,
    var(--color3) 49.98%, var(--color3) 66.64%,
    var(--color4) 66.64%, var(--color4) 83.3%,
    var(--color5) 83.3%, var(--color5) 100%
  );
  border: 1px solid #ccc;
}

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

2

here an example: linear-gradient() - CSS | MDN

you are also going to need to use whole numbers

3

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!