boh by @MILENUCCIA87 - Codewith.it

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

References

_topApre collegamenti ipertestuali nell'elemento parent assoluto
<ul>Usato per la creazione di liste non ordinate.
valueValore alfanumerico o booleano contenuto in un elemento
<map>Inserisce immagini mappa cliccabili in un documento
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
_selfApre collegamenti ipertestuali nella stessa pagina del browser

Users

Log in to search for users

Explore

Find inspiration

Favola dei tre porcellini(2)

Esercitazione n 1

Heads Or Tails Random Tally

La mia prima pagina HTML

Esercitazione n. 1(2)

inserimento immagini in un testo

Livia e la Foresta Incantata

JS Istruzioni condizionali es1

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>