SOPRAVVIVENZA by @MILENUCCIA87 - Codewith.it

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

Referenze

heightDetermina l'altezza di un elemento HTML in pixel
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
text/plainDefinisce un metodo di non codifica dei valori di un form
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio form 1

Palinsesto Radio

Esercizio cicli2

Table (prove)(2)

Italiano-Cinema [Bacheca]

Contatore di click mio

PERGAMEMORY - I Segreti dei Bevill

Esercizi 05/03/2024 es4

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>