boh by @MILENUCCIA87 - Codewith.it

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

References

_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<input>Definisce un area di input per l'invio di dati e informazioni
<div>Crea contenitori generici o sezioni in una pagina
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<ul>Usato per la creazione di liste non ordinate.

Users

Log in to search for users

Explore

Find inspiration

Crunchyroll Replica

Review of Functions I

form 6 da finire

Le meraviglie d\\

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> 
::selection { color: #635856; background: none; }
::-webkit-scrollbar {background-color: #000!important; width: 1px;}
::-webkit-scrollbar-thumb {background: #1a070c!important; opacity: 0.1;}


/*-------BASE-------*/

.contenitore {
width: 600px;
height: 600px;
position: relative;
margin: auto;
margin-left:150px;

}
  
.immagine {
background: url(https://i.imgur.com/aa9SZ0H.png);
margin: auto;
width: 450px;
height: 450px;
margin-left: -100px;
margin-top: 24px;
border: 2px solid #000000;
position: relative;
z-index: 3;
transition: all 1.5s ease-in-out;
filter: grayscale(20%);

}
.contenitore:hover .immagine {
width: 260px;
margin-left: 150px;
background-position-x: -186px;
background-image: url(https://i.imgur.com/aa9SZ0H.png);
transition: all 1.5s ease-in-out;
filter: brightness(0.5);
}

.boxSotto {
position: relative;
opacity: 1;
z-index: 1;
width: 300px; 
height: 510px; 
margin-top: -310px;
margin-left: -80px; 
transition-delay: 1.5s; 
transition: all 1.5s ease-in-out;
}
  
.contenitore:hover .boxSotto {
margin-left: -85px; 
transition: all 1.5s ease-in-out;
}


.testo {
position: relative; 
overflow: hidden; 
opacity: 1; 
-moz-transition: all ease-out 1s; 
-webkit-transition: all ease-out 1s; 
-o-transition: all ease-out 1s; 
width: 230px; 
height: 410px;  
margin-left: -5px; 
margin-top: 40px; 
background-color: #111; box-shadow: 0px 0px 5px #000; 
transition-delay: 0.5;
}

.testoin {
margin: auto;
width: 200px;
height: 380px;
background: #1a1a1a; box-shadow: 0px 0px 5px #000; 
font-family: verdana; 
font-size: 10px; 
position:relative; 
text-align: justify; 
padding: 5px; 
overflow: auto;
margin-top: 10px;
color: #707070;
}


/*-------------------QUOTE--------------------------*/
div.c2 {  
       width: 500px;
       font-family: 'Big Shoulders Stencil Text', cursive; 
       font-size: 100px; 
       transform: rotate(90deg);
        z-index: 8;
       line-height:85px; 
       position: relative;
       margin-top: -243px;
       margin-left: 140px;
       text-transform: uppercase; 
       text-shadow: none; 
       background:url('https://cdna.artstation.com/p/assets/images/images/011/674/752/original/milo-liao-v1-gif.gif?1530799436')center bottom; 
       background-size: 170px 100px; 
       -webkit-background-clip:text; 
       -webkit-text-fill-color:transparent; 
       } 

       /* -------------SCRITTE ----------------*/
f {font-family: inconsolata; font-size: 14px; color: rgb(147,65,61,0.6);text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 1px 1px #000;}
n { font-family: georgia; font-size: 9px; line-height: 7px; color: rgb(183,171,161); text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000;}
m {font-family: georgia; color:#386932;font-size: 10px;text-shadow:2px 1px 1px #000;opacity:0.8;}
l {color: #694233; font-family: georgia; letter-spacing: 1px; text-transform: uppercase; font-size: 9px;}
o {font-family: verdana; font-size: 10px; color: rgb(190,165,130,0.72); cursor: default; font-weight: normal; text-transform: lowercase;}
g {color: #6a5a3b;  font-size: 9px; font-family: Tahoma; letter-spacing: 2px;text-transform: uppercase;text-shadow: 1px #000; font-family: georgia;}
h {color: #6a5a3b; font-family: georgia; line-height: 7px; font-size: 10px; font-style: italic; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000; opacity: 0.5;}
u {font-family: verdana; font-size: 10px; color: #746054; letter-spacing: 1px; border-bottom: 1px dotted #363636;}


        </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=Inconsolata:wght@300&display=swap" rel="stylesheet">
<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=Big+Shoulders+Stencil+Text:wght@500&display=swap" rel="stylesheet">
    <br>
<div class="contenitore"><div class="immagine"></div>
<div class="c2">OH CACCHIO..</div>
<div class="boxSotto">
<div class="testo">

<div class="testoin"><f>.I'm a Fucking DEMIgod</f><br><br> vent1 anni di <n>ossa rotte</n>, di stracci <m>buttati addosso</m>, di <l>furtarelli casuali</l> perchè la <o>fortuna è cieca</o> ma la <m>Dea Bendata ci vede benissimo</m> e -forse forse- su di lui un occhio vigile ed attento c'è sempre stato. <u>Gipsy per definizione</u>. Camaleontica capacità di adattarsi alle situazioni ed alle circostanze. Da quando è nato non lo sa neanche lui <l>quanti chilometri ha percorso</l>. Tre giorni da una parte. Altri tre da un'altra. Qualche tappa più lunga e sporadica dove c'è sempre il sole. <h>Ovviamente lui, al sole, non c'è nato</h>. L'esito è che, di scuole, ne cambia troppe. Di compagni altrettanti. Amici neanche l'ombra. Dialetti mischiati e dislessia galoppante. <m>Sigarette. Tabacco. Fumo?</m> <f>Why not!</f> Al campo c'è arrivato perchè è arrivata l'ora di mettere su famiglia <u>e cogliendo margherite</u> -<n>If you know what I mean</n>- quella in questione si trasforma in una <g>Manticora</g> e niente.. avevamo detto, del resto, che la Dea Bendata ci vede benissimo giusto? </div></div></div>