Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
ꪜꫀꪀꪊᦓ ᯓ𝄞 ˎˊ˗ LAYOUT

Author: venus
Category: <3
Created: June 8, 2026
mi layout heh
Comments (0)

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

<style>
<style>
          blink {
    animation: blinkingcolors 0.5s linear infinite;
}
@keyframes blinkingcolors {
    0% { color: #ff99dd; }
    50% { color: #ffffff; }
    100% { color: #ff00aa; }
}

/* --- INTERACTIVE LOADING SCREEN OVERLAY WITH GLITCH ZOOM --- */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 1000000; /* Overrides absolutely everything */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: glitchZoomLoader 1.2s cubic-bezier(0.7, 0, 0.3, 1) 2.5s forwards;
    transform-origin: center center;
    pointer-events: none;
}

/* Container for your custom loading image */
.loading-image-panel {
    width: 250px;
    height: 250px;
    border: 3px solid #ff00aa;
    box-shadow: 0 0 20px #ff00aa, inset 0 0 10px rgba(255, 0, 170, 0.5);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-image-panel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Pulsing text underneath the image */
#loading-text {
    font-family: 'Sedgwick Avenue Display', cursive !important;
    color: #ff00aa !important;
    font-size: 28px !important;
    text-shadow: 0 0 10px #ff00aa;
    letter-spacing: 2px;
    animation: textPulse 1s ease-in-out infinite alternate;
}

/* --- Loader Animation Keyframes --- */
@keyframes textPulse {
    0% { opacity: 0.4; text-shadow: 0 0 5px #ff00aa; }
    100% { opacity: 1; text-shadow: 0 0 15px #ff00aa, 0 0 25px #ff00aa; }
}

@keyframes glitchZoomLoader {
    0% { 
        opacity: 1; 
        transform: scale(1) skewX(0deg);
        filter: invert(0%) brightness(1);
        visibility: visible; 
    }
    20% { transform: scale(1.05) skewX(-3deg); filter: invert(10%) brightness(1.5); }
    40% { transform: scale(1.1) skewX(5deg); filter: invert(0%) contrast(1.2); box-shadow: 0 0 40px #00ffff; }
    60% { opacity: 1; transform: scale(1.3) skewX(-10deg); filter: invert(100%) brightness(2); }
    75% { opacity: 0.9; transform: scale(1.8) skewX(8deg); filter: invert(0%) contrast(2); }
    90% { opacity: 0.4; transform: scale(2.8) skewX(-2deg); filter: brightness(0.5); }
    100% { opacity: 0; transform: scale(4); visibility: hidden; }
}

/* --- 1. FONTS & IMPORTS --- */
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Avenue+Display&display=swap');

/* --- 2. BACKGROUND, GLOBAL FONTS & NAVIGATION --- */
body {
    background-image: url('https://files.catbox.moe/nnnr1f.jpg') !important;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: #ff66cc !important;
    font-family: 'Sedgwick Avenue Display', cursive !important;
    cursor: url('http://googleusercontent.com/image_collection/image_retrieval/12323725609616721097_0'), auto !important;
}

main, .container, .box, .panel {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid #ff00aa !important;
    box-shadow: 0 0 15px #ff00aa, inset 0 0 10px rgba(255, 0, 170, 0.5) !important;
    border-radius: 8px !important;
}

nav {
    background: rgba(0, 0, 0, 0.7) !important;
    border-bottom: 2px solid #ff00aa !important;
    box-shadow: 0 0 15px #ff00aa !important;
}
nav a {
    color: #ff00aa !important;
    text-shadow: 0 0 5px #ff00aa !important;
    font-weight: bold;
}
nav a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ff00aa !important;
}

/* 3. HEADERS & SECTION TITLES */
.heading, .item-name, h2, h3, h4 {
    background: #ff00aa !important;
    color: #ffffff !important;
    text-shadow: 0 0 5px #000 !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    border: 1px solid #ffffff !important;
}

/* 4. TOTAL FONT OVERRIDE FOR EVERYTHING */
body, main, p, span, td, th, a, table, .text, .comment, .music-player, 
.profile .left h1, .profile .blurbs .heading + div, .status, .count, .f-count {
    font-family: 'Sedgwick Avenue Display', cursive !important;
    color: #ff99dd !important;
    letter-spacing: 0.8px !important;
    text-transform: none !important;
}

a {
    color: #ff00aa !important;
    text-decoration: none;
}
a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px #ff00aa !important;
    text-decoration: underline;
}

/* 5. DEFAULT IMAGES & BORDERS */
.profile-pic img, .friend img, .contact img {
    border: 2px solid #ff00aa !important;
    box-shadow: 0 0 10px #ff00aa !important;
}

/* HARD OVERRIDE TO FIX YOUR BROKEN PROFILE PICTURE BOX: */
/* Just replace the link inside the url('') below with whatever image link you want to use! */
.profile-pic img {
    content: url('https://files.catbox.moe/xl70bf.jpeg') !important;
}

/* 6. OVERLAY EFFECTS & TIMELINE SCANLINES */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 99999;
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
}

nav a:hover, .heading:hover {
    animation: textGlitch 0.3s linear infinite;
}

@keyframes textGlitch {
    0% { text-shadow: 2px 0 0 #ff00aa, -2px 0 0 #00ffff; }
    50% { text-shadow: -2px 0 0 #ff00aa, 2px 0 0 #00ffff; }
    100% { text-shadow: 2px 0 0 #ff00aa, -2px 0 0 #00ffff; }
}

/* 7. TABLE STYLING & TRANSPARENCY OVERRIDES */
table, tr, td, 
.interests table, .interests table td, 
.comments-table, .comments-table td, 
.contact table, .contact table td,
.comment, .general-about .w-40 {
    background: rgba(0, 0, 0, 0.6) !important;
    background-image: none !important;
    color: #ff99dd !important;
}
.interests .heading, 
.profile .left table td:first-child, 
.interests table td:first-child {
    background: #ff00aa !important;
    color: #ffffff !important;
    font-weight: bold;
}
table, td, th, .comments-table {
    border: 1px solid #ff00aa !important;
}

/* Layout Restraints */
.friend img, .contact img, .profile-pic img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block !important;
}
img[src*="online.gif"], img[src*="offline.gif"] {
    width: auto !important;
    height: auto !important;
    max-width: 24px !important;
}
header, header img, .logo img {
    max-width: 100% !important;
}
blink{
animation:blinkingcolors 0.5s linear infinite}

@keyframes blinkingcolors{
0%{color:#ff99dd}
50%{color:#ffffff}
100%{color:#ff00aa}}
/* --- ANIMATION: LEFT TO RIGHT --- */
@keyframes tapeScrollLeft {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* --- ANIMATION: RIGHT TO LEFT --- */
@keyframes tapeScrollRight {
    0% { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* --- CORE STRIP STYLING --- */
.y2k-tape {
    position: fixed;
    height: 32px;
    background: #ff00aa;
    color: #000000 !important;
    font-family: Arial, sans-serif !important; 
    font-weight: 900 !important;
    font-size: 14px !important;
    line-height: 32px;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 99998; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px #ff00aa;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    pointer-events: none; 
}

/* Base span layout */
.y2k-tape span {
    display: inline-block;
    padding-right: 20px;
    text-transform: uppercase;
}

/* 1. Single Top Right Tape (-14deg tilt) - Scrolls Left */
.tape-top-right {
    top: 40px; 
    right: -80px;
    width: 130%;
    transform: rotate(-14deg);
}
.tape-top-right span {
    animation: tapeScrollLeft 8s linear infinite; /* 8s makes it faster */
}

/* 2. Bottom Pink Tape - Scrolls Left */
.tape-bottom-pink {
    bottom: 70px; 
    left: -50px;
    width: 120%;
    transform: rotate(-10deg);
    z-index: 99997; 
}
.tape-bottom-pink span {
    animation: tapeScrollLeft 8s linear infinite;
}

/* 3. Bottom Black Tape - Scrolls Right (Opposite Direction) */
.tape-bottom-black-cross {
    bottom: 25px; 
    right: -50px;
    width: 110%;
    transform: rotate(5deg);
    background: #000000;
    color: #ff00aa !important;
    border-top: 2px solid #ff00aa;
    border-bottom: 2px solid #ff00aa;
    box-shadow: 0 -4px 15px rgba(255, 0, 170, 0.3);
    z-index: 99998; 
}
.tape-bottom-black-cross span {
    animation: tapeScrollRight 8s linear infinite; /* Uses the reversed animation */
}
blink{
animation:blinkingcolors 0.5s linear infinite}

@keyframes blinkingcolors{
0%{color:#ff99dd}
50%{color:#ffffff}
100%{color:#ff00aa}}
blink{
animation:blinkingcolors 0.5s linear infinite}

@keyframes blinkingcolors{
0%{color:#ff99dd}
50%{color:#ffffff}
100%{color:#ff00aa}}
blink{
animation:blinkingcolors 0.5s linear infinite}

@keyframes blinkingcolors{
0%{color:#ff99dd}
50%{color:#ffffff}
100%{color:#ff00aa}}
blink{
animation:blinkingcolors 0.5s linear infinite}

@keyframes blinkingcolors{
0%{color:#ff99dd}
50%{color:#ffffff}
100%{color:#ff00aa}}
blink{
animation:blinkingcolors 0.5s linear infinite}

@keyframes blinkingcolors{
0%{color:#ff99dd}
50%{color:#ffffff}
100%{color:#ff00aa}}
blink{
animation:blinkingcolors 0.5s linear infinite}

@keyframes blinkingcolors{
0%{color:#ff99dd}
50%{color:#ffffff}
100%{color:#ff00aa}}
          </style>

<style>
/* code generated by the spacehey live designer [start] */
main{ background-color: rgba(0, 0, 0, 0.6) !important;}
body{ background-color: rgb(227, 227, 227) !important;}
.table-section .heading, .contact .heading{ color: rgb(255, 255, 255) !important; background-color: rgb(255, 0, 170) !important;}
.table-section, .contact{ border-color: rgba(255, 61, 183, 0.63) !important;}
/* [end] spacehey live designer */
</style></style>