Livia e la Foresta Incantata by @asia01 - Codewith.it

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

Referenze

<nav>Definisce un menu di navigazione
animationDefinisce i parametri dell'animazione di un elemento o selettore
valueValore alfanumerico o booleano contenuto in un elemento
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<ul>Usato per la creazione di liste non ordinate.
<b>Formatta il testo in grassetto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Ximena sanchez CSS Styling Assignm

Menu a tendina CSS

Background Property > filter() met

Vendi Casa da Privato Guida Gratui

Laus Informatica srl - Negozio eBay

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.

<!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;
}