What is this solution for34 and 35

HTML-CSS
1 
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Availability Table</title>

<link href="styles.css" rel="stylesheet">

<div class="table">

<caption>

  Availability

</caption>



  <tr>

    <th></th>

    <th>Monday</th>

    <th>Tuesday</th>

    <th>Wednesday</th>

    <th>Thursday</th>

    <th>Friday</th>

    <th>Saturday</th>

    <th>Sunday</th>

  </tr>

  <tr>

    <th class="time">6 AM</th>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-0"></td>

  </tr>



  <tr class="sharp">

    <th class="time">7 AM</th>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-4"></td>

    <td class="available-1"></td>

    <td class="available-0"></td>

  </tr>



  <tr class="sharp">

    <th class="time">8 AM</th>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-4"></td>

    <td class="available-2"></td>

    <td class="available-0"></td>

  </tr>



  <tr class="half">

    <th class="time">9 AM</th>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-4"></td>

    <td class="available-2"></td>

    <td class="available-0"></td>

  </tr>



  <tr class="half">

    <th class="time">10 AM</th>

    <td class="available-4"></td>

    <td class="available-4"></td>

    <td class="available-3"></td>

    <td class="available-3"></td>

    <td class="available-3"></td>

    <td class="available-2"></td>

    <td class="available-0"></td>

  </tr>



  <tr>

    <th class="time">11 AM</th>

    <td class="available-4"></td>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-4"></td>

    <td class="available-2"></td>

    <td class="available-1"></td>

  </tr>



  <tr>

    <th class="time">12 PM</th>

    <td class="available-5"></td>

    <td class="available-5"></td>

    <td class="available-4"></td>

    <td class="available-5"></td>

    <td class="available-3"></td>

    <td class="available-2"></td>

    <td class="available-1"></td>

  </tr>



  <tr>

    <th class="time">1 PM</th>

    <td class="available-4"></td>

    <td class="available-4"></td>

    <td class="available-3"></td>

    <td class="available-4"></td>

    <td class="available-3"></td>

    <td class="available-2"></td>

    <td class="available-1"></td>

  </tr>



  <tr>

    <th class="time">2 PM</th>

    <td class="available-2"></td>

    <td class="available-2"></td>

    <td class="available-2"></td>

    <td class="available-2"></td>

    <td class="available-2"></td>

    <td class="available-1"></td>

    <td class="available-0"></td>

  </tr>



  <tr>

    <th class="time">3 PM</th>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-1"></td>

    <td class="available-0"></td>

  </tr>

<span>Availability</span>

<div class="bar">

  <span>0</span>

  <div id="legend-gradient">

    <span></span>

  </div>

  <span>5+</span>

</div>

/* file: styles.css */
html {
font-size: 16px;
padding: 10px;
}

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: space-between;
height: 100vh;
}

.table {
margin: 0 auto;
}

caption {
font-size: 1.5rem;
font-weight: bolder;
}

:root {
–color0: #ff33ff;
–color1: #ff3366;
–color2: #ff6c33;
–color3: #443388;
–color4: #ff3399;
–color5: #773399;
–solid-border: 2px solid #000;
–dashed-border: 1px dashed #000;
}

.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 {
width: 60%;
margin: 20px auto;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}

    #legend span {
        font-weight: bold;
        font-size: 16px;
    }

#legend-gradient {
background-image: linear-gradient(
to left,
var(–color0) 0% 20%,
var(–color1) 20% 40%,
var(–color2) 40% 60%,
var(–color3) 60% 80%,
var(–color4) 80% 90%,
var(–color5) 90% 100%
);
}

2

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.