SOPRAVVIVENZA by @MILENUCCIA87 - Codewith.it

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

Referenze

titleIndica informazioni aggiuntive riguardo un elemento HTML
<i>Formatta il testo in corsivo/italico non enfatizzato
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
_parentApre collegamenti ipertestuali nell'elemento genitore

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio 1 informatica

Contatore di Click

Esercitazione 3 MORRA

dati dell-utente

Dario Di Fazio - Portfolio CV & Co

Figure & Figcaption Music Album Pr

Il tuo link per il download è pro

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 ---------- */
.pg-wrap {
  position: relative;
  width: 448px;
  display: inline-block;
}

/* Fade-in su hover */
.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;
}

.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: url(https://i.imgur.com/BI6UpSU.png) no-repeat center/cover;
  position: relative;
  z-index: 1;
}

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

.text-box {
  position: absolute;
  z-index: 2;
  width: 220px;
  height: 260px;
  padding: 5px;
  overflow: auto;
  border: 1px solid #111;
  text-align: justify;
  background: none;
  text-shadow: 1px 1px 2px #000;
  color: #707070;
  font-family: "Titillium Web", sans-serif;
  font-size: 10.5px;
  line-height: 11px;
  letter-spacing: 1px;
}

.text-box::-webkit-scrollbar { width: 0; }

/* ------------------- NOME + 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;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #6a6b4f;
}

.frase1 {
  position: absolute;
  margin-top: -305px;
  margin-left: 20px;
  width: 390px;
  color: #000;
  font-family: "Titillium Web", sans-serif;
  background: 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, .gif2, .gif3, .gif4 {
  position: relative;
  width: 80px; height: 80px;
  transform: rotate(8deg);
  outline: 4px double #000;
  filter: brightness(80%) grayscale(80%);
}
.gif1 { z-index: 3; margin: -235px 0 0 260px; background: url(https://i.imgur.com/97WpqvG.gif) no-repeat center/cover; }
.gif2 { z-index: 3; margin: -67px 0 0 351px; background: url(https://i.imgur.com/VKw1QyX.gif) no-repeat center/cover; }
.gif3 { z-index: 2; margin: -4px 0 0 246px; background: url(https://i.imgur.com/SmXRjvD.gif) no-repeat center/cover; }
.gif4 { z-index: 3; margin: -67px 0 0 338px; background: url(https://i.imgur.com/NezJVOX.gif) no-repeat center/cover; }

/* ------------------ STILI TESTO INTERNI ------------------ */
.text1 { color: #b5b054; font-family: georgia; font-size: 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; }
.text3 { font-family: georgia; text-transform: uppercase; font-size: 7px; letter-spacing: 2px; color: #505f3b; opacity: .7; text-shadow: 1px 1px 0 #111; }
.text4 { text-transform: uppercase; font-size: 8px; letter-spacing: 2px; color: #000; background: rgba(106,107,79,.5); padding: 0 7px; }
</style>

<div class="pg-wrap">
  <div class="pg-card"></div>
  <div class="frase">Tobias Elijah Creed</div>
  <div class="frase1">La libertà più grande è quella che ti incatena</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">Nato il <span class="text4">9 gennaio 2010</span> tra rovine e degrado. Cresciuto in un mondo che ha barattato pietà con sopravvivenza. La famiglia si è dissolta tra fame e tradimento. Ha imparato presto che <span class="text3">l’umanità è un lusso</span>. || <span class="text2">Human places forge inhuman men</span> ||Nell’addestramento non piega la schiena. Stringe i denti, resiste dove gli altri crollano. La sua inclinazione alla <span class="text2">spietatezza</span> lo indirizza all’arte sporca: <span class="text4">interrogatori e tortura psicologica</span>. Non alza la voce. Non ha bisogno di gridare. È temuto per quello che fa, e ancor più per quello che lascia intendere. ||<span class="text2">“La condanna la scoprirà sul suo corpo.”</span> || Agisce con <span class="text1">disciplina ferrea</span>. La crudeltà non nasce dall’ira ma da calcolo. Il dolore non lo spaventa: lo studia, lo misura, lo piega al proprio metodo. La morte non lo scuote: la maneggia ogni giorno, sugli altri e su sé stesso. || <span class="text2">Al mondo non importa se sanguini: la terra berrà il tuo sangue.</span> || A Boston diventa <span class="text4">veleno lento</span> che scava il tessuto della QZ. Incarichi sporchi, senza gloria. È la lama dietro il sorriso dei funzionari. Il carceriere che fa parlare anche i morti. || <span class="text2">Se Dio ha creato meraviglia e mostri, non lo ha fatto per noi.</span>
    </div>
  </div>
</div>