Scheda(2) by @KiraKuru - Codewith.it

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

References

<h4>Titolo di intestazione di quarto livello
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<link>Collega il documento corrente con una risorsa esterna
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
_selfApre collegamenti ipertestuali nella stessa pagina del browser
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

One Magic Moment - Eventi Unici

Curriculum HTML

copia di follow

Le Meraviglie d’Italia (chatgpt)

Scheda Tecnica Google Pixel 8 Pro

Spotify Profile

Heads Or Tails Random Tally

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>