Comic

Halftone dots, tilted panels, a speech bubble bio and a big POW! badge.

0 uses · 0 likes

Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.

See the CSS

/* Comic */
body.zbr-page {
  background:
    radial-gradient(circle, rgba(0, 0, 0, .18) 2px, transparent 2.5px) 0 0 / 14px 14px,
    radial-gradient(circle at center, #ffe14d 0, #ff9a1f 100%) fixed;
}
.zbr-col { gap: 26px; }
.zbr-card {
  position: relative;
  backdrop-filter: none;
  border: 4px solid #111;
  border-radius: 2px;
  box-shadow: 7px 7px 0 #111;
}
/* panels sit a little crooked, alternating */
.zbr-col > .zbr-card:nth-child(odd) { transform: rotate(-1deg); }
.zbr-col > .zbr-card:nth-child(even) { transform: rotate(.8deg); }
/* starburst badge */
.zbr-box-profile::after, .cols-1 .zbr-card::after {
  content: 'POW!'; position: absolute; top: -24px; right: -10px;
  padding: 24px 20px; background: #ff2d2d; color: #ffe14d; font-size: 1.4rem;
  -webkit-text-stroke: 1px #111;
  clip-path: polygon(50% 0, 61% 30%, 98% 20%, 72% 48%, 100% 72%, 64% 70%, 55% 100%, 42% 72%, 6% 88%, 28% 56%, 0 30%, 36% 32%);
  transform: rotate(12deg);
}
.zbr-box-title {
  font-size: 1.7rem; font-weight: 400; letter-spacing: .05em; line-height: 1;
  color: #ffe14d; -webkit-text-stroke: 1.5px #111; text-shadow: 3px 3px 0 #111;
}
.zbr-avatar { border: 4px solid #111; border-radius: 50%; }
.zbr-name {
  font-size: 2.8rem; font-weight: 400; letter-spacing: .04em; line-height: 1;
  color: #ffe14d; -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 #111;
}
/* speech bubble */
.zbr-bio {
  position: relative; opacity: 1;
  background: #fff; border: 3px solid #111; border-radius: 18px;
  padding: 8px 14px; letter-spacing: .04em;
}
.zbr-bio::after {
  content: ''; position: absolute; left: 28px; bottom: -14px;
  border: 12px solid transparent; border-top-color: #111; border-bottom: 0;
}
.zbr-text, .zbr-table, .zbr-comment-body { font-family: 'Comic Neue', 'Comic Sans MS', system-ui; font-weight: 700; }
.zbr-link {
  background: none; border: 0; border-radius: 0; padding: 6px 0;
  font-size: 1.35rem; font-weight: 400; letter-spacing: .06em; color: #111;
}
.zbr-link:hover { background: none; color: #ff2d2d; transform: translateX(4px); }
.zbr-link::before { content: '★ '; color: #ff2d2d; }
.zbr-table th { opacity: 1; color: #ff2d2d; }
.zbr-table th, .zbr-table td, .zbr-comment { border-color: #111; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border: 3px solid #111; border-radius: 50%; }
.zbr-noavatar { background: #4dd2ff; color: #111; }
.zbr-friend:nth-child(even) .zbr-noavatar { background: #ff5ea8; }
.zbr-friend b, .zbr-comment-meta a { font-family: 'Bangers', system-ui; font-weight: 400; letter-spacing: .05em; font-size: .95rem; }
.zbr-online { color: #111; }
.zbr-wall-form { border: 3px solid #111; border-radius: 14px; padding-left: 12px; background: #fff; }
.zbr-btn { background: #ff2d2d; color: #ffe14d; border: 3px solid #111; border-radius: 4px; box-shadow: 3px 3px 0 #111; font-family: 'Bangers', system-ui; font-weight: 400; font-size: 1.1rem; letter-spacing: .05em; }
.zbr-views { opacity: 1; font-size: 1.1rem; }