john by @MILENUCCIA87 - Codewith.it

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

Referenze

idIdentifica univocamente un elemento HTML
<tbody>Definisce il contenuto principale di una tabella.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<meta>Definisce i meta dati di una pagina web.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

verifica 1parte

esercizio 1 esame

Product Landing Page

Heads Or Tails Random Tally

Esercizi 01/03/2024 es3

servizio_fiscale.html

esercitazione 1

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>
::selection { color: #635856; background: none; }
::-webkit-scrollbar {background-color: #000!important; width: 1px;}
::-webkit-scrollbar-thumb {background: #1a070c!important; opacity: 0.1;}


/* --------------- AREA LAVORO --------------- */

.table { position: relative; background-color: none;

     width: 600px;
     height: 600px;
     margin-top: 20px;
     margin-left: 20px; 
}

/* --------------- IMMAGE --------------- */
.immagine {
  width: 400px;
  height: 497px;
  margin: 0 auto;
    background: #00000066;
  background-image: url(https://i.imgur.com/DH1KDRv.png);
  overflow: hidden;
}

.immagine input, .immagine br {
  display: none;
}


/* --------------- FUORI --------------- */

#contenitore {
  margin: 0 auto;
  width: 400px;
  height: 500px;
  position: relative;
  border-radius: 10px;
  border: 1px solid #1D1E2273;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-content: center;
	align-items: center;
	justify-content: center;
  transform: translateY(0px);
}

#mainbox {
  height: 495px;
  margin: 0 auto;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-content: center;
	align-items: center;
	justify-content: center;
  margin-top: -500px;
  transition: ease 0.7s;
  transition-delay: 0.6s;
}

#img {
  width: 350px;
  height: 500px;
  margin-top:-2px;
  border-left: 25px solid #000000;
  border-right: 25px solid #000000;
  background-image: url(https://i.imgur.com/DH1KDRv.png);
  background-repeat: no-repeat;
   -webkit-filter: grayscale(40%);
filter: grayscale(40%);
opacity: 0.6;
filter: alpha(opacity=60);
  transition: ease 0.7s;
  opacity: 1;
}

/*-------------------NOME-------------------------------*/

#nome {
  line-height: 0px;
  color: #fff;
  z-index: 9;
  position: relative;
  margin-top: -70px;
  margin-left: 30px;
  transform: translateX(0px);
  width: 325px;
  text-align: right;
  font-family: 'Big Shoulders Stencil Text', cursive; 
       font-size: 42px; 
       line-height:65px; 
       text-transform: uppercase; 
       text-shadow: none; 
       background:url('https://64.media.tumblr.com/6ebf6d96d595445613a46a71ed11572c/tumblr_pmd6e6Ol7y1runoqyo9_r1_540.gif')center bottom; 
       background-size: 100px 50px; 
       -webkit-background-clip:text; 
       -webkit-text-fill-color:transparent; 
  transition: ease 0.7s; 
  transition-delay: 1.2s;
}

.immagine:hover #nome {
  transition: ease 0.7s; 
  transition-delay: 0s;
  transform: translateX(-510px);
}

/*------------------- DENTRO ------------------------------*/
.box {
    width: 270px;
    height: 270px;
    margin-top: -50px;
    margin-left: 22px;
    border-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 7px;
    padding-bottom: 5px;
    text-align: justify;
    text-shadow: none;
    overflow: auto;
    font-family: tahoma, normal;
    font-size: 10px;
    color: #666;
    background-image: url(https://imgur.com/amGXuwZ.png);
  text-shadow: 0px 2px 2px rgb(0 0 0 / 50%);}

  .boxaff {
    width: 200px;
    height: 200px;
    margin-top: -50px;
    margin-left: 22px;
    border-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 7px;
    padding-bottom: 5px;
    text-shadow: none;
    overflow: auto;
    font-family: tahoma, normal;
    font-size: 10px;
    color: #666;
    background-image: url(https://imgur.com/amGXuwZ.png);
  text-shadow: 0px 2px 2px rgb(0 0 0 / 50%);}
  
  .knows {
  width: 360px;
  height: 400px;
  margin: 0 auto;
  border-radius: 0px;
  align-content: center;
	align-items: center;
	justify-content: center;
  margin-top: -410px;
  padding-top: 13px;
  transition: ease 0.7s; 
  transition-delay: 0.6s;
  transform: translateX(510px);
}

#never {
  width: 335px;
  height: 50px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  transform: translateY(339px);
}

.knows #tomorrow {
  box-sizing: border-box;
  height: 339px;
  width: 335px;
  margin: 0 auto;
  position: relative;
  align-content: center;
	align-items: center;
	justify-content: center;
  top: -48px;
}

.knows #tomorrow h1 {
  width: 111px;
  height: 49px;
  font: 14px playfair display;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-sizing: border-box;
}

.knows #tomorrow input {
  display: none;
}

.knows #tomorrow label {
  background-color: #00000066;
  height: 49px;
  box-sizing: border-box;
  transition: ease 0.7s;
  color: #adadad;
  font-weight: 1px;
  float: left;
  text-align: center;
  position: relative;
  top: 307px;
  left: -5px;
  padding: 10px 0px 0px 0px; text-transform: uppercase;
  border-top: 1px solid #00000000;
  border-bottom: 1px solid #00000000;
}

.knows #tomorrow label:hover {
  color: #684f4f;
  transition: ease 0.7s;
}

.knows #tomorrow .cont1, .knows #tomorrow .cont2, .knows #tomorrow .cont3 {
  height: 300px;
  margin-bottom: 40px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: none;
  opacity: 0;
  transition: 0.7s ease;
}

.knows #tomorrow input:checked+label {
  color: #684f4f;
  transition: .5s ease-in-out;
}

.knows #tomorrow #mainpage:checked+label ~ .cont1, .knows #tomorrow #pillspage:checked+label ~ .cont2, .knows #tomorrow #others:checked+label ~ .cont3 {
  opacity: 1;
  z-index: 6;
  transition: ease 0.7s; 
  transition-delay: 0.0s;
}

.immagine:hover #mainbox {
  transform: translateX(-510px);
  transition: ease 0.7s;
  transition-delay: 0.5s;
}

.immagine:hover .knows {
  transform: translateX(0px);
  transition: ease 0.7s;
  transition-delay: 0.6s;
}

/*--------------------scritte----------------*/
a {
     text-decoration:none!important;
}

z {
     letter-spacing:0px;
}

k {
     letter-spacing:3px;
     color: #783a3a;
     font-size: 8px;
}

m {
     color: #614949!important;
     font-family: cambria!important;
     font-size: 8px!important;
     line-height: 13px; 
     text-transform:uppercase!important;
     letter-spacing: 6px!important;
     text-decoration:none!important;
}

g {
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 
}

g:hover {
     color: #826363;
     text-shadow: 2px 0px 0px #362929, -2px 0px 0px #362929;
}

d {
     color: #6e3a3a;
     font-family: calibri;
     font-size: 8px;
     line-height: 15px; 
     text-transform:uppercase;
     letter-spacing: 2px;
}

c {color:#732028;}

c:hover {color:#b51423;}

e {
     font-family: cambria, pallatio; 
     color: #7a3838;
     font-size: 9px; 
     line-height: 9px!important;
     text-transform: uppercase;
     letter-spacing: 1px;
} 
w {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #684f4f; 
     background: rgba(70, 44, 44, 0.5); 

     padding-left:5px;
     padding-right:3px;
} 

f {
     font-family: calibri; 
     color: #804141; 
     text-shadow: 1px 1px 0px #472525;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 10px;
     line-height: 9px!important;
}

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

n {
     color: #5e1f1f;
     font-family: georgia, palatino;
     letter-spacing: 0.5px;
     font-size: 10px;
     line-height: 9px!important;
}

b, i, u, s {color: #6a6a6a;}
s {letter-spacing:2px; text-decoration: line-through wavy #472a2a; line-height: 9px;}
u {text-decoration: underline dashed #a95959; line-height: 9px;}
</style>


<div class="table">
<div class="immagine">
<div id="contenitore">
</div>
<div id="mainbox">
<div id="img">
</div>
</div>
<div class="nome"><div id="nome"><x></x><i>Jonathan G. Edwards</i></div></div>

<div class="knows"><div id="never"></div><div id="tomorrow">
<input type="radio" id="mainpage" name="tabgroup"checked>
<label for="mainpage"><h1 title="main"><h>Him</h></h1></label>
<input type="radio" id="pillspage" name="tabgroup">
<label for="pillspage"><h1 title="pills"><h>The Wolf</h></h1></label>
<input type="radio" id="others" name="tabgroup">
<label for="others"><h1 title="other"><h>People</h></h1></label>

<div class="cont1">
<div style="text-align: center; margin-left: -10px; margin-top: -75px;">
<img src="https://i.imgur.com/BnNaVEh.gif" style="border-bottom: 1px dotted #444444; border-top: 1px dotted #444444; width: 70px; opacity: 1; margin-top: 20px; margin-bottom: 20px; border-radius: 80px 80px 80px 80px;"><img src="https://i.imgur.com/wsTJejo.gif" style="border-bottom: 1px dotted #444444; border-top: 1px dotted #444444; width: 80px; opacity: 1; margin-top: 20px; margin-bottom: 20px; border-radius: 80px 80px 80px 80px;"><img src="https://i.imgur.com/9Ks9uCU.gif" style="border-bottom: 1px dotted #444444; width: 70px; opacity: 1; margin-top: 20px; margin-bottom: 20px; border-radius: 80px 80px 80px 80px;"></div>
<div class="box"><div style="margin-left: 20px; width: 230px; height: 220px; margin-top: 30px; overflow: auto;">
<e>Jonathan Garrett Edwards</e> » <w>Guipago</w>.  Classe '85. Aprile il 23. || Tatuaggi&Cicatrici || <u>taurus sun and capricorn moon</u> || <f>There's a violence living inside me</f> || Non è mai stato un santo e l'essere diventato lupo l'ha reso ancora più <h>territoriale</h> rispetto a prima. <s>Per il sentore di appartenere a qualcosa</s>. <n>Viscerale</n>. Ferale. Forastico. <n>Selvatico</n>. Stitico a livello di emozioni, più incline alla violenza che alla discussione. Il più delle volte ringhia. Stesse orme del padre, a compensazione di <s>un temperamento tutt'altro che pacifico</s>. || <n>(blood, beatings and clandestine fights)</n> || Stesso addestramento. <h>Stessa testardaggine</h>. Stessa necessità di stare a contatto con una natura che sta imparando a conoscere bene <w>solamente ora</w>. || <f>I'm not a Saint</f>.
</div></div></div>

<div class="cont2">
<div style="text-align: center; margin-left: -8px; margin-top: -55px;">
<img src="https://64.media.tumblr.com/31797a3508a596b1f88c0f50d13c4d8c/tumblr_mhbfdiWLAg1rs9gsro5_r1_250.gif" style="border-bottom: 1px dotted #444444; border-top: 1px dotted #444444; width: 110px; opacity: 1; margin-top: 20px; margin-bottom: 20px;"></div>
<center><div style="width: 205px; margin-top: -25px; margin-left: -55px;">
<div class="boxaff"><div style="margin-left: 10px; width: 150px; height: 120px; margin-top: 70px; overflow: auto;">
<center>(<e>forma ferale</e>)</center>210cm x 270kg dal manto <n>rossiccio e fulvo</n> disseminato di sfumature nocciola. <f>Occhi dorati</f> screziati di rosso.<br>
</div></div></div></div>
  
<div class="cont3"><div style="width: 180px; margin-top: 80px; margin-left: 60px;"><div class="boxaff">
<div style="margin-left: 20px; width: 150px; height: 150px; margin-top: 50px;"><center>
<g><w>CLAN</w></g> • <h>Deva</h> • <h>Johan</h> • <d>Faye; Claire; Sierra;</d><br>
<e>William</e> • <e>Bones</e><br>
Keifer; Talya; Selina;<br>Samira; Eva; Dylan; Siobhan;</center>
</div></div></div></div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@500&display=swap" rel="stylesheet">