Sophia by @MILENUCCIA87 - Codewith.it

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

Referenze

<canvas>Tag per disegnare grafica dinamica su pagine web.
<label>Mostrare un testo di etichetta per un elemento di input.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
relServe a definire la relazione tra il documento e una risorsa.
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
srcIndica la provenienza di una risorsa esterna (tramite URL).

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

\\\"Il Razzismo - Un Tema Importa

Review of Functions I

esercitazione sulle celle

La sicurezza in informati

UFFICIALE SITO REGIONI

esercitazione 3

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>

/* --------------- IMMAGINE ------------------ */

.sfondo {
width: 448px;
height: 678px;
position: relative;
margin: auto;

}
  
.immagine {
background: url(https://i.imgur.com/8Ah6NEf.png);
margin: auto;
width: 448px;
height: 677px;
border: 1px solid #000000;
position: relative;
z-index: 3;
transition: all 1.8s ease-in-out;

}
.sfondo:hover .immagine {
width: 200px;
background-position-x: -140px;
background-image: url(https://i.imgur.com/8Ah6NEf.png);
transition: all 1.5s ease-in-out;
filter: brightness(0.5);
}

.boxSotto {
position: relative;
z-index: 1;
width: 300px; 
height: 600px; 
margin-top: -660px;
margin-left: 60px; 
transition-delay: 1.5s; 
transition: all 1.5s ease-in-out;
}
  
.sfondo:hover .boxSotto {
margin-left: 295px; 
transition: all 1.5s ease-in-out;
}

.testo {
  background-image: url('https://i.imgur.com/lISwF0q.png');
  overflow: scroll;
  font-family: "Titillium Web", sans-serif;
  font-size: 10.5px;
  color: #848484;
  line-height: 11px;
  letter-spacing: 1px;
  font-weight: normal !important;
  text-align: justify;
  padding: 10px;
  margin-left: 25px;
  margin-top: -10px;
  width: 210px;
  height: 420px;
  z-index: 5;

  /* scrollbar invisibile cross-browser */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
}

.testo::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Opera */
}

/* ------- NOME GRANDE ---------------------- */
.frase { z-index: 4;
	            position: relative;
	            margin-left: 40px;
              margin-top: -440px;
              font-size: 35px;
              width: 230px;
	            color: #954934;
	            font-family: "Anton", sans-serif;
	            transition: 5s;
              letter-spacing:-2px;
              text-shadow: 1px 1px 1px #000000; }
   
 /* ------------------GIF -----------------*/
.gif {width: 150px; height:100px; margin-left: 58px;  margin-top: 5px; }


.text1 {
     color: #b27a84; font-family: georgia; font-size: 9px; line-height: 9px;font-style: italic; font-weight: bold;
}

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

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

.text4 {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #000000; 
     background: rgb(149,73,52, 0.5); 
     padding-left:7px;
     padding-right:7px;
} 

  </style>

  <div class="sfondo">
<div class="immagine"></div>
<div class="boxSotto"><div class="frase">Sophia <s>Walker</s></div>
<div class="testo"><center>X Sagittarius X Doctor X<br>X Orphan X Animal Lover X</center><br>

Non parla molto ma ascolta con <span class="text1">attenzione chirurgica</span> e quando decide di dire qualcosa è impossibile ignorarla. Tratta i pazienti con gesti precisi, ma mai impersonali: <span class="text2">ogni tocco è calcolato per non far male</span>. Ha paura dell’intimità vera ma <span class="text3">lascia piccoli gesti in giro</span>: una benda pulita vicino al cuscino, un infuso caldo preparato in silenzio. Tiene le distanze da quasi tutti ma se un cane si avvicina, si lascia leccare le dita come se il mondo, per un attimo, smettesse di farle paura. <span class="text4">Quando sente troppo</span>, tace. Quando ama, tende ad allontanarsi. Ma resta. Sempre, anche se un passo indietro. <span class="text1">Pronta a salvarti</span>. Se qualcuno chiede di lei, non dice niente ma stringe il polso sinistro col pollice. Per ricordarsi che c’è ancora. <span class="text2">Dorme poco</span>. Controlla ogni notte che tutto sia al suo posto. Anche i battiti delle persone a cui tiene. Non sopporta chi uccide senza pensare. Ma se qualcuno ferisce ciò che ama allora è precisa. Fredda. Inarrestabile. Ha un diario segreto dove trascrive i nomi di tutti quelli che ha curato. Come un rosario silenzioso di anime toccate. <span class="text3">Non crede più nel futuro</span> ma ogni giorno cerca una piccola cosa da salvare. Un gesto. Una vita. Un respiro. || <span class="text4">Crede nel bene</span>. Non nel mondo. Ma nel bene, sì.</div><div class="gif"><img src="https://i.imgur.com/LKt8RW5.gif"  style="width: 140px; margin-left: -20px; margin-top: 5px; object-fit: cover; border: 1px solid #954934;filter: brightness(90%);"><img src="https://i.imgur.com/kIFADwg.gif" style="width: 140px; margin-left: 40px; margin-top: 5px; object-fit: cover;border: 1px solid #954934;filter: brightness(90%);"></div></div></div>