La Storia di Cappuccetto Rosso (2) by @MrkDrnk - Codewith.it

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

References

<iframe>Crea un frame all'interno di una pagina HTML.
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
valueValore alfanumerico o booleano contenuto in un elemento
<option>Serve ad inserire una voce in un menu di selezione.
<h5>Titolo di intestazione di quinto livello

Users

Log in to search for users

Explore

Find inspiration

Web Design Final 2024

Esercitazione n.1

La Storia di Livia

mappa del malandrino

benvenuti nella mia scuola

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.

<html lang="it"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Storia di Cappuccetto Rosso</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lobster&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
        }
        .section {
            padding: 20px;
        }
        .section.red {
            background-color: red;
            color: white;
        }
        .section.white {
            background-color: white;
            color: black;
        }
        h1 {
            font-family: 'Lobster', cursive;
            text-align: center;
            font-size: 3em;
        }
        h2 {
            color: green;
            font-size: 2.5em;
            margin: 20px 0 10px;
        }
        h3 {
            color: pink;
            font-size: 2em;
            margin: 15px 0;
        }
        p {
            font-size: 1.2em;
            line-height: 1.6;
            margin: 10px 20px;
        }
        .highlight {
            color: red;
            font-weight: bold;
        }
        .image-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px 0;
        }
        .image-container img {
            width: 30%;
            margin: 10px;
            max-width: 300px; /* Limita la larghezza delle immagini */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        table, th, td {
            border: 1px solid red;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: pink;
        }
        .back-to-top {
            display: block;
            text-align: center;
            margin: 20px 0;
            font-size: 1.2em;
            color: green;
        }
        .accordion {
            background-color: pink;
            border: 1px solid red;
            border-radius: 5px;
            margin: 20px auto;
            padding: 10px;
            max-width: 600px;
        }
        .accordion-title {
            cursor: pointer;
            padding: 10px;
            font-weight: bold;
            background-color: red;
            color: white;
            border-radius: 5px;
            text-align: center;
        }
        .accordion-content {
            display: none;
            padding: 10px;
        }
    </style>
</head>
<body>

    <a href="#bottom" class="back-to-top">Vai alla storia di Cappuccetto Rosso</a>

    <div class="section red">
        <h1>Cappuccetto Rosso</h1>
    </div>

    <div class="section white">
        <h2>L' Inizio della Storia</h2>
        <p>
            C'era una volta una dolce bambina di nome <span class="highlight">Cappuccetto Rosso</span>, che viveva in un piccolo villaggio.Un giorno, la mamma le disse: "Cappuccetto, vai a trovare la tua nonna che vive dall'altra parte del bosco e portale questo cesto di cibo. Ma stai attenta e non ti fermare lungo la strada!"
        </p>

        <div class="image-container">
            <img src="https://booksroom.altervista.org/wp-content/uploads/2018/02/cappuccetto_rosso.jpg" 
            alt="Cappuccetto Rosso nel bosco">
        </div>
    </div>

    <div class="section red">
        <div class="accordion">
            <div class="accordion-title">Incontra il Lupo</div>
            <div class="accordion-content">
                <p>
                    Durante il suo viaggio, Cappuccetto Rosso incontrò un <span class="highlight">lupo astuto</span> che cercò di ingannarla. "Dove vai, piccola?" chiese il lupo. "Vado dalla mia nonna," rispose Cappuccetto. "Abita in una casetta al di là del bosco."
                </p>
            </div>
        </div>
    </div>

        <h3>La Casa della Nonna</h3>
        <p>
            Il lupo, con un sorriso malizioso, pensò di arrivare prima e mangiarsi sia la nonna che Cappuccetto. Così corse veloce verso la casa della nonna. Quando arrivò, bussò alla porta e si fece passare per Cappuccetto Rosso. La nonna, ignara del pericolo, lo lasciò entrare e il lupo, afferrandola, la inghiottì in un sol boccone e si travestì da lei. Quando Cappuccetto Rosso entrò, notò qualcosa di strano. "Nonna, che occhi grandi hai!" esclamò Cappuccetto. "Per vederti meglio, mia cara," rispose il lupo, cercando di nascondere la sua vera identità."Nonna, che orecchie grandi hai!"
            "Per sentirti meglio," rispose il lupo. "Ma nonna, che bocca grande hai!" 
            "Per mangiarti meglio!" gridò il lupo, saltando giù dal letto.
        </p>

        <div class="image-container">
            <img src="https://www.donnamoderna.com/content/uploads/2015/09/4266926-lupo-mangia-nonna-725x545.jpg" alt="La nonna di Cappuccetto Rosso">
        </div>
    </div>

        <h2>Il Finale della Storia</h2>
        <p>
            Fortunatamente, un cacciatore che passava di lì sentì le grida di Cappuccetto Rosso e intervenne, salvando sia lei che la nonna. Da quel giorno, Cappuccetto Rosso imparò a non fidarsi degli sconosciuti.
        </p>

        <h3>Lezioni Imparate</h3>
        <table>
            <tr>
                <th>Lezione</th>
                <th>Significato</th>
            </tr>
            <tr>
                <td>Non fidarti degli sconosciuti</td>
                <td>È importante essere cauti</td>
            </tr>
            <tr>
                <td>Segui il tuo percorso</td>
                <td>Non distrarti dai tuoi obiettivi</td>
            </tr>
        </table>
    </div>

    <div class="section white">
        <a id="bottom"></a>
        <h2>Conclusione</h2>
        <p>
            La storia di <span class="highlight">Cappuccetto Rosso</span> è un racconto che ci insegna a essere attenti e a non perdere mai la nostra strada. Ricordate, ogni avventura ha le sue lezioni!
        </p>
    </div>

    <script>
        const accordionTitles = document.querySelectorAll('.accordion-title');
        accordionTitles.forEach(title => {
            title.addEventListener('click', () => {
                const content = title.nextElementSibling;
                content.style.display = content.style.display === 'block' ? 'none' : 'block';
            });
        });
    </script>
</body>
</html>