Golden Boy DEF by @true_veritas - Codewith.it

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

References

formnovalidateImpedisce la convalida di un singolo elemento input
<a>Inserisce link e collegamenti ipertestuali
postDefinisce un metodo di invio di dati al server
<th>Definisce una cella di intestazione di una tabella HTML.
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<b>Formatta il testo in grassetto

Users

Log in to search for users

Explore

Find inspiration

Esercitazione 1

esercizio 1.1-1.6

Primo esercizio

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.

<br>
<br>
<br>
<br>
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Golden Boy</title>
    <style>
        body {
            background-image: none;
        }

        .contenitore {
            box-shadow: 3px 3px 4px #a58659;
            width: 500px;
            height: 450px;
            background: #d2c6b2;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            font-family: 'Old Standard TT', serif;
            transition: 0.5s;
        }

        .immagine {
            position: relative;
            width: 100%;
            height: auto;
            background: none;
            left: 0px;
            transition: 1s;
            transition-delay: 0.5s;
        }

        .titolo2 {
            position: absolute;
            width: 250px;
            height: 360px;
            top: 10px;
            left: 5px;
            padding: 20px;
            overflow: auto;
            opacity: 0;
            transition: 2s;
            transition-delay: 0s;
            font-size: 10px;
            text-align: justify;
            color: #7b2f1b;
            line-height: 100%;
            font-family: 'Times New Roman', Times, serif;
            text-align: center;
        }

        .id {
            position: absolute;
            width: 235px;
            height: 250px;
            top: 120px;
            left: -12px;
            padding: 25px;
            overflow-y: scroll;
            opacity: 0;
            transition: 2s;
            transition-delay: 0s;
            font-size: 10px;
            text-align: justify;
            color: #4f3324;
            line-height: 100%;
            font-family: Tahoma, Geneva, sans-serif;
        }

        .titolo2 div {
            text-align: center;
            letter-spacing: 2px;
            font-size: 5px;
            text-transform: uppercase;
            margin-bottom: 5px;
            font-family: 'Times New Roman', Times, serif;
            color: #7b2f1b;
        }

        .contenitore:hover .titolo2 {
            opacity: 1;
            transition: 1s;
            transition-delay: 0.5s;
        }

        .contenitore:hover .id {
            opacity: 1;
            transition: 0.5s;
            transition-delay: 0.5s;
        }

        .contenitore:hover .immagine {
            opacity: 0.8;
            transition: 1s;
            left: 117px;
        }

        .contenitore:hover .text1 {
            opacity: 0;
            transition: 1s;
            right: 5px;
            color: #d6e0d2;
        }

        .contenitore:hover .bg {
            opacity: 0;
            transition: 1s;
        }

        .contenitore:hover .titolo1 {
            opacity: 1;
            transition: 1s;
            right: 0px;
            color: #28261c;
        }

        .gif1 {
            width: 80px;
            border: 1px dotted #3b2b28;
            border-radius: 100%;
            margin-top: 0px;
            position: relative;
            left: 30px;
            height: 80px;
            filter: grayscale(30%);
        }

        .gif2 {
            width: 80px;
            border: 1px dotted #3b2b28;
            border-radius: 100%;
            margin-top: 0px;
            position: relative;
            left: 45px;
            height: 80px;
            filter: grayscale(30%);
        }

        .gif3 {
            width: 80px;
            border: 1px dotted #3b2b28;
            border-radius: 100%;
            margin-top: 0px;
            position: relative;
            left: 0px;
            height: 80px;
            filter: grayscale(30%);
        }

        .affetti {
            text-align: center;
            font-family: Tahoma, Geneva, sans-serif;
            font-size: 9px;
            color: #7b2f1b;
            letter-spacing: 0.5px;
            text-shadow: 0px px px #000;
            line-height: 10px;
        }

        .a {
            position: left;
            font-family: Tahoma, Geneva, sans-serif;
            color: #7b2f1b;
            font-size: 10px;
            letter-spacing: 1px;
            line-height: 10px;
            font-weight: normal;
            text-transform: uppercase;
            display: block;
            margin-left: 0px;
        }

        c {
            font-family: 'Times New Roman', Times, serif;
            font-size: 12px;
            line-height: 1;
            letter-spacing: 0.5px;
            color: #a58659;
            text-shadow: #8e806b 1px 0px;
            cursor: default;
            display: inline;
        }

        e {
            font-family: 'Times New Roman', Times, serif;
            color: #4f3324;
            font-size: 10px;
            text-shadow: #b4a48c 1px 1px;
            cursor: default;
            letter-spacing: 2px;
            line-height: 12px;
            font-weight: normal;
            text-transform: lowercase;
            display: inline;
        }

        f {
            font-family: 'Cormorant Garamond', serif;
            font-size: 11px;
            line-height: 1;
            letter-spacing: 0.5px;
            color: #e2a54b;
            text-shadow: #8e6d3c 1px 1px;
            cursor: default;
            display: inline;
        }

        g {
            font-family: 'Cormorant Garamond', serif;
            font-size: 10px;
            color: #8e6d3c;
            letter-spacing: 0.5px;
            text-shadow: 0px px px #000;
            line-height: 10px;
        }
    </style>
</head>
<body>
    <div class="contenitore">
        <div class="immagine">
            <img src="https://i.imgur.com/haZ8dPz.png" alt="Image">
        </div>
        <div class="titolo2">
            "<e><b>GOLDEN</b> BOY</e>"
            <center>♥</center>
            <i><e>His eyes were the color of 
            <br>
            <b>aquamarine stones</b>; he smelled like 
            <br>
            <b>earth after rain</b>, he smelled like 
            <br>
            <b>irish meadows</b>.</e></i>
        </div>
        <div class="id">
            <img src="https://i.imgur.com/vh7631v.gif" class="gif1">
            <img src="https://i.imgur.com/d5FbmT2.gif" class="gif2">
            <br><br><br><br><br>
            <i>Irving <f>Theodore</f> Wilde III</i> ∾ <f><i>private schooling</i></f> ∾ <e>blonde hair, aquamarine eyes</e> ∾ <g>178cmx78kg</g> ∾ <i>modello per la <c>Wilde Enchantment</c></i> ∾ <f>Tirocinante Magizoologo</f> ∾ <b>quidditch lover</b> ∾ <e>golden retriever boyfriend</e>
            <br><br>
            <center>♥</center>
            <br><br>
            <center>La <f>famiglia Wilde</f> è sempre stata <f>Purosangue</f>, benestante, <c>avvantaggiata in ogni aspetto della vita</c>. Durante la <e>Seconda Guerra dei Maghi</e>, però, tutti i Wilde compiono una forte <f>opposizione nei confronti di Voldemort</f> e dei suoi seguaci. Rischiano di perdere tutto, ma il giovane <e>Aengus</e> e la sua moglie <f>Natababbana</f> di nome <e>Maeve</e>, riescono a ristabilire le sorti della famiglia. <f>Aengus</f> si impiega presso il <e>Ministero della Magia</e>, mentre <e>Maeve</e> fonda la <c>Wilde Enchantment</c>, un’azienda che produce e distribuisce <i>“cosmetici magici”</i>.
            <br><br>
            <f>Irving</f> arriva, fortemente voluto dalla coppia, come <e>primogenito</e>. Cresce circondato da amore, nonostante i genitori siano molto impegnati con il lavoro e <i>poco presenti</i>, ma presto iniziano a pesare su di lui le <e>aspettative</e> in quanto erede diretto. <c>Fin da piccolo la madre lo inserisce nel mondo della moda magico</c>, rendendolo protagonista delle <e>campagne pubblicitarie</e> per le aziende di famiglia. <f>Irving</f>, però, è interessato a cose più semplici: <e>le Creature Magiche, le piante, la Trasfigurazione</e>.
            <br>
            Il rendimento scolastico -nonostante l’istruzione privata- non è il massimo, per questo <b>i genitori cercano di farlo concentrare sul proprio aspetto fisico</b>, sicuramente un ottimo mezzo per aprirsi molte porte. <f>Irving</f> sviluppa inevitabilmente <b>problemi di autostima</b>, pensando di essere solo un bel faccino. A confermare questo timore ci sono <e>i primi approcci sentimentali e fisici</e> i ragazzi e le ragazze lo avvicinano spesso con l’intenzione di usarlo per il suo corpo o i suoi soldi, facendo crescere in Irving il bisogno di rapporti privi di superficialità, ma anche problemi di fiducia.
            <br><br>
            Con l’arrivo dei <f>fratelli minori</f> le cose cambiano: <b>l’ammirazione e l’affetto</b> dei due piccolini lo aiutano a rimettere tutto in discussione e a trovare il coraggio di dire ai suoi genitori che desidera intraprendere anche la carriera di <f>Magizoologo</f>. I genitori accettano senza troppe storie, consapevoli che potranno portare avanti gli affari dei Wilde anche gli altri due figli. <f>Irving</f> lavora moltissimo su se stesso, in parallelo ai <i>MAGO</i> inizia ad andare da un <b>Magipsicologo</b> per acquisire più <c>consapevolezza e sicurezza</c>. Allo scoccare dei diciannove anni riesce finalmente a richiedere di iniziare il <f>Tirocinio da Magizoologo</f>, cercando di trovare un equilibrio con il lavoro da modello.
            <br><br><br>
            <center>♥</center>
            <br><br>
            <center><e>"ALL HEART"</e><br><i>it takes <f>grace</f> to remain <f>kind</f><br> in cruel situations.</i></center>
            <br><br><br><br>
            <div class="affetti">
                <f>PEOPLE ›</f> coming soon
                <br><br>
                <center><img src="https://i.imgur.com/43d9q45.gif" class="gif3"></center>
                <br><br><br><br>
                <center>♥</center>
                <br><br>
                //off ∾ <b>N.B.</b> Theo potrebbe essere riconosciuto da appassionati di makeup/moda,
                la sua faccia compare spesso su cartelloni pubblicitari,
                <br>volantini e riviste.
                <br><br><br>
                <i>code by @noone00</i>
            </div>
        </div>
    </div>
</body>
</html>
<br>
<br>
<br>
<br>