Sean by @MILENUCCIA87 - Codewith.it

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

References

<meta>Definisce i meta dati di una pagina web.
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<em>Formatta il testo in corsivo/italico enfatizzato
formmethodDefinisce il metodo di invio dei dati oltre a method
_blankApre i collegamenti ipertestuali in una nuova scheda del browser

Users

Log in to search for users

Explore

Find inspiration

Design, Marketing & AI News (Portf

Loading Animation

UX / Web Design, Freelance – Pro

Lola Harrel CSS Styling Assignment

Alice nel Paese delle Meraviglie

PROVA SITO ALEX

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.

<div class="contenitore">
<div class="base">
  <div class="box">
    <div class="head"></div>
    <div class="foot"></div>
    <div class="icone"><img src="https://64.media.tumblr.com/70fa4234c1d3ef16955b1586f2246232/26aae7d37712d614-80/s250x400/21e0702aeafeb55c52a8b0a7b24e6556dc91bca1.gif"><br><img src="https://64.media.tumblr.com/ee1d37183cdf60f516e6f56a277c8a4c/26aae7d37712d614-af/s250x400/2f099e21e7624680a5c739f5d06c85d6f5ebcd4e.gif"><br><img src="https://64.media.tumblr.com/17b7b22f8156df081506c500ad32cdf1/26aae7d37712d614-81/s250x400/168c26b00c4329bcfb31d32598b14ccd506bd842.gif">
    </div> 
<div class="id"> <center>23 aprile 1994 @ <o>Rock Hill</o> (Sud della Carolina).<br> 185cmx78kg || Occhi nocciola e capelli castano ramati</center></div>
    <div class="testone">
      <e>Sole in toro e luna in capricorno</e> || <l>A thousand things advance, nine hundred and ninety-nine things regress </l>: <f>that is progress</f>. || Figlio di un famiglia di <b>allevatori di cavalli</b>, è cresciuto su una sella imparando a cavalcare ancora prima di saper camminare. Pelle bruciata dal sole, naso troppo lungo, sguardo troppo affilato. Ha la faccia di uno che <m>potrebbe divorarti davvero l'anima</m>. Qualche tatuaggio strano addosso e troppe cicatrici. <n>Forse è nato vecchio</n>, ancora troppo radicato alle <e>vecchie usanze</e>, alle vecchie frasi. Ai "<o>ti amo</o>" detti a voce e non scritti dietro il freddo di una tastiera sempre più piccola, riempiendolo di cuori e baci <m>per dare l'impressione che sia pieno di calore</m>.  Durante una gara, cade perdendo la carriera ed anche una gamba. A quel punto, claudicante dalla gamba destra ed incapace di trovare un senso al tutto, si unisce ad una delle gang della città. || (<f>Blood, beatings and clandestine fights</f>) || Il padre lo spedisce, a calci in culo, ad Outer Banks dove gli insegnano a <n>fare la birra</n> e lo avvicinano, senza neanche sapere come, al <f>culto di Anansi</f>. Forse sono state le preghiere, forse i racconti che gli sono arrivati da più fronti o i troppi peccati da espiare ma è li che coglie l'occasione di fare il passo più lungo della gamba: trasferirsi. A Dublino ci arriva un tre anni più tardi con la stessa apatica <o>insofferenza verso la tecnologia</o> ma una brillante capacità di recuperare informazioni anche dove pare non essercene traccia.  E' durante una notte di fine estate che Anansi gli arriva in sogno permettendogli di scappare da una realtà che gli era sempre parsa particolarmente stretta. Lo accoglie così, <n>quel dio Ingannatore</n>, dentro di se proprio li dove, ormai, lo conoscono tutti. In un Pub Irlandese dove la <d>terra è ferma</d> e non trema più come prima.  || Think of human history and the progress man has made in material terms. He has <f>extended his life</f>, <n>he has gone to the moon</n>, but he really has <l>not made any progress spiritually</l>. <e>None, none at all</e>. It is <n>an illusion</n> that man has progressed.
    </div>
    <p class="sotto"><c>Sean Jaden Cohen</c></p> <p class="affetti"> <d> Niamh - Felix -Keean - Saoirse</d><br>
          <m> Nicholas - Finley - Morrigan - Oliv </m><br>
          <f> Blake - Umi - James - Maeve<br>Patrick - Drahoslav</f></p>
<p class="sopra"><z>I'm not a Saint</z></p>
  </div>
  </div></div>

.contenitore { width: 600px;
height: 600px;
margin: 10px;
background-color:rgba(0, 0, 0, 0) !important; }

.base {
  width: 400px;
  height: 500px;
  background: url("https://i.imgur.com/4r8kxlG.png");
  border: 1px solid #212121;
  margin: auto;
  transition: ease-in-out 1s;
}

.base:hover {
  background: url("https://i.imgur.com/4r8kxlG.png");
}

::-webkit-scrollbar {width: 3px; float: left}
::-webkit-scrollbar-track {background: rgba(0,0,0,0.5)}
::-webkit-scrollbar-thumb {background: #000000 !important}

.box {
  width: 400px;
  height: 500px;
  background: #000000;
  opacity: 0;
  transition: ease 1s;
}

.box:hover {
  height: 328px;
  margin-top: 100px;
  transform: skewY(20deg);
  box-shadow: 0px 8px 10px 1px #000000;
  opacity: 1;
}

.testone {
  transform: skewY(-20deg);
  width: 337px;
  height: 127px;
  overflow: auto;
  text-align: justify;
  position: absolute;
  left: 10px;
  top: 130px;
  font-family: Verdana;
  color: #555;
  font-size: 11px;
}

.id {
  transform: skewY(-20deg);
  width: 337px;
  overflow: auto;
  text-align: justify;
  position: absolute;
  left: 10px;
  top: 100px;
  font-family: Verdana;
  color: #555;
  font-size: 11px;
}

.head {
  width: 100%;
  height: 10px;
  background: #5f5156;
}

.foot {
  width: 100%;
  height: 10px;
  margin-top: 1px;
  background: #695f5f;
}

.sotto {
  font-size: 30px;
  color: #00aa87;
  margin-top: -268px;
  transform: rotate(-20deg);
  margin-left: 3px;
  font-weight: 800;
  text-shadow: 3px 0px 0px #695f5f, 3px 0px 5px #5f5156; 
}

.sopra {
  font-size: 30px;
  color: #00aa87;
  margin-top: 49px;
  transform: rotate(-20deg);
  margin-left: -8px;
  font-weight: 800;
  text-shadow: 3px 0px 0px #695f5f, 3px 0px 5px #5f5156; 
}

.icone{
  width:105px;
  height: 300px; 
  margin-top: -5px;
  margin-left: 350px; 
  transform: skewY(-20deg)
}

.icone img{
position: relative; margin-left: 5px; margin-top: 5px; width: 90px; opacity: 0.9; filter: grayscale(30%); border: 1px solid #231414;}

.affetti {
  width: 300px; 
  text-align: center;
  margin-top: 125px;
  margin-left: 90px; 
  transform: rotate(-20deg);
  line-height: 9px; 
  
}


c {font-family: Sophia; background: linear-gradient(to right,#8c8282, #695f5f, #5f5156,); -webkit-text-fill-color: transparent; -webkit-background-clip: text;  font-size: 22px; font-weight: bolder}

d { 
  font-family: georgia; 
  font-size: 10px;  
  letter-spacing: 2px; 
  text-transform: lowercase; 
  color: #9e867e; 
  font-style: italic;   
  font-weight: bold;
}

e { 
  text-transform: lowercase; 
  font-size: 10px;
  line-height: 11px;
  letter-spacing:1px;
  color: #695f5f;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

o { 
  text-transform: uppercase; 
  font-size: 10px;
  line-height: 11px;
  letter-spacing:1px;
  color: #5f5156;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}


.f { 
  font-family: georgia;
  width: 270px;
  font-size: 10px; 
  letter-spacing: 0.5px; 
  text-transform: lowercase; 
  color: #776c7c; 
  text-align: center;
  font-style: italic;
  font-weight: bold;}

f { 
  font-family: georgia; 
  font-size: 10px; 
  letter-spacing: 0.5px; 
  text-transform: lowercase; 
  color: #776c7c; 
  opacity: 0.7;
  text-align: center;
  font-style: italic;
  font-weight: bold;}

l { 
  text-transform: lowercase; 
  font-size: 10px;
  line-height: 11px;
  letter-spacing: 0.5px; 
  color: #8d7c72; 
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
}

m { 
  text-transform: lowercase; 
  font-size:10px; 
  color: #8c8282; 
  font-family: Georgia, Times, "Times New Roman", serif; 
  letter-spacing: 1px; 
  line-height: 11px;
  font-weight: bolder;
  font-style: italic;
}

n { 
  text-transform: lowercase; 
  font-size: 10px;
  line-height: 11px;
  letter-spacing: 1px;
  font-family: Tahoma, Verdana, Segoe, sans-serif; 
  color: #a48f8a;
  border-bottom: 1px dashed #59352d;
}

t { 
  text-transform: lowercase; 
  font-size:10px;
  line-height: 10px;
  letter-spacing:1px; 
  color: #3e3725; 
  font-family: tahoma; 
}

z { font-family: Sophia; 
color: #3e3725; 
font-size: 35px;
letter-spacing: 2px; }

@font-face {font-family: Sophia; src: url(https://dl.dropbox.com/s/tlmqs797yzqybl2/SophiaMartini.otf);}