Skip to content

Instantly share code, notes, and snippets.

@mhekel

mhekel/index.html

Created April 10, 2026 02:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mhekel/796527cf0707c9666557b245931737fd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mhekel/796527cf0707c9666557b245931737fd to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<body>
<!-- Page heading -->
<h1>Book Inventory</h1>
<!-- Main table containing the book data -->
<table>
<!-- Table header section -->
<thead>
<tr>
<!-- Column labels -->
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</tr>
</thead>
<!-- Table body containing book entries -->
<tbody>
<!-- Each row represents one book -->
<tr></tr>
<tr class="to-read">
<td>Ghost Recon: Combat Ops</td>
<td>Tom Clancy</td>
<td>Fiction</td>
<td><span class="status">To Read</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td>
</tr>
<tr class="in-progress"> <!-- Book currently being read -->
<td>Ghost Recon</td>
<td>Tom Clancy</td>
<td>Fiction</td>
<td><span class="status">In Progress</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td>
</tr>
<tr class="in-progress"> <!-- Book marked as "in-progress" -->
<td>Post Mortem</td>
<td>Patricia Cornwell</td>
<td>Fiction, Crime</td>
<td><span class="status">In-Progress</span></td> <!-- Status badge -->
<td><span class="rate three"><span></span><span></span><span></span></span></td> <!-- 3-star rating -->
</tr>
,
<tr class="read">
<td>The Coffin Dancer</td>
<td>Jeffery Deaver</td>
<td> Fiction, thriller</td>
<td><span class="status">Read</span></td>
<td><span class="rate one"><span> </span><span></span><span></span></span></td> <!-- 1-star rating -->
</tr>
<tr class="to-read"> <!-- Book marked as "to read" -->
<td>The Bone Collector</td>
<td>Jeffery Deaver</td>
<td>Fiction, thriller</td>
<td><span class="status">To Read</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td> <!-- No rating class (0 stars) -->
</tr>
<tr class="read">
<td>The Lincoln Lawyer</td>
<td>John Grisham</td>
<td>Fiction, thriller</td>
<td><span class="status">Read</span></td>
<td><span class="rate two"><span></span><span></span><span></span></span></td> <!-- 2-star rating -->
</tr>
<tr class="read">
<td>Along came a spider</td>
<td>James Patterson</td>
<td>Fiction, thriller</td>
<td><span class="status">Read</span></td>
<td><span class="rate three"><span></span><span></span><span></span></span></td> <!-- 3-star rating -->
</tr>
</tbody>
</table>
</body>
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Syne:wght@400..800&display=swap');
* {box-sizing:border-box;}
body {
margin: auto;
padding: 10px 5px;
width: 100vw;
height: 100vh;
font-family: "Syne", sans-serif;
font-size: 1.1rem;
background-color: #e5e5e5;
align-items: center;
overflow-y: hidden;
}
h1 {
text-align:center;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800;
}
/* General Table Styling for readability */
table {
margin: auto;
width: 85%;
border-collapse: collapse;
background-color: #fff;
border-radius:5px;
}
thead tr {
padding: 5px 5px;
height: 60px;
border: 2px solid #ccc;
border-bottom: 1px solid #111;
border-radius-top: 15px;
}
th, td {
padding: 15px;
border: 0 solid #ccc;
text-align: center;
}
/* 1. Set display property of each span to inline-block */
span {
display: inline-block;
}
/* 2. Target rows with class read, to-read, in-progress using attribute selectors */
tr[class="read"] {
background-image: linear-gradient(to left, #fba4af, #ffffff);
border: 1px solid #aaa;
}
tr[class="to-read"] {
background-image: linear-gradient(to left, #c4b5fd, #ffffff);
border: 1px solid #aaa;
}
tr[class="in-progress"] {
background-image: linear-gradient(to right, #d9f99d, #ffffff);
border: 1px solid #aaa;
}
/* 3. Target status spans inside to-read rows */
tr[class="to-read"] span[class="status"] {
border: 1px solid #bbb;
background-image: linear-gradient(to right, #8B5CF6, #D8B4FE, #8B5CF6);
color: white;
border-radius: 5px;
}
/* 4. Target status spans inside read rows */
tr[class="read"] span[class="status"] {
padding: 1px 15px;
border: 1px solid #F43F5E;
background-image: linear-gradient(to right, #EF4444, #fecaca, #EF4444);
color: #ddd;
border-radius: 5px;
}
/* 5. Target status spans inside in-progress rows */
tr[class="in-progress"] span[class="status"] {
border: 1px solid #ccc;
background-image: linear-gradient(to right, #BEF264, #d9f99d, #fff, #a3e635, #84cc16);
color: #222;
border-radius: 5px;
font-size: .825rem;
}
/* 6. Target status spans AND spans starting with "rate" for dimensions */
span[class="status"],
span[class^="rate"] {
height: 30px;
padding: 1px 5px;
vertical-align: middle;
}
/* 7. Target the empty circles (children of .rate) */
span[class^="rate"] > span {
border: 1px solid #555;
border-radius: 50%; /* Makes them circular */
margin: 2px;
height: 15px;
width: 15px;
background-color: #ddd; /* Default empty color */
}
/* 8. RATING LOGIC: 1 Star (Target 1st descendant of class containing 'one') */
span[class*="one"] > span:first-child {
background-image: linear-gradient(to bottom, gold, goldenrod);
border-color: goldenrod;
}
/* 9. RATING LOGIC: 2 Stars (Target 1st and 2nd descendants of class containing 'two') */
span[class*="two"] > span:first-child,
span[class*="two"] > span:nth-child(2) {
background-image: linear-gradient(to bottom, gold, goldenrod);
border-color: goldenrod;
}
/* 10. RATING LOGIC: 3 Stars (Target all descendants of class containing 'three') */
span[class*="three"] > span {
background-image: linear-gradient(to bottom, gold, goldenrod);
border-color: goldenrod;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment