Mulan2 by @Licia.cava - Codewith.it

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

References

<b>Formatta il testo in grassetto
getDefinisce un metodo di invio di dati al server
application-x-www-form-urlencodedCodifica dei caratteri di un form
listCollega un elemento input con una lista di opzioni datalist
<li>Inserisce voci all'interno di una lista
<h6>Titolo di intestazione di sesto livello

Users

Log in to search for users

Explore

Find inspiration

spotify dashboard

pianoforte.html

Esercizio forse più giust

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>
    <title>Mulan</title>
</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>

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