summer edition by @MILENUCCIA87 - Codewith.it

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

References

<h1>Titolo di intestazione di primo livello
<q>Indica una parte di testo come citazione breve
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<ol>Crea liste ordinate o numerate.
minlengthDetermina il numero minimo di caratteri per un elemento input
<h2>Titolo di intestazione di secondo livello

Users

Log in to search for users

Explore

Find inspiration

pr - opening-info

questa sarà una pagina web dedic

Esercizio tabella e form

inserimento immagini in un testo

Blocco visualizzazione PC

Ricetta Cous Cous

3 LS 29-01 IPERTESTI INTERNI

fibonacci manoel

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