Ma réserve

154 703003381

Ouvrir dans l'éditeur Publiez votre code

Recommandé

1 April 2026

GN-Math : Jeux débloqués, recherchez, triez et jouez

30 January 2026

Animation de particules Canvas avec interaction à la souris

25 August 2024

Découverte des produits d'animation d'interface utilisateur

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