Mulan2 by @Licia.cava - Codewith.it

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

Referenze

preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<hr>Inserisce una linea orizzontale
<embed>Tag per l'incorporamento di contenuti multimediali
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La sicurezza in informati

Borsino politico(2)

Questionario es esame

Inserimento immagini in un testo

Il museo di Leonardo

Esercizio sui cicli

LEZIONE 1 AULAB

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