bones by @MILENUCCIA87 - Codewith.it

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

Referenze

<select>Usato per creare un menu a tendina.
<h5>Titolo di intestazione di quinto livello
methodDetermina il metodo di invio dei dati di un form al server
<map>Inserisce immagini mappa cliccabili in un documento
<iframe>Crea un frame all'interno di una pagina HTML.
_selfApre collegamenti ipertestuali nella stessa pagina del browser

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione 5

Weather Forecast

UX / Web Design, Freelance – Pro

JS Esercizio Concetti Gen es2

Esercitazione tabelle

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>
::selection { color: #635856; background: none; }
::-webkit-scrollbar {background-color: #111!important; width: 1px;}
::-webkit-scrollbar-thumb {background: #111!important; opacity: 0.1;}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

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

.base { position: relative; background-color: none;

     width: 750px;
     height: 600px;
     margin-top: 40px;
}

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

.img {position: absolute; z-index:2; float: left; overflow: none;
     -moz-transition: all ease-out 1.5s; -webkit-transition: all ease-out 1.5s; -o-transition: all ease-out 1.5s; 
     width: 700px; 
     height: 500px;
     margin-top: 20px;
     margin-left: 40px;
     background-image: url('https://i.imgur.com/X94f6NY.png');
     background-position: 0px 0px;
     background-repeat: no-repeat;
     border: 6px solid #0b0c0d;
     box-shadow: 0px 0px 10px #0b0c0d;
}

.img:hover {

     background-image: url('https://i.imgur.com/X94f6NY.png'); height: 500px; width:250px; background-position-x: -180px; transition: all 1.5s ease-in-out;
}

.img:hover .frase { margin-left:230px; opacity: 1;transition: all 2s ease-in-out;}

.img:hover .frase1 { margin-left:230px; opacity: 1;transition: all 2s ease-in-out;}

.img:hover .box { margin-right:257px; opacity: 1;transition: all 2s ease-in-out;}

.img:hover .box1 { margin-right:257px; opacity: 1;transition: all 2s ease-in-out;}



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

.box {  position: relative;  z-index: 1; float: left; overflow:  hidden;
  width: 250px;
  height: 240px;
  margin-left: 270px; 
  margin-top: -293px;  
  border-left: 2px solid #111; 
  border-right: 1px dashed #111; 
  background-color: #000000;
  box-shadow: 0px 0px 10px #1d191c;
  padding: 8px;
  opacity: 0; 
  transition: all ease-out 1.5s; 
}

.testo { position: absolute; z-index: 2; float: left; overflow: auto;
  width: 239px;
  height: 230px;
  padding: 5px;
  background-color: #111; 
  text-align: justify; 
  color: #3d3d3d; 
  font-family: verdana; 
  font-size: 10px; 
  line-height:11px; 
  letter-spacing: 0px; 
  font-weight: normal!important;
}

.box1 {  position: relative;  z-index: 1; float: left; overflow:  hidden;
  width: 250px;
  height: 110px;
  margin-left: 270px; 
  margin-top: 10px;  
  border-left: 2px solid #111; 
  border-right: 1px dashed #111; 
  background-color: #000000;
  box-shadow: 0px 0px 10px #1d191c;
  padding: 8px;
  opacity: 0; 
  transition: all ease-out 1.5s; 
}

.testo1 { position: absolute; z-index: 2; float: left; overflow: auto;
  width: 239px;
  height: 100px;
  padding: 5px;
  background-color: #111; 
  text-align: justify; 
  color: #3d3d3d; 
  font-family: verdana; 
  font-size: 10px; 
  line-height:11px; 
  letter-spacing: 0px; 
  font-weight: normal!important;
}

.imm {transition: all 2s ease-in-out;position:absolute; margin: 20px 0px 0px 10px;opacity:1; padding:8px;margin-left: -35px; margin-top: -215px;}
.imm img {object-size: cover; height: 90px; width:90px; filter: brightness(60%)grayscale(60%);text-align:center;border: 4px solid rgba(0,0,0,0.8); margin-top:-1px;box-shadow: rgba(141, 71, 6, .5) 0px 1px 2px, rgba(141, 71, 6, .5) 0px 2px 4px, rgba(141, 71, 6, .5) 0px 4px 8px, rgba(141, 71, 6, .5) 0px 8px 16px, rgba(141, 71, 6, .5); 0px 16px 32px, rgba(141, 71, 6, .5)  0px 32px 64px;}


/* --------------- QUOTE ----------------------- */
.frase {position:relative; margin-top:290px; margin-left: 14px; width:350px; height:80px; color:rgba(50,56,63, 0.747); font-family: 'Bebas Neue', sans-serif; text-transform:uppercase; letter-spacing:-1px; font-size:20px; text-align:center; z-index: 5; text-shadow: 1px 1px 1px black;}

  .frase1 {position:relative; margin-top: -60px; margin-left: 15px; width:350px; color:#000000;font-family: "Inter", sans-serif; background-color: rgba(50,56,63, .5); font-weight:bold;letter-spacing:3px; text-transform:uppercase; z-index: 5; font-size:8px;text-align:center;text-shadow:1px 1px 1px #000; }


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


a {
     text-decoration:none!important;
}

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

f {
     font-family: calibri; 
     color: #33414c;
     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: #53a9b1;
     opacity: 0.7;
     text-shadow: 1px 1px 0px #111; 
} 

w {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #000000; 
     background: rgb(50,56,63, 0.5); 
     padding-left:7px;
     padding-right:7px;
} 


/* ------------------------------ B - I - U - S ------------------------------ */
a {
            color: #555;
            font-size: 10px;
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

        a:hover {
            color: rgba(72,61,139, 0.747);
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

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


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

</style>


<center><div class="base">

<div class="img"><div class="frase"><center>LLYR " LORENZO " D. LOYD</center></div>
<div class="frase1"><center>I WILL CONTINUE TO NOT BE AFRAID OF THE DARK</center></div><div class="imm">
   <img src="https://i.imgur.com/Kx5BySD.gif" style="transform: rotate(-3deg);"><br> <img src="https://i.imgur.com/1nupju6.gif"><br>
<img src="https://i.imgur.com/CxsQMET.gif" style="transform: rotate(3deg);"><br>
 </div>
<div class="box"><div class="testo"><center>♥ || ☽ Sagittarius x Libra ☾ || <f>Pansex</f> ♦<br>
♣ Cat Lover | Cook | Ink in the Skin | <d>Songwriter</d> ♫ | © <w>Italian Boy</w>♠ |<br> <a href="#" onclick="window.open('http://mylife8889.altervista.org/Lory.html','nuovaFinestra','width=650,height=480, scrollbars=1',)">L O R Y (Female version)</a> ♠</center><br>

Tu <h>lo ricordi</h>. Quando li temevi, li rifiutavi, ne rinnegavi il richiamo. I <w>brividi</w>. Eppure erano il linguaggio del corpo che rispondeva all’ignoto, alla possibilità del caos, alla vertigine dell’abisso.<br>
Tu, ormai, <h>lo stai capendo</h>. Nascono quando ti trovi esposto all’<f>imprevedibile</f>, quando il tempo rallenta e il momento si carica di <w>un’intensità primordiale</w>. In quell’istante, l’adrenalina dissolve ogni pensiero superfluo, lasciando solo la <f>consapevolezza cruda e pura di esistere</f>.<br>
Tu, ormai, <h>lo hai capito</h>. Sono il segnale che sei <w>vivo</w>, che stai giocando con l’assurdo della tua condizione, cercando di strappare un frammento di eternità in un mondo che ti vuole passeggero distratto.<br><br>
<center><w>Tu</w>. <w>Ora</w>. <w>Lo sai</w>.</center><br>

⤐ Nasce a New York in una famiglia di <f>immigrati italiani</f>, venendo al mondo come parte di una coppia di <d>gemelli</d> || ⤐ rapporto difficile con la madre || ⤐ A sette anni, il fratello gemello <h>muore</h>. {<w>Sindrome dell'arto fantasma</w>} || ⤐ Affidato alla nonna, una donna forte e pratica, che possiede un ristorante di cucina italiana. Nel tentativo di incanalare la sua iperattività, lei <f>lo mise presto ai fornelli</f>, facendogli impastare, mescolare, assaggiare, come se attraverso il cibo potesse insegnargli a <d>dare forma al caos</d> che si portava dentro. ||⤐ Chiuso in sé stesso, trova nella <w>musica</w> un rifugio. Nei testi che scrive, un linguaggio che gli permette di esprimere <h>ciò che il suo oblio non riesce a contenere</h>. La sua Voce diventa portavoce di quei testi, cantandoli.|| ⤐ Grazie a Jay, il suo migliore amico d'infanzia, <f>impara a suonare la chitarra</f>. ||⤐ Attaccato da una Manticora nel vicolo dietro il ristorante. || ⤐ Salvato da un satiro che ha rubato la vespa del nonno riuscendo a portarlo via. Destinazione: <u>Campo Mezzosangue</u>.<br><br>

<center>¸¸♬·¯·♩¸¸♪·¯·♫¸¸¸♬·¯·♩¸¸♪·¯·♫¸¸</center><br>


❦ <w>Prima impresa</w> a bordo dell'Argo per recuperare l'Athena Parthenos - <u>Primo scontro con Lamia</u> - Vittoria, 2 morti - (<f>Mens sana 80%</f>)<br>
❦ <w>Impresa minore</w> tramite profezia personale per recuperare un pezzo della Clava di Eracle - Parte con Milo e Caleb - Affronta con loro le sirene e viene a <u>conoscenza del suo difetto fatale</u> assistendo alla sua stessa morte. Incontrano Acheelo - divinità fluviale iraconda e ferita emotivamente. Evitano lo scontro ragionandoci e facendo un'offerta significativa come atto tangibile di ciò che si son detti. - Vittoria, 0 morti - (<f>Mens sana 70%</f>)<br>
❦ <w>Seconda Impresa</w> A Troia, attraverso il labirinto, per rompere gli scudi degli Hysminai con la Clava. <u>Prima volta da Capoimpresa</u>. - Fallita, 0 Morti - (<f>Mens sana 65%</f>)<br>
❦ <w>Terza Impresa</w> in un Manicomio, su di un Van, per recuperare Follia, uno dei mali del vaso di Pandora, prima dei figli di Eris ( Algos). - <u>Seconda volta da Capoimpresa</u>. - Vittoria, 1 Morto - (<f>Mens sana 30%</f>)<br>
❦ <w>Grande Guerra</w> - <h>Prima linea</h> - Assalto. Assieme a Salvatore, Cesare e Ren ha intrappolato Prometeo. - Vittoria, ∞ Morti - (<f>Mens sana 10%</f>)
   </div></div>
<div class="box1"><div class="testo1"><center><w>cabina XII</w> - Aidan | Amber | Thiago <br><br>
<a href="#" onclick="window.open('http://mylife8889.altervista.org/Spiros.html','nuovaFinestra','width=550,height=480, scrollbars=1',)"><f>S p i r o s </f></a> |
<a href="#" onclick="window.open('http://mylife8889.altervista.org/Kai.html','nuovaFinestra','width=550,height=480, scrollbars=1',)"><f>Kai</f></a>, 
<a href="#" onclick="window.open('http://mylife8889.altervista.org/Rue.html','nuovaFinestra','width=550,height=480, scrollbars=1',)"><f>Rue</f></a>,
<a href="#" onclick="window.open('http://mylife8889.altervista.org/Seth.html','nuovaFinestra','width=550,height=480, scrollbars=1',)"><f>Seth</f></a> |<br>
Max, Regan, Caleb, Juliet<br><br>|| Samuel, Edward, Elizabeth, Love, Theodora, Trajan, Opal, Guadalupe, Jazz, Jax, Maeve, Milo, Mysie, Soojin, Yeong, Liam, Tony || <br><br> ||| <s>Nicolas - Ren</s> - Salvatore - Cesare ||| <br><br>
</center>
</div></div>

</div></center>