Alice nel Paese delle Meraviglie by @Mariglent - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<div>Crea contenitori generici o sezioni in una pagina
<caption>Definisce didascalie all'interno di una tabella
<abbr>Inserisce abbreviazioni e acronimi
<iframe>Crea un frame all'interno di una pagina HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Design, Marketing & AI News

form 6 da finire

Le Meraviglie d’Italia (chatgpt)

servizio_fiscale.html

I Giornali sul Web

Round+ - social bar

Pagina Test-A D&D story

Real Word Counter JS

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Storia di Alice nel Paese delle Meraviglie</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-image: url('https://imgur.com/tRy1OFf.jpg'); 
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
        }

        header {
            background: rgba(74, 144, 226, 0.8);
            color: white;
            padding: 20px 0;
            text-align: center;
        }

        h1, h2 {
            margin: 20px 0;
        }

        section {
            padding: 20px;
            margin: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        footer {
            text-align: center;
            padding: 20px 0;
            background: rgba(74, 144, 226, 0.8);
            color: white;
            position: relative;
            bottom: 0;
            width: 100%;
        }

        .accordion {
            background-color: #f0f8ff;
            color: #333;
            cursor: pointer;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: left;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            padding-left: 15px;
        }

        .accordion.active .accordion-content {
            max-height: 100px;
        }
    </style>
</head>
<body>
    <header>
        <h1>La Storia di Alice nel Paese delle Meraviglie</h1>
    </header>
    
    <main>
      
        <section>
            <h2> L'Inizio dell'Avventura</h2>
            <p>Alice, una giovane ragazza, si annoia mentre ascolta sua sorella leggere un libro. Improvvisamente, vede un coniglio bianco in ritardo che si parla da solo. Curiosa, decide di seguirlo.</p>
            <img src="https://i.imgur.com/bR6H4VT.jpeg" alt="Alice che segue il Coniglio Bianco">
        </section>
        
        <section>
            <h2> La Caduta nel Buco</h2>
            <p>Alice insegue il coniglio e cade in un profondo buco. Durante la discesa, vede oggetti strani fluttuare intorno a lei.</p>
            <img src="https://imgur.com/OW2q1nN.jpg" alt="Alice che cade nel buco">
        </section>
        
        <section>
            <h2> Incontro con il Gatto del Cheshire</h2>
            <p>Incontra il Gatto del Cheshire, che le dà enigmi e sorrisi sfuggenti, aiutandola a orientarsi nel bizzarro mondo in cui si trova.</p>
            <img src="https://imgur.com/SgnVpcN.jpg" alt="Il Gatto del Cheshire">
        </section>
        
        <section>
            <h2> Il Processo della Regina di Cuori</h2>
            <p>Alice si ritrova coinvolta in un processo con la temibile Regina di Cuori, che urla di voler decapitare chiunque le disobbedisca.</p>
            <img src="https://i.imgur.com/hLilWbZ.jpeg" alt="Il Processo della Regina di Cuori">
        </section>
       
        <section>
            <h2> La Fuga e il Risveglio (Accordino)</h2>
            <div class="accordion" onclick="toggleAccordion(this)">Clicca per scoprire la fine della storia</div>
            <div class="accordion-content">
                <p>Dopo una serie di avventure e confusione, Alice si risveglia e si rende conto che tutto era solo un sogno. Si trova ancora nel prato, accanto a sua sorella, che continua a leggere tranquilla.</p>
                <img src="https://imgur.com/rQ2yMm4.jpg" alt="Alice che si sveglia">
            </div>
        </section>
    </main>
    <footer>

    <script>
        function toggleAccordion(element) {
            element.classList.toggle("active");
            var content = element.nextElementSibling;
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        }
    </script>
</body>
</html>