Mi alijo

153 703003381

Abrir en el editor Publica tu código

Recomendado

25 August 2024

Efecto de desplazamiento de GSAP

18 December 2025

Pesca en miniatura

12 July 2025

Encabezado fijo controlado por desplazamiento

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ebert's Axiom Stash</title>
    <style>
        :root {
            --space-bg: #05070a;
            --moon-light: #f0f0f0;
            --crater: #1a1c25;
            --glow: rgba(255, 255, 255, 0.4);
            --star-color: rgba(255, 255, 255, 0.8);
        }

body {
            background-color: var(--space-bg);
            /* CSS Starfield */
            background-image: 
                radial-gradient(1px 1px at 20px 30px, var(--star-color), rgba(0,0,0,0)),
                radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 50px 160px, var(--star-color), rgba(0,0,0,0)),
                radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0));
            background-size: 200px 200px;
            color: var(--moon-light);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 50px 20px;
            margin: 0;
            min-height: 100vh;
        }

h1 {
            font-weight: 200;
            letter-spacing: 6px;
            text-transform: uppercase;
            margin-bottom: 50px;
            text-shadow: 0 0 20px var(--glow);
            text-align: center;
        }

.stash-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 15px;
            width: 100%;
            max-width: 1100px;
        }

.axiom-button {
            background: var(--crater);
            border: 1px solid rgba(255, 255, 255, 0.05);
            color: var(--moon-light);
            padding: 15px;
            text-decoration: none;
            text-align: center;
            border-radius: 50%;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-size: 0.85rem;
            font-weight: 400;
            box-shadow: inset -4px -4px 10px rgba(0,0,0,0.8);
        }

.axiom-button:hover {
            background: var(--moon-light);
            color: var(--space-bg);
            transform: scale(1.1);
            box-shadow: 0 0 25px var(--glow);
            z-index: 10;
        }

/* Responsive adjustments */
        @media (max-width: 600px) {
            .stash-container { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
            h1 { font-size: 1.5rem; }
        }

/* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--space-bg); }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
    </style>
</head>
<body>

<h1>Ebert's Axiom Stash</h1>

const container = document.getElementById('stash');
        
        // Remove duplicates if any
        const uniqueLinks = [...new Set(links)];

uniqueLinks.forEach((link, index) => {
            const a = document.createElement('a');
            a.href = link;
            a.target = "_blank";
            a.className = "axiom-button";
            a.innerText = "Axiom " + (index + 1);
            container.appendChild(a);
        });
    </script>

</body>
</html>

CSS