Scheda(2) by @KiraKuru - Codewith.it

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

References

hreflangConsente di dichiarare la lingua del documento collegato.
<tbody>Definisce il contenuto principale di una tabella.
langSpecifica la lingua del contenuto di un elemento
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
getDefinisce un metodo di invio di dati al server
headersDetermina la relazione tra celle e celle di intestazione di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Orologio Analitico

pokemaniac05.html

esercitazione n1

CAPPUCCETTO ROSSO

prova museo (2)

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.

<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=Barlow+Condensed&family=Barlow:wght@700&family=Festive&display=swap" rel="stylesheet">


<div class="table">
  <div class="main_box">
  </div>


  <div class="main_box-inner-a">
    <div class="scar_box">
    </div>
  </div>


  <div class="main_box-inner-b">
    <div class="gif_box-a">
    </div>

    <div class="gif_box-b">
    </div>

    <div class="gif_box-c">
    </div>

    <div class="hunter_box">
    </div>
  </div>


  <div class="text_box">
  </div>

    <div class="text_box-inner-base-id">
      <div class="text_box-inner-id">

aaaaaaaaa aaa aaaaaa aaaa aaa  <ii>Lorem Ipsum</ii><w>dolor sit amet<f1>consectetur adipiscing elit</f1></w><c> sed do eiusmod tempor</c><e>incididunt ut labore</e><d>et dolore magna aliqua.</d><k>Ut enim ad minim</k><h>veniam, quis nostrud exercitation</h><i>ullamco laboris nisi</i><w>ut aliquip ex ea commodo consequat.</w><g>Duis aute irure dolor</g><kk>in reprehenderit in</kk><b>voluptate velit esse</b>

      </div>
    </div>


   <div class="text_box-inner-base-p">
      <div class="text_box-inner-p">

<ee>NOME A • NOME B</ee><br>
nome nome nome nome nome nome

      </div>
    </div>

  <div class="quote_box-a">

<span style="margin-left:15px;">The Soul that Sees Beauty</span> <br>
<span style="margin-left:-35px;">May Sometimes Walk Alone</span> 

  </div>


  <div class="quote_box-b">

let <br>
the <span id="quote_pulse">HUNT</span> <br>
begin
  
  </div>
<audio controls autoplay>
  <source src="https://dl.dropboxusercontent.com/s/3t184xqetn9qmtq/X2Download.app%20-%20Wolves%20%28128%20kbps%29.mp3" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>

<style>


/* ------------------------------ GENERICO ------------------------------ */

::-webkit-scrollbar {

     background: #000000;
     width: 0px;
     cursor: s-resize;
     padding: 0;
     margin-right: 0px;
}

::-moz-selection {

     color: #453f2e;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

::selection {

     color: #453f2e;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

div {

    cursor:text;
}



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

.table {background-color: none; position: absolute; overflow: hidden;

     width: 539px; 
     height: 600px;
     left: 50%;
     top: 50%;
     margin-left: -269.5px;
     margin-top: 150px;
     box-shadow: 0px 0px 10px #000;
}



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

.main_box {position: absolute; z-index:1; float: left; overflow: hidden; opacity: 1; 
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     width: 539px; 
     height: 600px;
     left: 50%;
     top: 50%;
     margin-left: -269.5px;
     margin-top: -300px;

     background-image: url(https://i.imgur.com/8trQzPK.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transition-delay: 1s;
}

.table:hover .main_box {

     background-position: 0px -25px;
     transition-delay: 0.5s;
}

.main_box-inner-a {position: absolute; z-index:3; float: left; overflow: hidden; opacity: 1; 
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     width: 539px; 
     height: 213px;
     left: 50%;
     top: 100%;
     margin-left: -269.5px;
     margin-top: 0px;

     background-image: url(https://i.imgur.com/rrOhB8t.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transition-delay: 1.5s;
}

.table:hover .main_box-inner-a {

     margin-top: -213px;
     transition-delay: 0s;
}



/* ------------------------------ TESTO BOX ------------------------------ */

.main_box-inner-b {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1; 
     -moz-transition: all ease-in-out 1.5s; -webkit-transition: all ease-in-out 1.5s; -o-transition: all ease-in-out 1.5s; 

     width: 413px; 
     height: 239px;
     left: 50%;
     top: 100%;
     margin-left: -206.5px;
     margin-top: -0px;

     background-image: url(https://i.imgur.com/jaDM1CI.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     box-shadow: 0px 0px 10px #000;
     transition-delay: 1s;
}

.table:hover .main_box-inner-b {

     margin-top: -268px;
     transition-delay: 0s;
}



/* ------------------------------ TESTO ID ------------------------------ */

.text_box-inner-base-id {position: absolute; z-index:4; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 390px; 
     height: 100px;
     left: 50%;
     top: 50%;
     margin-left: -195px;
     margin-top: 45px;

     background: rgba(51, 45, 41, 0.2);
     transition-delay: 0.5s;
}

.text_box-inner-id {position: absolute; z-index:1; float: left; overflow: auto; opacity: 1;

     width: 370px;
     height: 83px;
     left: 0%;
     top: 0%;
     margin-left: 10px;
     margin-top: 8.5px;
     background: none;

     color: #222;
     font-family: tahoma;
     font-size: 12px; 
     line-height: 8px; 
     letter-spacing: 0px;
     text-align: justify;
     text-shadow: 0px 0px 0px #000;
}

.table:hover .text_box-inner-base-id {

     opacity: 1;
     transition-delay: 1.5s;
}

/* ------------------------------ TESTO PEOPLE ------------------------------ */

.text_box-inner-base-p {position: absolute; z-index:4; float: left; overflow: hidden; opacity: 1;
     -moz-transition: all ease-in-out 1.5s; -webkit-transition: all ease-in-out 1.5s; -o-transition: all ease-in-out 1.5s; 

     width: 200px; 
     height: 50px;
     left: 50%;
     top: 50%;
     margin-left: 280px;
     margin-top: 208px;

     background: #000;
     transform: rotate(-5deg);
     box-shadow: 0px 0px 5px #000;
     transition-delay: 0.5s;
}

.text_box-inner-p {position: absolute; z-index:1; float: left; overflow: hidden; opacity: 1;

     width: 180px;
     height: 20px;
     left: 50%;
     top: 50%;
     margin-left: -90px;
     margin-top: -10px;
     background: none;

     color: #444;
     font-family: tahoma;
     font-size: 10px; 
     line-height: 10px; 
     letter-spacing: 0px;
     text-align: center;
     text-shadow: 1px 1px 0px #000;
}

.table:hover .text_box-inner-base-p {

     margin-left: 50px;
     transition-delay: 1.3s;
}



/* ------------------------------ AESTHETIC ------------------------------ */

.gif_box-a { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 80px; 
     height: 80px;
     right: 0%;
     top: 0%;
     margin-right: 104px;
     margin-top: 120px;

     background-image: url(https://i.imgur.com/WExdgiO.gif);
     background-position: -15px 0px;
     background-repeat: no-repeat;
     background-size: cover;

     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
     transition-delay: 0.2s;
}

.gif_box-b { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 80px; 
     height: 80px;
     right: 0%;
     top: 0%;
     margin-right: 57px;
     margin-top: 120px;

     background-image: url(https://i.imgur.com/z6aaSRK.gif);
     background-position: -65px 0px;
     background-repeat: no-repeat;
     background-size: cover;

     -webkit-clip-path: polygon(50% 100%, 100% 0, 0 0);
     clip-path:polygon(50% 100%, 100% 0, 0 0);
     transition-delay: 0.4s;
}

.gif_box-c { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 80px; 
     height: 80px;
     right: 0%;
     top: 0%;
     margin-right: 10px;
     margin-top: 120px;

     background-image: url(https://i.imgur.com/4dw2u6t.gif);
     background-position: -30px 0px;
     background-repeat: no-repeat;
     background-size: cover;

     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
     transition-delay: 0.6s;
}

.table:hover .gif_box-a {

     opacity: 1;
     transition-delay: 1.8s;
}

.table:hover .gif_box-b {

     opacity: 1;
     transition-delay: 2s;
}

.table:hover .gif_box-c {

     opacity: 1;
     transition-delay: 2.2s;
}

.scar_box { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 1;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 460px; 
     height: 560px;
     left: 0%;
     top: 0%;
     margin-left: -120px;
     margin-top: -98px;

     background-image: url(https://i.imgur.com/yLPflHE.gif);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transform: rotate(-415deg);
}

.hunter_box { position: absolute; z-index: 2; float: left; overflow: hidden; opacity: 0;
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 

     width: 224px; 
     height: 57px;
     left: 0%;
     top: 0%;
     margin-left: 30px;
     margin-top: 110px;

     background-image: url(https://i.imgur.com/AhYmC7f.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transform: rotate(-5deg);
     transition-delay: 0.5s;
}

.table:hover .hunter_box {

     opacity: 1;
     transform: rotate(5deg);
     transition-delay: 2.2s;
}



/* ------------------------------ QUOTE ------------------------------ */

.quote_box-a { position: absolute; z-index: 4; overflow: hidden; opacity: 0;
     -moz-transition: all ease-out 1.5s; -webkit-transition: all ease-out 1.5s; -o-transition: all ease-out 1.5s; 

     width: 300px;
     height: 20px;
     left: 100%;
     top: 100%;
     margin-left: -300px;
     margin-top: -28px;
     background-color: none;
     filter: blur(1px);

     color: #b1b1b1;
     font-family: cambria;
     font-size: 8px; 
     font-weight: none;
     line-height: 8px; 
     letter-spacing: 5px;
     text-transform: uppercase;
     text-align: center; 
     text-shadow: 1px 1px 0px #000;
     transition-delay: 0.8s;
}

.table:hover .quote_box-a {

     opacity: 1;
     filter: blur(0px);
     transition-delay: 1s;
}

.quote_box-b { position: absolute; z-index: 1; overflow: hidden; opacity: 1;
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     width: 150px;
     height: 30px;
     left: 50%;
     top: 50%;
     margin-left: -75px;
     margin-top: -65px;
     background-color: none;

     color: #262626;
     font-family: cambria;
     font-size: 12px; 
     font-weight: bold;
     line-height: 8px; 
     letter-spacing: 3px;
     text-transform: uppercase;
     text-align: center; 
     text-shadow: 1px 1px 0px #000;
     transition-delay: 1s;
}

.table:hover .quote_box-b {

     margin-top: -90px;
     transition-delay: 0.5s;
}

@keyframes pulse {

     0% {filter:blur(0px);}
     50% {filter:blur(1.5px);}
     100% {filter:blur(0px);}
}

#quote_pulse {

     -moz-transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; 
     animation: pulse 3s infinite;
}



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

a {
     text-decoration:none!important;
}

c {
     color: #302a1c;
     font-family: georgia;
     font-size: 11px;
     font-style: italic;
     line-height: 7px;
     letter-spacing: 2px; 
}

d {
     color: #bdb199;
     font-family: calibri; 
     font-size: 10px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;
}

e {
     color: #474031;
     font-family: georgia; 
     font-size: 9px;
     line-height: 7px;
     letter-spacing: 3px; 
     text-transform: uppercase;
} 

ee {
     color: #877d67;
     font-family: georgia; 
     font-size: 9px;
     line-height: 7px;
     letter-spacing: 3px; 
     text-transform: uppercase;
} 

f1 {
     letter-spacing: 0px; 
}

g {
     color: #302e2a; 
     font-size: 8px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;
} 

h {
     color: #c9ba91;
     font-family: georgia; 
     font-size: 8px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 3px; 
     text-transform: uppercase;
} 

k {
     color: #302e2a; 
     font-size: 8px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;
     text-decoration: underline dashed #a68c5b; 
} 

kk {
     color: #302e2a; 
     font-size: 8px;
     font-weight: bold;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;
     text-decoration: line-through dotted #a68c5b; 
} 

w {
     color: #a89b83; 
     background: rgba(70, 62, 44, 0.5); 
     font-size: 9px;
     line-height: 7px;
     letter-spacing: 2px; 
     text-transform: uppercase;

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

b {
     color: #3a3a3a;
     font-family: calibri; 
     font-size: 10px;
     line-height: 7px;
     letter-spacing: 1px;
}

i {
     color: #3a3a3a;
     font-family: times new roman; 
     font-size: 11px;
     line-height: 7px;
     letter-spacing: 1px;
}

ii {
     color: #3a3a3a;
     font-family: calibri; 
     font-size: 10px;
     line-height: 7px;
     letter-spacing: 1px;
}

</style>