BAS by @MILENUCCIA87 - Codewith.it

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

References

<title>Definisce il titolo della pagina web.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
postDefinisce un metodo di invio di dati al server
<em>Formatta il testo in corsivo/italico enfatizzato
<nav>Definisce un menu di navigazione

Users

Log in to search for users

Explore

Find inspiration

Il mio primo file HTML

Calcolatrice php

Collegamenti ipertestuali

I Giornali sul Web

Template prodotti Meguiar

Quiz su Kylie Jenner

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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