Mulan by @Licia.cava - Codewith.it

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

Referenze

autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<object>Incorpora risorse varie nella pagina web.
<title>Definisce il titolo della pagina web.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
text/plainDefinisce un metodo di non codifica dei valori di un form
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio 01 pagina semplice

menu a comparsa Jquery

sanchez ximena html 3

Le meraviglie d\\

Questionario Serie A

La ragazza con la valigia

TechForge | Riparazioni e Stampa 3D

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>
    <title>Mulan</title>
  <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            background-color: #AB001B;
            padding: 15px;
            position: relative;
            height: auto;
        }
        .left-column, .right-column {
            width: 50%;
        }
        .left-column2, .right-column2 {
            width: 50%;    
        }
        .right-column img {
            width: 47%;
            margin: 0px 15px;
            border-radius: 30px;
            position: absolute;
            right: 0;
        }
        h1 {
            text-align: center;
            color: #F4CB57;
            font-size: 39px;
            width: 100%;
        }
        .full-width {
            width: 100%;
        }
        .container2 {
            display: flex;
            position: relative;
            background-color: #f3cc56;
            padding: 15px;
            position: relative;
            height: auto;
        }
        .left-column2 img {
            width: 47%;
            margin: 0px 15px;
            border-radius: 30px;
            position: absolute;
            left: 0;   
        }
        .right-column2 p {
            align: right;
        }  

        .accordion {
            width: 70%;
            margin: 35px;
        }  
        .accordion-button {
            background-color: #2f9c85;
            color: white;
            cursor: pointer;
            padding: 15px;
            width: 100%;
            border-width: 7px;
            border-color: #9bbe60;
            border-radius: 30px;
            text-align: left;
            outline: none;
            font-size: 21px;
            transition: background-color 0.2s ease;
        }
        .accordion-button:hover {
            background-color: #9bbe60;
        } 
        .accordion-content {
            padding: 15px;
            display: none;
            background-color: #d58149;
            border-top: 1px solid #ddd;
            border-radius: 20px;
            font-size: 16px;  
        }     
        .accordion.active .accordion-button {
            background-color: #F4CB57;
        } 

        .button {
           font-size: 21px;
           border: 1px black solid;
           border-radius: 15px;
           padding: 7px 10px;
        } 
        .button:hover {
            background-color: #f3cc56;
        }
        
        .container3 {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 20px;
        }
        .column {
            background-color: #f3f3f3;
            padding: 20px;
            flex: 1; 
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }
        .column:hover {
            transform: translateY(-10px); 
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }


  </style>
</head>  

<body>
<h1 style= "text-align: center; color: #F4CB57; background-color: #AB001B; font-size:39px; margin:0;"> Mulan </h1>
<div class="container">
    <div class="left-column">
        <p style="font-size: 22px; color:white;">
            Nella <i>Cina Imperiale</i> della dinastia Han, una ragazza dal cuore d'oro con principi morali ben saldi viveva una vita che non le si addiceva. 
        <br>
        <br>
        Al mattino del giorno successivo al suo diciottesimo compleanno fu preparata e messa in tiro per mostrare la sua disponibiltà e adeguatezza come futura sposa nella società patriarcale cinese.
        </p>
    </div>

    <div class="right-column">
        <img src=[img1] alt="Immagine di Mulan">
    </div>

    <p class="full-width" style="font-size:22px; color:white;">
        L'esito non fu quello desiderato e Mulan sentì di aver deluso la sua famiglia perchè era l'unico modo per potargli <b>onore</b>.
    </p>
</div>

<div class="container2">
  <div class="left-column2">
    <img src=[img2] alt="Immagine di Chi Fu">
  </div>  

  <div class="right-column2">
    <p align="right" style="font-size: 22px; color:black;">
           Ma il peggio doveva ancora arrivare! 
        <br>
        <br>
        Più tardi nella giornata il consigliere dell'Imperatore arrivò in villaggio per radurare tutti gli uomini disponibile ad andare in guerra contro gli <b>Unni</b> invasori: tra cui suo padre.
        <br>
        <br>
        Così per dar sfogo ai suoi principi e al suo animo ribelle decide, in piena notte, di partire al posto di suo padre travestendosi da uomo!
        <br>
        <i>Ma come andrà la sua avventura?</i>
        </p>
  </div> 
</div>

<center><div class= "accordion">
  <button class="accordion-button">Opzione 1: Tutto bene</button>
    <div class="accordion-content">
        <p style="font-size: 20px">Grazie alla sua determinazione e concentrazione. Riesce a superare gli allenamenti e con la sua truppa, la più difficile da addestrare, riescono ad evitare l'attacco all'Imperatore da parte degli Unni.</p>
        <a class="button" href="#finale">Finale</a>
    </div>
</div>

<div class= "accordion">
   <button class="accordion-button">Opzione 2: Un ritorno trionfante</button>
    <div class="accordion-content">
        <p style="font-size: 20px">Mulan purtroppo viene scoperta e cacciata dalla truppa, ma scoprendo informazioni importanti decide di non tornare a casa e aiutare i suoi amici a proteggere l'Impero.</p>
        <a class="button" href="#finale">Finale</a>
    </div>  
</div>

<div class= "accordion">
   <button class="accordion-button">Opzione 3: Una sorpresa inaspettata</button>
    <div class="accordion-content">
        <p style="font-size: 20px">Dopo tanta fatica e sudore ed aver dimostrato di essere una grande guerriera viene scoperta, ma dopo essersi consultati il comandante decide di non mandarla a casa per le sue grandi capacità.</p>
        <a class="button" href="#finale">Finale</a>
    </div>  
</div></center>

<hr color=”#AB001B”>

<div class="container3">
    <div class="column">
      <img src='[img3]' alt="Generale Li shang" style="width: 150px;" >
        <p>Generale Li Shang, capo della truppa. Bello, coraggioso e determinato. </p>
    </div>

    <div class="column">
      <img src='[img4]' alt="Unni" style="width: 150px;" >
        <p>Capo degli Unni. Brutto e brutale.</p>
    </div>

    <div class="column">
      <img src='[img5]' alt="Mushu e grillo" style="width: 150px;" >
        <p>Mushu, "dragone" risuscitato e un grillo, sono gli amici fidati di Mulan.</p>
    </div>
</div>

<div style="background-color: #f3cc56; font-size: 22px; line-height: 1.7em; padding: 15px 0px" align="center">
  <a name="finale"></a>
  <h2>E vissero felici e contenti...</h2>
  <p style="padding: 35px">Salvata la Cina e riaccolta in famiglia con amore, si tritrova anche a sposare il Generale! Brava Mulan i nostri complimenti!</p>  
</div>  


<script>
    var accordions = document.querySelectorAll('.accordion');

    accordions.forEach(function(accordion) {
        var button = accordion.querySelector('.accordion-button');
        var content = accordion.querySelector('.accordion-content');

        button.addEventListener('click', function() {
          
            accordion.classList.toggle('active');

            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    });
</script>

</body>