← Back to Layouts
Strawberry Shortcake

Name: FriendRewind
Author: FriendRewind
Author: Def3ct
Category: Animation
Created: July 8, 2025
Pink overload
Comments (1)

ma1akai 07/14/2026 4:18 AM
Omg this is so cute!!!
You must log in to comment.
CSS Code

<style>
/* --- 🍓 Universal Cursor & Font Setup 🍓 --- */
* {
    cursor: url(https://cur.cursors-4u.net/food/foo-1/foo3.cur), auto !important;
    font-family: 'Gochi Hand', cursive !important;
}

a:hover {
    cursor: url(https://cur.cursors-4u.net/food/foo-1/foo5.cur), auto !important;
}

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

<a href="https://www.cursors-4u.com/cursor/2008/12/23/strawberry.html" target="_blank" title="Strawberry"><img src="https://cur.cursors-4u.net/cursor.png" alt="Strawberry" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
/* --- 🍓 Body Background & Overlays 🍓 --- */
body {
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_686d65e1db0448.35492284.jpg') !important;
    background-color: #FFDDE1 !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #8B004B !important; /* Darker berry text */
}

/* Glitter overlay for the entire page */
html:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://friendrewind.com/uploads/gallery/1/img_686d6be5cd1a37.24947163.gif');
    opacity: 0.4; /* Increased opacity */
    pointer-events: none;
    z-index: 999;
    animation: sparkle-overlay 5s linear infinite;
}

/* NEW floating GIF in the bottom-left corner */
body:after {
    content: url('https://friendrewind.com/uploads/gallery/1/img_686d6b2455d1a3.42980324.gif');
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    pointer-events: none;
    animation: gentle-float-left 7s ease-in-out infinite;
}
</style>

<style>
/* --- 🍓 Main Content & Section Styling 🍓 --- */
main {
    background-color: rgba(255, 230, 235, 0.9) !important; /* More pink background */
    border: 5px dashed #ff1493 !important; /* Hot pink dashed border */
    box-shadow: 0 0 25px #ff69b4, 0 0 40px #ff1493 inset !important; /* Intense pink glow */
    padding: 15px !important;
    position: relative;
}

/* Remove default blue backgrounds and borders */
table, tr, td {
    background-color: transparent !important;
}

/* Style for "About Me", "Friends", etc. boxes */
.blurbs, .friendsComments, .latestBlogEntry, .friendSpace, .contactTable, .interestsAndDetails {
    background-color: rgba(255, 240, 245, 0.8) !important;
    border: 2px solid #FFB6C1 !important;
    box-shadow: 0 0 10px #FFB6C1;
}

/* Section headings */
.blurbs .heading, .friendsComments .heading, .latestBlogEntry .heading, .friendSpace .heading, .contactTable .heading, .interestsAndDetails .heading {
    font-family: 'Bangers', cursive !important;
    font-size: 28px !important;
    color: #5D2A42 !important;
    background: #FFB6C1 !important; /* Pink header background */
    text-shadow: 1px 1px 1px white;
    letter-spacing: 2px;
    border-radius: 10px;
    border: 2px solid #E55B5B !important;
    animation: pulse 2.5s infinite; /* Added pulse animation */
}
</style>

<style>
/* --- 🍓 Header & Profile Name Styling 🍓 --- */
.profile .heading {
    font-family: 'Lobster', cursive !important;
    font-size: 30px !important;
    color: white !important;
    text-shadow: 3px 3px 0px #E55B5B, 0 0 20px #ff1493 !important; /* Added pink glow */
    background-image: url('https://i.pinimg.com/originals/c7/21/23/c721235c829f2733b033c438c265696c.gif') !important;
    background-size: cover !important;
    background-position: center !important;
    border: 3px solid #FF6B6B !important;
    text-align: center;
    letter-spacing: 3px;
    padding: 10px;
    animation: gentle-float 8s ease-in-out infinite, text-flicker 4s linear infinite; /* Added text flicker */
}

/* Navigation bar styling */
nav {
    background-image: url('https://media.giphy.com/media/l41lGvinEgARjB2HC/giphy.gif') !important;
    border: 2px solid #FF6B6B;
    animation: background-pan 15s linear infinite; /* Added panning animation */
}
nav .links a {
    color: white !important;
    text-shadow: 1px 1px 2px #E55B5B;
}
</style>

<style>
/* --- 🍓 Profile Picture & Friend Icons 🍓 --- */
/* Bouncing Profile Picture */
.profile-pic {
    border-radius: 50% !important;
    border: 8px solid #FFB6C1 !important;
    padding: 5px !important;
    background: white !important;
    animation: bounce 2s ease-in-out infinite;
}

/* Friend Icons hover effect */
.friend-grid .friend img, .friends-grid .friend img {
    border: 3px solid #FFB6C1 !important;
    border-radius: 15px !important;
    transition: transform 0.3s ease-in-out;
}
.friend-grid .friend:hover img, .friends-grid .friend:hover img {
    animation: swing 0.6s ease; /* Added swing animation */
}
</style>

<style>
/* --- 🍓 Comments Section 🍓 --- */
#comments {
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_686d6678640084.32691610.gif') !important;
    background-size: cover;
    border: 2px solid #FF6B6B !important;
}
.comments-table {
    background-color: rgba(255, 255, 255, 0.6) !important;
}
#comments img {
    border-radius: 10px !important;
    border: 2px solid #FFB6C1 !important;
}
</style>

<style>
/* --- 🍓 Link & Text Styling 🍓 --- */
h1, h2, h3, h4, p {
    color: #8B004B !important;
}
a {
    color: #ff1493 !important; /* Brighter pink links */
    font-weight: bold !important;
    transition: all 0.2s ease-in-out;
}
a:hover {
    color: #8DECB4 !important; /* Mint green on hover */
    text-shadow: 1px 1px 2px #ff1493 !important;
}
</style>

<style>
/* --- 🍓 Animations 🍓 --- */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

@keyframes gentle-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

/* NEW ANIMATIONS */
@keyframes pulse {
    0% { box-shadow: 0 0 5px #ffb6c1; }
    50% { box-shadow: 0 0 20px #ff69b4; }
    100% { box-shadow: 0 0 5px #ffb6c1; }
}

@keyframes swing {
    20% { transform: rotate3d(0, 0, 1, 15deg); }
    40% { transform: rotate3d(0, 0, 1, -10deg); }
    60% { transform: rotate3d(0, 0, 1, 5deg); }
    80% { transform: rotate3d(0, 0, 1, -5deg); }
    100% { transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes text-flicker {
    0%, 100% { text-shadow: 3px 3px 0px #E55B5B, 0 0 20px #ff1493; }
    50% { text-shadow: 3px 3px 0px #E55B5B, 0 0 5px #ff1493; }
}

@keyframes background-pan {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}

@keyframes sparkle-overlay {
    0% { opacity: 0.3; }
    50% { opacity: 0.5; }
    100% { opacity: 0.3; }
}

@keyframes gentle-float-left {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-10px) rotate(-2deg); }
}
</style>

<style>
/* --- 📱 MOBILE ONLY STYLES 📱 --- */
/* This code only applies to screens 767px wide or smaller */
@media only screen and (max-width: 767px) {
    /* Hide the floating corner GIF on mobile to save space */
    body:after {
        display: none !important;
    }
    
    /* Make the main content area take up more space */
    main {
        padding: 5px !important;
        border-width: 2px !important;
    }
    
    /* Make all text smaller */
    .profile .heading {
        font-size: 24px !important;
        letter-spacing: 1px !important;
    }
    .blurbs .heading, .friendsComments .heading, .latestBlogEntry .heading, .friendSpace .heading, .contactTable .heading, .interestsAndDetails .heading {
        font-size: 22px !important;
    }
    
    p, a, li, td {
        font-size: 14px !important;
    }
    
    /* Make the profile picture smaller */
    .profile-pic {
        width: 100px !important;
        height: 100px !important;
    }
}</style>