Cappuccetto Rosso - La Storia by @MrkDrnk - Codewith.it

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

Referenze

<map>Inserisce immagini mappa cliccabili in un documento
<ol>Crea liste ordinate o numerate.
<nav>Definisce un menu di navigazione
<div>Crea contenitori generici o sezioni in una pagina
_selfApre collegamenti ipertestuali nella stessa pagina del browser
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

CodeMirror preview

Generatore di Musica

Download 7-Zip for PC Windows

servizio_fiscale.html

Esercizi 05/03/2024 es8

esercitazione n. 1

form per il torneo misto disfor s

Heads Or Tails Random Tally

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>Cappuccetto Rosso - La Storia</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        h1 {
            color: #c0392b;
            font-size: 2.5em;
            text-align: center;
        }
        h2 {
            color: #27ae60;
            font-size: 2em;
            margin-top: 30px;
        }
        h3 {
            color: #f1c40f;
            font-size: 1.5em;
            margin-top: 20px;
        }
        .highlight {
            color: #e74c3c;
            font-weight: bold;
        }
        .accordion {
            background-color: #ecf0f1;
            border: 1px solid #bdc3c7;
            border-radius: 5px;
            margin: 10px 0;
            padding: 10px;
            cursor: pointer;
        }
        .panel {
            display: none;
            padding: 10px;
            overflow: hidden;
            background-color: #ffffff;
            border: 1px solid #bdc3c7;
            margin-top: 5px;
        }
        img {
            max-width: 100%;
            height: auto;
            margin: 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<h1>Cappuccetto Rosso</h1>

<img src=https://booksroom.altervista.org/wp-content/uploads/2018/02/cappuccetto_rosso.jpg
 alt="Cappuccetto Rosso" style="float:left;">
<h2>La Nascita della Leggenda</h2>
<p>La storia di <span class="highlight">Cappuccetto Rosso</span> ha origini antiche e viene raccontata in molte culture. La protagonista è una giovane ragazza che indossa sempre un <span class="highlight">cappuccio rosso</span>, simbolo di innocenza e coraggio.</p>

<div class="accordion">Chi è Cappuccetto Rosso?</div>
<div class="panel">
    <p>Cappuccetto Rosso è una bambina che vive in un villaggio vicino a una foresta. Un giorno, sua madre le chiede di portare un cestino alla nonna, che vive dall'altra parte della foresta.</p>
</div>

<img src=https://www.planck-magazine.it/wp-content/uploads/2021/08/beech-472095_1920.jpg
 alt="La Foresta" style="float:right;">
<h2>Il Viaggio nella Foresta</h2>
<p>Durante il suo viaggio, Cappuccetto Rosso incontra un <span class="highlight">lupo astuto</span>, che la inganna per arrivare prima alla casa della nonna. La foresta, ricca di misteri, è piena di insidie e meraviglie.</p>

<div class="accordion">L'Incontro con il Lupo</div>
<div class="panel">
    <p>Il lupo chiede a Cappuccetto Rosso dove stia andando e, scoprendo la sua meta, decide di avvisare la nonna prima di lei.</p>
</div>

<img src=https://img.freepik.com/foto-premium/personaggio-cappuccetto-rosso-e-lupo_278265-161.jpg   

 alt="Il Lupo" style="float:left;">
<h3>La Casa della Nonna</h3>
<p>Quando il lupo arriva dalla nonna, la inganna e si traveste da lei. Quando Cappuccetto Rosso entra nella casa, è scioccata nel vedere il "volto" della nonna.</p>
<h3>Il Colpo di Scena</h3>
<p>All'improvviso, Cappuccetto Rosso realizza che qualcosa non va. Il lupo si rivela e la storia prende una piega inaspettata!</p>

<div class="accordion">La Salvezza di Cappuccetto Rosso</div>
<div class="panel">
    <p>Fortunatamente, un cacciatore di passaggio sente le grida e arriva in tempo per salvare Cappuccetto Rosso e la nonna. Insieme, riescono a scacciare il lupo.</p>
</div>
<h2>Le Lezioni imparate</h2>
<p>La storia di Cappuccetto Rosso ci insegna l'importanza di essere <span class="highlight">prudenti</span> e di non fidarsi degli sconosciuti. La sua avventura è un monito per tutti noi.</p>

<div class="accordion">La Morale della Storia</div>
<div class="panel">
    <p>Non si tratta solo di un racconto per bambini, ma di una lezione di vita: attenzione a dove si va e a chi si incontra!</p>
</div>
<h2>Conclusione</h2>
<p>La storia di Cappuccetto Rosso continua a essere raccontata e reinterpretata. La sua figura rimarrà per sempre nel cuore di grandi e piccini.</p>

<script>
    const accordions = document.querySelectorAll('.accordion');
    accordions.forEach(acc => {
        acc.addEventListener('click', function() {
            this.classList.toggle('active');
            const panel = this.nextElementSibling;
            if (panel.style.display === 'block') {
                panel.style.display = 'none';
            } else {
                panel.style.display = 'block';
            }
        });
    });
</script>

</body>
</html>