La Storia di Livia by @asia01 - Codewith.it

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

Referenze

controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<select>Usato per creare un menu a tendina.
<b>Formatta il testo in grassetto
_selfApre collegamenti ipertestuali nella stessa pagina del browser
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<meta>Definisce i meta dati di una pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Modal Animations

inserimento immagini in un testo

Parco Nazionale dell\\\\\\\\\\\\\\

ArteFORMA — Architectural Digita

Perch Oslo una Smart City 1

Form per il torneo misto dis

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