La Storia di Biancaneve by @MrkDrnk - Codewith.it

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

References

formmethodDefinisce il metodo di invio dei dati oltre a method
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<h2>Titolo di intestazione di secondo livello
<blockquote>Inserisce citazioni in un documento HTML
<address> Definisce una sezione contenente indirizzi, contatti e informazioni

Users

Log in to search for users

Explore

Find inspiration

FuturaDesign - Design che Definisc

Bootstrap List Grid

Form per il torneo misto disfo

JS Istruzioni condizionali es2

I beneficii di avere un cane

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');
});