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

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

References

<div>Crea contenitori generici o sezioni in una pagina
postDefinisce un metodo di invio di dati al server
multipleConverte in lista a selezione multipla
hrefDefinisce l'URL della risorsa/pagina di destinazione.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
minlengthDetermina il numero minimo di caratteri per un elemento input

Users

Log in to search for users

Explore

Find inspiration

Laus Informatica srl - Negozio eBay

SEMI al FUTURO Social Wall

Le meraviglie d\\

noc-fisicas-reroll-parcial1

I miei progressi

Attività della settimana

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>