Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind

FriendRewind

← Back to Layouts

Hello Kitty

Author: Def3ct

Category: Animation

Created: June 13, 2025

Comments (2)

HaixP 07/19/2025 4:05 AM

Does anyone know how to use this?

V4N1LLA_L4CE 05/02/2026 12:22 PM

yup! just copy the CSS and go to profile. then press "edit profile" then scroll til you see layout and paste the CSS there!

You must log in to comment.

CSS Code

<style>
/* -- (1) THEME VARIABLES & KEYFRAMES -- */
:root {
    --hk-wallpaper: url('https://w.wallhaven.cc/full/01/wallhaven-01xymv.jpg'); /* Repeating Hello Kitty pattern */
    --hk-pink-light: #FFEFF5;
    --hk-pink-hot: #FF85B2;
    --hk-pink-border: #FFB3D3;
    --hk-red-bow: #E60026;
    --hk-text: #5C3C48;
    --hk-font: 'Comic Sans MS', 'Chalkboard SE', 'Bradley Hand', cursive;
    --hk-sparkle-overlay: url('https://www.icegif.com/wp-content/uploads/2022/12/icegif-953.gif'); /* Sparkle GIF */
    --hk-bow-icon: url('https://friendrewind.com/layouts/img/pngimg.com%20-%20hello_kitty_PNG22.png'); /* Bow Icon */
}

@keyframes gentle-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* -- (2) GENERAL PAGE SETUP & SPARKLE OVERLAY -- */
body {
    background-color: var(--hk-pink-light) !important;
    background-image: var(--hk-wallpaper) !important;
    background-attachment: fixed !important;
    font-family: var(--hk-font) !important;
    font-size: 14px !important;
    color: var(--hk-text) !important;
    text-shadow: none !important;
}

/* Sparkle overlay effect */
html::after {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: var(--hk-sparkle-overlay);
   background-size: cover;
   opacity: 0.5;
   pointer-events: none;
   z-index: 100;
}

main, main > div, .container, .wrapper, .row.profile, .col {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* -- (3) CUTE "WINDOW" FRAME FOR MODULES -- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 2px solid var(--hk-pink-border) !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 15px var(--hk-pink-hot) !important;
    padding: 0 !important;
    overflow: visible !important; /* Allow bow to hang off */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* -- (4) HELLO KITTY STYLE TITLE BAR -- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading, .blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading {
    background: var(--hk-pink-hot) !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 18px !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;
    position: relative;
    text-align: center;
    height: 35px;
    line-height: 35px;
    padding: 0 10px !important;
    margin: 0 !important;
    border-bottom: 2px solid var(--hk-pink-border) !important;
    border-radius: 14px 14px 0 0;
}

/* Add Hello Kitty Bow Icon to headings */
.contact .heading::after, .url-info .heading::after, .table-section .heading::after, .tunes .heading::after, .blog-preview h4::after, .blurbs .heading::after, .friends .heading::after, #comments .heading::after {
    content: '';
    background-image: var(--hk-bow-icon);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -10px;
    top: -15px;
    width: 50px;
    height: 50px;
    transform: rotate(15deg);
}

/* -- (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: var(--hk-text) !important;
}

a {
    color: var(--hk-pink-hot) !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--hk-red-bow) !important;
    text-decoration: none !important;
    background: none !important;
}

/* -- (6) CUTE & GIRLY BUTTONS -- */
.contact a, .profile-info a {
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 14px !important;
    color: white !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) !important;
    padding: 8px 10px !important;
    margin: 5px auto !important;
    border-radius: 20px !important;
    border: 2px solid white !important;
    background: linear-gradient(to bottom, #FFB3D3, var(--hk-pink-hot)) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    transition: all 0.2s ease-in-out !important;
    width: 90%;
}

.contact a:hover, .profile-info a:hover {
    background: linear-gradient(to bottom, #FFC4DE, #FF99C2) !important;
    box-shadow: 0 0 10px white !important;
    animation: gentle-pulse 1s infinite;
}

.contact a img { display: none !important; }

/* -- (7) SPECIFIC MODULE ADJUSTMENTS -- */
.profile-info .pic img {
    border-radius: 25px !important;
    border: 4px solid var(--hk-pink-hot) !important;
    box-shadow: 0 0 10px white !important;
}

.friends-grid img {
    max-width: 75px;
    border-radius: 12px !important;
    border: 2px solid var(--hk-pink-border) !important;
    padding: 2px;
    background: white !important;
}

.details-table td {
    background: transparent !important;
    border-bottom: 1px dashed var(--hk-pink-border) !important;
    padding: 8px 5px !important;
}
.details-table tr:last-child td { border-bottom: none !important; }

/* Hide extra stuff */
#footer, .more, .badge, .online-now, .url-info {
    display: none !important;
}</style>