COSE by @MILENUCCIA87 - Codewith.it

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

Referenze

<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<map>Inserisce immagini mappa cliccabili in un documento
<table>Tag primario per la creazione di tabelle
<pre>Indica una parte di testo preformattato
<a>Inserisce link e collegamenti ipertestuali
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione 2

fontawesome-esempio

educazione civica info

ESERCIZIO FINALE

Festava Live - Bootstrap 5 CSS Tem

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; }

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

/* Titolo */
.titolo {
  font-family: 'chronos_serifstroked', serif;
  font-size: 26px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 4px;
  color: #b5b054;
  margin-bottom: 2px;
  opacity: 0.8;
}

/* Sottotitoli */
.sottotitolo, .sottotitolo2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  margin-top: -3px;
  letter-spacing: 1px;
  color: #757750;
  opacity: 0.9;
}

/* Linee */
.riga {
  width: 100%;
  height: 1px;
  background: #757750;
  margin: 6px auto;
  opacity: 0.8;
}

/* Testo corpo */
.testo {
  font-family: "Titillium", sans-serif;
  font-size: 11px;
  line-height: 100%;
  text-align: justify;
  color: #666;
  margin: 10px 0;
}

/* ====== ROMBI GIF (4 pezzi, lato destro) ====== */
.rombi{
  position:absolute;
  right:14px;              /* ancorati a destra */
  top: 80%;                /* cluster verticale */
  transform: translateY(-50%);
  width: 230px;            /* area di manovra dei rombi */
  height: 260px;
  pointer-events: none;    /* non coprono interazioni sul testo */
}

/* base rombo */
.rombo{
  position:absolute;
  transform: rotate(45deg);
  overflow:hidden;
  border:3px solid #b5b054;
  box-shadow:0 0 0 2px rgba(181,176,84,.20), 0 0 10px rgba(117,119,80,.25) inset;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

/* dimensioni */
.rombo.grande{ width:82px; height:82px; }
.rombo.piccolo{ width:54px; height:54px; }

/* colori alternati */
.rombo.alt{ border-color: #757750; }

/* posizioni sfalsate (tutte a destra, non centrali) */
.rombo#r1{ right: 10px;    top: 0px; }          /* grande alto-destra */
.rombo#r2{ right: 70px; top: 72px; }       /* piccolo sotto e un po' dentro */
.rombo#r3{ right: 13px; top: 120px; }      /* grande più basso */
.rombo#r4{ right: 90px; top: 177px; }     /* piccolo chiude la diagonale */

/* raddrizza l’immagine dentro il rombo */
.rombo img{
  width:100%; height:100%;
  object-fit: contain;        /* NON ritaglia */
  background:#000;            /* riempie gli spazi vuoti */
  transform: rotate(-45deg) scale(1.4); /* raddrizza + scala per farla entrare tutta */
  transform-origin:center;
  opacity: 0.7;
}

/* hover (solo estetica; riattiva pointer se vuoi click) */
.rombo:hover{
  filter: grayscale(55%);
  box-shadow:0 0 0 2px rgba(181,176,84,.35), 0 0 14px rgba(117,119,80,.35) inset;
  transform: rotate(45deg) scale(1.04);}


/* responsive minimo: se serve, i rombi si stringono un filo */
@media (max-width: 460px){
  .rombi{ right:8px; width:200px; height:240px; }
  .rombo.grande{ width:84px; height:84px; }
  .rombo.piccolo{ width:58px; height:58px; }
  .rombo#r2{ right: 64px; top: 70px; }
  .rombo#r3{ right: 14px; top: 124px; }
  .rombo#r4{ right: 98px; top: 166px; }
}

/* ------ 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>

<!-- HTML -->
<div class="carta">
  <div class="immagine"></div>
  <div class="sfondo"></div>
  <div class="contenuto">
    <div class="titolo">Malacai John Walker</div>
    <div class="sottotitolo">The world breaks everyone and afterward</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="riga"></div>
    <div class="sottotitolo2">many are strong at the broken places.</div>

    <!-- ROMBI A DESTRA -->
    <div class="rombi">
      <div class="rombo grande" id="r1">
        <img src="https://i.imgur.com/eCA5Z4V.gif" alt="gif1">
      </div>
      <div class="rombo piccolo alt" id="r2">
        <img src="https://i.imgur.com/mZ12iK2.gif" alt="gif2">
      </div>
      <div class="rombo grande alt" id="r3">
        <img src="https://i.imgur.com/xShM5vD.gif" alt="gif3">
      </div>
      <div class="rombo piccolo" id="r4">
        <img src="https://i.imgur.com/gdJHphI.gif" alt="gif4">
      </div>
    </div>
  </div>
</div>