SOPRAVVIVENZA by @MILENUCCIA87 - Codewith.it

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

References

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
Inserisce un commento nel codice
<br>Inserisce uno spazio vuoto tra due elementi HTML.
methodDetermina il metodo di invio dei dati di un form al server
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura

Users

Log in to search for users

Explore

Find inspiration

Tabelle con inserimento immagini

un casino pazzesco

Livia e la foresta incantata

Map System using Leaflet

console elements(2)

Pitone Tutorial -esercizio conclus

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>