PROVE by @MILENUCCIA87 - Codewith.it

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

Referenze

enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<nav>Definisce un menu di navigazione
<th>Definisce una cella di intestazione di una tabella HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

pagina America(2)(2)

LB Campodarsego(2)(2)(2)

pr - opening-info

test-wrap-with-grid

HTML Schwabisch

Quiz su Kylie Jenner

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>
:root{
  --giallo:#b5b054;
  --verde:#757750;
}

/* ------------------ CARTA ------------------ */
.carta {
  margin: auto;
  width: 448px;
  height: 678px;
  border: 15px solid #0c0c0c;
  position: relative;
  overflow: hidden;
  background: #050505;
}

.immagine {
  width: 100%;
  height: 100%;
  background-image: url(https://i.imgur.com/tKhXNss.png);
  background-position: center;
  background-size: cover;
  transition: all ease-in-out 1s;
}
.carta:hover .immagine { filter: grayscale(100%); }

.sfondo {
  width: 100%;
  height: 100%;
  background: rgba(12, 12, 12, 0.85);
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.carta:hover .sfondo { opacity: 1; }

/*-------------------NOME-------------------------------------------*/
div.c2 {  
       width: 500px;
       font-size: 100px; 
       transform: rotate(90deg);
        z-index: 8;
       line-height:85px; 
       position: relative;
       margin-top: -258px;
       margin-left: -216px;
       text-transform: uppercase; 
       text-shadow: none; 
       background:url('https://www.sciencefriday.com/wp-content/uploads/2020/12/slime-mold-crawl.gif')center bottom; 
       background-size: 100px 50px; 
       -webkit-background-clip:text; 
       -webkit-text-fill-color:transparent; 
       } 

       .contenuto {
  position: relative;
  inset: 0;
  padding: 20px;
  margin-top: 55px;
  margin-left: 50px;
  box-sizing: border-box;
  color: #8C8C8C;
  opacity: 0;
  transition: opacity 1s ease-in-out 0.5s;
}
.carta:hover .contenuto { opacity: 1; }

.imm {transition: all 2s ease-in-out;position:absolute; margin: 20px 0px 0px 10px;opacity:1; padding:8px;margin-left: -35px; margin-top: -215px;}
.imm img{
  object-fit: cover;
  height: 90px;
  width: 90px;
  filter: brightness(60%) grayscale(60%);
  text-align: center;
  border: 4px solid rgba(0,0,0,0.8);
  margin-top: -1px;
  box-shadow:
    rgba(141, 71, 6, .5) 0px 1px 2px,
    rgba(141, 71, 6, .5) 0px 2px 4px,
    rgba(141, 71, 6, .5) 0px 4px 8px,
    rgba(141, 71, 6, .5) 0px 8px 16px,
    rgba(141, 71, 6, .5) 0px 16px 32px,
    rgba(141, 71, 6, .5) 0px 32px 64px;
}

/* Linee */
.riga {
  width: 300px;
  height: 1px;
  background: #757750;
  margin-top: -155px;
  margin-left: 75px; 
  opacity: 0.8;
}

.riga1 {
  width: 300px;
  height: 1px;
  background: #757750;
  margin-top: 2px;
  margin-left: 75px; 
  opacity: 0.8;
}
/* Testo corpo */
.testo {
  font-family: "Titillium", sans-serif;
  font-size: 11px;
  line-height: 100%;
  width: 280px;
  margin-top: 5px; 
  margin-left: 85px; 
  text-align: justify;
  color: #666;
}

/* ------ testi inline ------*/
.text1 {
  color: #b5b054;
  font-size: 9px;
  font-style: italic;
  letter-spacing: 1px;
  opacity: 0.6;
}
.text2 {
  color: #6a6b4f;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 8px;
}
.text4 {
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 2px;
  color: #000000;
  background: rgba(106, 107, 79, 0.5);
  padding-left: 3px;
  padding-right: 3px;
}
</style>

<div class="carta">
  <div class="immagine"></div>
  <div class="sfondo"></div>
  <div class="c2">MALACAI</div>
   <div class="contenuto"><div class="imm">
   <img src="https://i.imgur.com/eCA5Z4V.gif" style="transform: rotate(-3deg);"><br> <img src="https://i.imgur.com/mZ12iK2.gif"><br>
<img src="https://i.imgur.com/xShM5vD.gif" style="transform: rotate(3deg);"><br>
 </div><div class="riga"></div><div class="testo">Malacai ha mani rovinate. Le unghie spezzate, <span class="text2">mangiate dalla terra, dal freddo, dalle corde tirate troppo a lungo</span>. Sul viso, <span class="text4">due strane cicatrici irregolari</span> delle quali non parla mai ma che tutti, alla fine, osservano. Odora di fumo. Di pelle bagnata. Di sudore. <span class="text1">Di sangue vecchio quando rientra</span>. Il lavoro che porta avanti è semplice: uscire, sopravvivere, cacciare, rientrare. Niente promesse. <span class="text1">Niente eroismi</span>. Solo quello che serve fare perché qualcuno, dentro le mura, passi un'altra notte al sicuro. Parla poco. Osserva molto. Ha la voce ruvida di chi ha imparato presto che fidarsi è un lusso e che ogni scelta, anche la più piccola, lascia dietro di sé conseguenze che non tornano indietro. <span class="text4">Ha imparato a diffidare di ciò che sembra improvviso</span>. Crede che tutto inizi sempre da qualcosa di minimo: un gesto ignorato, una scelta rimandata, uno sguardo distolto. Se nessuno ferma il primo passo, <span class="text4">l’ultimo è sempre una catastrofe</span>.
    </div><div class="riga1"></div></div></div>