Skip to content

Instantly share code, notes, and snippets.

@kbrock

kbrock/Todo-list.html

Created January 16, 2026 05:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kbrock/bba404069add56ae6c901dc8e5b14ab6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kbrock/bba404069add56ae6c901dc8e5b14ab6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Todo-list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>All Out Of</title>
<style>
/* ---------- Page setup ---------- */
html, body {
margin: 0;
padding: 0;
background: #e9eef3;
}
body {
display: flex;
justify-content: center;
padding: 24px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
}
.page {
width: 5.5in;
height: 8.5in;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
padding: 0.45in 0.4in;
box-sizing: border-box;
overflow: hidden;
}
/* ---------- Title ---------- */
.title {
text-align: center;
color: #4f6f8f;
font-weight: 700;
letter-spacing: 0.12em;
font-size: 18pt;
margin-bottom: 10px;
}
.rule {
height: 1px;
background: #c8d4df;
margin-bottom: 14px;
}
/* ---------- Columns ---------- */
.columns {
column-count: 4;
column-gap: 0.18in;
height: calc(100% - 60px);
}
/* ---------- Category ---------- */
.category {
break-inside: avoid;
margin-bottom: 14px;
}
.category-title {
display: inline-block;
background: #5f7f9e;
color: #ffffff;
padding: 3px 10px 4px;
border-radius: 999px;
font-size: 8.5pt;
font-weight: 600;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
/* ---------- Items ---------- */
.item {
display: flex;
align-items: center;
font-size: 8.5pt;
color: #2f3a44;
margin-bottom: 6px;
white-space: nowrap; /* no wrapping */
}
.checkbox {
width: 10px;
height: 10px;
border: 1px solid #5f7f9e;
border-radius: 3px;
margin-right: 6px;
flex-shrink: 0;
}
.label {
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- Handwriting lines ---------- */
.lines {
margin-top: 6px;
}
.line {
height: 10px;
border-bottom: 1px solid #c8d4df;
margin-bottom: 6px;
}
/* ---------- Print ---------- */
@media print {
body {
background: none;
padding: 0;
}
.page {
box-shadow: none;
border-radius: 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="title">ALL OUT OF</div>
<div class="rule"></div>
<div class="columns">
<div class="category">
<div class="category-title">PRODUCE</div>
<div class="item"><div class="checkbox"></div><div class="label">Apples</div></div>
<div class="item"><div class="checkbox"></div><div class="label">Bananas</div></div>
<div class="item"><div class="checkbox"></div><div class="label">Spinach</div></div>
<div class="item"><div class="checkbox"></div><div class="label">Onions</div></div>
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="category">
<div class="category-title">DAIRY</div>
<div class="item"><div class="checkbox"></div><div class="label">Milk</div></div>
<div class="item"><div class="checkbox"></div><div class="label">Eggs</div></div>
<div class="item"><div class="checkbox"></div><div class="label">Cheese</div></div>
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="category">
<div class="category-title">PANTRY</div>
<div class="item"><div class="checkbox"></div><div class="label">Rice</div></div>
<div class="item"><div class="checkbox"></div><div class="label">Pasta</div></div>
<div class="item"><div class="checkbox"></div><div class="label">Olive Oil</div></div>
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="category">
<div class="category-title">OTHER</div>
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment