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

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

Referenze

<tr>Definisce le righe di una tabella (rows)
<option>Serve ad inserire una voce in un menu di selezione.
<th>Definisce una cella di intestazione di una tabella HTML.
<tfoot>Definisce il footer o sezione inferiore di una tabella.
idIdentifica univocamente un elemento HTML
selectedPre-seleziona un elemento di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Parco Nazionale dell\\\\\\\\\\\\\\

Calcolatrice JavaScript

Esercitazione 1

SHKAFI_3M_12_HTMLBELLISSI

HTML: Guida Completa

Keep Your Emails on Target with Ma

Bootstrap List Grid

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.

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