Jonathandddd by @MILENUCCIA87 - Codewith.it

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

Referenze

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<option>Serve ad inserire una voce in un menu di selezione.
multipart/form-dataCodifica dei caratteri di un form
<input>Definisce un area di input per l'invio di dati e informazioni
relServe a definire la relazione tra il documento e una risorsa.
<select>Usato per creare un menu a tendina.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

JS Oggetti ed eventi es2

VerdeTech (v3) - Orto Botanico | P

Turni settimanali tabella

Review of Functions I

lezione 31.10 1

Italiano-Cinema [Container]

Bootstrap List Grid

Coppa del mondo

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>


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

::-webkit-scrollbar {

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

::-moz-selection {

     color: #522222;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

::selection {

     color: #453f2e;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

div {

    cursor:text;
}



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

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

     width: 570px; 
     height: 510px;
     left: 50%;
     top: 50%;
     margin-left: -275px;
     margin-top: -254px;
}



/* ---------------------- 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: 564px; 
     height: 503px;
     left: 50%;
     top: 50%;
     margin-left: -275px;
     margin-top: -254px;

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



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

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

     width: 278px; 
     height: 250px;
     left: 50%;
     top: 0%;
     margin-left: -265px;
     margin-top: -390px;

    background-color: #111; box-shadow: 0px 0px 5px #000;
     background-position: 0px 0px;
     background-repeat: repeat;
     transition-delay: 0.5s;
     transform: rotate(-15deg);
     box-shadow: 0px 0px 5px #000;
}

.main_box:hover .text_box-id {

     opacity: 1;
     transition-delay: 0.5s;
     margin-top: -50px;
     margin-left: -285px;
}

.text_box-inner-base-id {position: absolute; z-index:1; float: left; overflow: auto; opacity: 1;
     -moz-transition: all ease-out 1.3s; -webkit-transition: all ease-out 1.3s; -o-transition: all ease-out 1.3s; 

     width: 250px; 
     height: 210px;
     left: 0%;
     top: 0%;
     margin-left: 10px;
     margin-top: -270px;

     background: #111;
     transition-delay: 0s;
     box-shadow: 0px 0px 5px #000;
}

.main_box:hover .text_box-inner-base-id {

     margin-top: 20px;
     transition-delay: 1s;
}

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

     width: 235px; 
     height: 202px;
     left: 41%;
     top: 50%;
     margin-left: -95px;
     margin-top: -95px;
     background: none;

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


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

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

     width: 300px; 
     height: 260px;
     left: 50%;
     top: 100%;
     margin-left: -5px;
     margin-top: 100px;

     background-color: #111; box-shadow: 0px 0px 5px #000;
     background-position: 0px 0px;
     background-repeat: repeat;
     transition-delay: 0.5s;
     transform: rotate(15deg);
     box-shadow: 0px 0px 5px #000;
}

.main_box:hover .text_box-p {

     opacity: 1;
     transition-delay: 0.5s;
     margin-left: -5px;
     margin-top: -100px;
}

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

     width: 240px; 
     height: 80px;
     left: 50%;
     top: 100%;
     margin-left: -5px;
     margin-top: 100px;

   background: #111;
     transition-delay: 0s;
     box-shadow: 0px 0px 5px #000;
}

.main_box:hover .text_box-inner-base-p {

     margin-top: -100px;
     transition-delay: 1s;
}

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

     width: 190px; 
     height: 70px;
     left: 50%;
     top: 50%;
     margin-left: -95px;
     margin-top: -25px;
     background: none;

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



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

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

     width: 80px; 
     height: 80px;
     left: 50%;
     top: 50%;
     margin-left: -145px;
     margin-top: 10px;

     background: none;
     transition-delay: 1s;
     transform: rotate(-0deg);
     border: 3px double #000;
}

.main_box:hover .gif_box {

     margin-left: -500px;
     transition-delay: 0s;
}


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

.quote_box_a { position: absolute; z-index: 3;  overflow: hidden; opacity: 1;
     -moz-transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; 

     width: 70px; 
     height: 110px;
     left: 50%;
     top: 50%;
     margin-left: -75px;
     margin-top: 7px;
     transition-delay: 1s;
     filter: blur(0px);
     transform: rotate(-15deg);

     color: #111;
     font-family: 'Barlow Condensed', sans-serif;
     text-align: center;
     text-transform:uppercase; 
     font-size: 30px; 
     font-weight: bold;
     letter-spacing: 2.5px;
}

.main_box:hover .quote_box_a {

     transition-delay: 0s;
     color: #111;
}

@keyframes pulse1 {

     0% {color: #111; filter:blur(0px);}
     50% {color: #111; filter:blur(2px); }
     100% {color: #111; filter:blur(0px);}
}

@keyframes pulse2 {

     0% {color: #111; filter:blur(0px);}
     100% {color: #111; filter:blur(0px);}
}

#quote_pulse {
     -moz-transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; 

     animation: pulse1 2s infinite;
}

.main_box:hover #quote_pulse {

     animation: pulse2 2s infinite;
}

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

     width: 85px; 
     height: 35px;
     left: 50%;
     top: 50%;
     margin-left: -140px;
     margin-top: 45px;
     transition-delay: 1s;
     filter: blur(5px);
     transform: rotate(75deg);

     color: #111;
     font-family: 'calibri', sans-serif;
     text-align: center;
     text-transform: uppercase; 
     font-size: 8px; 
     font-weight: bold;
     letter-spacing: 0px;
     text-shadow: 0px 0px 0px #000;
}

.main_box:hover .quote_box_b {

     transition-delay: 0.5s;
     opacity: 1;
     filter: blur(0px);
}

#space1 {

     letter-spacing: 3px;
}


#space3 {

     letter-spacing: 4.8px;
}



/* ------------------------------ STYLE TESTI ------------------------------ */

a {
     text-decoration:none!important;
}

d {
     color: #423926;
     font-family: georgia;
     font-size: 9px;
     line-height: 9px;
     font-style: italic;
     font-weight: bold;
}

e {
     font-family: cambria, pallatio; 
     color: #e0d2a8;
     font-size: 8px; 
     line-height: 10px!important;
     text-transform: uppercase;
     letter-spacing: 2px;
     background-color: #948e7c;
     text-shadow: 2px 1px 0px #696455, -2px -1px 0px #696455;
     padding-left: 7px;
     padding-right: 7px;
} 

f {
     font-family: calibri; 
     color: #756951;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
}

h {
     font-family: georgia; 
     text-transform: uppercase;
     font-size: 7px;
     line-height: 9px!important;
     letter-spacing: 3px; 
     color: #756951;
     text-shadow: 1px 1px 0px #111; 
} 

w {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #7a6943; 
     background: rgba(70, 62, 44, 0.5); 

     padding-left:7px;
     padding-right:7px;
} 

z {
     letter-spacing:0px;
}

/* ------------------------------ B - I - U - S ------------------------------ */

b, i, u, s {
     color: #444;
}

s {
     letter-spacing:2px; 
     text-decoration: line-through wavy #302d29; 
     line-height: 9px;
}

u {
     text-decoration: underline dashed #a98d59; 
     line-height: 9px;
}

</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Barlow:wght@600&family=Festive&display=swap" rel="stylesheet">



<div class="table">
  <div class="main_box">
  
  
    <div class="gif_box">
<img src="https://i.imgur.com/LsaYWlb.gif">
    </div>
    

    <div class="quote_box_a">
    
were <span id="quote_pulse">wolf</span>

    </div>
    

    <div class="quote_box_b">
    
<span id="space1">some kind of</span>
<span id="space3">beast</span>

    </div>


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

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

<w>JONATHAN GARRETT EDWARDS</w>» <n>Guipago</n>. Classe '85. Aprile il 23. <a href="https://i.imgur.com/jYTEUk4.png" 
target="popup" 
onclick="window.open('https://i.imgur.com/jYTEUk4.png','popup','width=450,height=450'); return false;">Tatuaggi</a>&Cicatrici || taurus sun and capricorn moon || <h>There's a violence living inside me</h> || Non è mai stato un santo e l'essere diventato lupo l'ha reso ancora più <e>territoriale</e> rispetto a prima. <u>Per il sentore di appartenere a qualcosa</u>. <f>Viscerale</f>. Ferale. <d>Selvatico</d>. Forastico. Stitico a livello di emozioni, più incline alla violenza che alla discussione. Il più delle volte ringhia. Stesse orme del padre, a compensazione di <u>un temperamento tutt'altro che pacifico</u>. || <d>(blood, beatings and clandestine fights)</d> || Stesso addestramento. Stessa <e>testardaggine</e>. La necessità di stare a contatto con una natura che sta imparando a conoscere bene <g>solamente ora</g>. || <h>I'm not a Saint</h>.<br><br>(<w>forma ferale</w>) » 210cm x 270kg dal manto <d>rossiccio e fulvo</d> disseminato di sfumature <u>nocciola</u>. <h>Occhi dorati</h> screziati di rosso.

</div>
    </div>


    <div class="text_box-p">
    </div>
    

    <div class="text_box-inner-base-p">
      <div class="text_box-inner-p">
      
<center>•• <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Andrea.html','',' scrollbars=no,menubar=no,width=450, height=380, ,resizable=no, cursor=help,')"><e>A N D R E A</e></a> •• <br><a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Deva.html','',' scrollbars=no,menubar=no,width=450, height=350, ,resizable=no, cursor=help,')"><h>Deva</h></a> • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Johan.html','',' scrollbars=no,menubar=no,width=450, height=280, ,resizable=no, cursor=help,')"><h>Johan</h></a> || <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Faye.html','',' scrollbars=no,menubar=no,width=450, height=300, ,resizable=no, cursor=help,')"><d>Faye</d></a> • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Rhiannon.html','',' scrollbars=no,menubar=no,width=450, height=300, ,resizable=no, cursor=help,')"><d>Rhiannon</d></a><br>Sierra • Lucas • Sean • Lena<br><a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Keifer.html','',' scrollbars=no,menubar=no,width=450, height=300, ,resizable=no, cursor=help,')"><f>Keifer</f></a> • <a onclick=" window.open('https://somewhereunderthesky.altervista.org/AFFETTIDUSK/Newt.html','',' scrollbars=no,menubar=no,width=450, height=300, ,resizable=no, cursor=help,')"><f>Newt</f></a><br>Eva; Wikimak; Selina; Kimama; Andraste; 

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