SOPRAVVIVENZA by @MILENUCCIA87 - Codewith.it

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

Referenze

preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
text/plainDefinisce un metodo di non codifica dei valori di un form
<blockquote>Inserisce citazioni in un documento HTML
<a>Inserisce link e collegamenti ipertestuali
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione 1

PixFlow Agency | Web Design, Video

Descr Breve UNIONWOOD 5mm

test-wrap-with-grid

esercizio 3 esame

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>