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

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

References

valueValore alfanumerico o booleano contenuto in un elemento
<li>Inserisce voci all'interno di una lista
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
_parentApre collegamenti ipertestuali nell'elemento genitore
<title>Definisce il titolo della pagina web.
<blockquote>Inserisce citazioni in un documento HTML

Users

Log in to search for users

Explore

Find inspiration

“esercitazione4.html”

Il Mondo della Tecnologia

Test DESC BREVE Pavimenti

es da correggere

Quiz ristrutturazione

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>