Scheda by @KiraKuru - Codewith.it

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

References

widthImposta la larghezza di un elemento HTML
<h6>Titolo di intestazione di sesto livello
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<link>Collega il documento corrente con una risorsa esterna
autofocusAttiva un elemento al caricamento della pagina.
<hr>Inserisce una linea orizzontale

Users

Log in to search for users

Explore

Find inspiration

4399-sposta oggetto

Esercizio sui cicli

La torta della nonna es esame

Conta vocali prof

La Ghigliottina | Matteo Greco &

Borsino politico(2)

Esercitazione 2

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="table">
  <div class="main_box">

    <div class="gif_box">
    </div>


    <div class="quote_box" id="one">

The closer you get to the light 

    </div>
    <div class="quote_box" id="two">

The greater your shadow becomes

    </div>
    <div class="quote_box" id="three">

Capture their hearts

    </div>
    <div class="quote_box" id="fore">

Pain is being human

    </div>


    <div class="text_box-id">
      <div class="text_box-inner-id">

<m1>Junichiro Kurusu</m1> <g>- El Santo, Tiago, Dan, El Presidente -</g> <g1>first of his name</g1> <k>///</k> <e>latinos heritage</e> <k>( Mexico + Colombia )</k> by mama + divine blood <k><s>from dad</s></k>; nasce il <e>18.06.'02</e> <g>[ ☉ gemini ↑ leo ☾ taurus ]</g> nella periferia di <e>Acapulco</e>, una città   <j>nel Messico Sud-Occidentale</j> in cui il nome della propria famiglia è <g1>garanzia e condanna</g1> al tempo stesso. <a onclick=" window.open('http://blackobsydian.altervista.org/SchedePg/pills-aidan/momma.html','',' scrollbars=no,menubar=no,width=570, height=430, ,resizable=no, cursor=help,')"><m1>Sua madre</m1></a>, nota anche con lo pseudonimo di <g>"madrina"</g>, come molti altri Morales era invischiata nel pacifico mondo del <e>narcotraffico</e> prima di <g>ritirarsi</g> dall'ambiente. Cresciuto all'interno di una <g>famiglia allargata</g> in cui i principi di <e>onore</e> e <e>sangue</e> viaggiano a braccetto, in un ambiente nel quale non ci si può permettere di essere <g>deboli</g> o ancor meno.. <g1>essere diversi</g1>. All'età   di 6 anni si trasferisce con la madre in una <j>magione</j> che porta il loro nome inciso nel ferro dei cancelli e su ogni metro quadro della collina su cui sorge. || <g>las mejores historias siempre tienen comienzos dificiles, pero el intermedio puede ser peor.. </g> Crescendo la sua vita si consuma tra <g>eccessi, vizi e feste</g>. Erano gli unici <j>veri amici</j> che riuscivano a distrarlo dalla consapevolezza di essere <j>diverso</j> da chiunque altro lo circondasse, <j>e quella sensazione non se ne andava mai</j>. <j>rabbia e frustrazione </j> erano la <g>benzina</g> che bruciava dentro, senza mai spegnersi. Circondarsi di facce sconosciute in preda all'<e>euforia</e> di <g>droghe, alcool e sesso</g> sembrava essere l'unico modo per <g>non rimanere solo con le voci nella propria testa</g>. <k>///</k> <g>il controllo è solo mera illusione degli uomini deboli e spaventati</g> <k>///</k> C'è <g1>violenza</g1>, c'è <g1>brama</g1> e quella <g1>insana smania</g1> di voler essere <e>libero</e>, <j>senza limiti</j> e <e>senza regole</e>, in <g>perenne lotta</g> con l'animo umano di chi sta ancora scontanto <g>il peso dei propri peccati</g>. <k>///</k> <j>Ha preso il meglio e il peggio da entrambi i mondi a cui appartiene.</j> <k>///</k> Se il gene umano ha contribuito a renderlo <g1>leale, caparbio,  protettivo e a modo suo persino empatico</g1>, il <m>sangue di suo padre</m> lo ha reso <m1>the fool</m1> - <g1>il matto</g1> - <g>genio irriverente e audace, contorto, egocentrico, folle, vizioso e crudele</g>. Un pool di somigliana imbarazzante con quel <g>genitore divino</g> che tanto <e>odia</e> ma di cui, <j>insitamente e contro il proprio stesso orgoglio</j>, pare desiderare <e>l'approvazione</e>. <k>///</k> Galleggia a fatica in quella <g1>dualità’ </g1> che lo rende ciò che è, e che forse è sempre stato destinato ad essere. Una <m>bestia</m> <g>tanto umana quanto folle</g>. Un <m1>giullare</m1> che <g>ride</g> con le mani ancora sporche di <m1>Sangue</m1>. <br><br><br>


<m1>some pills..</m1><br>
<f><b>›</b></f> Talvolta quando utilizza <g1>alcuni</g1> dei propri poteri i suoi occhi tendono a mostrare un <g>bagliore <g1>violaceo</g1></g> persistente.<br>
<f><b>›</b></f> Indossa quasi sempre una moltitudine di <e>gioielli</e> abbastanza tamarri in <j>oro, argento e perle</j>. Spesso alternati e cambiati a seconda delle tendenze. <g>L'unico che non rimuove mai</g> è una catenella d'oro sottile con <j>un ciondolo</j> a forma di <g>primula</g>, regalatogli da <j>Caleb</j>. + <f>di recente</f> si è aggiunta anche una <g>moneta pirata</g>, ovvero uno dei <j>pezzi da otto</j> dei <e>Pirati nobili</e>, quello di Jack Sparrow regalatogli da <j> Ilia</j>.<br>
<f><b>›</b></f> Presenta diversi <g>tatuaggi</g> in giro per il corpo e <e>cicatrici</e> di cui la più vistosa si trova <g>al centro del petto</g> sullo <g1>sterno</g1> inflitta dalla lama di un <m1>Athame</m1>, ormai riassorbita ma di cui resta una leggera traccia. Ne ha una anche sul <g>polso sinistro</g> a forma di <e>"I"</e> di cui <g>soltanto un'altra persona</g> conosce il significato.<br>
<f><b>›</b></f> Il suo <m1><b>god complex</b></m1> di cui ha sofferto all'inizio, <g>nello scoprire che poteva tramutare l'acqua in ogni alcolico possibile</g>, si è aggravato da quando ha scopertoo di poter assumere <e>sembianze femminili</e>, dando vita al mito di <a onclick=" window.open('http://blackobsydian.altervista.org/SchedePg/pills-aidan/nadia.html','',' scrollbars=no,menubar=no,width=480, height=645, ,resizable=no, cursor=help,')"><m1><b>NADIA</b></m1></a>, con la quale ha già  indotto più di un ptsd e innamoramenti precoci all'interno del campo. <e>in pochi</e> soo a conoscenza del fatto che siano la stessa persona. <br>
<f><b>›</b></f> Padre <s>single</s> di <a onclick=" window.open('http://blackobsydian.altervista.org/SchedePg/pills-aidan/elchapo.html','',' scrollbars=no,menubar=no,width=480, height=430, ,resizable=no, cursor=help,')"><m1>El Chapo</m1></a> - <e>Chapito</e> <g>for friends</g> - (<e>ghepardo reale</e>) e di <a onclick=" window.open('http://blackobsydian.altervista.org/SchedePg/pills-aidan/blanca.html','',' scrollbars=no,menubar=no,width=480, height=430, ,resizable=no, cursor=help,')"><m1>Blanca Balenciaga</m1></a> (<g>ghepardo albino</g>), detta anche <e>BB</e> - abbreviazione dei due nomi e di <e>Baby</e> - che è in grado di evocare tramite i propri poteri e che si porta spesso appresso <g>in formato cucciolo</g>. <br>
<f><b>›</b></f> <m1><b>El rei de la tequila</b></m1> - ha importato <g>la propria creazione</g>, la <e>186's Pirate Tequila premium</e> in tutte le sue variazioni, all'interno del campo mezzosangue tra gran parte dei semidei e diffondendo il <g>verbo non scritto del Signore</g> secondo cui <g>"He turned the water to tequila <g1>and saw that was good and right thing</g1>, bitch"</g>. 

      </div>
    </div>


    <div class="text_box-p">
      <div class="text_box-p2">
        <div class="text_box-inner-p">
      
<a onclick=" window.open('','',' scrollbars=no,menubar=no,width=500, height=400, ,resizable=no, cursor=help,')"><m>Caleb</m></a> <br> <a onclick=" window.open('','',' scrollbars=no,menubar=no,width=500, height=400, ,resizable=no, cursor=help,')"><g> home</g></a><br><br>
<a onclick=" window.open('','',' scrollbars=no,menubar=no,width=500, height=400, ,resizable=no, cursor=help,')"><m><s>Ilia</s></m></a> - <a onclick=" window.open('','',' scrollbars=no,menubar=no,width=500, height=400, ,resizable=no, cursor=help,')"><m>Regan</m></a> - <a onclick=" window.open('','',' scrollbars=no,menubar=no,width=500, height=400, ,resizable=no, cursor=help,')"><m>Llyr</m></a> <br> 
<g>tyler/khal/lupe</g> <br> <br>
<m><b>Domhnall</b></m> - <m><b>clopin</b></m> - <m>evelyn</m> - <m>zehke</m> - <m>gin</m> - <g>Phoebe</g> - <g>Judas</g> - <g>Lalin</g> - <j>Sebastian</j> - <j><b>Tristan</b></j> - <j><b>Robert</b></j> - <g>Lizz</g> - <g>juliet</g> -  Philip - Niall - Allison - <j>Alina</j> 

        </div>
      </div>
    </div>

    
    
  </div>
  
</div>

<style><style>

::selection { color: #222; background: none; }
::-webkit-scrollbar {background: none; width: 1px;}
::-webkit-scrollbar-thumb {background: #111; opacity: 0.1;}

/* ------------------------------ GENERICO ------------------------------ */

::-webkit-scrollbar {

     background: #000000;
     width: 0px;
     cursor: s-resize;
     padding: 0;
     margin-right: 0px;
}



/* ------------------------------ AREA LAVORO ------------------------------ */

.table {background-color: none; position: absolute;

     width: 600px; 
     height: 600px;
     left: 50%;
     margin-left: -260px;
     margin-top: 10px;
}



/* ------------------------------ IMMAGE ------------------------------ */

.main_box {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1;
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     width: 548px; 
     height: 580px;
     left: 50%;
     top: 50%;
     margin-left: -300px;
     margin-top: -300px;
     transition-delay: 4.5s;

     background-image: url(https://i.imgur.com/6SXA6om.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     box-shadow: 0px 0px 5px #000;
}

.main_box:hover {

     transition-delay: 0.5s;
     background-image: url(https://i.imgur.com/6SXA6om.png);
}



/* ------------------------------ TESTO ID ------------------------------ */

.text_box-id {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1;
     -moz-transition: all ease-out 1.5s; -webkit-transition: all ease-out 1.5s; -o-transition: all ease-out 1.5s; 

     width: 250px; 
     height: 0px;
     left: 50%;
     top: 50%;
     margin-left: -125px;
     margin-top: -70px; 

     background-color: #010101;
     transition-delay: 2s;
     box-shadow: 0px 0px 5px #000;
}

.main_box:hover .text_box-id {

     opacity: 1;
     height: 330px;
     transition-delay: 2s;

}

.text_box-inner-id {position: absolute; z-index:1; float: left; overflow: auto; opacity: 1;

     width: 200px; 
     height: 265px;
     left: 50%;
     top: 100%;
     margin-left: -100px;
     margin-top: -290px;
     background: none;

     color: #444;
     font-family: 'Barlow', sans-serif;
     text-align: justify;
     font-size: 10px; 
     line-height: 11px; 
     text-shadow: 1px 1px 0px #000;
     letter-spacing: 0;
}



/* ------------------------------ TESTO PEOPLE ------------------------------ */

.text_box-p {position: absolute; z-index:1; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-out 1s; -webkit-transition: all ease-out 1s; -o-transition: all ease-out 1s; 

     width: 200px; 
     height: 200px;
     left: 50%;
     top: 50%;
     margin-left: -90px;
     margin-top: 10px;

     background-color: none;
     transition-delay: 1s;
     transform: rotate(-4deg);
}

.main_box:hover .text_box-p {

     opacity: 1;
     transition-delay: 3.0s;
     margin-left: -260px;
}

.text_box-p2 {position: absolute; z-index:1; float: left; overflow: hidden; opacity: 1;
     -moz-transition: all ease-out 0.7s; -webkit-transition: all ease-out 0.7s; -o-transition: all ease-out 0.7s; 

     width: 200px; 
     height: 200px;
     left: 50%;
     top: 50%;
     margin-left: 0px;
     margin-top: -100px;

     background-color: #050505;
     transition-delay: 0.5s;
     box-shadow: 0px 0px 5px #000;
}

.text_box-p2:hover { margin-left: -90px!important; transition-delay: 0.5s; }

.text_box-inner-p {position: absolute; z-index: 1; float: left; overflow: hidden; opacity: 1; 

     width: 95px; 
     height: 150px;
     left: 0%;
     top: 50%;
     margin-left: 15px;
     margin-top: -80px;
     background: none;

     color: #444;
     font-family: 'Barlow', sans-serif;
     text-align: left;
     font-size: 9px; 
     line-height: 11px; 
     letter-spacing: 0;
}



/* ------------------------------ AESTHETIC ------------------------------ */

.gif_box { position: absolute; z-index:3; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-out 1.5s; -webkit-transition: all ease-out 1.5s; -o-transition: all ease-out 1.5s; 

     width: 350px; 
     height: 190px;
     left: 50%;
     top: 50%;
     margin-left: -180px;
     margin-top: -250px;
     transform: rotate(15deg);
     box-shadow: 0px 0px 10px #000;

     background-image: url(https://i.imgur.com/l1PbD9t.gif);
     background-size: cover;
     transition-delay: 2.8s;
     border: 5px solid #000;
}

.main_box:hover .gif_box {

     opacity: 2;
     transform: rotate(-5deg);
     transition-delay: 1.5s;
}



/* ------------------------------ QUOTE ------------------------------ */

.quote_box { position: absolute; z-index: 3;  overflow: hidden; opacity: 0; background-color: none;
     -moz-transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; 

     width: 210px; 
     height: 10px;
     left: 50%;
     top: 50%;

     transform: rotate(90deg);
     filter: blur(2px);

     color: #333;
     font-family: calibri;
     text-align: center;
     text-transform: uppercase; 
     line-height: 10px; 
     font-weight: bold;
     letter-spacing: 1px;
     text-shadow: 1px 1px 0px #000;
}

#one {
     margin-left: 80px;
     margin-top: 30px;
     font-size: 12px; 
     transition-delay: 0.5s;
}

#two {
     margin-left: 70px;
     margin-top: 90px;
     font-size: 9px; 
     transition-delay: 0.7s;
}

#three {
     margin-left: 60px;
     margin-top: 50px;
     font-size: 9px; 
     transition-delay: 0.9s;
}

#fore {
     margin-left: 50px;
     margin-top: 110px;
     font-size: 12px; 
     transition-delay: 1.1s;
}

.main_box:hover #one {

     opacity: 1;
     margin-left: 60px;
     margin-top: 50px;
     filter: blur(0px);
     transition-delay: 5.4s;
}

.main_box:hover #two {

     opacity: 1;
     margin-left: 50px;
     margin-top: 110px;
     filter: blur(0px);
     transition-delay: 5.1s;
}

.main_box:hover #three {

     opacity: 1;
     margin-left: 40px;
     margin-top: 70px;
     filter: blur(0px);
     transition-delay: 4.8s;
}

.main_box:hover #fore {

     opacity: 1;
     margin-left: 30px;
     margin-top: 130px;
     filter: blur(0px);
     transition-delay: 4.5s;
}



f { color: #491212; text-shadow: 1px -1px 0px #000;}
m { font-family: 'Roboto Mono', monospace; color: #3b0707; color: #333; text-transform: uppercase; text-shadow: 1px -1px 0px #000; -moz-transition: all ease-in 0.5s; -webkit-transition: all ease-in 0.5s; -o-transition: all ease-in 0.5s; }
m1:hover { color: #4c2b2b; } 
m1 { font-family: 'Roboto Mono', monospace; color: #3b0707; color: #333; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px -1px 0px #000; -moz-transition: all ease-in 0.5s; -webkit-transition: all ease-in 0.5s; -o-transition: all ease-in 0.5s; }
a { -moz-transition: all ease-in 0.2s; -webkit-transition: all ease-in 0.2s; -o-transition: all ease-in 0.2s; } 
a:hover { color: #4d0d0d!important; letter-spacing: 1.5px; cursor: help; }
g { font-family: georgia; text-transform: lowercase; font-style: italic; letter-spacing: 1px; color: #272727; }
g1 { font-family: georgia; text-transform: lowercase; font-style: italic; letter-spacing: 1.5px; color: #666; font-size: 8.5px;}
e { font-family: tahoma; text-transform: uppercase; color: #777; letter-spacing: 1px; font-style: bold; font-size: 8px; }
j {font-family: calibri; text-transform: uppercase; color: #333; letter-spacing: 1px; font-size: 8px; }


.credits {  position: absolute;
  width: 300px; 
  height: 30px; 
  background-color: none; 
  margin-left: 130px; 
  margin-top: 600px;
  float: left; 
  
text-align: center; font-family: tahoma; text-transform: uppercase; color: #777; letter-spacing: 1px; font-style: bold; font-size: 8px; text-shadow: 1px 1px 1px #000; }

</style></style><script type="text/javascript"></script>