Keean by @MILENUCCIA87 - Codewith.it

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

References

<h4>Titolo di intestazione di quarto livello
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<map>Inserisce immagini mappa cliccabili in un documento
getDefinisce un metodo di invio di dati al server
<b>Formatta il testo in grassetto
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.

Users

Log in to search for users

Explore

Find inspiration

Esercitazione 1

angoli e shadow

spese universitarie

spiaggia corongiuali

esercitazioni ipertestual

Appunti Informatica

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.

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