Keean by @MILENUCCIA87 - Codewith.it

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

Referenze

formSpecifica a quale form appartiene un elemento.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
animationDefinisce i parametri dell'animazione di un elemento o selettore
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<html>Tag primario di un documento HTML
<head>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

GoUp Fitness Il tuo percorso verso

AoIT Dashboard 2024 v1

Review of Functions I

Obiettivi futuri.html

HTML con classi

Geyser NEW 25 Litri

DEMO: For Loop 2

99 Bottles of Beer

Inizio gioco progetto di informati

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.

<style>
  @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

  ::-webkit-scrollbar {
    background-color: #000000;
    width: 0px;
  }

  ::-webkit-scrollbar-track {
    background-color: #000000;
  }

  ::-webkit-scrollbar-track-piece {
    background-color: #101010;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 5px;
  }

  .base {position: relative; background-color: none; 
       width: 600px; 
       height: 700px;
       margin-top: 30px;}

  .image {
    display: block;
    width: 500px;
    height: 500px;
  }

  .overlay {
    position: relative;
    top: -500px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 500px;
    width: 500px;
    opacity: 0;
    transition: 1.2s all ease-in-out;
  }

  .base:hover .overlay {
    opacity: 1;
  }

  .base:hover .quote {
    position: relative;
    margin-top: -520px;
    margin-left: 5px;
    transition: 1s all ease-in-out
  }

  .quote {
    position: relative;
    margin-top: -650px;
    margin-left: 5px;
    font-size: 10px;
    color: #777;
    font-family: arial;
    text-transform: uppercase;
    padding: 1px;
    transition: 1s all ease-in-out
  }
c { font-family: Tahoma; color: #875c4f; font-size: 10px; letter-spacing: 1px; line-height: 6px; font-weight: 700; text-transform: uppercase;}
f { font-family: Tahoma; color: #875c4f; font-size: 10px; letter-spacing: 1px; line-height: 6px; font-weight: 700; text-transform: uppercase;}
g { font-family: cambria; font-size: 10px; line-height: 10px; color: #60453d; cursor: default; text-transform:uppercase; display: inline; letter-spacing: 1px;}
h { font-family: tahoma; font-size: 10px; color: #5c545c; text-transform: lowercase; letter-spacing: 1px; line-height: 10px; border-bottom: 1px dashed #b29b7d;}
l {font-family: cambria; color: #948c84; font-size: 11px; letter-spacing: 2px; text-transform: lowercase; font-style: italic; }
m {font-family: cambria; font-size: 11px; color: #5c5c40; text-transform: lowercase; letter-spacing: 1px; line-height: 9px;}
e { background-color: #ccc; font-size: 9px; font-family: calibri; color: #111; text-transform: uppercase;letter-spacing: 1px;}

</style>


  <center>
    <div class="base"><img src="https://i.imgur.com/ZZHOktF.png" style="width: 450px; height:500px;">
      <div class="overlay"><div style="width: 450px; height:500px;">
        <div class="testo1" style="position: absolute; top: 5px; left:30px; padding: 10px; width: 180px; height: 350px; line-height: 10px; overflow: auto; font-size: 11px; color: #666666; font-family: calibri; text-align: justify; background-color: #000; opacity: 0.7;"><center><c><i>I simply do not vibe</i></c><br><e>with the law</e></center><br>
<c>Keean Aemon Macaulay</c>,   <e>Son of the Elements</e>  09.08.04 <b>›</b> @Dublin. <b>›</b> 26 y.o. <b>›</b> <f>Elmyr</f> per il Byrne, <e>Neehan</e> per il Metaverso. <b>›</b> I colori di uno stereotipo di occhi verdi, ciuffi rossi e <g>lentiggini</g> a coprire una pelle che di sole ne ha sempre visto poco. <b>›</b> Cresciuto tra torri di LEGO, pistole d'acqua e <h>chiazze di sangue</h> che riempivano i lavandini di casa. Stretto nella vita di un Cartello che gli ha insegnato come <l>per i propri ideali si finisce anche a morire.</l> Da bambino gli hanno affibbiato tutti gli aggettivi del mondo: agitato, iracondo e <m>irruento</m> come pochi. La laurea in  <m>computer science</m> ha dimostrato che a volte si applica anche. <h>Never underestimate the primal appeal to lose one's self</h> e lui sembra averne fatto un motto e una missione di vita. Una notte di <f>urla e dolore</f> lo fa rinascere come Incarnazione del Fuoco stesso, ma una forza della Natura, sotto sotto, lo è sempre stato. Solo che ora può parlare col bassotto preferito. <i><l>But you have to satisfy the monster. The monster has loved you for longer than anyone else.</l></i> 
        </div>
        <div class="testo2" style="position: absolute; top: 380px; left:30px; padding: 10px; width: 180px; height: 70px; line-height: 10px; overflow: auto; font-size: 11px; color: #666666; font-family: calibri; text-align: justify; background-color: #000; opacity: 0.7;">Affetti affettini, se è troppo grande il box basta ridurre l'height.
        </div>
      </div></div>
      <div class="quote">
        <div style="margin-left: 0px; margin-bottom: 0px; width:280px; transform:rotate(1deg); background-color: #000;padding-left:2px "> when i'll go into the ground i won't go quietly</div>
        <div style="margin-left: 10px; width: 145px;margin-bottom: 0px; background-color: #000; padding-left:2px">i'm bringing my <i>c r o w n</i></div>
        <div style="width:350px ;transform:rotate(-2deg);background-color: #000;padding-left:2px ">when i'll go into the ground they gotta <b>bury me face down</b></div>
      </div></div>
  </center>