Le avventure di Peter Pan by @susanna.man - Codewith.it

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

Referenze

loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<table>Tag primario per la creazione di tabelle
typeSpecifica la tipologia/funzione di un elemento.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
acceptDefinisce e filtra il formato dei file per il tag <input type=file>

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Quiz ristrutturazione

Esercizi 05/03/2024 es4

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.

<!DOCTYPE html>
<html lang="it">
<head>
    <title>Le avventure di Peter Pan</title>
</head>
<body> 

    <h1 style="font-family: 'Great Vibes', cursive; color: #4B7541; text-align: center; font-size: 50px; text-shadow: 2px 2px 4px rgba(34, 115, 170, 0.7);">
        Le avventure di <u>Peter Pan</u>
    </h1>

    <div style="background-color: #2273AA; padding: 20px;">
        <i><h2 style="font-family: 'Verdana'; color: white; text-align: center; padding-left: 100px; padding-right: 100px;">
            Quella che stiamo per raccontare è una storia senza tempo, una storia che molti hanno vissuto da bambini, ma poi, da grandi, hanno dimenticato.
        </h2></i>
        <img src="https://opinione.it/media/5908240/frau.jpg" width="60%" style="display: block; margin: 0 auto; border-radius: 50%;">
    </div>

    <div style="color: #ffffff; font-family: Verdana; font-size: 16px;">
        <div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4CLl_tVbJcvlvbofAzVvxNppDYvHqxQ7ETQ&s'); background-size: cover; background-attachment: fixed; padding: 20px; position: relative;">
            <div style="background-color: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;"></div>
            <p style="position: relative; z-index: 1;">
                Questa volta il racconto comincia a Londra, nella casa della famiglia Darling. 
                I fratelli Darling, <b>Wendy, Gianni e il piccolo Michele</b>, sono molto annoiati. 
                È ora di andare a dormire, ma loro non hanno sonno. 
                Allora Wendy propone ai fratelli di raccontare loro <b>le fantastiche avventure di Peter Pan.</b>
                <br/><br/>
                Gianni e Michele sono entusiasti dell’idea e così Wendy incomincia a raccontare la storia di Peter Pan e dei pirati.
                <br/><br/>
                Mentre la sorella parla, i due fratellini cominciano a giocare: Michele fa la parte di Peter Pan e Gianni, impugnando una spada di legno, impersona il temibile Capitan Uncino. 
            </p>
            
            <blockquote style="position: relative; z-index: 1;">«Arrenditi!»</blockquote> 
            <blockquote style="position: relative; z-index: 1;">«Mai. Devo vendicare la mano che mi hai tagliato!»</blockquote>
            
            <p style="position: relative; z-index: 1;">
                I due fratelli sono intenti a lottare saltando sul letto quando una strana voce, proveniente dalla finestra, li interrompe.
            </p>
        </div>
    </div>

    <br>
    <hr style="border: 5px solid #EFCB6D; width: 50%; margin: auto;">

    <div style=" font-family: Verdana; font-size: 16px; padding: 20px;">
        <p>
            È proprio Peter Pan, il ragazzo magico che vive nell’<b>Isola che non c’è</b> e ogni tanto si diverte ad andare a trovare Wendy e i suoi fratelli.
            <blockquote>«Oh, Peter!»</blockquote> esclama la ragazzina appena lo vede. 
            <blockquote>«Sapevo che saresti tornato!»</blockquote>
            Il leggendario ragazzo ama ascoltare i racconti di Wendy, perché parlano sempre di lui! 
            Ma l’ultima volta che si è recato a trovare la ragazza, il distratto Peter ha perso la sua ombra in casa Darling.
            <br/><br/>
            Premurosa, Wendy prende ago e filo e, mentre riattacca l’ombra di Peter Pan ai suoi piedi, Gianni e Michele chiedono al ragazzo di raccontare le avventure dell’<b>Isola che non c’è</b>, il magico posto dove non si diventa mai grandi.
        </p>
    </div>

    <hr style="border: 5px solid #2273AA; width: 50%; margin: auto;">
    <br>

    <div style="background-color: #4B7541; padding: 20px; display: flex; align-items: center;">
        <div style="flex: 2; color: #ffffff; font-family: Verdana;">
            Ma non ci sono parole adatte a descrivere il luogo e Peter Pan decide di portare i ragazzi e Wendy nell’Isola magica. 
            Gianni e Michele sono entusiasti all’idea di partire.
            <br/><br/>
            C’è però un piccolo problema: i bambini non sanno volare come fa Peter Pan. Ma è sufficiente una spruzzatina di polvere di fata e … via!
            <br/><br/>
            <i>I quattro amici si alzano in volo leggeri nel cielo di Londra.</i>
            <br/><br/>
            Peter Pan precede i fratellini indicando loro il cammino da percorrere: 
        </div>
        <div style="flex: 1; text-align: right;">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgyb6SEHiDvFgfOxvji83Aa57ioJC7TAvUYw&s" alt="Peter Pan" />
        </div>
    </div>

    <div style="text-align: center;">
        <font size="20" color="#EFCB6D">
            <blockquote>«La seconda stella, poi si volta e … via, sempre dritto!»</blockquote>
        </font>
    </div>

    <div style="text-align: center;">
        <img src="https://images.everyeye.it/img-articoli/le-avventure-peter-pan-walt-disney-viaggio-isola-non-c-E-speciale-v9-49833-1280x16.jpg" width="100%">
    </div>

</body>
</html>