BAS by @MILENUCCIA87 - Codewith.it

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

Referenze

<h4>Titolo di intestazione di quarto livello
<pre>Indica una parte di testo preformattato
selectedPre-seleziona un elemento di input
<input>Definisce un area di input per l'invio di dati e informazioni
formSpecifica a quale form appartiene un elemento.
<meta>Definisce i meta dati di una pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Blocco visualizzazione PC

5/10/24 es. 10 - cifratura

Dottor Jakyll e Mr Hyde

Banner_cercatutto

AirPods Shop LOGIN(2)

JS class value to input

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>
/* ---------- WRAPPER HOVER (nuovo) ---------- */
.pg-wrap{
  position: relative;
  width: 448px;     /* stessa larghezza della card */
  display: inline-block;
}

/* Nascosti di default: SOLO con opacità (fade) */
.pg-wrap .container-box,
.pg-wrap .gif1, .pg-wrap .gif2, .pg-wrap .gif3, .pg-wrap .gif4{
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none; /* evita che catturino l’hover quando invisibili */
}

/* Visibili quando si passa sopra QUALSIASI punto del blocco */
.pg-wrap:hover .container-box,
.pg-wrap:hover .gif1, .pg-wrap:hover .gif2, .pg-wrap:hover .gif3, .pg-wrap:hover .gif4{
  opacity: 1;
  pointer-events: auto;
}

/* ------------------ CARD ------------------ */
.pg-card {
  width: 448px;
  height: 678px;
  overflow: hidden;
  background-image: url(https://i.imgur.com/BI6UpSU.png);
  background-size: cover;
  box-sizing: border-box;
  z-index: 1;
  position: relative;
}

/* --------------- TESTI --------------- */
.container-box {
  position: relative;  z-index: 3; overflow: hidden;
  width: 230px;
  height: 270px;
  margin-left: 15px; 
  margin-top: -234px;  
  border: 1px solid #000000;
  padding: 3px;  
}

.text-box {
  position: absolute; z-index: 2; float: left; overflow: auto;
  width: 220px;
  height: 260px;
  padding: 5px;
  background-color: #000000; 
  text-align: justify; 
  color: #3d3d3d; 
  font-family: "Titillium Web", sans-serif; 
  font-size: 10.5px; 
  line-height:11px; 
  letter-spacing: 1px; 
  font-weight: normal!important;
}

.text-box::-webkit-scrollbar { width: 0px; }
.text-box::-webkit-scrollbar-thumb { background-color: 000000; }
.text-box::-webkit-scrollbar-track { background: transparent; }

/* ------------------- NOME E FRASE ------------------ */
.frase {
  z-index: 4;
  position: absolute;
  margin-left: 34px;
  margin-top: -345px;
  font-size: 35px;
  width: 360px;
  text-transform: uppercase;
  font-family: "Titillium Web", sans-serif;
  letter-spacing: -2px;

  color: transparent;
  -webkit-text-stroke: 0.5px #6a6b4f;

  /* Effetto sfalsato */
  text-shadow: 1px 1px 0 #000000, -1px -1px 0 #6a6b4f;
}

.frase1 {
  position: absolute;
  margin-top: -305px;
  margin-left: 20px;
  width: 390px;
  color: #000000;
  font-family: "Titillium Web", sans-serif;
  background-color: rgba(50, 56, 63, 0.5);
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 4;
  font-size: 8px;
  text-align: center;
  text-shadow: 1px 1px 1px #000;
}
   
/* ---------------- GIF ----------------------- */
.gif1 { z-index: 3;
  position: relative;
  margin-top: -235px;
  margin-left: 260px;
  width:80px; height:80px;
  transform: rotate(8deg);
  background-image: url(https://i.imgur.com/97WpqvG.gif);
  outline: 4px double #000000;
  filter: brightness(80%) grayscale(80%);
}

.gif2 { z-index: 3;
  position: relative;
  margin-top: -67px;
  margin-left: 351px;
  width:80px; height:80px;
  transform: rotate(8deg);
  background-image: url(https://i.imgur.com/VKw1QyX.gif);
  outline: 4px double #000000;
  filter: brightness(80%) grayscale(80%);
}

.gif3 { z-index: 2;
  position: relative;
  margin-top: -4px;
  margin-left: 246px;
  width:80px; height:80px;
  transform: rotate(8deg);
  background-image: url(https://i.imgur.com/SmXRjvD.gif);
  outline: 4px double #000000;
  filter: brightness(80%) grayscale(80%);
}

.gif4 { z-index: 3;
  position: relative;
  margin-top: -67px;
  margin-left: 338px;
  width:80px; height:80px;
  transform: rotate(8deg);
  background-image: url(https://i.imgur.com/NezJVOX.gif);
  outline: 4px double #000000;
  filter: brightness(80%) grayscale(80%);
}

/* ------------------ STILI TESTO INTERNI ------------------ */
.text1 {
  color: #b5b054;
  font-family: georgia;
  font-size: 9px;
  line-height: 9px;
  font-style: italic;
  font-weight: bold;
}

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

.text3 {
  font-family: georgia;
  text-transform: uppercase;
  font-size: 7px;
  line-height: 9px!important;
  letter-spacing: 2px;
  color: #505f3b;
  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: rgba(106, 107, 79, 0.5);
  padding-left: 7px;
  padding-right: 7px;
}
</style>

<div class="pg-wrap">
  <div class="pg-card"></div>
  <div class="frase">Tobias Elijah Creed</div>
  <div class="frase1">La più grande libertà è quella che ti tiene in catene</div>

  <div class="gif1"></div>
  <div class="gif2"></div>
  <div class="gif3"></div>
  <div class="gif4"></div>

  <div class="container-box">
    <div class="text-box">
      E' il <span class="text4">frutto perfetto</span> della brutalità di un mondo stravolto dai Cordyceps. Nato il 9 gennaio 2010 nel degrado periferico di una città implosa sotto la pandemia, ha visto la sua famiglia sgretolarsi -pezzo dopo pezzo- tra fame, violenza e tradimento. Quando la FEDRA ha militarizzato la città trasformandola in un bastione della sopravvivenza, ha capito che <span class="text3">l'umanità è un lusso per chi può permetterselo</span>. || <span class="text2">Sometimes human places, create inhuman monsters</span> || Durante l'addestramento base mostra una naturale inclinazione alla <span class="text2">spietatezza</span>. Dove gli altri cedono, lui stringe i denti. Dove molti vengono spezzati, lui resta in piedi. Viene indirizzato, per questo, verso un settore dove talento e crudeltà si fondono: <span class="text4">interrogatorio e tortura psicologica</span>. La sua fama interna cresce nel silenzio. E' temuto per ciò che dice, non solo per quello che fa. || <span class="text2">L’uomo guardò il condannato e chiese all’ufficiale: lui conosce la sua condanna? No – disse l’ufficiale – la conoscerà sul suo stesso corpo.</span> || Tobias agisce con logica glaciale e la sua crudeltà non nasce dall’ira ma da una <span class="text1">disciplina spietata</span>. Il suo corpo non è un tempio, <span class="text3">ma uno strumento da dominare</span>. La sofferenza è parte dell’equazione. Prevista. Misurata. Tollerata. Non teme il dolore perché l’ha trasformato in metodo. Non teme la morte perché la maneggia ogni giorno sugli altri, ma anche – e soprattutto – su sé stesso. || <span class="text2">Al mondo non importa se muori. Non ascolterà le tue urla. Non importa che tu sia ferito. Se SANGUINI a terra, la terra berrà il tuo sangue.</span> || L'arrivo a Boston non viene accompagnato da specifiche particolari ma i fedeli del Generale Boeing lo accolgono come un'opera d'arte. Un <span class="text4">veleno a lento rilascio</span> che si infiltra nella QZ scavandone il tessuto sociale. I suoi sono incarichi sporchi, al limite dell'umano. E' la lama dietro al sorriso dei funzionari. Il carceriere che fa parlare anche chi ha già smesso di credere in qualcosa. || <span class="text2">E se Dio ha creato un mondo di tale meraviglia per condirlo di mostri, la ragione è una sola</span>: <span class="text4">NON L’HA FATTO PER NOI</span>.
    </div>
  </div>
</div>