boh by @MILENUCCIA87 - Codewith.it

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

Referenze

placeholderDefinisce un testo segnaposto per un elemento input o textarea
<head>Tag primario di un documento HTML
<div>Crea contenitori generici o sezioni in una pagina
<em>Formatta il testo in corsivo/italico enfatizzato
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<option>Serve ad inserire una voce in un menu di selezione.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

semicerchio canvas

questa sarà una pagina web dedic

torta della nonna

Un Giorno a Napoli: Itinerario Det

Download 7-Zip for PC Windows

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>