cool cool. Check this out, I got my index.html, right which is my home page but I want another home page with a different athestic to the one I got; id love it to be retro like 90s, like its pretending to be windows vista you know, and the stuff on the desktop is the buttons that take you to other pages you know? heres the main home page for reference:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrackSite - Digital Collection</title>
    <link rel="icon" href="images/TrackSite.png" type="image/png">
    <style>
        :root {
            --primary-red: #e53935;
            --dark-bg: #121212;
            --light-bg: #1d1d1d;
            --text-primary: #f0f0f0;
            --text-secondary: #a0a0a0;
            --border-color: #333333;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            color: var(--text-primary);
            background: #000;
            overflow-x: hidden;
        }

        /* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 15px 30px;
            background: rgba(18, 18, 18, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-logo {
            height: 30px;
            cursor: pointer;
        }

        .info-icon {
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .info-icon:hover {
            border-color: var(--primary-red);
            color: #fff;
            transform: scale(1.1);
        }

        /* Hero Section */
        .hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            min-height: 100vh;
            position: relative;
            background: linear-gradient(145deg, var(--light-bg) 0%, var(--dark-bg) 100%);
        }

        .fade-to-black {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 250px;
            background: linear-gradient(to top, #000 0%, transparent 100%);
            pointer-events: none;
            z-index: 5;
        }

        .logo-container, .prompt, .category-buttons {
            position: relative;
            z-index: 6;
        }

        .main-logo {
            width: 100px;
            margin-bottom: 15px;
        }

        .brand-name {
            font-size: 2.5rem;
            font-weight: 800;
            letter-spacing: -1px;
            animation: fadeInUp 0.8s ease-out 0.1s both;
        }

        .brand-name span {
            color: var(--primary-red);
        }

        .prompt {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin: 35px 0 25px;
            animation: fadeInUp 0.8s ease-out 0.2s both;
        }

        .category-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            max-width: 700px;
            animation: fadeInUp 0.8s ease-out 0.3s both;
        }

        .btn {
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: 500;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background: var(--primary-red);
            border-color: var(--primary-red);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(229, 57, 53, 0.4);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 40px;
            border: 2px solid #555;
            border-radius: 20px;
            cursor: pointer;
            transition: border-color 0.3s ease;
            z-index: 10;
        }

        .scroll-indicator::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 50%;
            width: 4px;
            height: 4px;
            background: var(--text-secondary);
            border-radius: 50%;
            transform: translateX(-50%);
            animation: scroll-down 2.2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        .scroll-indicator:hover {
            border-color: var(--primary-red);
        }

        .bottom-content {
            background-color: #000;
            padding: 80px 20px 0;
        }

        .content-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .content-container h2 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-red);
            margin-bottom: 15px;
        }

        .content-container p {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text-primary);
            margin-bottom: 30px;
        }

        .content-container a {
            color: var(--primary-red);
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

        .content-container a:hover {
            opacity: 0.8;
        }

        /* Kinetic Footer with Wave Animation */
        .kinetic-footer {
            width: 100%;
            padding: 80px 0 60px;
            overflow: hidden;
            position: relative;
        }

        .binary-wave-container {
            position: relative;
            height: 140px;
            width: 100%;
        }

        .wave-line {
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            white-space: nowrap;
        }

        .wave-line span {
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
            color: var(--primary-red);
            opacity: 0.6;
            margin: 0 1px;
            will-change: transform, opacity;
        }

        .wave-line:nth-child(1) { bottom: 60px; }
        .wave-line:nth-child(2) { bottom: 40px; }
        .wave-line:nth-child(3) { bottom: 20px; }

        .duck {
            position: absolute;
            width: 60px;
            pointer-events: none;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes scroll-down {
            0% { transform: translate(-50%, 0); opacity: 0; }
            40% { opacity: 1; }
            80% { transform: translate(-50%, 15px); opacity: 0; }
            100% { opacity: 0; }
        }

        /* Mobile Responsiveness */
        @media (max-width: 600px) {
            .header { padding: 12px 15px; }
            .header-logo { height: 24px; }
            .info-icon { 
                width: 26px;
                height: 26px;
                font-size: 12px;
            }
            .main-logo { width: 70px; }
            .brand-name { font-size: 1.8rem; }
            .prompt { font-size: 0.9rem; }
            .btn { padding: 8px 20px; font-size: 0.85rem; }
            .category-buttons { 
                gap: 10px; 
                margin-bottom: 30px;
            }
            .kinetic-footer { padding: 60px 0 50px; }
            .wave-line span { font-size: 14px; margin: 0 0.5px; }
            .duck { width: 40px; bottom: 70px; }
        }
    </style>
</head>
<body>
    <header class="header">
        <img src="images/TrackSite.png" alt="TrackSite Logo" class="header-logo" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
        <div class="info-icon" onclick="showInfo()">i</div>
    </header>

    <main class="hero">
        <div class="logo-container">
            <img src="images/TrackSite.png" alt="TrackSite Logo" class="main-logo">
            <h1 class="brand-name">TRACK<span>SITE</span></h1>
        </div>
        <p class="prompt">Looking For:</p>
        <div class="category-buttons">
            <button class="btn" onclick="selectCategory('gaming')">🎮 Gaming</button>
            <button class="btn" onclick="selectCategory('extensions')">🧩 Extensions</button>
            <button class="btn" onclick="selectCategory('streaming')">📺 Streaming</button>
            <button class="btn" onclick="selectCategory('literature')">📚 Literature</button>
            <button class="btn" onclick="selectCategory('windows')">💻 Windows Utilities</button>
            <button class="btn" onclick="selectCategory('android')">📱 Android Utilities</button>
            <button class="btn" onclick="selectCategory('other')">📦 Other</button>
        </div>
        <div class="scroll-indicator" onclick="scrollToBottom()"></div>
        <div class="fade-to-black"></div>
    </main>

    <section class="bottom-content">
        <div class="content-container">
            <h2>What is TrackSite?</h2>
            <p>Welcome to TrackSite. This website was made for myself to track things, that's why it's called TrackSite. This site was designed to track things like modlists I made for games, extensions that're useful, and other apps and tweaks that're otherwise noteworthy.</p>
            <h2>What are similar sites to TrackSite?</h2>
            <p>There are certainly other sites out there similar to this one but the only one that I personally know as of now is <a href="https://fmhy.net/" target="_blank">fmhy</a>.</p>
            <h2>Why are you still reading?</h2>
            <p>This is the end of the Homepage.</p>
        </div>

        <footer class="kinetic-footer">
            <div class="binary-wave-container" id="binary-wave-container">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngall.com%2Fwp-content%2Fuploads%2F11%2FRubber-Duck-PNG-HD-Image.png&f=1&nofb=1&ipt=abb491d925741f38a4e41ffcfde5244f0e87d7f29fcfa438a957b356ff785cdd" class="duck" id="duck">
            </div>
        </footer>
    </section>

    <script>
        function selectCategory(category) {
            console.log('Navigating to:', category);
        }

        function scrollToBottom() {
            document.querySelector('.bottom-content').scrollIntoView({ behavior: 'smooth' });
        }

        function showInfo() {
            alert(`Tracksite Info

Last Site Update: 5.31.25
Site Creation Start: Early 2024`);
        }

        // Wave Animation
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('binary-wave-container');
            const duck = document.getElementById('duck');

            const lines = 3;
            const charCount = 120;
            const waveHeight = 10;
            const waveLength = 0.25;
            const waveSpeed = 0.05;
            const ampOp = 0.2;
            const lineSpacing = 20;

            const rows = [];

            for (let r = 0; r < lines; r++) {
                const line = document.createElement('div');
                line.className = 'wave-line';
                line.style.bottom = `${60 - r * lineSpacing}px`;
                container.appendChild(line);

                const spans = [];
                for (let i = 0; i < charCount; i++) {
                    const s = document.createElement('span');
                    s.textContent = Math.random() > 0.5 ? '1' : '0';
                    line.appendChild(s);
                    spans.push(s);
                }

                rows.push({ spans, offset: r * 0.7 });
            }

            let t = 0;
            function anim() {
                rows.forEach(({ spans, offset }) => {
                    spans.forEach((s, i) => {
                        const y = Math.sin(t + offset + i * waveLength) * waveHeight;
                        s.style.transform = `translateY(${y}px)`;
                        s.style.opacity = 0.6 + Math.sin(t + offset + i * waveLength) * ampOp;
                    });
                });

                // Duck bobbing animation
                const duckIndex = 60;
                const dy = Math.sin(t + rows[1].offset + duckIndex * waveLength) * (waveHeight - 4);
                duck.style.transform = `translate(-50%, ${dy - 12}px)`;

                t += waveSpeed;
                requestAnimationFrame(anim);
            }

            anim();
        });
    </script>
</body>
</html>