Scheda(2) by @KiraKuru - Codewith.it

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

Referenze

<abbr>Inserisce abbreviazioni e acronimi
<q>Indica una parte di testo come citazione breve
<label>Mostrare un testo di etichetta per un elemento di input.
<strong>Definisce una parte del testo importante con formattazione in grassetto.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<nav>Definisce un menu di navigazione

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Elaborato esame

Noleggio Auto es esame

informazioni personali

Review of Functions I

alt from filename 2

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.

<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>