ADY

Layout CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <title>la zona de los escombros</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="https://images7.memedroid.com/images/UPLOADED875/5e701085ee4a1.jpeg">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

        :root {
            --sky: #81e1fa;
            --sky-light: #c3e9f8;
            --sky-pale: #e8f7fd;
            --sky-deep: #5ad6fa;
            --ink: #0a7d9c;
            --ink-dark: #0a5c7a;
            --cream: #fcfaf6;
            --cream-dark: #f2ede3;
            --glow: rgba(129,225,250,0.5);
            --glow-soft: rgba(129,225,250,0.2);
        }

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

        * {
            scrollbar-width: thin;
            scrollbar-color: var(--sky) var(--sky-light);
        }
        *::-webkit-scrollbar { width: 6px; }
        *::-webkit-scrollbar-track { background: var(--sky-light); }
        *::-webkit-scrollbar-thumb { background: var(--sky); border-radius: 99px; }

        ::selection { background: var(--sky); color: white; }

        mark {
            background: linear-gradient(120deg, var(--sky-pale) 0%, var(--sky-light) 100%);
            color: var(--ink);
            font-weight: 600;
            padding: 0 3px;
            border-radius: 3px;
        }

        html {
            font-family: 'Nunito', sans-serif;
            font-size: 14px;
            color: var(--ink);
            background-color: var(--sky-pale);
        }

        body {
            background-image:
                radial-gradient(circle at 20% 30%, rgba(129,225,250,0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(90,214,250,0.1) 0%, transparent 50%),
                url('https://i.pinimg.com/736x/2f/02/3c/2f023cefd230bf01cece7184ae3c28b5.jpg');
            background-size: cover;
            background-attachment: fixed;
            background-blend-mode: screen;
            padding: 10px;
            min-height: 100vh;
        }

        .wrap {
            max-width: 920px;
            margin: 0 auto;
        }

        #container {
            background: rgba(252,250,246,0.92);
            backdrop-filter: blur(8px);
            border: 1.5px solid var(--sky);
            border-radius: 14px;
            padding: 6px;
            box-shadow:
                0 0 0 1px rgba(255,255,255,0.6) inset,
                0 4px 30px rgba(129,225,250,0.3),
                0 1px 8px rgba(0,0,0,0.06);
        }

        /* ── HEADER ── */
        #header {
            background:
                linear-gradient(160deg, rgba(129,225,250,0.25) 0%, transparent 60%),
                center / cover url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2O1j3HRPJcPXlf3d2-jggCZmhboRk1BSoEA&s');
            height: 180px;
            border-radius: 10px 10px 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            border: 1.5px solid var(--sky);
            border-bottom: none;
        }

        #header::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 60%, rgba(252,250,246,0.4));
            pointer-events: none;
        }

        p.sub {
            position: absolute;
            top: 14px;
            right: 16px;
            font-family: 'Nunito', sans-serif;
            font-style: italic;
            font-size: 30px;
            color: white;
            letter-spacing: 1px;
            text-shadow:
                0 0 12px var(--sky),
                0 0 25px var(--sky),
                -1px -1px 0 var(--sky-deep),
                1px 1px 0 var(--sky-deep);
            z-index: 2;
        }

        /* ── NAV ── */
        #nav {
            display: flex;
            gap: 4px;
            padding: 5px;
            background: linear-gradient(180deg, var(--sky-light) 0%, var(--sky) 50%, var(--sky-deep) 51%, var(--sky-pale) 100%);
            border: 1.5px solid var(--sky);
            border-top: none;
            border-bottom: none;
            margin-bottom: 5px;
        }

        #nav a { text-decoration: none; flex: 1; }

        .navbutton {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 5px 4px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.5);
            background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, var(--sky-light) 50%, var(--sky) 51%, white 100%);
            color: var(--ink);
            font-family: 'Fredoka', sans-serif;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 0.5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
            transition: all 0.15s ease;
            text-shadow: 0 0 8px rgba(255,255,255,0.8);
        }

        .navbutton:hover {
            background: linear-gradient(180deg, var(--sky-light) 0%, var(--sky) 50%, var(--sky-deep) 51%, var(--sky-pale) 100%);
            box-shadow: 0 0 8px var(--glow), inset 0 1px 0 rgba(255,255,255,0.5);
            transform: translateY(-1px);
            color: white;
        }

        .navbutton:active { transform: translateY(0); }

        /* dropdown */
        .drop { position: relative; flex: 1; }
        .drop-content {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: 10;
            background: var(--cream);
            border: 1px solid var(--sky);
            border-top: none;
            border-radius: 0 0 6px 6px;
            box-shadow: 0 4px 12px var(--glow-soft);
        }
        .drop-content a {
            display: block;
            text-align: center;
            padding: 6px 8px;
            margin: 4px;
            border-radius: 4px;
            font-family: 'Fredoka', sans-serif;
            font-size: 12px;
            color: var(--ink) !important;
            font-weight: 600;
            border: 1px solid var(--sky-light);
            text-decoration: none;
            transition: background 0.1s;
        }
        .drop-content a:hover { background: var(--sky-pale); }
        .drop:hover .drop-content { display: block; }

        /* ── INNER LAYOUT ── */
        .inner { height: auto; }

        .flex {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            width: 100%;
        }

        /* ── TITLEBAR ── */
        .titlebar {
            background: linear-gradient(180deg, var(--sky-pale) 0%, var(--sky-light) 50%, var(--sky) 51%, var(--sky-pale) 100%);
            border: 1.5px solid var(--sky);
            border-radius: 6px 6px 0 0;
            padding: 3px 8px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .titlebar h1 {
            font-family: 'Fredoka', sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: white;
            letter-spacing: 1.5px;
            font-style: italic;
            text-shadow: 0 0 8px var(--sky), -1px -1px 0 var(--sky-deep), 1px 1px 0 var(--sky-deep);
        }

        /* ── CONTENT BOX ── */
        .content {
            border: 1.5px solid var(--sky);
            border-top: none;
            border-radius: 0 0 6px 6px;
            padding: 8px;
            background: var(--cream);
            overflow-wrap: break-word;
        }

        /* ── BOX WIDTHS ── */
        @media (min-width: 769px) {
            #web-box { flex: 1.1; }
            #mini-abt { flex: 1.5; }
            #guestbox { flex: 1.2; }
            #memes-box { flex: 1; }
            #movies-box { flex: 1; }
            .inner { min-height: 530px; }
            .flex#f1 .content { height: 316px; }
            .flex#f2 .content { height: 83px; }
        }

        /* ── WEBRINGS ── */
        #webrings.content {
            overflow-y: scroll;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            justify-content: center;
        }

        #webrings.content img {
            border: 1.5px solid var(--sky-light);
            border-radius: 4px;
            transition: all 0.2s;
            filter: saturate(1.2) brightness(1.05);
        }

        #webrings.content img:hover {
            border-color: var(--sky);
            box-shadow: 0 0 10px var(--glow);
            transform: scale(1.05);
        }

        /* ── ABOUT BOX ── */
        #mini-abt .content {
            text-align: center;
            line-height: 1.6;
        }

        #mini-abt .content p { margin: 4px 0; font-size: 13px; }

        #mini-abt .content img {
            border-radius: 6px;
            filter: drop-shadow(0 0 6px var(--glow-soft));
            max-width: 100px;
            margin: 6px auto;
        }

        /* ── UPDATES ── */
        #updates.content { overflow-y: scroll; }

        /* ── MARQUEE ── */
        .marquee-bar {
            background: linear-gradient(180deg, var(--sky-light) 0%, var(--sky) 50%, var(--sky-deep) 51%, var(--sky-pale) 100%);
            border: 1.5px solid var(--sky);
            border-radius: 4px;
            padding: 3px 6px;
            margin: 5px 0;
            overflow: hidden;
            white-space: nowrap;
            font-family: 'Fredoka', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: white;
            letter-spacing: 0.5px;
            text-shadow: 0 0 8px var(--sky-deep);
        }

        .marquee-bar marquee { display: block; }

        /* ── MEMES & MOVIES ── */
        #memes-box .content,
        #movies-box .content {
            text-align: center;
            overflow-y: auto;
            /* Removed fixed height to allow horizontal scrolling */
            height: auto; 
            white-space: nowrap; /* Allows content to spread horizontally */
            overflow-x: auto; /* Enables horizontal scrolling if needed */
            padding-bottom: 10px; /* Add padding for scrollbar */
        }

        #memes-box .content p,
        #movies-box .content p {
            font-size: 12px;
            font-style: italic;
            color: var(--ink-dark);
            margin-bottom: 6px;
            white-space: normal; /* Ensure paragraphs wrap normally */
        }

        #memes-box .content img,
        #movies-box .content img {
            border-radius: 6px;
            border: 1.5px solid var(--sky-light);
            max-width: 180px; /* Set a max-width for memes/movies */
            height: 180px; /* Set a fixed height for consistency */
            object-fit: cover; /* Ensure images cover the area without distortion */
            display: inline-block; /* Arrange images horizontally */
            margin: 0 5px; /* Add some horizontal spacing between images */
            vertical-align: top; /* Align images to the top */
            transition: all 0.2s;
            filter: saturate(1.1);
        }

        #memes-box .content img:hover,
        #movies-box .content img:hover {
            border-color: var(--sky);
            box-shadow: 0 0 10px var(--glow);
            transform: scale(1.02);
        }

        /* ── GUESTBOX ── */
        #guestbox .content {
            text-align: center;
            font-size: 12px;
            padding: 8px;
        }

        /* ── FOOTER ── */
        #footer {
            background: linear-gradient(180deg, var(--sky-pale) 0%, var(--sky-light) 50%, var(--sky) 51%, var(--sky-pale) 100%);
            border: 1.5px solid var(--sky);
            border-top: none;
            border-radius: 0 0 10px 10px;
            padding: 8px;
            text-align: center;
            font-family: 'Fredoka', sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: white;
            letter-spacing: 1px;
            text-shadow: 0 0 10px var(--sky-deep), -1px -1px 0 var(--sky-deep), 1px 1px 0 var(--sky-deep);
            margin-top: 5px;
        }

        /* ── LINKS ── */
        a { color: var(--ink); font-weight: 600; text-decoration-style: dotted; }
        a:hover { color: var(--sky); text-decoration: none; }
        a:visited { color: var(--ink-dark); }

        /* ── SEPARADOR DECORATIVO ── */
        .deco-divider {
            text-align: center;
            color: var(--sky);
            font-size: 16px;
            letter-spacing: 4px;
            margin: 3px 0;
            opacity: 0.7;
            user-select: none;
        }

        /* ── MOBILE ── */
        @media (max-width: 768px) {
            body { padding: 4px; }
            #header { height: auto; min-height: 130px; flex-direction: column; }
            p.sub { position: static; margin-top: 8px; }
            .flex { flex-direction: column; }
            .flex#f1 .content, .flex#f2 .content { height: auto; min-height: 180px; }
            #memes-box .content, #movies-box .content { height: auto; min-height: 200px; }
            .navbutton { font-size: 12px; min-height: 32px; }
            #nav { flex-wrap: wrap; }
            
            /* Adjusting meme/movie display for mobile */
            #memes-box .content img,
            #movies-box .content img {
                max-width: 80%; /* Reduce max-width for smaller screens */
                height: auto; /* Allow height to adjust */
                margin: 5px auto; /* Center images and add vertical spacing */
                display: block; /* Stack images vertically */
            }
            #memes-box .content,
            #movies-box .content {
                white-space: normal; /* Allow content to wrap normally */
                overflow-x: hidden; /* Hide horizontal scrollbar if not needed */
                padding-bottom: 0;
            }
        }
    </style>
</head>
<body>
<div class="wrap">
<div id="container">

    <!-- HEADER -->
    <div id="header">
        <p class="sub">zona de escombros ✦</p>
        <a href="/home" style="text-decoration:none;">
            <div id="logo"></div>
        </a>
    </div>

    <!-- NAV -->
    <div id="nav">
        <a href="https://soyyoady.neocities.org/01"><div class="navbutton">inicio</div></a>
        <a href="https://soyyoady.neocities.org/musica"><div class="navbutton">musica</div></a>
        <a href="https://soyyoady.neocities.org/mispartidas"><div class="navbutton">mis partidas</div></a>
        <div class="drop">
            <div class="navbutton">index
                <div class="drop-content">
                    <a href="shrines">index</a>
                </div>
            </div>
        </div>
        <a href="https://soyyoady.neocities.org/sobremi"><div class="navbutton">sobre mi</div></a>
    </div>

    <!-- MAIN CONTENT -->
    <div class="inner" id="menu">

        <!-- F1: three columns -->
        <div class="flex" id="f1">

            <div id="web-box">
                <div class="titlebar"><h1>stamps y stickers</h1></div>
                <div class="content" id="webrings">
                    <img src="https://i.redd.it/6x69sdp9jzgg1.gif" alt="jack frost" width="99">
                    <img src="https://i.redd.it/t4hghf7jkaab1.gif" alt="cat dance" width="99">
                <img src="https://i.pinimg.com/originals/02/a2/39/02a2391a679700950df42f21fd35a945.gif" alt="tcg pokemon" width="99">
                </div>
            </div>

            <div id="mini-abt">
                <div class="titlebar"><h1>pagina de mis escombros</h1></div>
                <div class="content">
                    <p><mark>sean bienvenidos a mi rincon en el internet — mi blog web yipiiie!!!</mark></p>
                    <br>
                    <p>aca en esta seccion ire poniendo algunas cosillas</p>
                    <p>pondre algunos memes , peliculas y cosas random</p>
                    <br>
                    <img src="https://denpalayouts.neocities.org/christ.png" alt="deco">
                    <br><br>
                    <p style="font-size:11px; color:var(--ink-dark);">
                        this layout is mobile-responsive. heavily inspired by
                        <a href="https://toribytez.neocities.org/home">toribytez</a> on neocities!
                    </p>
                </div>
            </div>

            <div id="guestbox">
                <div class="titlebar"><h1>comments</h1></div>
                <div class="content">
                    <p style="font-size:12px; margin: 6px auto;">
                        you can put <mark>whatever</mark> you want in here!
                    </p>
                </div>
            </div>

        </div>

        <!-- MARQUEE -->
        <div class="marquee-bar">
            <marquee>✦ hoy es un dia bueno para ver este blog ... nah es broma haz lo que quieras ;D</marquee>
        </div>

        <!-- DIVIDER -->
        <div class="deco-divider">· · · ✦ · · ·</div>

        <!-- F2: memes y peliculas -->
        <div class="flex" style="gap:5px; margin-top:0;">

            <div id="memes-box" style="flex:1;">
                <div class="titlebar"><h1>memes</h1></div>
                <div class="content">
                    <p>todos antes de la peli del mario</p>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-lxypQJfoyloTEhL0AlqnkZ1W5Ka46qHrsA&s" alt="meme">
                     <p>aquellos que derrotaron a gygas</p>
                    <img src="https://i.pinimg.com/736x/83/f5/f6/83f5f6e3731e2baa9ad8f0fbc9f8bbd7.jpg" alt="meme">
                </div>
            </div>

            <div id="movies-box" style="flex:1;">
                <div class="titlebar"><h1>algunas peliculas chidas</h1></div>
                <div class="content">
                    <p>scary movie</p>
                    <img src="https://m.media-amazon.com/images/M/MV5BZGRmMGRhOWMtOTk3Ni00OTRjLTkyYTAtYzA1M2IzMGE3NGRkXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg" alt="scary movie">
                </div>
            </div>

        </div>

    </div>

    <!-- FOOTER -->
    <div id="footer">
        zona de escombros · hecho con amor y caos ✦ 2025
    </div>

</div>
</div>
</body>
</html>