Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Soulja Boy

Author: Def3ct
Category: Music
Created: June 28, 2025
This 2005 era layout will hit!
Comments (0)

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

<style>
/* -- 1. THEME VARIABLES & KEYFRAMES -- */
:root {
    --sb-font: 'Impact', 'Arial Black', sans-serif;
    
    /* SOULJA BOY / 2007 VIBES */
    --sb-gold: #FFD700;
    --sb-red: #FF0000;
    --sb-blue: #0000FF;
    --sb-green: #00FF00;
    --money-green: #228C22;

    --container-bg-color: rgba(0, 0, 0, 0.75);
    --text-color: #FFFFFF;
}

@keyframes colorCycle {
    0%, 100% { border-color: var(--sb-red); }
    25%      { border-color: var(--sb-blue); }
    50%      { border-color: var(--sb-gold); }
    75%      { border-color: var(--sb-green); }
}

@keyframes blink {
    50% { color: var(--sb-gold); text-shadow: 0 0 10px var(--sb-gold); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* --- 2. RESET & BASE STYLES --- */
body {
    background-image: url('https://live.staticflickr.com/2671/3810623107_1fb6e55afd_b.jpg') !important; /* NEW GALAXY WALLPAPER */
    background-attachment: fixed !important;
    background-size: cover !important; /* Changed to cover the full screen */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    font-family: var(--sb-font) !important;
    font-size: 14px !important;
    color: var(--text-color) !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
}

main, .container, .master-container {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- CURSOR --- */
/* Start https://www.cursors-4u.com */
* {
    cursor: url(https://cur.cursors-4u.net/people/peo-5/peo570.cur), auto !important;
}
/* End https://www.cursors-4u.com */


/* --- 3. MAIN CORNER GIF INJECTION --- */
body::after {
    content: '' !important;
    position: fixed !important;
    bottom: 15px !important;
    right: 15px !important;
    width: 150px !important;
    height: 150px !important;
    background: url('https://i.gifer.com/5uL.gif') no-repeat center center / contain !important; /* Bling GIF */
    z-index: 1000 !important;
    pointer-events: none !important;
}

/* --- 4. THEMED MODULE CONTAINERS --- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    border: 8px dashed red !important;
    border-radius: 0 !important; /* Sharp corners */
    background: var(--container-bg-color) !important;
    box-shadow: 10px 10px 0px #000000 !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    backdrop-filter: blur(2px) !important;
    animation: colorCycle 2s infinite linear !important;
}

/* --- 5. CORNER GIF ON EACH MODULE --- */
.contact::before, .url-info::before, .table-section::before, .tunes::before, 
.blog-preview::before, .blurbs::before, .friends::before, #comments::before {
    content: '' !important;
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    width: 50px !important;
    height: 50px !important;
    background: url('https://www.picgifs.com/graphics/s/stars/graphics-stars-232533.gif') no-repeat center center / contain !important; /* Blinking Star */
    z-index: 5 !important;
}


/* --- 6. THEMED HEADERS --- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading,
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading {
    color: var(--text-color) !important;
    font-weight: bold !important;
    font-size: 24px !important;
    text-shadow: -3px 3px 0 #000, 3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000 !important;
    height: 45px !important;
    line-height: 45px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    border-bottom: 8px solid #000000 !important;
    text-align: center !important;
    background: url('https://media.tenor.com/tZ2_t5yWAkQAAAAC/fire-flames.gif') center center/cover !important;
    animation: blink 0.5s infinite !important;
}

/* --- 7. CONTENT & LINKS --- */
.contact .inner, .url-info p, .table-section .inner, .tunes .inner,
.blog-preview, .blurbs .inner, .friends .inner, #comments .inner {
    padding: 15px !important;
    color: var(--text-color) !important;
    text-shadow: 2px 2px 2px #000;
}
.general-about .details p {
    color: var(--text-color) !important;
    text-shadow: 2px 2px 2px #000 !important;
}

a {
    color: var(--sb-gold) !important;
    text-shadow: none !important;
    text-decoration: underline !important;
    transition: none !important; /* NO SMOOTH TRANSITIONS */
    font-weight: bold !important;
}

a:hover {
    color: var(--sb-red) !important;
    animation: shake 0.2s infinite; /* Annoying shake on hover */
}

/* --- 8. FRIENDS GRID --- */
.friends-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-evenly !important;
    padding-top: 10px;
}
.friends-grid img {
    max-width: 80px !important;
    border: 5px outset var(--sb-gold) !important;
    border-radius: 10px !important;
    background: #000000 !important;
    padding: 2px !important;
    transition: none !important;
}
.friends-grid img:hover {
    transform: none !important; /* No smooth scaling */
    border-style: inset !important;
    border-color: var(--sb-red) !important;
}

/* --- 9. THEMED TABLES --- */
.details-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 4px solid #000 !important;
    background: #FFFFFF !important;
}
.details-table th, .details-table td {
    padding: 8px 10px !important;
    border: 2px dotted #000 !important;
    color: #000000 !important;
    text-shadow: none !important;
}
.details-table th {
    background: var(--sb-green) !important;
    color: #000000 !important;
    text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff !important;
}
.details-table tr:nth-child(even) td {
    background-color: var(--sb-blue) !important;
    color: white !important;
}
.details-table tr:nth-child(odd) td {
    background-color: var(--sb-red) !important;
    color: white !important;
}

/* --- 10. SCROLLBARS --- */
::-webkit-scrollbar {
    width: 15px !important;
    height: 15px !important;
}
::-webkit-scrollbar-track {
    background: var(--sb-blue) !important;
    border: 2px solid black;
}
::-webkit-scrollbar-thumb {
    background: var(--sb-gold) !important;
    border: 2px solid black;
    border-radius: 0 !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sb-red) !important;
}

/* --- 11. HEADER & NAVIGATION STYLING --- */
.main-header, .myspace-header {
    background: url('https://media.tenor.com/mAmxIS_v8CsAAAAC/money-falling.gif') !important;
    background-size: cover !important;
    border: 8px solid #000 !important;
    border-radius: 0 !important;
    margin: 10px auto !important;
    padding: 5px !important;
    width: 95% !important;
}
.main-nav a, .nav a {
    color: var(--sb-yellow) !important;
    text-shadow: -2px 2px 0 #000, 2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 !important;
    font-size: 16px !important;
    background: none !important;
}
.main-nav a:hover, .nav a:hover {
    transform: scale(1.1);
    color: var(--sb-red) !important;
}</style>