Scheda(2) by @KiraKuru - Codewith.it

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

Referenze

listCollega un elemento input con una lista di opzioni datalist
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
application-x-www-form-urlencodedCodifica dei caratteri di un form
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<body>Tag primario di un documento HTML
titleIndica informazioni aggiuntive riguardo un elemento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esempio di scrittura HTML per esam

Old html delajo - Download e Prezzi

Esercitazione 1

Lezione 3/11 pt.2

Effetto zoom con CSS

“esercitazione7.html”

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>