← Back to Layouts
basic fall layout

Name: FriendRewind
Author: FriendRewind
Author: xoxo_kalii
Category: :D
Created: August 9, 2026
Comments (0)

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

<style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>🍂 Our Friend Rewind</title>

<style>

/* =====================================================
   🍂 FALL FRIEND REWIND
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Patrick+Hand&family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --cream: #fff7e8;
    --paper: #fffaf1;
    --orange: #c7652c;
    --burnt: #9e4325;
    --brown: #5a3523;
    --dark: #301d14;
    --gold: #d79a3b;
    --sage: #77805d;
    --red: #8f3d32;
    --tan: #ead4b1;
    --shadow: rgba(70, 38, 18, .20);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 20% 10%, #f5dfbd 0 2px, transparent 3px),
        radial-gradient(circle at 80% 30%, #e9c99d 0 2px, transparent 3px),
        var(--cream);
    color: var(--dark);
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

/* =====================================================
   FALLING LEAVES
   ===================================================== */

.leaf {
    position: fixed;
    top: -60px;
    z-index: 9999;
    pointer-events: none;
    font-size: 25px;
    animation: fall linear forwards;
}

@keyframes fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        transform: translateY(50vh) translateX(80px) rotate(180deg);
    }

    100% {
        transform: translateY(110vh) translateX(-100px) rotate(360deg);
        opacity: .2;
    }
}

/* =====================================================
   MAIN PAPER
   ===================================================== */

.page {
    width: min(1100px, 92%);
    margin: 45px auto;
    padding: 35px;
    background: var(--paper);
    border: 2px solid #e3c89d;
    border-radius: 30px;
    box-shadow: 0 25px 60px var(--shadow);
    position: relative;
    overflow: hidden;
}

/* little scrapbook tape */

.tape {
    position: absolute;
    width: 110px;
    height: 28px;
    background: rgba(214, 163, 92, .55);
    transform: rotate(-8deg);
    top: 20px;
    left: 50px;
}

.tape.right {
    left: auto;
    right: 50px;
    transform: rotate(8deg);
}

/* =====================================================
   HEADER
   ===================================================== */

.hero {
    min-height: 520px;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    padding: 80px 20px 50px;
}

.hero-gif {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 7px solid white;
    box-shadow: 0 12px 30px var(--shadow);
    margin-bottom: 20px;
}

.eyebrow {
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 12px;
    font-weight: 700;
}

.hero h1 {
    margin: 10px 0;
    font-family: "DM Serif Display", serif;
    font-style: italic;
    font-size: clamp(55px, 10vw, 100px);
    line-height: .9;
    color: var(--brown);
}

.hero h1 span {
    color: var(--orange);
}

.hero p {
    max-width: 600px;
    margin: 20px auto;
    color: #80624d;
    font-size: 17px;
}

.date {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 50px;
    background: #f3dfc0;
    color: var(--burnt);
    font-family: "Patrick Hand", cursive;
    font-size: 20px;
}

/* =====================================================
   GIF BANNER
   ===================================================== */

.gif-banner {
    margin: 20px 0 50px;
    height: 220px;
    overflow: hidden;
    border-radius: 25px;
    position: relative;
    background: #bd703b;
}

.gif-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
}

.gif-banner::after {
    content: "falling for our friendship 🍂";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    font-family: "DM Serif Display", serif;
    font-size: clamp(30px, 5vw, 55px);
    text-shadow: 0 3px 12px rgba(0,0,0,.4);
}

/* =====================================================
   SECTION TITLES
   ===================================================== */

.section {
    margin: 65px 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--brown);
    font-family: "DM Serif Display", serif;
    font-size: 35px;
    font-style: italic;
}

.section-title::after {
    content: "";
    height: 2px;
    flex: 1;
    background: var(--tan);
}

/* =====================================================
   STATS
   ===================================================== */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.stat {
    text-align: center;
    padding: 25px 10px;
    background: #f7ead4;
    border: 1px solid #e4c69d;
    border-radius: 20px;
    transition: .25s;
}

.stat:hover {
    transform: translateY(-6px) rotate(1deg);
}

.stat .emoji {
    font-size: 28px;
}

.stat-number {
    display: block;
    margin: 5px 0;
    color: var(--orange);
    font-size: 32px;
    font-weight: 700;
}

.stat-label {
    color: #795c46;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =====================================================
   POLAROID MEMORY GRID
   ===================================================== */

.memories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.polaroid {
    padding: 12px 12px 20px;
    background: white;
    box-shadow: 0 10px 22px rgba(50, 30, 15, .18);
    transition: .3s;
}

.polaroid:nth-child(1) {
    transform: rotate(-3deg);
}

.polaroid:nth-child(2) {
    transform: rotate(2deg);
}

.polaroid:nth-child(3) {
    transform: rotate(-1deg);
}

.polaroid:nth-child(4) {
    transform: rotate(2deg);
}

.polaroid:nth-child(5) {
    transform: rotate(-2deg);
}

.polaroid:nth-child(6) {
    transform: rotate(3deg);
}

.polaroid:hover {
    transform: translateY(-12px) rotate(0);
    box-shadow: 0 20px 35px rgba(50,30,15,.25);
}

.polaroid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.polaroid h3 {
    margin: 15px 5px 2px;
    font-family: "Patrick Hand", cursive;
    color: var(--brown);
    font-size: 23px;
}

.polaroid p {
    margin: 0 5px;
    color: #80624d;
    font-size: 12px;
}

/* =====================================================
   FAVORITE MEMORY
   ===================================================== */

.favorite {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    padding: 25px;
    background: #efddbd;
    border-radius: 25px;
    border: 1px solid #ddbf91;
}

.favorite img {
    width: 100%;
    border-radius: 18px;
}

.favorite h2 {
    font-family: "DM Serif Display", serif;
    font-size: 38px;
    color: var(--brown);
    margin-top: 0;
}

.favorite p {
    color: #735541;
    line-height: 1.8;
}

/* =====================================================
   FRIENDSHIP AWARDS
   ===================================================== */

.awards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.award {
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff7e8;
    border: 2px dashed #d7b27b;
    border-radius: 18px;
    transition: .2s;
}

.award:hover {
    background: #f7e6ca;
    transform: scale(1.02);
}

.award-icon {
    font-size: 38px;
}

.award h3 {
    margin: 0;
    color: var(--brown);
}

.award p {
    margin: 4px 0 0;
    color: #856852;
    font-size: 13px;
}

/* =====================================================
   PLAYLIST
   ===================================================== */

.playlist {
    background: #5a3523;
    color: white;
    padding: 30px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}

.playlist::before {
    content: "♫";
    position: absolute;
    right: 25px;
    top: -15px;
    font-size: 150px;
    opacity: .08;
}

.playlist h2 {
    font-family: "DM Serif Display", serif;
    font-size: 35px;
    margin-top: 0;
}

.song {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.song:last-child {
    border-bottom: none;
}

.song-number {
    color: #e1a85b;
    font-weight: bold;
}

.song-title {
    font-weight: 600;
}

.song-artist {
    margin-left: auto;
    color: #d9c1a9;
    font-size: 13px;
}

/* =====================================================
   QUOTE
   ===================================================== */

.quote {
    text-align: center;
    padding: 55px 25px;
}

.quote .leaf {
    font-size: 40px;
}

.quote blockquote {
    margin: 0;
    font-family: "DM Serif Display", serif;
    font-style: italic;
    color: var(--brown);
    font-size: clamp(30px, 5vw, 48px);
}

.quote cite {
    display: block;
    margin-top: 20px;
    color: var(--orange);
    font-family: "Patrick Hand", cursive;
    font-size: 22px;
}

/* =====================================================
   FOOTER
   ===================================================== */

.footer {
    text-align: center;
    padding: 35px 0 15px;
    border-top: 1px solid #dfc39a;
    color: #8b6b52;
    font-family: "Patrick Hand", cursive;
    font-size: 21px;
}

.footer span {
    color: var(--orange);
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 800px) {

    .page {
        width: 95%;
        padding: 20px;
        margin: 15px auto;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .memories {
        grid-template-columns: 1fr 1fr;
    }

    .favorite {
        grid-template-columns: 1fr;
    }

    .awards {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 550px) {

    .hero {
        min-height: 430px;
    }

    .memories {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .song-artist {
        display: none;
    }

}

</style>
</head>


<body>

<!-- 🍂 Falling leaves are generated by JavaScript -->

<main class="page">

    <div class="tape"></div>
    <div class="tape right"></div>


    <!-- ================= HERO ================= -->

    <section class="hero">

        <div>

            <!-- Fall GIF -->
            <img
                class="hero-gif"
                src="https://media.tenor.com/images/0e0b7e9a4b1f8c7f9c7c4d0f7e4a9f8f/tenor.gif"
                alt="fall leaves">

            <div class="eyebrow">
                our friendship archive
            </div>

            <h1>
                Friend<br>
                <span>Rewind</span>
            </h1>

            <p>
                a little scrapbook of the people,
                memories, laughs and chaos that made
                this year unforgettable.
            </p>

            <div class="date">
                🍁 September — November 🍁
            </div>

        </div>

    </section>


    <!-- ================= GIF BANNER ================= -->

    <div class="gif-banner">

        <!-- Replace this URL with any fall GIF you love -->
        <img
            src="https://media.tenor.com/images/6d9f1b5f7e5d4a5c3c5d7a5d3b8d3e4f/tenor.gif"
            alt="Autumn leaves">

    </div>


    <!-- ================= STATS ================= -->

    <section class="section">

        <h2 class="section-title">
            🍂 friendship statistics
        </h2>

        <div class="stats">

            <div class="stat">
                <div class="emoji">😂</div>
                <span class="stat-number">847</span>
                <span class="stat-label">inside jokes</span>
            </div>

            <div class="stat">
                <div class="emoji">📸</div>
                <span class="stat-number">326</span>
                <span class="stat-label">photos taken</span>
            </div>

            <div class="stat">
                <div class="emoji">☕</div>
                <span class="stat-number">42</span>
                <span class="stat-label">coffee runs</span>
            </div>

            <div class="stat">
                <div class="emoji">💬</div>
                <span class="stat-number">∞</span>
                <span class="stat-label">conversations</span>
            </div>

        </div>

    </section>


    <!-- ================= MEMORIES ================= -->

    <section class="section">

        <h2 class="section-title">
            📸 our favorite memories
        </h2>

        <div class="memories">

            <article class="polaroid">

                <img
                    src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=700&q=80"
                    alt="Autumn forest">

                <h3>that one fall day 🍂</h3>
                <p>we had absolutely no idea where we were going.</p>

            </article>


            <article class="polaroid">

                <img
                    src="https://images.unsplash.com/photo-1506452819137-0422416856b8?auto=format&fit=crop&w=700&q=80"
                    alt="Autumn leaves">

                <h3>leaf pile era</h3>
                <p>zero regrets. maybe some leaves in our shoes.</p>

            </article>


            <article class="polaroid">

                <img
                    src="https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&w=700&q=80"
                    alt="Forest">

                <h3>forest adventures 🌲</h3>
                <p>the playlist was questionable but the vibes were perfect.</p>

            </article>


            <article class="polaroid">

                <img
                    src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?auto=format&fit=crop&w=700&q=80"
                    alt="Fall trees">

                <h3>golden hour</h3>
                <p>probably our most photogenic five minutes ever.</p>

            </article>


            <article class="polaroid">

                <img
                    src="https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=700&q=80"
                    alt="Cozy fall">

                <h3>cozy season ☕</h3>
                <p>hoodies, snacks and talking until way too late.</p>

            </article>


            <article class="polaroid">

                <img
                    src="https://images.unsplash.com/photo-1507371341162-763b5e419408?auto=format&fit=crop&w=700&q=80"
                    alt="Autumn road">

                <h3>random adventures</h3>
                <p>no plan. just vibes. somehow it worked.</p>

            </article>

        </div>

    </section>


    <!-- ================= FAVORITE MEMORY ================= -->

    <section class="section">

        <h2 class="section-title">
            🧡 memory of the season
        </h2>

        <div class="favorite">

            <img
                src="https://images.unsplash.com/photo-1507371341162-763b5e419408?auto=format&fit=crop&w=900&q=80"
                alt="Autumn road">

            <div>

                <h2>
                    "we should do this again."
                </h2>

                <p>
                    Somehow the completely unplanned days always
                    became our favorite ones. This one started with
                    a random walk and ended with us laughing about
                    things that probably weren't even funny.
                </p>

                <p>
                    <strong>Rating:</strong> ⭐⭐⭐⭐⭐
                </p>

            </div>

        </div>

    </section>


    <!-- ================= AWARDS ================= -->

    <section class="section">

        <h2 class="section-title">
            🏆 friendship awards
        </h2>

        <div class="awards">

            <div class="award">
                <div class="award-icon">😂</div>
                <div>
                    <h3>Most Likely To Make Everyone Laugh</h3>
                    <p>the group comedian.</p>
                </div>
            </div>

            <div class="award">
                <div class="award-icon">☕</div>
                <div>
                    <h3>Most Likely To Suggest Coffee</h3>
                    <p>coffee is basically a personality trait.</p>
                </div>
            </div>

            <div class="award">
                <div class="award-icon">📸</div>
                <div>
                    <h3>Official Photographer</h3>
                    <p>somehow has 700 pictures of everyone.</p>
                </div>
            </div>

            <div class="award">
                <div class="award-icon">🧡</div>
                <div>
                    <h3>Best Hype Person</h3>
                    <p>always knows exactly what to say.</p>
                </div>
            </div>

        </div>

    </section>


    <!-- ================= PLAYLIST ================= -->

    <section class="section">

        <div class="playlist">

            <h2>🍁 the autumn playlist</h2>

            <div class="song">
                <span class="song-number">01</span>
                <span class="song-title">Autumn Leaves</span>
                <span class="song-artist">Artist Name</span>
            </div>

            <div class="song">
                <span class="song-number">02</span>
                <span class="song-title">Golden Hour</span>
                <span class="song-artist">Artist Name</span>
            </div>

            <div class="song">
                <span class="song-number">03</span>
                <span class="song-title">Sweater Weather</span>
                <span class="song-artist">Artist Name</span>
            </div>

            <div class="song">
                <span class="song-number">04</span>
                <span class="song-title">Cardigan</span>
                <span class="song-artist">Artist Name</span>
            </div>

            <div class="song">
                <span class="song-number">05</span>
                <span class="song-title">Our Song</span>
                <span class="song-artist">Artist Name</span>
            </div>

        </div>

    </section>


    <!-- ================= QUOTE ================= -->

    <section class="quote">

        <blockquote>
            "Some people make the seasons
            feel a little warmer."
        </blockquote>

        <cite>
            — us, probably 🍂
        </cite>

    </section>


    <!-- ================= FOOTER ================= -->

    <footer class="footer">

        made with <span>♥</span>,
        too many photos,
        and a suspicious amount of pumpkin spice 🎃

        <br>

        <span>until the next rewind...</span>

    </footer>

</main>


<script>

/* =====================================================
   🍂 ANIMATED FALLING LEAVES
   ===================================================== */

const leafTypes = ["🍂", "🍁", "🍃", "🍂", "🍁"];

function createLeaf() {

    const leaf = document.createElement("div");

    leaf.className = "leaf";

    leaf.textContent =
        leafTypes[Math.floor(Math.random() * leafTypes.length)];

    leaf.style.left =
        Math.random() * 100 + "vw";

    leaf.style.fontSize =
        (16 + Math.random() * 25) + "px";

    leaf.style.animationDuration =
        (5 + Math.random() * 7) + "s";

    leaf.style.animationDelay =
        Math.random() * 2 + "s";

    document.body.appendChild(leaf);

    setTimeout(() => {
        leaf.remove();
    }, 14000);
}

/* Create leaves continuously */

setInterval(createLeaf, 650);


/* Create some immediately */

for (let i = 0; i < 15; i++) {
    setTimeout(createLeaf, i * 250);
}

</script>

</body>
</html></style>