Générateur d'idées HTML

3,509 Huzaifa

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 January 2026

Jeu HTML5 Friday Night Funkin' Impostor Mod

19 November 2025

Code HTML de connexion Google et menu adaptatif

12 January 2026

Chargeur de jeux HTML : Émulateur NES avec bouton Jouer

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random HTML Ideas Generator App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            color: #333;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

.container {
            max-width: 500px;
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

h1 {
            color: #007bff;
        }

p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

.btn-generate {
            background-color: #28a745;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.btn-generate:hover {
            background-color: #218838;
        }

.idea {
            font-size: 1.5rem;
            margin-top: 40px;
        }

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

.animated {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Random HTML Ideas Generator App</h1>
        <p>Click the button below to generate a random HTML idea!</p>
        <button class="btn-generate" onclick="generateIdea()">Generate Idea</button>
        <div class="idea" id="idea"></div>
    </div>

function generateIdea() {
            const randomIndex = Math.floor(Math.random() * ideas.length);
            document.getElementById('idea').innerText = ideas[randomIndex];
            document.getElementById('idea').classList.add('animated');
            setTimeout(() => {
                document.getElementById('idea').classList.remove('animated');
            }, 2000);
        }
    </script>

CSS