← Back to Layouts
Gaara

Name: FriendRewind
Author: FriendRewind
Author: Puppysweet 🐾🐾
Category: Art
Created: July 25, 2026
For a certain someone!!
Comments (3)

dirtbag 07/25/2026 2:46 PM
OMG BROOOO THIS IS SO GOOD AHHHHH I hope to reach your god-like level of coding one day XDD
The Funky Bee 07/25/2026 3:12 PM
Thank you so muchie!!
You must log in to comment.
CSS Code

<style>

/* =========================================================
   GAARA FRIENDREWIND LAYOUT
   RED + BLACK + WHITE
   ========================================================= */


/* ===== FONT ===== */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Quicksand:wght@400;500;600;700&display=swap');


/* ===== BODY ===== */

body {
    background:
        linear-gradient(rgba(90, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b7108d2b68.56866759.webp")
        no-repeat center center fixed;

    background-size: cover;
    background-position: center;

    color: white;

    font-family: 'Quicksand', sans-serif;
}


/* ===== PROFILE TITLE ===== */

.profile h1 {

    font-family: 'UnifrakturMaguntia', cursive;

    text-align: center;

    font-size: xx-large;

    color: white;

    text-shadow:
        2px 2px #000000,
        0 0 5px #8b0000,
        0 0 10px #ff2222;

}


/* ===== TOP NAVIGATION ===== */

nav .top {

    margin-top: 10px;

    background:
        linear-gradient(
            rgba(120, 0, 0, 0.45),
            rgba(0, 0, 0, 0.55)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b710742536.51130217.webp");

    background-size: cover;

    background-position: center;

    border: 1px solid white;

    border-radius: 8px;

    box-shadow:
        0 0 8px white,
        0 0 15px #8b0000,
        0 0 25px #ff2222;

    filter: brightness(1.05);

}


nav .top .left .logo {

    width: 165px;

    height: 42px;

    filter:
        drop-shadow(2px 4px 6px black)
        drop-shadow(0 0 5px #8b0000);

}


/* ===== BUTTONS + INPUTS ===== */

button,
input,
textarea {

    overflow: visible;

    background: #1a0000;

    color: white;

    border: 1px solid white;

    border-radius: 5px;

    box-shadow:
        0 0 5px black,
        0 0 8px #8b0000;

}


button:hover {

    background: #8b0000;

    color: white;

    box-shadow:
        0 0 5px white,
        0 0 12px #ff2222;

}


/* ===== NAVIGATION LINKS ===== */

nav .links {

    background-color: transparent;

    padding: 3.5px 16px;

    text-align: center;

    margin-top: 10px !important;

    margin-bottom: 10px !important;

}


nav .links a {

    text-decoration: none;

    color: white;

    text-shadow:
        0 0 2px #000000,
        0 0 2px #000000,
        0 0 4px #8b0000,
        0 0 6px #000000;

    font-size: max(0.98em, 12px);

}


nav .links a:hover {

    text-decoration: underline;

    color: #ff4444;

    text-shadow:
        0 0 5px white,
        0 0 10px #8b0000;

}


nav .links .special a {

    color: white;

}


nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after {

    content: " ♠ ";

    color: white;

}


/* ===== MAIN PROFILE ===== */

main {

    background:
        linear-gradient(
            rgba(100, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f6907940.29256573.webp");

    background-size: cover;

    background-position: center;

    border: 1px solid white;

    box-shadow:
        0 0 10px white,
        0 0 20px #8b0000,
        0 0 30px rgba(255, 0, 0, 0.35);

    border-radius: 8px;

    color: white;

    text-shadow:
        1px 1px #000000,
        0 0 3px #8b0000;

}


/* ===== FOOTER ===== */

footer {

    text-align: center;

    font-size: 70%;

    margin: 10px 0 10px;

    padding: 10px 5px;

    background:
        linear-gradient(
            rgba(100, 0, 0, 0.75),
            rgba(0, 0, 0, 0.75)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f63e9e77.16585913.webp");

    background-size: cover;

    background-position: center;

    color: white;

    border: 1px solid white;

    border-radius: 8px;

    box-shadow:
        0 0 8px white,
        0 0 12px #8b0000;

}


/* ===== GENERAL LINKS ===== */

a {

    color: white;

    text-decoration: none;

}


a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active {

    color: #ff3333;

    text-decoration: none;

    font-style: italic;

    text-shadow:
        0 0 5px white,
        0 0 8px #8b0000;

}


/* ===== COMMENTS + MUSIC TABLES ===== */

.comments-table td:first-child,
.music-table td:first-child {

    background:
        linear-gradient(
            135deg,
            #8b0000,
            #3b0000
        );

    text-align: center;

    font-weight: bold;

    width: 38%;

    color: white;

    border-radius: 6px;

    box-shadow:
        inset 2px 2px 5px rgba(255,255,255,.35),
        0 0 8px #8b0000;

}


.comments-table td,
.music-table td {

    background:
        rgba(25, 0, 0, 0.92);

    color: white;

    vertical-align: top;

    border-radius: 6px;

    box-shadow:
        inset 0 0 5px rgba(255,255,255,.15),
        0 0 5px rgba(139,0,0,.7);

}


/* ===== PROFILE SECTION HEADINGS ===== */

.profile .blurbs .heading,
.profile .friends .heading {

    background:
        linear-gradient(
            90deg,
            #000000,
            #8b0000,
            #000000
        );

    color: white;

    border-radius: 8px;

    padding: 4px 7px;

    box-shadow:
        0 0 8px white,
        0 0 10px #8b0000;

    text-shadow:
        1px 1px black;

}


/* ===== GENERAL PROFILE SECTIONS ===== */

.profile .contact,
.profile .url-info,
.profile .table-section,
.setting-section,
.home-actions {

    width: 100%;

    border: none;

    margin: 10px 0;

}


/* ===== SECTION HEADINGS ===== */

.profile .contact .heading,
.profile .table-section .heading,
.setting-section .heading,
.home-actions .heading {

    background:
        linear-gradient(
            90deg,
            #000000,
            #8b0000,
            #000000
        );

    color: white;

    padding: 4px 7px;

    box-shadow:
        0 0 5px white,
        0 0 10px #8b0000;

    border-radius: 8px;

    text-shadow:
        1px 1px black;

}


/* ===== URL INFO ===== */

.url-info {

    background:
        linear-gradient(
            rgba(100, 0, 0, 0.25),
            rgba(0, 0, 0, 0.35)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f645af46.67005124.webp");

    height: 256px;

    font-size: 0;

    background-size: cover;

    background-position: center;

    border-radius: 8px;

    border: 1px solid white !important;

    box-shadow:
        0 0 11px 4px white,
        0 0 20px #8b0000;

}


/* ===== ICONS ===== */

.icon,
.award img {

    display: inline-block;

    height: 1.4em;

    width: 1.4em;

    aspect-ratio: 1/1;

    margin: 0 0.05em 0 0.1em;

    vertical-align: -0.3em;

    color: rgba(0,0,0,0);

    filter:
        brightness(2)
        drop-shadow(0 0 3px #8b0000);

}


/* ===== DETAILS TABLE ===== */

.details-table td:first-child {

    background:
        linear-gradient(
            135deg,
            #8b0000,
            #4a0000
        );

    border-radius: 8px;

    color: white;

    font-weight: bold;

    width: 33%;

    box-shadow:
        0 0 10px #ffffff,
        inset 3px 5px #b22222,
        inset -7px -9px #220000;

    padding: 11px;

}


.details-table td {

    background:
        linear-gradient(
            135deg,
            #1a1a1a,
            #000000
        );

    color: white;

    vertical-align: top;

    border-radius: 8px;

    box-shadow:
        0 0 10px rgba(255,255,255,.25),
        inset 5px 6px rgba(255,255,255,.08),
        inset -5px -7px #3b0000;

    padding: 14px;

    text-shadow:
        1px 1px black;

}


/* ===== PROFILE INFO ===== */

.profile-info {

    background:
        linear-gradient(
            rgba(120, 0, 0, 0.25),
            rgba(0, 0, 0, 0.25)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f60616f2.00752224.webp");

    background-position: center;

    height: 120px;

    border: 1px solid white;

    border-radius: 8px;

    box-shadow:
        0 0 10px white,
        0 0 15px #8b0000;

    background-size: cover;

}


/* ===== BLURB SECTION ===== */

.profile .blurbs {

    background:
        linear-gradient(
            rgba(100, 0, 0, 0.35),
            rgba(0, 0, 0, 0.45)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f5dda432.31876237.webp");

    background-size: cover;

    background-position: center;

    border-radius: 8px;

    padding: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px #8b0000;

}


/* ===== FRIENDS SECTION ===== */

.profile .friends {

    background:
        linear-gradient(
            rgba(100, 0, 0, 0.25),
            rgba(0, 0, 0, 0.35)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f5889931.54839745.webp");

    background-size: cover;

    background-position: center;

    border-radius: 8px;

    padding: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px #8b0000;

}


/* ===== CONTACT SECTION ===== */

.profile .contact {

    background:
        linear-gradient(
            rgba(100, 0, 0, 0.25),
            rgba(0, 0, 0, 0.35)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f56eac58.53691504.webp")
        center / cover;

    padding: 8px;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px #8b0000;

}


/* ===== EXTRA PROFILE IMAGE ===== */

main::before {

    content: "";

    display: block;

    height: 90px;

    margin-bottom: 10px;

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f5396325.63765193.webp")
        center / cover;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px white,
        0 0 15px #8b0000;

}


/* ===== FRIEND IMAGES ===== */

.profile .friends .person img:not(.icon),
.comments-table td:first-child img:not(.icon) {

    max-width: 95px;

    max-height: 95px;

    display: block;

    margin: 0 auto;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 8px white,
        0 0 10px #8b0000;

    filter:
        saturate(1.15)
        contrast(1.05);

}


/* ===== FRIEND NAMES ===== */

.profile .friends .person p {

    color: white;

    font-weight: bold;

    width: 100%;

    overflow-wrap: break-word;

    word-break: break-word;

    font-size: 100%;

    text-align: center;

    text-shadow:
        1px 1px #000000,
        0 0 5px #8b0000;

}


/* ===== PROFILE PICTURE ===== */

img.pfp-fallback {

    border: 1px solid white;

    box-shadow:
        0 0 10px white,
        0 0 15px #8b0000;

    border-radius: 8px;

}


/* ===== OTHER IMAGE ===== */

.profile .table-section {

    background:
        linear-gradient(
            rgba(80, 0, 0, 0.25),
            rgba(0, 0, 0, 0.35)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f51012c1.09735008.webp")
        center / cover;

    padding: 8px;

    border-radius: 8px;

}


/* ===== SECTION ACCENT ===== */

.profile .blurbs .section h4 {

    margin: 0;

    color: white;

    text-transform: uppercase;

    text-shadow:
        1px 1px #000000,
        0 0 5px #8b0000;

}


/* ===== COUNT ===== */

.count {

    color: white;

    text-shadow:
        0 0 4px #8b0000;

}


/* ===== MORE IMAGE ACCENTS ===== */

.profile .home-actions {

    background:
        linear-gradient(
            rgba(100, 0, 0, 0.25),
            rgba(0, 0, 0, 0.4)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f4d0e5c3.17908412.webp")
        center / cover;

    padding: 8px;

    border-radius: 8px;

}


/* ===== RED + BLACK SCROLLBAR ===== */

::-webkit-scrollbar {

    width: 12px;

    background-color: #000000;

}


::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow:
        inset 0 0 6px rgba(255,255,255,0.3);

    background:
        linear-gradient(
            #8b0000,
            #300000
        );

    border: 2px solid #000000;

}


::-webkit-scrollbar-track {

    -webkit-box-shadow:
        inset 0 0 6px rgba(0,0,0,0.8);

    border-radius: 10px;

    background-color: #111111;

}


/* ===== ONLINE STATUS ===== */

.online {

    color: #ff3333;

    font-weight: bold;

    font-size: 95%;

    filter:
        saturate(1.3)
        drop-shadow(0 0 3px white);

}


/* ===== IMAGE HOVER ===== */

img {

    transition:
        transform 0.3s ease,
        filter 0.3s ease;

}


img:hover {

    transform: scale(1.03);

    filter:
        brightness(1.08)
        drop-shadow(0 0 5px #8b0000);

}


/* ===== DARK RED SCANLINES ===== */

body::after {

    content: "";

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 50%,
            rgba(120, 0, 0, 0.04) 50%
        );

    z-index: 999;

    background-size:
        100% 3px,
        3px 100%;

    pointer-events: none;

}


/* ===== FLOATING ANIMATION ===== */

.col,
main,
footer,
nav::before,
.online,
nav .links,
nav .top {

    animation:
        float 3s;

    animation-iteration-count:
        infinite;

    animation-timing-function:
        ease-in-out;

}


@keyframes float {

    0% {

        transform:
            translate(0, 0px);

    }

    50% {

        transform:
            translate(0, 5px);

    }

    100% {

        transform:
            translate(0, 0px);

    }

}


/* ===== FINAL RED GLOW ===== */

.profile .contact,
.profile .url-info,
.profile .table-section,
.profile .blurbs,
.profile .friends,
.profile-info,
main,
nav .top {

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;

}


.profile .contact:hover,
.profile .url-info:hover,
.profile .table-section:hover,
.profile .blurbs:hover,
.profile .friends:hover {

    box-shadow:
        0 0 10px white,
        0 0 20px #8b0000,
        0 0 30px rgba(255, 0, 0, 0.5);

}


/* ===== DECORATIVE GAARA IMAGE ===== */

.profile .url-info {

    position: relative;

}


.profile .url-info::after {

    content: "";

    display: block;

    position: absolute;

    right: 10px;

    bottom: 10px;

    width: 80px;

    height: 80px;

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f4967539.76001322.webp")
        center / cover;

    border-radius: 50%;

    border: 2px solid white;

    box-shadow:
        0 0 10px white,
        0 0 15px #8b0000;

}


/* ===== CONTACT DECORATION ===== */

.profile .contact::after {

    content: "";

    display: block;

    width: 100%;

    height: 70px;

    margin-top: 8px;

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f41f1575.10259329.webp")
        center / cover;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 8px #8b0000;

}


/* ===== FRIENDS DECORATION ===== */

.profile .friends::after {

    content: "";

    display: block;

    width: 100%;

    height: 80px;

    margin-top: 10px;

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a64b5f41a30b7.45883262.webp")
        center / cover;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px #8b0000;

}

</style>