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

<ul>Usato per la creazione di liste non ordinate.
hreflangConsente di dichiarare la lingua del documento collegato.
<i>Formatta il testo in corsivo/italico non enfatizzato
<h4>Titolo di intestazione di quarto livello
<option>Serve ad inserire una voce in un menu di selezione.
<object>Incorpora risorse varie nella pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Un Giorno a Napoli: Itinerario Det

tabella mio esame

Struttura pagina HTML5

HOTEL STELLA MARIS

Mario-Block.html

Esercizi 05/03/2024 es2

Password validator

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>