Summer Beach

A bright beach day: sunny sky, rolling waves along the bottom and soft white blocks.

0 uses · 0 likes

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

See the CSS

/* Summer Beach */
html, body { overflow-x: clip; }
body.zbr-page { background-attachment: fixed; padding-bottom: 120px; }
/* sun */
html::before {
  content: ''; position: fixed; top: 24px; right: 8vw; width: 110px; height: 110px; z-index: -2; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffbc2, #ffd23f);
  box-shadow: 0 0 0 16px rgba(255, 233, 120, .35), 0 0 70px 24px rgba(255, 220, 90, .6);
  animation: pulse 5s ease-in-out infinite alternate;
}
/* sea band with two rows of waves */
body.zbr-page::before {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 84px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 30px 100%, #7fd8e8 0 29px, transparent 30px) 0 0 / 60px 36px repeat-x,
    linear-gradient(#7fd8e8, #7fd8e8) 0 35px / 100% 49px no-repeat;
  animation: roll 6s linear infinite;
}
body.zbr-page::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 24px 100%, #2fb5cf 0 23px, transparent 24px) 0 0 / 48px 30px repeat-x,
    linear-gradient(#2fb5cf, #2fb5cf) 0 29px / 100% 27px no-repeat;
  animation: roll2 4s linear infinite reverse;
}
.zbr-card { backdrop-filter: none; border-radius: 24px; box-shadow: 0 10px 30px rgba(0, 110, 150, .22); }
.zbr-box-profile::before, .cols-1 .zbr-card::before {
  content: '🕶️ SUMMER MODE'; display: block; margin-bottom: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: var(--accent);
}
.zbr-box-title { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.zbr-box-title::before { content: '🌴 '; }
.zbr-avatar { border: 5px solid #fff; border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 110, 150, .3); }
.zbr-name { font-size: 2.1rem; font-weight: 700; }
.zbr-link { background: none; border: 0; border-radius: 12px; padding: 9px 10px; font-weight: 600; }
.zbr-link:hover { background: #fff1e0; color: var(--accent); transform: none; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(7, 59, 76, .12); }
.zbr-table th { color: #0e7490; opacity: 1; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; border: 3px solid #fff; }
.zbr-noavatar { background: #fb7185; }
.zbr-online { color: #15803d; }
.zbr-btn { background: var(--accent); color: #fff; }
.zbr-views { color: #073b4c; opacity: 1; font-weight: 600; }
@keyframes pulse { to { transform: scale(1.06); } }
@keyframes roll { to { background-position: 60px 0, 0 35px; } }
@keyframes roll2 { to { background-position: 48px 0, 0 29px; } }