SOPRAVVIVENZA by @MILENUCCIA87 - Codewith.it

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

References

heightDetermina l'altezza di un elemento HTML in pixel
<h4>Titolo di intestazione di quarto livello
<body>Tag primario di un documento HTML
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.

Users

Log in to search for users

Explore

Find inspiration

Le meraviglie d\\

Le avventure di Peter Pan

HTML con CSS esempio generale

DEMO: Hi-Lo Game

Tabella con ricerca

Costruzione di tabella con html5

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