Livia e la Foresta Incantata by @asia01 - 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
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<h6>Titolo di intestazione di sesto livello
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<tbody>Definisce il contenuto principale di una tabella.
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input

Users

Log in to search for users

Explore

Find inspiration

Copia testo in appunti

UX / Web Design Green – Progetto

Sito scolastico – Template base

Heads Or Tails Random Tally

portofolio_Alessandro_Foletto

Lola Harrel Project 3

Le Meraviglie d\\\\\\\\

servizio_fiscale.html

gengotti home page

ESERCIZIO: LE REGIONI ITALIANE E

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.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Livia e la Foresta Incantata</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="header-container">
            <h1>Livia e la Foresta Incantata</h1>
            <h2>Una storia magica di amicizia e avventura</h2>
        </div>
        <img class="header-image" src="https://www.itlas.com/wp-content/uploads/2021/07/itlas-blog.jpg" alt="Foresta incantata">
    </header>

    <section class="intro">
        <h2>Inizia il racconto</h2>
        <p><strong>Un Villaggio ai Piedi della Montagna</strong></p>
        <img class="story-image" src="https://www.itlas.com/wp-content/uploads/2021/07/itlas-blog.jpg" alt="Villaggio ai piedi della montagna">
        <p>C'era una volta, in un piccolo villaggio ai piedi di una grande montagna, una bambina di nome Livia. Livia aveva un dono speciale: riusciva a parlare con gli animali del bosco. Ogni giorno, si recava nella foresta incantata per fare amicizia con scoiattoli, uccelli e persino volpi. Tuttavia, nessuno nel villaggio le credeva. I grandi la guardavano con sospetto e i bambini ridevano di lei.</p>
    </section>

    <section class="forest-friends">
        <h2>Amicizia nella Foresta Incantata</h2>
        <img class="story-image" src="https://www.itlas.com/wp-content/uploads/2021/07/itlas-blog.jpg" alt="Animali della foresta">
        <p>Ogni giorno, Livia si avventurava nella foresta, dove parlava con i suoi amici animali. Scoiattoli, uccelli e persino le volpi la riconoscevano e la salutavano. Era un legame unico, ma nessuno nel villaggio le credeva.</p>
    </section>

    <section class="storm">
        <h2>La Tempesta Improvvisa</h2>
        <img class="story-image" src="https://www.itlas.com/wp-content/uploads/2021/07/itlas-blog.jpg" alt="Tempesta nella foresta">
        <p>Un giorno, una tempesta terribile si abbatté sul villaggio. Il vento soffiava forte e le nuvole oscuravano il cielo. Gli abitanti si rifugiarono nelle loro case, spaventati, ma Livia non aveva paura. Sentiva che qualcosa di strano stava per accadere nella foresta.</p>
    </section>

    <section class="owl-king">
        <h2>Il Re Gufo in Pericolo</h2>
        <img class="story-image" src="https://www.itlas.com/wp-content/uploads/2021/07/itlas-blog.jpg" alt="Grande albero nella foresta">
        <p>Decise di andare a controllare e, appena arrivata, trovò il grande albero del Re Gufo, il più vecchio e saggio di tutti gli animali, in pericolo. Un fulmine aveva colpito le sue radici e l’albero rischiava di cadere. Livia corse dagli animali, chiamando a raccolta tutti i suoi amici del bosco.</p>
    </section>

    <section class="animals-help">
        <h2>Scoiattoli, Volpi e Cervi all'Opera</h2>
        <img class="story-image" src="https://www.itlas.com/wp-content/uploads/2021/07/itlas-blog.jpg" alt="Animali che aiutano a salvare l'albero">
        <p>"Scoiattoli, volpi, cervi! Dobbiamo aiutare il Re Gufo!" gridò Livia. Gli animali, fidandosi di lei, si misero subito all'opera. Gli scoiattoli portarono ramoscelli, le volpi scavarono la terra e i cervi, con la loro forza, sostennero il grande albero. Insieme riuscirono a salvarlo.</p>
    </section>

    <section class="conclusion">
        <h2>Conclusione</h2>
        <img class="story-image" src="https://www.itlas.com/wp-content/uploads/2021/07/itlas-blog.jpg" alt="Sole dopo la tempesta">
        <p>Quando la tempesta finì e il sole tornò a splendere, il Re Gufo ringraziò Livia e gli animali per il loro coraggio. "Da oggi sarai conosciuta come la Custode della Foresta", disse, "e il tuo cuore sarà sempre legato a questo luogo magico".</p>
        <p>Tornata al villaggio, Livia raccontò l'accaduto, ma questa volta, gli abitanti del villaggio non risero. Videro gli animali seguirla fino alla piazza e capirono che la bambina non era solo una sognatrice, ma una vera eroina. Da quel giorno, Livia e i suoi amici del bosco vissero in armonia con il villaggio, proteggendo la foresta e tutti i suoi segreti. E vissero tutti felici e contenti.</p>
    </section>

    <footer>
        <p>&copy; 2024 Storia di Livia</p>
    </footer>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Georgia', serif;
}

body {
    background-color: #f0f8ff;
    color: #333;
    line-height: 1.6;
}

header {
    text-align: center;
    background-color: #264f4b;
    color: white;
    padding: 20px 0;
}

.header-container h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.header-container h2 {
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 10px;
}

.header-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

section {
    padding: 40px 20px;
    max-width: 1000px;
    margin: 40px auto;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    border-radius: 8px;
}

h2 {
    font-size: 2rem;
    color: #264f4b;
    margin-bottom: 20px;
    text-align: center;
}

p {
    font-size: 1.2rem;
    text-align: justify;
    margin-bottom: 20px;
}

.story-image {
    width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 8px;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #264f4b;
    color: white;
    font-size: 1rem;
    position: relative;
    bottom: 0;
    width: 100%;
}

footer p {
    margin: 0;
}