Golden Boy DEF by @true_veritas - Codewith.it

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

Referenze

formnovalidateImpedisce la convalida di un singolo elemento input
<html>Tag primario di un documento HTML
<div>Crea contenitori generici o sezioni in una pagina
hreflangConsente di dichiarare la lingua del documento collegato.
<h1>Titolo di intestazione di primo livello
minImposta il valore numerico o temporale minimo per un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

console elements(2)

My Anime Blog - Ninjas and Dragons(2)

torta della nonna

Bootstrap sources

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.

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