boh by @MILENUCCIA87 - Codewith.it

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

References

<h1>Titolo di intestazione di primo livello
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<label>Mostrare un testo di etichetta per un elemento di input.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<pre>Indica una parte di testo preformattato

Users

Log in to search for users

Explore

Find inspiration

Esercitazione n.1

TravelEscape - Esplora il Mondo co

Scuola G.Galilei.html

ArteFORMA — Architectural Digita

Esercizi 05/03/2024 es4

Heads Or Tails Random Tally

ECOVACS GOAT A1600 LiDAR PRO

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>