JONNYBELLOMIO by @MILENUCCIA87 - Codewith.it

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

References

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
idIdentifica univocamente un elemento HTML
<embed>Tag per l'incorporamento di contenuti multimediali
<em>Formatta il testo in corsivo/italico enfatizzato
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<a>Inserisce link e collegamenti ipertestuali

Users

Log in to search for users

Explore

Find inspiration

Stuff and Things

JS Oggetti ed eventi es2

Inserimento immagini in un testo

Lezione 4 (terza parte)

schwebish gemund

I benefici dell\\

conta caratteri online

Resiliant Material

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>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@200&family=Roboto&display=swap');

::selection { color: #635856; background: none; }
::-webkit-scrollbar {background-color: #000!important; width: 1px;}
::-webkit-scrollbar-thumb {background: #1a070c!important; opacity: 0.1;}


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

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

     width: 600px;
     height: 600px;
     margin-top: 20px;
}

/* --------------- 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: 600px; 
     height: 450px;
     left: 10px;
     margin-top: 5px;
     background-image: url('https://i.imgur.com/AQBNF79.png');
     background-position: 0px 0px;
     background-repeat: no-repeat;
     border: 2px solid #1d191c;
     box-shadow: 0px 0px 10px #1d191c;}

.img:hover {background-image: url('https://i.imgur.com/AQBNF79.png'); filter: brightness(0.6) contrast(1.0);}

 .img:hover .box{opacity: 1; margin-top: 10px; transition: all 1s ease-in-out; }
 .img:hover .box1{opacity: 1; margin-top: 4px; margin-left: -390px; transition: all 1s ease-in-out; }
   .img:hover .box2{opacity: 1; margin-left: 350px; margin-top: -105px; transition: all 1s ease-in-out; }



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

.box {background-color: #111; box-shadow: 0px 0px 5px #000; width: 400px; height: 320px; position: relative; margin-left:-10px; margin-top: -350px;text-align: center; cursor: crosshair; opacity:0; transition: all 1s ease-in-out;}

.testo {background: #1a1a1a; box-shadow: 0px 0px 5px #000; overflow: auto; color: #777;font-family: verdana;font-size: 10px; text-align: justify; padding: 10px; line-height: 10px; margin-left: 10px; margin-top: -10px; margin-bottom: 10px; width: 360px; height: 255px;}

.box1 {width: 200px; height: 80px;position: relative;background-color: #111; box-shadow: 0px 0px 5px #000; margin-left: -410px; margin-top: 40px; text-align: center;cursor: crosshair; opacity:0; transition: all 1s ease-in-out;}

.testo1 {background: #1a1a1a; box-shadow: 0px 0px 5px #000; overflow: auto; color: #777;font-family: verdana;font-size: 10px; text-align: justify; padding: 10px; line-height: 8px; margin-left: 10px; margin-top: -10px; margin-bottom: 10px; width: 160px; height: 43px;}

.box2 {width: 180px;height: 100px; position: relative;background-color: #111; box-shadow: 0px 0px 5px #000; margin-left: 340px; margin-top: -100px;text-align: center; cursor: crosshair; opacity:0; transition: all 1s ease-in-out;}

.testo2 {background: #1a1a1a; box-shadow: 0px 0px 5px #000; overflow: auto; color: #777;font-family: verdana;font-size: 10px; text-align: justify; padding: 10px; line-height: 8px; margin-left: 7px; margin-top: -10px; margin-bottom: 10px; width: 145px; height: 60px;}


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

  .frase {position:relative; margin-top:235px; margin-left: -8px; width:530px;height:500px; color:#4C1B1B;font-family: 'Bebas Neue', sans-serif; text-transform:uppercase; letter-spacing:-1px; font-size:35px;text-align:center;text-shadow:1px 1px 1px #000;}

  .frase1 {position:relative; margin-top: -465px; margin-left: -10px; width:350px; color:#777;font-family: "Inter", sans-serif; background-color: rgba(54, 25, 25, .5); font-weight:bold;letter-spacing:1px; text-transform:uppercase;font-size:8px;text-align:center;text-shadow:1px 1px 1px #000; }

  /* ------------------GIF -----------------*/
.gif {width: 350px; height:100px; margin-left: 5px; margin-top: 10px;}

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

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>

<center><div class="base">
<div class="img">
<div class="frase"><center>DESTI A ME QUEST'ANIMA DIVINA</center></div><div class="frase1"><center>e poi la imprigionasti in un corpo debole e fragile</center></div>
<div class="box"><div class="gif"><img src="https://i.imgur.com/M5GXMeG.gif" style="transform: rotate(-5deg); width: 150px; object-fit: cover;border: 1px solid #4C1B1B;filter: brightness(90%);box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"><img src="https://i.imgur.com/FjAuh03.gif"  style="transform: rotate(2deg); width: 150px;object-fit: cover;border: 1px solid #4C1B1B;filter: brightness(90%);box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"></div><div class="testo"><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>.</div></div>
<div class="box1"><br><div class="testo1">(<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="box2"><br><div class="testo2"><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/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/Rhiannon.html','',' scrollbars=no,menubar=no,width=450, height=300, ,resizable=no, cursor=help,')"><h>Rhiannon</h></a><br><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/Deva.html','',' scrollbars=no,menubar=no,width=450, height=350, ,resizable=no, cursor=help,')"><d>Deva</d></a><br>Sierra • Lucas • Sean<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>Andraste; Eva; Wikimak; Kimama; Selina; </center></div></div>
  <div class="gif">
    </div>

<div></div></center>