Tell us what’s happening:
Hey!
I’ve been stuck in step 35 for a week, nothing I’ve done seems to work.
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>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr class="in-progress">
<td>1984</td>
<td>Gorge Orwell</td>
<td>Science Fiction</td>
<td>
<span class="status">In Progress</span>
</td>
<td>
<span class="rate zero">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
<tr class="to-read">
<td>Neuromancer</td>
<td>William Gibson</td>
<td>Science Fiction</td>
<td>
<span class="status">To Read</span>
</td>
<td>
<span class="rate zero">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
</tr>
<tr class="read">
<td>The Well of Ascension</td>
<td>Brandon Sanderson</td>
<td>Fantasy</td>
<td>
<span class="status">Read</span>
</td>
<td>
<span class="rate two">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
<tr class="read">
<td>Eragon: The Inheritance </td>
<td>Christopher Paolini</td>
<td>Fantasy</td>
<td>
<span class="status">Read</span>
</td>
<td>
<span class="rate two">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
<tr class="read">
<td>The Harsh Cry of the Heron</td>
<td>Lian Hearn</td>
<td>Fantasy</td>
<td>
<span class="status">Read</span>
</td>
<td>
<span class="rate one">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
/* file: styles.css */
* {
box-sizing: border-box;
font-family: "Courier New", Courier, monospace;
}
html {
background-color: #18230f;
display: block;
}
body {
color: #ffffff;
}
table {
text-indent: initial;
border-collapse: collapse;
}
span {
display: inline-block;
}
span[class~="rate"] {
height: 100%;
}
span[class~="status"] {
height: 1.85em;
width: 8em;
padding: 0.3em;
height: auto;
line-height: 1.85em;
white-space: nowrap;
}
td {
vertical-align: inherit;
display: table-cell;
padding: 0.3em;
text-align: center;
}
tr[class="to-read"] span[class="status"] {
border: 2px solid #18230f;
border-radius: 10px;
background-image: linear-gradient(to bottom, #2e2e2e, #505050, #727272);
background-size: cover;
background-position: center;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4),
inset 0px -3px 6px rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
tr[class="in-progress"] span[class="status"] {
border: 2px solid #18230f;
border-radius: 10px;
background-image: linear-gradient(to right, #8a5a00, #d4a017, #ffd700);
background-position: center;
background-size: cover;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.6),
inset 0px -3px 6px rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
tr[class="read"] span[class="status"] {
border: 2px solid #18230f;
border-radius: 10px;
background-image: linear-gradient(to bottom, #0e3926, #186d42, #34a76b);
background-size: cover;
background-position: center;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5),
inset 0px -3px 6px rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
tr[class="read"] {
background: linear-gradient(to bottom, #1b4d3e, #26734d, #3d9f75);
color: #ffffff; /* Ensures readability */
}
tr[class="to-read"] {
background: linear-gradient(to bottom, #4a4a4a, #6b6b6b, #8c8c8c);
color: #ffffff; /* Ensures readability */
}
tr[class="in-progress"] {
background: linear-gradient(to right, #a67c00, #d4a017, #ffd700);
color: #ffffff; /* Ensures readability */
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Challenge Information:
Build a Book Inventory App - Build a Book Inventory App
