La Storia di Biancaneve by @MrkDrnk - Codewith.it

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

References

<h4>Titolo di intestazione di quarto livello
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
minImposta il valore numerico o temporale minimo per un elemento input
<div>Crea contenitori generici o sezioni in una pagina
formnovalidateImpedisce la convalida di un singolo elemento input
minlengthDetermina il numero minimo di caratteri per un elemento input

Users

Log in to search for users

Explore

Find inspiration

Sezioni Nuove Delajo

Esercizio tabella e form

provo copia prof

Prep. Esame pt.3

inserimento immagini in un testo

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 Biancaneve</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1 class="title">La Magica Storia di Biancaneve</h1>
    </header>

    <section class="introduction">
        <h2>Introduzione</h2>
        <p>C’era una volta, in un regno lontano, una bellissima principessa chiamata <span  class="highlight">Biancaneve</span>. La sua bellezza era tale che la sua pelle era bianca come la neve, le labbra <span class="highlight">rosse</span> come il sangue e i capelli neri come l’ebano. Biancaneve viveva nel castello con la sua crudele matrigna, la <span class="highlight2">Regina Malvagia</span>, che era profondamente gelosa della sua bellezza.</p>
        <img src="https://www.ocarinaplayer.com/wp-content/uploads/2022/02/biancaneve-jpeg.webp"
         alt="Biancaneve e la Regina" class="image">
    </section>

    <section class="story">
        <h2>La Regina e lo Specchio Magico</h2>
        <p>La Regina Malvagia possedeva uno specchio magico al quale ogni giorno chiedeva: "Specchio, specchio delle mie brame, chi è la più bella del reame?". Per molti anni lo specchio rispondeva: "Tu sei la più bella". Tuttavia, un giorno, lo specchio rispose: "<span class="highlight">Biancaneve</span> è la più bella del reame!".  La Regina fu colta dalla gelosia e decise di sbarazzarsi di Biancaneve per sempre.</p>
        <img src="https://www.apcoaching.it/wp-content/uploads/2019/08/specchio-specchio-delle-mie-brame_ev.png" alt="La Regina e lo Specchio Magico" class="image">
    </section>

    <section class="story">
        <h2>La Fuga di Biancaneve</h2>
        <p>Furiosa, la Regina ordinò a un cacciatore di portare Biancaneve nella foresta e ucciderla. Come prova della sua morte, il cacciatore avrebbe dovuto riportare il cuore della principessa. Tuttavia, quando il cacciatore portò Biancaneve nella foresta, fu colpito dalla sua innocenza e bontà e non riuscì a eseguire l'ordine. Le disse di scappare e non tornare mai più al castello. Invece di ucciderla, il cacciatore prese il cuore di un cinghiale per ingannare la <span class="highlight2">Regina</span>. Biancaneve corse per ore attraverso la foresta, fino a quando si trovò di fronte a una piccola casetta. Esausta e affamata, decise di entrare. Dentro la casetta trovò sette lettini, piccoli tavoli e piatti. Biancaneve si addormentò in uno dei letti. La casetta apparteneva a sette nani che lavoravano nelle miniere. Quando tornarono a casa, trovarono Biancaneve addormentata. I nani erano inizialmente sorpresi, ma quando Biancaneve si svegliò e raccontò loro la sua storia, decisero di proteggerla. Le dissero di rimanere nella loro casa e di stare attenta alla Regina Malvagia. </p>
        <img src="https://statics.cedscdn.it/uploads/ckfile/202307/Ansa_16183548.jpg" alt="Biancaneve e i Nani" class="image">
    </section>

    <section class="story">
        <h2>La Mela Avvelenata</h2>
        <p>La <span class="highlight2">Regina Malvagia</span>, nel frattempo, scoprì che Biancaneve era ancora viva e decise di porre fine alla sua vita con l’inganno. Si travestì da vecchia mendicante e preparò una mela avvelenata. Si recò alla casetta dei nani e offrì la mela a Biancaneve, che ignara del pericolo, la morse. Non appena prese un morso, Biancaneve cadde in un sonno profondo, simile alla morte. Quando i nani tornarono a casa, trovarono Biancaneve stesa a terra senza vita. Erano distrutti dal dolore, ma non vollero seppellirla perché sembrava così bella anche nella morte. Allora decisero di costruire una bara di vetro e la misero in un bosco incantato, dove tutti potevano ammirarla.</p>
        <img src="	https://www.themousestories.com/wp-content/uploads/2020/07/Schermata-2020-07-09-alle-17.08.34.png" alt="Biancaneve e la Mela Avvelenata" class="image">
    </section>

    <section class="story">
        <h2>Il Risveglio di Biancaneve</h2>
        <p>Dopo qualche tempo, un principe che viaggiava per il regno vide Biancaneve nella bara di vetro. Colpito dalla sua bellezza, le diede un bacio. Fu un bacio d'amore vero, e quel bacio spezzò l'incantesimo. <span class="highlight">Biancaneve</span> si risvegliò e i due si innamorarono immediatamente. Il Principe chiese a Biancaneve di sposarlo e di vivere con lui nel suo regno. Biancaneve e il Principe si sposarono e vissero felici e contenti. La Regina Malvagia, invece, fu punita per la sua crudeltà e non osò mai più minacciare Biancaneve.</p>
        <img src="	https://www.corrierece.it/wp-content/uploads/2021/05/biancaneve.jpg" alt="Il Principe che risveglia Biancaneve" class="image">
    </section>

    <section class="accordion-section">
        <h2>Dettagli Extra</h2>

        <div class="accordion">
            <h3 class="accordion-header">Approfondimenti sulla Storia</h3>
            <div class="accordion-content">
                <p>La storia di Biancaneve è una delle fiabe più amate dei fratelli Grimm. Rappresenta temi come la gelosia, la bellezza interiore e l'importanza dell'amore vero. Questa fiaba è stata adattata in numerosi film e spettacoli teatrali, incluso il celebre film d'animazione di Walt Disney del 1937.</p>
            </div>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>

body {
    font-family: 'Georgia', serif;
    background-color: #d497ff;
}

header {
    background-color: #8d80f0;
    text-align: center;
    padding: 30px;
}

.title {
    font-size: 3em;
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
}

.introduction, .story, .accordion-section {
    padding: 20px;
    margin: 20px;
    background-color: #ffffff;

}

h2 {
    font-size: 2em;
    color: #4682b4;
    font-family: 'Verdana', sans-serif;
}

h3 {
    font-size: 1.5em;
    color: #2e8b57;
    margin-top: 20px;
}

p {
    font-size: 1.2em;
    line-height: 1.6;
    font-family: 'Arial', sans-serif;
}

.highlight {
    color: #e90069;
    font-weight: bold;
    font-style: italic;
}

.highlight2 {
    color: #6a5acd;
    font-weight: bold;
}

.image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
}

.accordion-section {
    margin-top: 40px;
}

.accordion-header {
    background-color: #87cefa;
    padding: 10px;
    font-size: 1.5em;
    cursor: pointer;
    color: white;
}

.accordion-content {
    display: none;
    background-color: #f0f8ff;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #4682b4;
}

.accordion-header.active {
    background-color: #4682b4;
}

.accordion-content.show {
    display: block;
}

/* Media Query per dispositivi mobili */
@media (max-width: 600px) {
    .title {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.2em;
    }

    p {
        font-size: 1em;
    }

    .accordion-header {
        font-size: 1.2em;
    }

    .accordion-content {
        font-size: 0.9em;
    }
}

document.querySelector('.accordion-header').addEventListener('click', function() {
    this.classList.toggle('active');
    let content = this.nextElementSibling;
    content.classList.toggle('show');
});