Titolo della Pagina by @asia01 - Codewith.it

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

Referenze

_parentApre collegamenti ipertestuali nell'elemento genitore
<ol>Crea liste ordinate o numerate.
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<option>Serve ad inserire una voce in un menu di selezione.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Favola dei tre porcellini(2)

Pro Vercelli LB

torta della nonna

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>Titolo della Pagina</title>
    <link rel="stylesheet" href="styles.css"> <!-- Collega il file CSS esterno -->
</head>
<body>
    <!-- Contenuto della pagina -->
    <h1>Livia e la Foresta Incantata</h1> 
    
        <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. 
        <u>Livia</u> aveva un dono speciale: poteva parlare con gli animali del bosco. Ogni giorno, si recava nella foresta incantata 
        per fare <i>amicizia</i> 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>
    
    <img src="https://estaticos.megainteresting.com/media/cache/1140x_thumb/uploads/images/gallery/5e1852795bafe81e6b4c57ea/bosque0_0.jpg" 
         alt="Descrizione dell'immagine" class="immagine-centrata">
    
    <h2>Amicizia nella foresta incantata</h2>

    <ul class="elenco-puntato">
      <li>Un giorno, una tempesta terribile si abbatté sul villaggio. Il vento soffiava forte e le nuvole oscuravano il cielo.</li>
      <li>Gli abitanti si rifugiarono nelle loro case, spaventati, ma Livia non aveva paura.</li>
      <li>Sentiva che qualcosa di strano stava per accadere nella foresta.</li>
      <li>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.</li>
      <li>Un fulmine aveva colpito le sue radici e l'albero rischiava di cadere.</li>
      <li>Livia corse dagli animali, chiamando a raccolta tutti i suoi amici del bosco.</li>
    </ul>
    
    <h2>La Tempesta Improvvisa</h2>

    <p class="sezione-colorata">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>

    <!-- Aggiunta della nuova sezione -->
    <h3 class="titolo-verde centrato">Il Re Gufo in Pericolo</h3>
    <p class="centrato">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>

 <!-- Sezione con testo a destra e immagine a sinistra -->
    <div class="testo-immagine-sezione">
        <img src="https://services.meteored.com/img/article/alla-scoperta-della-piu-grande-foresta-del-pianeta-e-non-e-l-amazzonia-1703891956057_1024.jpg" 
             alt="Immagine foresta" class="immagine-sinistra">
        
        <div class="testo-destra">
            <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>
    </div>

     <!-- Sezione Conclusione -->
    <div class="sezione-conclusione">
        <h2>Conclusione</h2>
        <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://staticfanpage.akamaized.net/wp-content/uploads/sites/12/2018/07/640px-es2110009-gorbea_hayedo_de_otxarreta_aga7421.jpg" 
             alt="Immagine della foresta magica" class="immagine-conclusione">
    </div>
</body>
</html>

/* Stili per gli elementi principali */

h1 {
  color: red;
  text-align: center;
  padding-top: 50px; /* Aggiunto px */
  font-size: 50px;   /* Aggiunto px */
}

h2 {
  color: rgb(248, 69, 218);
  text-align: center;
  font-weight: 800;
  padding-top: 30px; /* Aggiunto padding-top */
}

p {
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  line-height: 1.5;
  margin: 50px; /* Aggiunto px */
}

.immagine-centrata {
  display: block;
  margin: 0 auto;
  width: 400px; /* Larghezza dell'immagine */
}

.elenco-puntato {
  font-size: 20px; /* Imposta la dimensione del testo */
}

.sezione-colorata {
  background-color: #f4a261; /* Colore di sfondo arancione chiaro */
  color: #ffffff; /* Colore del testo bianco */
  padding: 20px;  /* Spaziatura interna */
  border-radius: 10px; /* Arrotondamento degli angoli */
  font-family: Arial, sans-serif; /* Font del testo */
  line-height: 1.6; /* Spazio tra le righe */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera per effetto rilievo */
  margin: 20px 0; /* Spazio sopra e sotto il paragrafo */
}

.centrato {
  text-align: center;
}

.titolo-verde {
  color: #28a745; /* Colore verde */
  font-family: Georgia, serif; /* Font scelto per il titolo */
  text-align: center;
  margin-top: 50px;
  padding-top: 50;
}

/* Stile per la sezione testo a destra e immagine a sinistra */
.testo-immagine-sezione {
    display: flex; /* Usa Flexbox per disporre gli elementi orizzontalmente */
    align-items: center; /* Allinea verticalmente il testo e l'immagine */
    margin: 50px 0; /* Spazio sopra e sotto la sezione */
    padding-top: 50 ;
}

.immagine-sinistra {
    width: 50%; /* L'immagine occupa il 50% dello spazio disponibile */
    height: auto; /* Mantiene le proporzioni */
    margin-right: 20px; /* Spazio tra immagine e testo */
}

.testo-destra {
    width: 50%; /* Il testo occupa il 50% dello spazio disponibile */
    text-align: left; /* Allinea il testo a sinistra */
    font-family: 'Arial', sans-serif; /* Font scelto per il testo */
    line-height: 1.6; /* Migliora la leggibilità */
}

.testo-destra h2 {
    color: #28a745; /* Colore del titolo in verde */
    font-size: 24px; /* Dimensione del titolo */
    margin-bottom: 20px;
}

.testo-destra p {
    font-size: 18px; /* Dimensione del paragrafo */
    color: #333; /* Colore del testo */
}

/* Stile per la sezione conclusione */
.sezione-conclusione {
    text-align: center;
    margin: 50px 0; /* Spazio sopra e sotto la sezione */
    padding: 20px;
    background-color: #f7f9fc; /* Colore di sfondo chiaro */
    border-radius: 10px; /* Arrotondamento degli angoli */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera per rilievo */
}

.sezione-conclusione h2 {
    color: #2e8b57; /* Colore verde scuro per il titolo */
    font-size: 28px; /* Dimensione del titolo */
    margin-bottom: 20px;
}

.sezione-conclusione p {
    font-size: 18px;
    color: #333;
    line-height: 1.8; /* Migliora la leggibilità */
    margin: 20px auto;
    max-width: 800px; /* Limita la larghezza del paragrafo */
}

.immagine-conclusione {
    width: 100%;
    max-width: 600px; /* Limita la larghezza dell'immagine */
    height: auto;
    margin-top: 30px;
    border-radius: 10px; /* Arrotondamento degli angoli dell'immagine */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Ombra sull'immagine */
}