Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Bikini Bottom Bash

Author: Def3ct
Category: Animation
Created: June 14, 2025
A true under-the-sea experience!
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
/* -- (1) THEME VARIABLES & KEYFRAMES -- */
:root {
    --sb-wallpaper: url('https://friendrewind.com/layouts/img/wallhaven-exjkwr-min.jpg');
    --sb-font: 'Arial Black', Gadget, sans-serif;
    --sb-yellow: #FFF200;
    --sb-blue: #00AEEF;
    --sb-pink: #FF69B4;
    --sb-brown: #A0522D;
    --sb-text: #63431E;
    --bubble-bg: rgba(0, 174, 239, 0.5);
    --bubble-border: rgba(255, 255, 255, 0.8);
    --bubble-highlight: url('https://friendrewind.com/layouts/img/tumblr_mlvuj1YW6A1sp5292o1_500.gif');
    --sb-bubble-overlay: url('https://i.pinimg.com/originals/78/0e/fa/780efa1db0e732df6f4d2ebff9be3c90.gif');
}

/* Force full viewport background */
html, body {
    background-color: var(--sb-blue) !important;
    background-image: var(--sb-wallpaper) !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any potential overlay elements */
body > *:not(.profile):not(script):not(style):not(link) {
    background: transparent !important;
}

/* Target specific common container classes that might have white backgrounds */
.container, 
.wrapper, 
.main-content, 
.content, 
.profile-container,
.row,
.col,
[class*="container"],
[class*="wrapper"],
main,
main > div,
.row.profile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove any potential overlays */
.overlay,
.modal-backdrop,
[class*="overlay"],
[class*="backdrop"] {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

@keyframes float {
    0% { transform: translatey(0px); }
    50% { transform: translatey(-5px); }
    100% { transform: translatey(0px); }
}

/* -- (2) GENERAL PAGE SETUP & BUBBLE OVERLAY -- */
body {
    font-family: var(--sb-font) !important;
    font-size: 14px !important;
    color: var(--sb-text) !important;
    text-shadow: 1px 1px 0px white !important;
}

/* Floating Bubble Overlay Effect */
html::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--sb-bubble-overlay);
    background-size: 800px;
    opacity: 0.2;
    pointer-events: none;
    z-index: 1;
}

/* -- (3) BUBBLE "WINDOW" FRAME FOR MODULES -- */
.contact, .url-info, .table-section, .tunes, 
.blog-preview, .blurbs, .friends, #comments {
    background: var(--bubble-bg) !important;
    border: 3px solid var(--bubble-border) !important;
    border-radius: 50% / 40%;
    margin: 30px auto !important;
    padding: 20px !important;
    animation: float 4s ease-in-out infinite;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    position: relative;
    z-index: 2;
    max-width: 90%;
}

/* Bubble Shine Effect */
.contact::before, .url-info::before, .table-section::before, 
.tunes::before, .blog-preview::before, .blurbs::before, 
.friends::before, #comments::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 10%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background-image: var(--bubble-highlight);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    transform: rotate(-25deg);
}

/* -- (4) SPONGEBOB STYLE TITLE BAR -- */
.contact .heading, .url-info .heading, .table-section .heading, 
.tunes .heading, .blog-preview h4, .blurbs .heading, 
.friends .heading, #comments .heading {
    background: none !important;
    color: var(--sb-yellow) !important;
    font-weight: bold !important;
    font-size: 24px !important;
    text-shadow: 2px 2px 0px var(--sb-brown) !important;
    text-align: center;
    padding: 10px !important;
    margin: 0 0 15px 0 !important;
    border: none !important;
    height: auto !important;
    line-height: normal !important;
}

/* -- (5) INNER CONTENT & LINKS -- */
.contact .inner, .url-info p, .table-section .inner, 
.tunes .inner, .blog-preview .inner, .blurbs .inner, 
.friends .inner, #comments .inner {
    padding: 15px !important;
    color: white !important;
    text-shadow: 1px 1px 2px #000 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 15px;
}

/* Profile specific elements */
.profile-name, .profile-username, .profile-bio {
    color: white !important;
    text-shadow: 1px 1px 3px #000 !important;
}

.profile-stats {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 15px !important;
    border-radius: 15px;
    margin: 10px 0 !important;
}

/* Links */
a {
    color: var(--sb-yellow) !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--sb-pink) !important;
    text-decoration: underline !important;
}

/* Buttons */
button, .btn, input[type="submit"] {
    background: var(--sb-yellow) !important;
    color: var(--sb-brown) !important;
    border: 2px solid white !important;
    border-radius: 20px !important;
    padding: 5px 15px !important;
    font-weight: bold !important;
    text-shadow: none !important;
    transition: all 0.3s ease !important;
}

button:hover, .btn:hover, input[type="submit"]:hover {
    background: var(--sb-pink) !important;
    color: white !important;
    transform: scale(1.05);
}

/* Form elements */
input, textarea, select {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 2px solid white !important;
    border-radius: 15px !important;
    padding: 8px 12px !important;
    margin: 5px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact, .url-info, .table-section, .tunes, 
    .blog-preview, .blurbs, .friends, #comments {
        border-radius: 30px !important;
        padding: 15px !important;
        margin: 20px auto !important;
    }
    
    .contact .heading, .url-info .heading, .table-section .heading, 
    .tunes .heading, .blog-preview h4, .blurbs .heading, 
    .friends .heading, #comments .heading {
        font-size: 20px !important;
    }
}</style>