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

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

References

postDefinisce un metodo di invio di dati al server
<tr>Definisce le righe di una tabella (rows)
text/plainDefinisce un metodo di non codifica dei valori di un form
<html>Tag primario di un documento HTML
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.

Users

Log in to search for users

Explore

Find inspiration

basicStructure 2

Basketball Legends

Twitchpage3okok

Esercizio cicli2

Indovina il Numero - Gioco(2)

es da correggere

HTML OR. LISTA TAGS TEST

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