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

titleIndica informazioni aggiuntive riguardo un elemento HTML
widthImposta la larghezza di un elemento HTML
<strong>Definisce una parte del testo importante con formattazione in grassetto.
disabledImpedisce la modifica di un input
requiredRende obbligatorio un campo di input
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Users

Log in to search for users

Explore

Find inspiration

La Storia di Biancaneve

tabella ricetta esame

Table HOTEL STELLA MARIS

Design, Marketing & AI News (Portf

basicStructure 2

Esercio-selettori-di-relazione

Nuovo sito travel

Esercizio 1 - 27/11

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>