Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

#35 Ayuda

#legend-gradient{width:600px; height:100px;
background-image: linear-gradient( to right,var(–color0) 0%,
var(–color0) 16.66%,
var(–color1) 16.66%,
var(–color1) 33.33%,

var(--color2) 33.33%,
var(--color2) 50%,

var(--color3) 50%,
var(--color3) 66.66%,

var(--color4) 66.66%,
var(--color4) 83.33%,

var(--color5) 83.33%,
var(--color5) 100%

);
}

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

<body>
    <table>
        <tr>
        <th class="timey">Hora</th>
        <th>Lunes</th>
        <th>Martes</th>
        <th>Miércoles</th>
        <th>Jueves</th>
        <th>Viernes</th>
        </tr>
        <tr class="sharp">
        <th class="time">09:00</th>
        <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>
        </tr>
        <tr class="half">
            <th class="time">11:00</th>
             <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>
        </tr>
        <tr class="sharp">
        <th class="time">13:00</th>
             <td class="available-3"></td>
             <td class="available-4"></td>
             <td class="available-5"></td>
             <td class="available-2"></td>
             <td class="available-0"></td>
        </tr>
        <tr class="half">
            <th class="time">15:00</th>
            <td class="available-4"></td>
            <td class="available-5"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            </tr>
       </table>
    <div id="legend">
      <span>Availability</span>
       <div id="legend-gradient"></div>
    </div>

</body>

</html>

/* file: styles.css */
:root{
  --color0:#E3F2FD;
  --color1:#BBDEFB;
  --color2:#90CAF9;
  --color3:#64B5F6;
  --color4:#42A5F5;
  --color5:#1E88E5;

  --solid-border:1px solid #1E88E5;
  --dashed-border:1px dashed #0D47A1;
}

#legend-gradient{width:600px; height:100px;
 background-image: linear-gradient( to right,var(--color0) 0%,
    var(--color0) 16.66%,
    var(--color1) 16.66%,
    var(--color1) 33.33%,

    var(--color2) 33.33%,
    var(--color2) 50%,

    var(--color3) 50%,
    var(--color3) 66.66%,

    var(--color4) 66.66%,
    var(--color4) 83.33%,

    var(--color5) 83.33%,
    var(--color5) 100%
  );
}

.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{
  margin:10px 0 0 0;
  padding:2px;
  background-color:#E3F2FD;
  width:50%;
  position:absolute;
  height:90px;
}

span{
  font-family:"Times New Roman", sans-serif;
}

.marking{
  position:relative;
  left:120px;
  top:10px;
}

.zero{
  position:relative;
  left:25px;
  top:10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

2

you need to use the two color stops syntax, and whole numbers

see here for an example that uses that syntax: linear-gradient() - CSS | MDN

1 Like