Tell us what’s happening:
I don’t understand why 19 to 34 is wrong, the preview already shown what I wrote. Thanks.
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>The Three Musketeers</td>
<td>Alexandre Dumas</td>
<td>Historical Novel</td>
<td><span class="status">Read</span></td>
<td><span class="rate one"><span></span><span></span><span></span></span></td>
</tr>
<tr class="to-read">
<td>The Plague</td>
<td>Albert Camus</td>
<td>Philosophical Novel</td>
<td><span class="status">To Read</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td>
</tr>
<tr class="read">
<td>The Metamorphosis</td>
<td>Franz Kafka</td>
<td>Novella</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>Lord of the Flies</td>
<td>William Golding</td>
<td>Allegorical Novel</td>
<td><span class="status">In Progress</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td>
</tr>
</table>
</body>
</html>
/* file: styles.css */
table{border: 2px, solid, black;
width:100vh;
}
tr.read{
background-image:linear-gradient(to bottom, rgb(146, 245, 146), rgb(15, 211, 15));
}
tr.to-read{
background-image:linear-gradient(to bottom, rgb(232, 238, 232), rgb(183, 188, 183));
}
tr.in-progress{
background-image:linear-gradient(to bottom, rgb(252, 255, 203), rgb(192, 202, 53));
}
span{
display: inline-block;
text-align: center;
}
tr.to-read span.status{
background-color: red;
border: 2px solid red;
border-radius:10px;
padding: 0 20px 0 20px;
}
tr.read span.status{
background-color: rgb(24, 187, 24);
border: 2px solid rgb(24, 187, 24);
border-radius:10px;
padding: 0 20px 0 20px;
}
tr.in-progress span.status{
background-color: rgb(218, 198, 26);
border: 2px solid rgb(218, 198, 26);
border-radius:10px;
padding: 0 20px 0 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0
Challenge Information:
Build a Book Inventory App - Build a Book Inventory App
