bones by @MILENUCCIA87 - Codewith.it

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

References

_blankApre i collegamenti ipertestuali in una nuova scheda del browser
multipart/form-dataCodifica dei caratteri di un form
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<tr>Definisce le righe di una tabella (rows)
methodDetermina il metodo di invio dei dati di un form al server

Users

Log in to search for users

Explore

Find inspiration

Esercizio tabella

Esercizio 1 - 27/11

La danza del Fuoco e delle Ombre

Titolo della pagina

Esercitazione n. 2

Ricetta Cous Cous

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>
::selection { color: #635856; background: none; }
::-webkit-scrollbar {background-color: #111!important; width: 1px;}
::-webkit-scrollbar-thumb {background: #111!important; opacity: 0.1;}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

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

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

     width: 400px;
     height: 400px;
     margin-top: 40px;
}

/* --------------- IMMAGE --------------- */

.img {position: absolute; z-index:2; float: left; overflow: none;
     -moz-transition: all ease-out 1.5s; -webkit-transition: all ease-out 1.5s; -o-transition: all ease-out 1.5s; 
     width: 350px; 
     height: 450px;
     left: 4px;
     margin-top: 20px;
     background-image: url('https://i.imgur.com/fW1unok.png');
     background-position: 0px 0px;
     background-repeat: no-repeat;
     border: 6px solid #0b0c0d;
     box-shadow: 0px 0px 10px #0b0c0d;
}

.img:hover {

     background-image: url('https://i.imgur.com/fW1unok.png'); height: 450px; width:250px; background-position-x: -80px; transition: all 1.5s ease-in-out;
}

.img:hover .box { margin-right:257px; opacity: 1;}

.img:hover .box1 { margin-right:257px; opacity: 1;}



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

.box {  position: relative;  z-index: 1; float: left; overflow:  hidden;
  width: 170px;
  height: 220px;
  margin-left: 210px; 
  margin-top: -293px;  
  border-left: 2px solid #111; 
  border-right: 1px dashed #111; 
  background-color: #000000;
  box-shadow: 0px 0px 10px #1d191c;
  padding: 8px;
  opacity: 0; 
  transition: all ease-out 1.5s; 
}

.testo { position: absolute; z-index: 2; float: left; overflow: auto;
  width: 159px;
  height: 210px;
  padding: 5px;
  background-color: #111; 
  text-align: justify; 
  color: #3d3d3d; 
  font-family: verdana; 
  font-size: 10px; 
  line-height:11px; 
  letter-spacing: 0px; 
  font-weight: normal!important;
}

.box1 {  position: relative;  z-index: 1; float: left; overflow:  hidden;
  width: 225px;
  height: 110px;
  margin-left: 100px; 
  margin-top: 5px;  
  border-left: 2px solid #111; 
  border-right: 1px dashed #111; 
  background-color: #000000;
  box-shadow: 0px 0px 10px #1d191c;
  padding: 8px;
  opacity: 0; 
  transition: all ease-out 1.5s; 
}

.testo1 { position: absolute; z-index: 2; float: left; overflow: auto;
  width: 214px;
  height: 100px;
  padding: 5px;
  background-color: #111; 
  text-align: justify; 
  color: #3d3d3d; 
  font-family: verdana; 
  font-size: 10px; 
  line-height:11px; 
  letter-spacing: 0px; 
  font-weight: normal!important;
}

.imm {transition: all 2s ease-in-out;position:absolute; margin: 20px 0px 0px 10px;opacity:1; padding:8px;margin-left: -35px; margin-top: -165px;}
.imm img {object-size: cover; height: 70px; width:70px; filter: brightness(100%)grayscale(100%);text-align:center;border: 4px solid rgba(0,0,0,0.8); margin-top:-1px;box-shadow: rgba(141, 71, 6, .5) 0px 1px 2px, rgba(141, 71, 6, .5) 0px 2px 4px, rgba(141, 71, 6, .5) 0px 4px 8px, rgba(141, 71, 6, .5) 0px 8px 16px, rgba(141, 71, 6, .5); 0px 16px 32px, rgba(141, 71, 6, .5)  0px 32px 64px;}


/* --------------- QUOTE ----------------------- */
.frase {position:relative; margin-top:290px; margin-left: -2px; width:350px; height:100px; color:rgba(141, 71, 6, 0.747); font-family: 'Bebas Neue', sans-serif; text-transform:uppercase; letter-spacing:-1px; font-size:20px; text-align:center; z-index: 5; text-shadow: 1px 1px 1px black;}

  .frase1 {position:relative; margin-top: -80px; margin-left: -1px; width:350px; color:#1a1a1a;font-family: "Inter", sans-serif; background-color: rgba(141, 71, 6, .5); font-weight:bold;letter-spacing:5px; text-transform:uppercase; z-index: 5; font-size:8px;text-align:center;text-shadow:1px 1px 1px #000; }


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


a {
     text-decoration:none!important;
}

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

f {
     font-family: calibri; 
     color: #C49B63;
     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: 3px; 
     color: #FED197;
     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(141, 71, 6, 0.5); 

     padding-left:7px;
     padding-right:7px;
} 


/* ------------------------------ B - I - U - S ------------------------------ */
a {
            color: #555;
            font-size: 15px;
            -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(141, 71, 6, 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>


<center><div class="base">

<div class="img"><div class="frase"><center>STAVA LI COME UNA CANDELA ACCESA</center></div>
<div class="frase1"><center>en un granero que arde</center></div><div class="imm">
   <img src="https://i.imgur.com/zHJpXtG.gif" style="transform: rotate(-3deg);"><br> <img src="https://i.imgur.com/cBBa29l.gif"><br>
<img src="https://i.imgur.com/leflAbm.gif" style="transform: rotate(3deg);"><br>
 </div>
<div class="box"><div class="testo">Aveva quella <f>bellezza</f> di cui solo <d>i vinti</d> sono capaci. E la <k>limpidezza</k> delle <f>cose deboli</f>. E la solitudine, perfetta, <h>di ciò che si è perduto</h><br><br><br><w>Rafaèl Edmundo</w> » '87 el veinti4 de febrero  <h>Puerto Hechizo</h>. || 185cm x 83kg || dark brown hair x deep blue eyes || <w>Taxi driver</w> || Ha la faccia pulita di uno che ha <u>molte colpe</u> da espiare. Un passato da soldato che gli ha fatto guadagnare uno strano <d>senso d'eroismo</d> ed un <f>codice d'onore</f> del tutto personale.</div></div>
<div class="box1"><div class="testo1">Un americano, un <f>fratello</f> con il quale ha combattuto parecchie battaglie, prima di tornare in America gli ha regalato la sua vecchia <w>c a d i l l a c</w>, una <d>Eldorado</d> del '74 sulla quale ha fatto installare, tornato a Puerto Hechizo, la scritta TAXI. E' di un arancione sbiadito, decisamente rovinato ed il motore tossisce un poco quando cammina. </div></div>

</div></center>