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

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

References

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
requiredRende obbligatorio un campo di input
<nav>Definisce un menu di navigazione
classDefinisce una o più classi per elemento

Users

Log in to search for users

Explore

Find inspiration

Ricetta Cous Cous

Gesù nostro signore(2)

Con nome bandiera

Pagina di esempio

terne pitagoriche

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.

<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>