Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
IDK

Author: dizzyy
Category: >:[
Created: May 12, 2026
IDK
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>Interstellar Insights | Space Blog</title>
    <style>
        /* Base Cosmic Styles */
        body {
            margin: 0;
            padding: 0;
            background-color: #0b0d17; /* Deep Space Black */
            background-image: 
                radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
            background-size: 550px 550px, 350px 350px;
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
        }

        /* Header & Navigation */
        header {
            background: rgba(11, 13, 23, 0.8);
            padding: 40px 20px;
            text-align: center;
            border-bottom: 2px solid #4a00e0;
            box-shadow: 0 0 20px #8e2de2;
        }

        header h1 {
            margin: 0;
            font-size: 3rem;
            letter-spacing: 5px;
            color: #fff;
            text-shadow: 0 0 10px #8e2de2, 0 0 20px #4a00e0;
        }

        nav {
            margin-top: 20px;
        }

        nav a {
            color: #00d4ff;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
            text-transform: uppercase;
        }

        /* Layout Grid */
        .container {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 30px;
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }

        /* Blog Post Cards */
        article {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        article:hover {
            transform: translateY(-5px);
            border-color: #00d4ff;
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
        }

        .post-meta {
            font-size: 0.8rem;
            color: #00d4ff;
            text-transform: uppercase;
        }

        article h2 {
            margin: 10px 0;
            color: #fff;
        }

        .read-more {
            display: inline-block;
            margin-top: 15px;
            color: #8e2de2;
            text-decoration: none;
            font-weight: bold;
        }

        /* Sidebar */
        aside {
            background: rgba(255, 255, 255, 0.02);
            padding: 20px;
            border-radius: 15px;
            height: fit-content;
        }

        .sidebar-section {
            margin-bottom: 30px;
        }

        .sidebar-section h3 {
            border-bottom: 1px solid #4a00e0;
            padding-bottom: 5px;
            color: #00d4ff;
        }

        /* Responsive Design */
        @media (max-width: 800px) {
            .container {
                grid-template-columns: 1fr;
            }
        }

        footer {
            text-align: center;
            padding: 40px;
            font-size: 0.9rem;
            color: #666;
        }
    </style>
</head>
<body>

    <header>
        <h1>VOYAGER BLOG</h1>
        <nav>
            <a href="#">Orbit</a>
            <a href="#">Deep Space</a>
            <a href="#">Galaxies</a>
            <a href="#">About</a>
        </nav>
    </header>

    <div class="container">
        <!-- Main Content Area -->
        <main>
            <article>
                <div class="post-meta">May 11, 2026 | Astrophotography</div>
                <h2>Capturing the Andromeda Nebula</h2>
                <p>The Andromeda Galaxy (M31) is the closest large galaxy to our Milky Way. In this post, we explore the best exposure settings and equipment to capture its swirling dust lanes from your own backyard...</p>
                <a href="#" class="read-more">Launch Post →</a>
            </article>

            <article>
                <div class="post-meta">May 05, 2026 | Missions</div>
                <h2>Mars Rover: The Search for Water</h2>
                <p>New data from the Perseverance rover suggests that the Jezero Crater once held a massive river delta. Scientists are now analyzing soil samples that could contain signs of ancient microbial life...</p>
                <a href="#" class="read-more">Launch Post →</a>
            </article>
        </main>

        <!-- Sidebar Area -->
        <aside>
            <div class="sidebar-section">
                <h3>Current Mission</h3>
                <p>Artemis III: Returning humans to the lunar surface. Status: <strong>In Preparation</strong>.</p>
            </div>
            <div class="sidebar-section">
                <h3>Top Explorers</h3>
                <ul>
                    <li>Cosmo_Cat</li>
                    <li>StarGazer99</li>
                    <li>NebulaNomad</li>
                </ul>
            </div>
        </aside>
    </div>

    <footer>
        © 2026 Interstellar Insights. All rights reserved. End of the Universe.
    </footer>

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