Bubble

Pastel Y2K vibes: puffy blocks, polka dots and little hearts.

0 uses · 0 likes

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

See the CSS

/* Bubble */
body.zbr-page { background-attachment: fixed; }
body.zbr-page::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background-image: radial-gradient(#fff 1.5px, transparent 1.5px);
  background-size: 24px 24px; opacity: .7;
}
.zbr-card {
  border: 3px solid #fff;
  border-radius: 36px;
  backdrop-filter: none;
  box-shadow: 0 6px 0 #ff6ec7, 0 18px 36px rgba(255, 110, 199, .25);
}
.zbr-box-title { font-size: 1.4rem; font-weight: 800; color: #ff6ec7; line-height: 1.1; }
.zbr-box-title::before { content: '✿ '; }
.zbr-box-profile::before, .cols-1 .zbr-card::before {
  content: '⋆ ˚｡⋆୨♡୧⋆ ˚｡⋆'; display: block; text-align: center; color: #ff6ec7; letter-spacing: 3px; margin-bottom: 6px;
}
.zbr-avatar { border: 4px solid #fff; box-shadow: 0 4px 0 #ff6ec7; }
.zbr-name { font-size: 2.2rem; font-weight: 800; }
.zbr-link {
  background: none; border: 0; border-radius: 999px;
  padding: 8px 14px; font-weight: 700; color: #5b2a86;
}
.zbr-link::before { content: '♡ '; color: #ff6ec7; }
.zbr-link:hover { background: #fff; color: #5b2a86; transform: none; }
.zbr-link:hover::before { content: '♥ '; }
.zbr-table th { color: #ff6ec7; opacity: 1; font-weight: 700; }
.zbr-table th, .zbr-table td, .zbr-comment { border-color: rgba(255, 110, 199, .25); }
.zbr-friend img, .zbr-friend .zbr-noavatar { border-radius: 50%; border: 3px solid #fff; }
.zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; }
.zbr-noavatar { background: #ff6ec7; }
.zbr-online { color: #16a34a; }
.zbr-wall-form { border-bottom: 2px dotted #ff6ec7; }
.zbr-btn { background: #ff6ec7; color: #fff; font-weight: 800; box-shadow: 0 4px 0 #d63f9b; }
.zbr-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #d63f9b; filter: none; }