Sticky notes pinned to a cork board, each one a little crooked.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Corkboard */
html, body { overflow-x: clip; }
body.zbr-page {
background:
radial-gradient(circle at 20% 30%, rgba(90, 55, 20, .35) 0 2px, transparent 3px) 0 0 / 37px 41px,
radial-gradient(circle at 70% 60%, rgba(255, 220, 160, .4) 0 2px, transparent 3px) 0 0 / 53px 47px,
radial-gradient(circle at 40% 80%, rgba(90, 55, 20, .3) 0 1.5px, transparent 2.5px) 0 0 / 29px 31px,
#b98a56;
}
.zbr-col { gap: 26px; }
.zbr-card {
position: relative; padding-top: 38px; backdrop-filter: none; border-radius: 2px;
background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%);
box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 5px 12px 16px rgba(60, 35, 10, .35);
}
.zbr-col > .zbr-card:nth-child(odd) { transform: rotate(-1.2deg); }
.zbr-col > .zbr-card:nth-child(even) { transform: rotate(1deg); }
.zbr-col > .zbr-card:nth-child(3n) { background-color: #ffc2d4; }
.zbr-col > .zbr-card:nth-child(3n+2) { background-color: #b9ecff; }
/* the pin */
.zbr-card::after {
content: ''; position: absolute; top: 10px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #ff9a90, #d9312b 55%, #7a1210);
box-shadow: 2px 5px 5px rgba(0, 0, 0, .4);
}
.zbr-box-title { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.zbr-avatar { border: 4px solid #fff; border-radius: 2px; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); transform: rotate(-2deg); }
.zbr-name { font-size: 2.1rem; font-weight: 700; }
.zbr-bio, .zbr-text { font-size: 1.1rem; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 7px 0; font-weight: 700; font-size: 1.1rem; }
.zbr-link::before { content: '☞ '; }
.zbr-link:hover { background: none; color: var(--accent); transform: none; text-decoration: wavy underline; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(43, 36, 21, .28); border-top-style: dashed; }
.zbr-table th { opacity: 1; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border: 3px solid #fff; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); }
.zbr-noavatar { background: #e8590c; }
.zbr-online { color: #166534; }
.zbr-btn { background: #b3261e; color: #fff; border-radius: 2px; }
.zbr-views { opacity: 1; color: #2b1a08; font-weight: 700; font-size: 1rem; }
