La Storia di Livia by @asia01 - Codewith.it

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

References

_parentApre collegamenti ipertestuali nell'elemento genitore
<p>Serve a definire paragrafi di testo
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>

Users

Log in to search for users

Explore

Find inspiration

block zoom test

Italiano-Cinema [Container]

Introduzione all programm

Sports Dashboard 2024

pagina America(2)

Autoscuola Eur Torrino Fabrizio 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">
    <title>La Storia di Livia</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Menu di navigazione -->
    <nav>
        <a href="#">La Storia di Livia</a>
    </nav>

    <!-- Header -->
    <header>
        <div class="header-content">
            <h1>Livia e la Foresta Incantata</h1>
            <p class="subtext">Una storia magica di amicizia e avventura</p>
            <a href="#inizio-racconto" class="cta-button">Inizia il racconto</a>
        </div>
    </header>

    <!-- Sezione 1: Villaggio ai piedi della montagna -->
    <section class="sezione-immagine-testo" id="inizio-racconto">
        <img src="https://i.pinimg.com/736x/8d/0d/5a/8d0d5a1ef8041a9710b714dd83b151a3.jpg" alt="Villaggio ai piedi della montagna">
        <div class="text-container">
            <h2>Un Villaggio ai Piedi della Montagna</h2>
            <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>
        </div>
    </section>

    <!-- Sezione 2: Amicizia nella Foresta Incantata -->
    <section class="sezione-immagine-testo">
        <img src="https://i.pinimg.com/736x/27/bb/0a/27bb0a27b23f686cd4d64257b89843d5.jpg" alt="Scoiattolo amico di Livia">
        <div class="text-container">
            <h2>Amicizia nella Foresta Incantata</h2>
            <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>
        </div>
    </section>

    <!-- Sezione 3: La Tempesta Improvvisa -->
    <section class="sezione-testo-immagine">
        <div class="testo">
            <h2>La Tempesta Improvvisa</h2>
            <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>
        </div>
        <img src="https://i.pinimg.com/736x/e3/d7/96/e3d7967d482e6d9c40fac18169c591cb.jpg" alt="Tempesta nel villaggio">
    </section>

    <!-- Sezione 4: Il Re Gufo in Pericolo -->
    <section class="sezione-immagine-testo">
        <img src="https://i.pinimg.com/564x/56/ca/1b/56ca1b67ceba274269301738c219d939.jpg" alt="Re Gufo in pericolo">
        <div class="text-container">
            <h2>Il Re Gufo in Pericolo</h2>
            <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>
        </div>
    </section>

    <!-- Sezione 5: Scoiattoli, Volpi e Cervi all'Opera -->
    <section class="sezione-testo-immagine">
        <div class="testo">
            <h2>Scoiattoli, Volpi e Cervi all'Opera</h2>
            <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>
        </div>
        <img src="https://i.pinimg.com/564x/0c/74/3f/0c743f814541e0170a0e8fc6ce21df18.jpg" alt="Animali che aiutano Livia">
    </section>

    <!-- Sezione conclusione -->
    <section class="conclusione">
        <h3>Conclusione</h3>
        <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>
        <img src="https://i.pinimg.com/736x/28/20/3a/28203a529febe7dc6626534956abdfe3.jpg" alt="Conclusione felice" class="img-conclusione">
    </section>

</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Updock&display=swap');

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #f9f9f9;
    scroll-behavior: smooth;
}

/* Menu di navigazione */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: background-color 0.3s ease;
}

nav a {
    text-decoration: none;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    padding: 10px 20px;
    transition: color 0.3s, background-color 0.3s;
    border-radius: 5px;
}

nav a:hover {
    background-color: #264f4b;
    color: #fff;
}

/* Header */
header {
    background-image: linear-gradient(rgba(38, 79, 75, 0.7), rgba(38, 79, 75, 0.7)), url('https://sb.ecobnb.net/app/uploads/sites/2/2022/07/foreste-storie-1170x490.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 0 20px;
}

header h1 {
    font-size: 90px;
    font-family: 'Updock', cursive;
    margin: 0;
    letter-spacing: 3px;
}

.subtext {
    font-size: 24px;
    margin-top: 20px;
    letter-spacing: 2px;
}

.cta-button {
    margin-top: 30px;
    padding: 12px 30px;
    background-color: #fff;
    color: #264f4b;
    border-radius: 30px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
    background-color: #264f4b;
    color: #fff;
}

/* Sezione con immagine e testo */
.sezione-immagine-testo {
    background-color: #fff;
    padding: 80px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sezione-immagine-testo img {
    max-width: 80%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
    transition: transform 0.3s ease;
}

.sezione-immagine-testo img:hover {
    transform: scale(1.05);
}

.text-container {
    max-width: 900px;
}

.sezione-immagine-testo h2 {
    font-family: 'Updock', cursive;
    font-size: 42px;
    color: #264f4b;
    margin-bottom: 20px;
}

.sezione-immagine-testo p {
    font-size: 18px;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.8;
}

/* Sezione con testo e immagine laterale */
.sezione-testo-immagine {
    background-color: #6b886e;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px;
    color: #fff;
    flex-wrap: wrap;
}

.sezione-testo-immagine .testo {
    max-width: 600px;
}

.sezione-testo-immagine img {
    max-width: 45%;
    height: auto;
    margin-left: 40px;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.sezione-testo-immagine img:hover {
    transform: scale(1.05);
}

.sezione-testo-immagine p {
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.8;
}

/* Stile per l'immagine nella conclusione */
.img-conclusione {
    max-width: 80%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
    transition: transform 0.3s ease;
}

.img-conclusione:hover {
    transform: scale(1.05);
}

/* Conclusione */
.conclusione {
    background-color: #264f4b;
    padding: 60px 20px;
    text-align: center;
    color: #fff;
}

.conclusione h3 {
    font-family: 'Updock', cursive;
    font-size: 42px;
    margin-bottom: 30px;
}

.conclusione p {
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
}