TOBIAS by @MILENUCCIA87 - Codewith.it

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

References

animationDefinisce i parametri dell'animazione di un elemento o selettore
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<label>Mostrare un testo di etichetta per un elemento di input.
formSpecifica a quale form appartiene un elemento.
langSpecifica la lingua del contenuto di un elemento

Users

Log in to search for users

Explore

Find inspiration

La Storia di Cappuccetto Rosso

Curriculum vitae

Analisi Drive Synology: RS814RP+ &

Media ponderata

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>

/* ------------------------ VARIE --------------------- */
.testo::-webkit-scrollbar {
  width: 0px;
}

.testo::-webkit-scrollbar-thumb {
  background-color: 000000;
  
}

.testo::-webkit-scrollbar-track {
  background: transparent;
}



/* -------------- BOX GENERALE -------------------------- */


.base { position: relative;
                width: 480px; 
                height: 600px;
                margin-left: 5px; 
                }


/* --------------- IMMAGINE ------------------ */
.immi {
               position: relative;  
               width: 200px; 
               height: 738px;
               background-image: url(https://i.imgur.com/LUhJuP4.png); border: 1px solid #000000;}

/* --------------- TESTI --------------- */


.box1 { position: relative;  z-index: 3; overflow:  hidden;
  width: 230px;
  height: 500px;
  margin-left: 210px; 
  margin-top: -714px;  
  border: 1px solid #000000;
  padding: 3px; 
  transition: all ease-out 1.5s; 
}


.testo { position: absolute; z-index: 2; float: left; overflow: auto;
  width: 220px;
  height: 490px;
  padding: 5px;
  background-color: #000000; 
  text-align: justify; 
  color: #3d3d3d; 
  font-family: "Titillium Web", sans-serif; 
  font-size: 10.5px; 
  line-height:11px; 
  letter-spacing: 1px; 
  font-weight: normal!important;
}


/* ------------------- NOME GRANDE ------------------------------ */
.frase { z-index: 4;
	            position: relative;
	            margin-left: 30px;
              margin-top: -150px;
              font-size: 50px;
              width: 370px;
	            color: #6a6b4f;
	            font-family: "Anton", sans-serif;
	            transition: 5s;
              letter-spacing:-4px;
              text-shadow: 1px 1px 1px #000000; }

.frase1 { position:relative; margin-top: -10px; margin-left: 20px; width:390px; color:#000000; font-family: "Titillium Web", sans-serif; background-color: rgba(50,56,63, .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 { z-index: 3;
        position: relative;
        margin-top: -105px;
        margin-left: 260px;
        width:80px;
        height:80px;
        transform: rotate(8deg);
        background-image: url(https://i.imgur.com/97WpqvG.gif);
        outline: 4px double #000000; filter: brightness(80%)grayscale(80%); }

.gif2 { z-index: 3;
        position: relative;
        margin-top: -67px;
        margin-left: 351px;
        width:80px;
        height:80px;
        transform: rotate(8deg);
        background-image: url(https://i.imgur.com/VKw1QyX.gif); outline: 4px double #000000;
     filter: brightness(80%)grayscale(80%);}

.gif3 { z-index: 2;
        position: relative;
        margin-top: -4px;
        margin-left: 246px;
        width:80px;
        height:80px;
        transform: rotate(8deg);
        background-image: url(https://i.imgur.com/SmXRjvD.gif); outline: 4px double #000000;
     filter: brightness(80%)grayscale(80%);}

.gif4 { z-index: 3;
        position: relative;
        margin-top: -67px;
        margin-left: 338px;
        width:80px;
        height:80px;
        transform: rotate(8deg);
        background-image: url(https://i.imgur.com/NezJVOX.gif); 
        outline: 4px double #000000;
     filter: brightness(80%)grayscale(80%);}


 /* --------------- STYLE SCRITTE --------------- */


a {
     text-decoration:none!important;
}

d {
     color: #b5b054; font-family: georgia; font-size: 9px; line-height: 9px;font-style: italic; font-weight: bold;
}

f {
     font-family: calibri; 
     color: #6a6b4f;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
}

h {
     font-family: georgia; 
     text-transform: uppercase;
     font-size: 7px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #505f3b;
     opacity: 0.7;
     text-shadow: 1px 1px 0px #111; 
} 

w {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #000000; 
     background: rgb(106, 107, 79, 0.5); 
     padding-left:7px;
     padding-right:7px;
} 


/* ------------------------------ B - I - U - S ------------------------------ */
a {
            color: #555;
            font-size: 10px;
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

        a:hover {
            color: rgba(72,61,139, 0.747);
            -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
     -webkit-backface-visibility: hidden;
        }

b, i, u, s {
     color: #444;
}


u {
     text-decoration: underline dashed #7b8a9d; 
     line-height: 9px;
}

</style>


<div class="base">
<div class="immi"></div>

<div class="frase">Tobias Elijah Creed</div><div class="frase1">La più grande libertà è quella che ti tiene in catene</div>

<div class="gif1"></div>
<div class="gif2"></div>
<div class="gif3"></div>
<div class="gif4"></div>


<div class="box1"><div class="testo">E' il <w>frutto perfetto</w> della brutalità di un mondo stravolto dai Cordyceps. Nato il 9 gennaio 2010 nel degrado periferico di una città implosa sotto la pandemia, ha visto la sua famiglia sgretolarsi -pezzo dopo pezzo- tra fame, violenza e tradimento. Quando la FEDRA ha militarizzato la città trasformandola in un bastione della sopravvivenza, ha capito che <h>l'umanità è un lusso per chi può permetterselo</h>. || <f>Sometimes human places, create inhuman monsters</f> || Durante l'addestramento base mostra una naturale inclinazione alla <f>spietatezza</f>. Dove gli altri cedono, lui stringe i denti. Dove molti vengono spezzati, lui resta in piedi. Viene indirizzato, per questo, verso un settore dove talento e crudeltà si fondono: <w>interrogatorio e tortura psicologica</w>. La sua fama interna cresce nel silenzio. E' temuto per ciò che dice, non solo per quello che fa. || <f>L’uomo guardò il condannato e chiese all’ufficiale: lui conosce la sua condanna? No – disse l’ufficiale – la conoscerà sul suo stesso corpo.</f> || Tobias agisce con logica glaciale e la sua crudeltà non nasce dall’ira ma da una <d>disciplina spietata</d>. Il suo corpo non è un tempio, <h>ma uno strumento da dominare</h>. La sofferenza è parte dell’equazione. Prevista. Misurata. Tollerata. Non teme il dolore perché l’ha trasformato in metodo. Non teme la morte perché la maneggia ogni giorno sugli altri, ma anche – e soprattutto – su sé stesso. || <f>Al mondo non importa se muori. Non ascolterà le tue urla. Non importa che tu sia ferito. Se SANGUINI a terra, la terra berrà il tuo sangue.</f> || L'arrivo a Boston non viene accompagnato da specifiche particolari ma i fedeli del Generale Boeing lo accolgono come un'opera d'arte. Un <w>veleno a lento rilascio</w> che si infiltra nella QZ scavandone il tessuto sociale. I suoi sono incarichi sporchi, al limite dell'umano. E' la lama dietro al sorriso dei funzionari. Il carceriere che fa parlare anche chi ha già smesso di credere in qualcosa. || <f>E se Dio ha creato un mondo di tale meraviglia per condirlo di mostri, la ragione è una sola</f>: <w>NON L’HA FATTO PER NOI</w>.

   </div></div>



</div>