boh by @MILENUCCIA87 - Codewith.it

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

Referenze

<nav>Definisce un menu di navigazione
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
hreflangConsente di dichiarare la lingua del documento collegato.
<select>Usato per creare un menu a tendina.
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ex informatica 2

Download Firefox for PC Windows

Costruzione form

Generatore di Musica

Link sito di Jacopo Picco

Palinsesto Radio

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: #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>