Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Minecraft

Author: Def3ct
Category: Games
Created: November 19, 2025
Dig it
Comments (0)

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

<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    --mc-grass: #7cb342;
    --mc-stone: #757575;
    --mc-stone-dark: #2a2a2a;
}

/* --- 0. ANIMATIONS (ACTIVE) --- */
@keyframes mc-bob { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes mc-glint { 0% { text-shadow: 2px 2px 0 #000; color: #FFFF55; } 50% { text-shadow: 0 0 5px #AA00AA; color: #FF55FF; } 100% { text-shadow: 2px 2px 0 #000; color: #FFFF55; } }
@keyframes mc-shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }

/* --- 1. BACKGROUND --- */
body, body.profile-page {
    background-color: #000 !important;
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_691d2710446cd9.10066319.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    font-family: 'VT323', monospace !important;
    color: #FFF !important;
}
#bg-video, .video-background, #canvas { display: none !important; }

/* --- 2. MAIN CONTAINER --- */
.master-container { background: rgba(0,0,0,0.75) !important; padding: 20px !important; }
.profile {
    background-color: #757575 !important;
    background-image: linear-gradient(45deg, #616161 25%, transparent 25%, transparent 75%, #616161 75%), linear-gradient(45deg, #616161 25%, transparent 25%, transparent 75%, #616161 75%) !important;
    background-size: 20px 20px !important; background-position: 0 0, 10px 10px !important;
    border: 4px solid #000 !important; box-shadow: inset 0 0 0 4px #9e9e9e !important; padding: 15px !important;
}

/* --- 3. HEADER FIX (RESIZED) --- */
.myspace-header, .main-header {
    background-color: #000 !important;
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_691d287166ed29.11739803.webp') !important;
    background-repeat: no-repeat !important;
    
    /* FIX: Align to top, cover width */
    background-position: center top !important; 
    background-size: cover !important;
    
    /* FIX: Reasonable height */
    height: 180px !important; 
    min-height: 180px !important;
    
    border-bottom: 4px solid #000 !important;
    display: block !important;
    position: relative !important;
}

.myspace-header h1, .myspace-header .logo { display: none !important; }

/* Navbar Strip */
.top-nav, .main-nav-wrapper, nav {
    background: #111 !important;
    background-image: none !important;
    border-bottom: 4px solid #000 !important;
    opacity: 0.9 !important; /* Slight transparency */
}

/* --- 4. SECTIONS & CONTENT --- */
.general-about, .mood, .contact, .url-info, .table-section, .photos-preview, .blog-preview, .blurbs, .friends, .profile-info {
    background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 25px !important;
}
.heading, h4, .section-header {
    background: var(--mc-grass) !important;
    background-image: linear-gradient(0deg, transparent 50%, rgba(0,0,0,0.1) 50%) !important;
    background-size: 4px 4px !important;
    color: #FFF !important; text-shadow: 2px 2px 0 #000 !important; border: 2px solid #000 !important; border-bottom: none !important; padding: 5px 10px !important; font-size: 24px !important;
}
.general-about .details, .mood, .contact, .url-info, .table-section .details-table, .table-section .inner, .photos-preview .inner, .blog-preview, .blurbs .inner, .friends-grid, .friends .inner, .friends#comments .inner {
    background: var(--mc-stone-dark) !important; border: 2px solid #000 !important; padding: 15px !important; color: #DDD !important;
}

/* --- 5. TABLES --- */
table, tr, td, th { background: transparent !important; border-color: #444 !important; }
.table-section .details-table td { border-bottom: 2px solid #444 !important; color: #FFF !important; }
.friends#comments .comments-table td { border-bottom: 2px solid #555 !important; color: #FFF !important; }
.table-section a:hover, .friends#comments a:hover { animation: mc-glint 1s infinite alternate !important; }

/* --- 6. COMPONENT ANIMATIONS --- */
.contact a, .url-info a, .main-nav a, .nav a {
    display: inline-block !important; background: #757575 !important; border: 2px solid #000 !important;
    box-shadow: inset 2px 2px 0 #9e9e9e, inset -2px -2px 0 #424242, 0 4px 0 #000 !important;
    color: #FFF !important; text-shadow: 1px 1px 0 #000 !important; padding: 6px 12px !important; margin: 2px 2px 6px 2px !important;
    transition: all 0.1s !important; transform: translateY(0) !important;
}
.contact a:hover, .url-info a:hover, .main-nav a:hover, .nav a:hover {
    background: #9e9e9e !important; color: #FFFF55 !important;
}
.contact a:active, .url-info a:active, .main-nav a:active, .nav a:active {
    transform: translateY(4px) !important; box-shadow: inset 2px 2px 0 #424242, inset -2px -2px 0 #9e9e9e, 0 0 0 #000 !important;
}

.general-about .profile-pic img {
    border: 4px solid #5d4037 !important; background: #000 !important; box-shadow: 0 4px 0 rgba(0,0,0,0.5) !important;
    animation: mc-bob 3s ease-in-out infinite !important;
}

.friends-grid .person:hover img, .photos-preview img:hover {
    animation: mc-shake 0.2s ease-in-out infinite !important; cursor: pointer !important;
}

footer { background: #000 !important; border-top: 4px solid #555 !important; color: #666 !important; }</style>