Keean by @MILENUCCIA87 - Codewith.it

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

Referenze

classDefinisce una o più classi per elemento
<h4>Titolo di intestazione di quarto livello
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<table>Tag primario per la creazione di tabelle
postDefinisce un metodo di invio di dati al server
<pre>Indica una parte di testo preformattato

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

JS Istruzioni condizionali es3

spaghettiamaInglese.html

Esercitazione 1ù

UX / Web Design, Freelance – Pro

Esercitazione n.1

Countdown Passaporto

Form per il torneo misto disfo

Neon Flux - Visual Design in Motio

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>