Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Failing from steps 36 to 44. Can’t decode. Pls help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Book Inventory</h1>

  <table>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </tr>
    <tr class="read">
      <td>AAAA</td>
      <td>AAAA</td>
      <td>AAAA</td>
      <td><span class="status">Read</span></td>
      <td>
        <span class="rate three">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </td>
    </tr>
    <tr class="read">
      <td>BBB</td>
      <td>BBB</td>
      <td>BBB</td>
      <td><span class="status">Read</span></td>
      <td>
        <span class="rate two">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </td>
    </tr>
    <tr class="in-progress">
      <td>CCC</td>
      <td>CCC</td>
      <td>CCC</td>
      <td><span class="status">In Progress</span></td>
      <td>
        <span class="rate">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </td>
    </tr>
    <tr class="to-read">
      <td>DDD</td>
      <td>DDD</td>
      <td>DDD</td>
      <td><span class="status">To Read</span></td>
      <td>
        <span class="rate">
          <span></span>
          <span></span>
          <span></span>    
        </span>
      </td>
    </tr>
  </table>
</body>

</html>

/* file: styles.css */
body{
  font-family: Times New Roman, sans-serif, Arial;
  background-color: seashell;
}
h1{
  text-align: center;
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}
table{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  margin: 20px;
  padding: 20px;
  border: 3px solid #0a0a21;
  }
th,td{
  padding: 20px;
  border-spacing: 20px;
}
th{
  text-decoration: underline;
  font-style: italic;
  background-image: radial-gradient(ellipse, mintcream, salmon);
}
td{
  font-weight: bold;
}
tr[class="read"]{
  background-image: linear-gradient(30deg, azure, lightgray);
}
tr[class="to-read"]{
  background-image: linear-gradient(30deg,khaki, cornsilk);
}
tr[class="in-progress"]{
  background-image: linear-gradient(30deg, floralwhite, goldenrod);
}
span{
  display: inline-block;
}
tr[class="to-read"] span[class="status"]{
  border: 1px inset sienna;
  background-image: linear-gradient(20deg, aquamarine, azure) ;
}
tr[class="read"] span[class="status"]{
  border: 1px inset #f3421e;
  background-image: linear-gradient(20deg, maroon, azure) ;
}
tr[class="in-progress"] span[class="status"]{
  border: 1px inset black;
  background-image: linear-gradient(20deg, gold, azure) ;
}
span[class="status"]{
  height: 50px;
  width: 50px;
  padding: 10px;
}
span[class="rate"]{
  height: 50px;
  width: 50px;
  padding: 10px;
}
span[class="rate"] span{
  border: 1.5px outset teal;
  border-radius: 10%;
  margin: 10px;
  height: 10px;
  width: 15px;
  background-color: lightgreen;
}
span[class="status"],span[class="rate"]{
height:50px;
width:50px;
padding:5px;
}
span[class="rate"] > span{
border:1px solid #a254d3;
border-radius: 10%;
margin: 5px;
height: 50px;
width: 50px;
background-color:#fe0;
}
span[class="two"]{
  background-image: linear-gradient(azure, #3f2f1f);
}
span[class="three"] span
{
  background-image: linear-gradient(cornsilk, #1a1a1a);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

and the span elements with the class value starting with rate.

you need to use the symbol to match the start of an attribute