Il Fiume dell\\\\ by @AntonioC - Codewith.it

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

Referenze

<head>Tag primario di un documento HTML
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<a>Inserisce link e collegamenti ipertestuali
<h6>Titolo di intestazione di sesto livello
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<tbody>Definisce il contenuto principale di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Keter Signature

Calcolo Costo Totale

99 Bottles of Beer

5/10/24 es. 2 - conta Parole

Test dell identikit

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.

<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Leggenda del Fiume dell'Oblio</title>
    <style>
        body {
            background-image: url('https://png.pngtree.com/background/20210716/original/pngtree-mysterious-starry-sky-background-picture-image_1337171.jpg');
            background-size: cover;
            background-attachment: fixed;
            font-family: 'Georgia', serif;
            color: white;
            padding: 20px;
            text-align: center;
        }
        h1 {
            color: #ffffff;
            font-family: 'Cinzel', serif;
            font-size: 42px;
            text-align: center;
        }
        h2 {
            color: #ffffff;
            font-family: 'Merriweather', serif;
            font-size: 34px;
            text-align: center;
        }
        h3 {
            color: #ffffff;
            font-family: 'Raleway', sans-serif; 
            minori */
            font-size: 28px;
            text-align: center;
        }
        p {
            font-family: 'Open Sans', sans-serif; 
            font-size: 20px;
            text-align: center;
            margin: 20px 0;
            color: #ffffff; 
        }
        .highlight {
            color: #ff4500;
            font-weight: bold;
        }
        img {
            display: block;
            margin: 20px auto;
            width: 60%;
        }
        .accordion {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            padding: 18px;
            width: 80%;
            border: none;
            margin: 20px auto;
            text-align: center;
            outline: none;
            font-family: 'Merriweather', serif;
            font-size: 20px;
            transition: 0.4s;
        }
        .panel {
            padding: 0 18px;
            background-color: black;
            display: none;
            overflow: hidden;
            width: 80%;
            margin: 10px auto;
        }
        .accordion:after {
            content: '\02795'; 
            font-size: 20px;
            color: white;
            float: right;
        }
        .accordion.active:after {
            content: "\2796"; 
        }
    </style>
</head>
<body>

    <h1>La Leggenda del Fiume dell'Oblio</h1>

    <h2>Introduzione</h2>
    <p>
        Nella cultura giapponese, c'è un'antica leggenda di un fiume mistico chiamato <span class="highlight">"Il Fiume dell'Oblio"</span>, le cui acque cancellano ogni ricordo di chiunque vi si avvicini. 
        Questa è la storia di <span class="highlight">Yūko</span>, una giovane donna alla ricerca del suo amato scomparso, che si trova a dover affrontare il misterioso fiume.
    </p>

    <h2>Il fiume</h2>
    <img src="https://images.nightcafe.studio/jobs/QsC9PVUDqcpGVfwIqZZv/QsC9PVUDqcpGVfwIqZZv--1--3xkp7.jpg?tr=w-1600,c-at_max" alt="Fiume dell'Oblio" />

    <h2>La ricerca di Yūko</h2>
    <p>
        <span class="highlight">Yūko</span> vagava per giorni, attraversando foreste e montagne, finché giunse al fiume. L'acqua era scura e misteriosa, ma sapeva che doveva trovare un modo per attraversarla, o avrebbe perso per sempre il ricordo del suo amato.
    </p>

    <img src="https://img.freepik.com/premium-photo/painting-woman-dark-with-sun-shining-through-water_905510-14151.jpg" />

    <h3>L'incontro con lo spirito del fiume</h3>
    <p>
        Appena Yūko si avvicinò alla riva, apparve uno spirito antico, che le disse: "Nessuno attraversa il <span class="highlight">Fiume dell'Oblio</span> senza perdere tutto ciò che ama. Sei sicura di voler affrontare questo viaggio?"
    </p>

    <img src="https://i.etsystatic.com/8469556/r/il/7069c6/3713532302/il_570xN.3713532302_o6n3.jpg" />

    <h2>Accordi nascosti: Il sacrificio di Yūko</h2>

    <button class="accordion">Il Patto con lo Spirito</button>
    <div class="panel">
      <p>
          Lo spirito propose un patto a Yūko: "Se vuoi attraversare il fiume, devi lasciare un ricordo prezioso sulla riva. Solo così potrai proseguire." Yūko, senza esitazione, offrì l'anello che il suo amato le aveva dato, sacrificando uno dei suoi ricordi più cari.
      </p>
    </div>

    <button class="accordion">La Prova dell'Oblio</button>
    <div class="panel">
      <p>
          Dopo aver lasciato l'anello, Yūko attraversò il fiume. Durante il tragitto, sentì i suoi ricordi svanire lentamente. Le immagini del volto del suo amato divennero sfocate, i momenti vissuti insieme si dissolsero come nebbia.
      </p>
    </div>

    <button class="accordion">Il Finale misterioso</button>
    <div class="panel">
      <p>
          Quando Yūko raggiunse l'altra riva, era quasi senza memoria. Ma proprio in quel momento, un uomo apparve sulla riva opposta. Era il suo amato, che l'aveva aspettata per tutto quel tempo. Tuttavia, Yūko non ricordava chi fosse. La leggenda dice che il Fiume dell'Oblio non perdona nessuno, e i due amanti furono destinati a rimanere separati per sempre, anche se erano uno accanto all'altro.
      </p>
    </div>

    <script>
        var acc = document.getElementsByClassName("accordion");
        for (var i = 0; i < acc.length; i++) {
            acc[i].onclick = function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            }
        }
    </script>

</body>
</html>