summer edition by @MILENUCCIA87 - Codewith.it

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

Referenze

srcIndica la provenienza di una risorsa esterna (tramite URL).
<tr>Definisce le righe di una tabella (rows)
valueValore alfanumerico o booleano contenuto in un elemento
heightDetermina l'altezza di un elemento HTML in pixel
<p>Serve a definire paragrafi di testo
typeSpecifica la tipologia/funzione di un elemento.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Tally

Countdown Passaporto 1

Ruota delle Cucine

copia da paragrafo

informatica 13/10

Campagna in primavera

google search clone

esercitazione 1

Taketori Monogatari

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>
.ritratto_nome { font-family: 'Water Brush', cursive; font-size: 35px; color: #9e867e; font-weight: normal; letter-spacing: 3px; }
.profilo { border: none;   font-family: Verdana;  color: #9e867e; font-size: 11px;}
.scheda-info {font-family: Verdana;  color: #9e867e; font-size: 14px;}

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

/* --------------- AREA LAVORO --------------- */
.base {position: relative; background-color: none; 
       width: 620px; 
       height: 550px;
       margin-top: 30px;}

/* --------------- IMMAGE --------------- */
.sfondoA {width: 360px; 
          height:450px; 
          position: relative; 
          z-index: 2;
          border: 1px solid #000000;
          left: 150px; 
          background-image:url(https://i.imgur.com/mMdHcCL.png);
          transition: 1s all ease-in-out}

.sfondoB {width: 360px; 
          height:450px; 
          position: relative; 
          z-index: 2;
          left: 0px;
          background-image:url(https://i.imgur.com/cOXO2nE.png); 
          opacity:0; 
          transition: 1s all ease-in-out}

.sfondoA:hover .sfondoB {opacity: 1; transition: 1.5s all ease-in-out}
.sfondoA:hover .quote {position:relative; z-index:4; margin-top: -20px; margin-left: 15px; transition: 1.5s all ease-in-out}

.gif { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  width: 70px;
  left: 45px;
  top: 45px;
}

.gif-1 { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  width: 70px;
  left: 201px;
  top: 45px;
}

.gif-2 { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  width: 70px;
  left: 123px;
  top: 45px;
}
/* --------------- SEZIONE --------------- */

.testo1 {transition: 1.2s all ease-in-out; 
         position: relative; 
         top: -390px; 
         left:40px; 
         padding: 11px; 
         width: 150px; 
         height: 260px; 
         line-height: 10px; 
         overflow: auto; 
         font-size: 11px; 
         color: #777; 
         font-family: calibri; 
         text-align: justify; 
         background-color: #000; 
         border-top: 5px solid #585959;
         border-bottom: 5px solid #585959;}

.testo1:hover {transform: rotate(0deg); margin-left: -55px; transition: 1s all ease-in-out}

.testo2 {transition: 1s all ease-in-out; 
         position: relative; 
         top: -420px; 
         left:460px; 
         padding: 10px; 
         width: 115px; 
         height: 80px; 
         line-height: 10px; 
         overflow: auto; 
         font-size: 11px; 
         color: #777; 
         font-family: calibri; 
         text-align: justify; 
         background-color: #000; 
         border-top: 5px solid #585959;
         border-bottom: 5px solid #585959;}

.testo2:hover {margin-left:45px; transition: 1s all ease-in-out}


.quote { position:relative; 
        margin-top: -210px; 
        margin-left: 15px; 
        transition: 1s all ease-in-out}

/* --------------- STYLE SCRITTE --------------- */

e {height: 15px; padding:2px; background-color:#000; font-size: 8px; font-family: arial; color: #777; text-transform:uppercase; letter-spacing:1px;}

c {font-family: 'Water Brush', cursive; font-size: 42px; text-transform: normal; color:#585959;}

d { 
  font-family: georgia; 
  font-size: 11px;  
  letter-spacing: 1px; 
  text-transform: normal; 
  color: #9e867e;   
  font-weight: bold;
}

e1 { 
  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: 9px;
  line-height: 11px;
  letter-spacing:1px;
  color: #5f5156;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

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: normal;
  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; }

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

</style>

<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Water+Brush&display=swap" rel="stylesheet">

<div class"base"><div class="sfondoA"><div class="sfondoB"></div>
<div class="quote"><div style="margin-left: 80px; margin-bottom: 0px; width:280px;"><e>damaged people are dangerous</e></div>
<div style="margin-left: 60px; width: 210px;margin-bottom: 0px;margin-top: -25px; z-index: 7; padding: 3px;"><c>Sean J. Cohen</c></div>
<div style="width:355px; margin-left: 38px; margin-top: -15px;"><e>THEY KNOW HOW TO MAKE HELL FELL LIKE HOME</e></div>
  <img src="https://64.media.tumblr.com/ee1d37183cdf60f516e6f56a277c8a4c/26aae7d37712d614-af/s250x400/2f099e21e7624680a5c739f5d06c85d6f5ebcd4e.gif"class="gif"><img src="https://64.media.tumblr.com/17b7b22f8156df081506c500ad32cdf1/26aae7d37712d614-81/s250x400/168c26b00c4329bcfb31d32598b14ccd506bd842.gif" class="gif-1"><img src="https://64.media.tumblr.com/70fa4234c1d3ef16955b1586f2246232/26aae7d37712d614-80/s250x400/21e0702aeafeb55c52a8b0a7b24e6556dc91bca1.gif"class="gif-2"><br><br><br></div>  

</div>
  <div class="testo1"><center><span style="font-family: 'Water Brush', cursive; color: #8A889F; font-size: 12px; letter-spacing: 2px">I'm not a Saint</span><br><g>23 aprile 1994 @ <o>Rock Hill</o><br>nocciola x castano ramato<br>185cx78</g></center><e1>Sole in toro e luna in capricorno</e1> || <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 <e1>vecchie usanze</e1>, 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>. <e1>None, none at all</e1>. It is <n>an illusion</n> that man has progressed.</div>
  <div class="testo2"><center><d> Keean; Felicity;</d><br><f>Finley; Saiorse; Nicholas;</f><br><m>Francis; Morrigan; Noa; Rylee; Elizabeth; Gabriele; Cassidy; Zachary;</m><br>Patrick - Drahoslav</center></div></div>