Skip to content

Instantly share code, notes, and snippets.

@mhekel
Last active April 7, 2026 09:32
Show Gist options
  • Select an option

  • Save mhekel/13543552f7bd3166a9db14f03c8b0729 to your computer and use it in GitHub Desktop.

Select an option

Save mhekel/13543552f7bd3166a9db14f03c8b0729 to your computer and use it in GitHub Desktop.
Book Inventory App
/**
* Book Inventory App
*/
body {
background: #f06;
background: linear-gradient(45deg, #e5e5e5, #A3A3A3);
min-height: 100%;
}
span {display: inline-block;}
td {
padding: 15px;
}
.status {
border: 2px solid #64748B;
border-radius: 8px;
padding: 4px 8px;
box-shadow: 0 2px 5px rgba(52, 211, 153, 0.4);
transition: box-shadow 0.3s ease;
}
#in-progress {
background-image: linear-gradient(
to top,
#d9f99d,
#a3e635
);
}
#read {
background-image: linear-gradient(to top, #fba4af, #f43f5e);
}
#toread {
background-image: linear-gradient(to top, #C4B5FD, #8B5CF6);
}
<!-- content to be placed inside <body>…</body> -->
<table>
<tr>
<td> <span class="status" id="in-progress"> in progress </span></td>
</tr>
<tr><td><span class="status" id="read"> read </span></td></tr>
<tr><td><span class="status" id="toread">to read </span></td></tr>
</table>
</button>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment