SPIROS by @MILENUCCIA87 - Codewith.it

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

Referenze

autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<th>Definisce una cella di intestazione di una tabella HTML.
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<ol>Crea liste ordinate o numerate.
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
widthImposta la larghezza di un elemento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Documentazione Tecnica

Heads Or Tails Random Tally

progetti scolastici

SCHEDA 4 INFORMATICA

Esempio Gestione del testo

Suono musicista 09/02/24

5/10/24 es. 5 - consonanti

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>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');


#fondo {
  margin: 0px auto;
  width:500px;
  height: 500px;
  padding: 0px;
overflow:hidden;
}

.caja1 {
  display: inline-block;
  height: 400px;
  width: 250px;
  background-image: url(https://i.imgur.com/UvfWL5K.png);
  border: 1px solid rgba(50,50,50);
  transition: all 1s ease-in-out;

}
#fondo:hover .caja1 {
  background-image: url(https://i.imgur.com/UvfWL5K.png);
  transition: all 1s ease-in-out;
 filter: brightness(80%)grayscale(80%);
}

.texto {
    font-family: "Open Sans", sans-serif;
  text-align: JUSTIFY;
  font-size: 10px;line-height:10px;
  transition: all 1s ease-in-out;
  width: 220px; 
 height: 380px;
  margin: -15px 0px 0px 1px;
  padding: 15px;
  color: #999; text-shadow: 1px 0 1px #000; 
  background: rgba(0,0,0,0.8); overflow:hidden; opacity: 0;
}
#fondo:hover .texto {
 transform: translateY(-395px);
  transition: all 1s ease-in-out; opacity:1;}

.imm {transition: all 2s ease-in-out;position:absolute; margin: 20px 0px 0px 10px;opacity:0;; padding:8px;margin-left: 260px; margin-top: -350px;}
.imm img {object-size: cover; height: 60px; width:100px; filter: brightness(100%)grayscale(100%);text-align:center;border: 7px solid rgba(0,0,0,0.8); margin-top:-1px;box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;}
#fondo:hover .imm{opacity:1;}


::-webkit-scrollbar {border-radius: 5px;width: 5px;}
::-webkit-scrollbar-thumb { background: #000; border-radius: 5px;height: 15px;}
::-webkit-scrollbar-track {width: 2px; background: #222; box-shadow: inset 0 0 5px #111;}

/*-------------STYLE---------*/
a {
     text-decoration:none!important;
}

d {
     color: #FFFFCE; font-family: georgia; font-size: 9px; line-height: 9px;font-style: italic; font-weight: bold;
}

f {
     font-family: calibri; 
     color: #C49B63;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
}

h {
     font-family: georgia; 
     text-transform: uppercase;
     font-size: 7px;
     line-height: 9px!important;
     letter-spacing: 3px; 
     color: #FED197;
     opacity: 0.7;
     text-shadow: 1px 1px 0px #111; 
} 

w {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #000000; 
     background: rgb(141, 71, 6, 0.5); 

     padding-left:7px;
     padding-right:7px;
} 


/* ------------------------------ B - I - U - S ------------------------------ */
a {
            color: #555;
            font-size: 15px;
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

        a:hover {
            color: rgba(141, 71, 6, 0.747);
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

b, i, u, s {
     color: #444;
}


u {
     text-decoration: underline dashed #7b8a9d; 
     line-height: 9px;
}

</style>


</style>



<div id="fondo">  <div class="caja1">   </div>
     <div class="imm">
   <img src="https://i.imgur.com/UAMV58w.gif" style="transform: rotate(-3deg);"><br> <img src="https://i.imgur.com/IaUWevg.gif"><br>
<img src="https://i.imgur.com/KsBKtIh.gif" style="transform: rotate(3deg);"><br><img src="https://i.imgur.com/9P3lrI7.gif">
 </div>
   
   <div class="texto"> <br><br><br><center>Aveva quella <f>bellezza</f> di cui solo <d>i vinti</d> sono capaci. E la <k>limpidezza</k> delle <f>cose deboli</f>. E la solitudine, perfetta,<br><h>di ciò che si è perduto</h></center><br><w>Rafaèl Edmundo Reyes</w> » '87 el veinti4 de febrero  <h>Puerto Hechizo</h>. || 185cm x 83kg || dark brown hair x deep blue eyes || <w>Taxi driver</w> || Ha la faccia pulita di uno che ha <u>molte colpe</u> da espiare. Un passato da soldato che gli ha fatto guadagnare uno strano <d>senso d'eroismo</d> ed un <f>codice d'onore</f> del tutto personale.<br><br><br>Un vecchio commilitone americano, un <f>fratello</f> con il quale ha combattuto parecchie battaglie, prima di tornare in America gli ha regalato la sua vecchia <a class="thumbnail" href="#"><w>c a d i l l a c</w><span><img alt="" src="https://i.imgur.com/BIjkGTp.jpeg"></span></a>, una <d>Eldorado</d> del '74 sulla quale ha fatto installare, tornato a Puerto Hechizo, la scritta TAXI. E' di un arancione sbiadito, decisamente rovinato ed il motore tossisce un poco quando cammina. </div>
   
 </div>