Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
No preview image available
Days Layout

Author: daquon
Category: Aesthetic
Created: March 29, 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>GALAXY RETRO PROFILE</title>
    <style>
        /* --- CSS STYLES --- */
        
        /* Added custom cursor to the body! */
        body {
            background-color: #000000;
            color: #ffcc99; /* Light orange text */
            font-family: 'Courier New', Courier, monospace;
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* Hide horizontal scrollbar */
            cursor: url('https://cur.cursors-4u.net/symbols/sym-1/sym46.cur'), auto; 
        }

        /* Ensuring the cursor stays custom even when hovering over links/images */
        a, img {
            cursor: url('https://cur.cursors-4u.net/symbols/sym-1/sym46.cur'), pointer;
        }

        /* Moving galaxy container */
        #galaxy-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1; /* Place behind all content */
        }

        /* Styles for stars generated by JS */
        .star {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
        }

        /* Main content structure */
        .content-wrapper {
            width: 800px;
            margin: 20px auto;
        }

        .header {
            background-color: #008080; /* Teal background */
            color: #ffffff;
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            padding: 10px;
            border: 3px solid #00cccc;
            margin-bottom: 10px;
        }

        /* Style for our new retro marquee */
        .retro-marquee {
            background-color: rgba(0, 128, 128, 0.4);
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            padding: 5px;
            border: 1px dashed #ff9966;
            margin-bottom: 20px;
        }

        .main-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        /* Photo box styles */
        .photo-box, .banner-box, .info-block, .counter-box {
            background-color: rgba(0, 0, 0, 0.7); /* Translucent black */
            border: 3px solid #ff9966; /* Orange border */
            padding: 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .photo-box img {
            width: 300px;
            height: auto;
            border: 2px solid #ffcc99;
        }

        .banner-box img {
            width: 600px;
            height: auto;
            border: 2px solid #00cccc;
        }

        .info-block {
            width: 500px;
        }

        .counter-box {
            flex-direction: row;
            gap: 10px;
            font-weight: bold;
        }

        .count-number {
            color: #ffffff;
            border: 2px solid #ffffff;
            padding: 0 5px;
            background-color: #008080;
        }

        .netscape-badge {
            color: #00cccc;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
            border-top: 1px dashed #00cccc;
            padding-top: 10px;
            width: 100%;
        }
    </style>
</head>
<body>

    <div id="galaxy-bg"></div>

    <div class="content-wrapper">
        <div class="header">
            SPACEHEY: Galaxy Retro Profiles!
        </div>

        <marquee class="retro-marquee" scrollamount="6" direction="left">
            ★彡 Welcome to my galaxy! Make sure to sign the guestbook before you leave! 彡★
        </marquee>

        <div class="main-body">
            <div class="photo-box">
                <img src="9 (35 of 37).jpg" alt="Palm Tree Silhouette">
                <br>
                <span>My Retro Soul</span>
            </div>

            <div class="photo-box">
                <img src="DSC04866.ARW" alt="Mood Sunset Lake">
                <br>
                <span>Mood: Lake Dusk Reflection</span>
            </div>

            <div class="banner-box">
                <img src="4 (3 of 15).jpg" alt="Ocean Rocks">
                <br>
                <span>Chasing the tide.</span>
            </div>

            <div class="info-block">
                <span>Welcome to my page! Leave a message in the guestbook!</span>
            </div>

            <div class="counter-box">
                <span>Hits:</span>
                <span class="count-number">001337</span>
            </div>

            <div class="netscape-badge">
                <p>Best Viewed in Netscape Navigator 4.0 at 800x600 resolution!</p>
            </div>
        </div>
    </div>

    <script>
        // --- JAVASCRIPT ---
        function initGalaxy() {
            const galaxy = document.getElementById('galaxy-bg');
            const stars = [];
            const starCount = 200;

            // Teal and light orange colors
            const colors = ['#008080', '#00cccc', '#ff9966', '#ffcc99'];

            // Create star elements
            for (let i = 0; i < starCount; i++) {
                let star = document.createElement('div');
                star.className = 'star';
                star.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                
                let size</style>