Liva by @sevins - Codewith.it

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

References

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
formnovalidateImpedisce la convalida di un singolo elemento input
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
_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

Orologio analogico

La torta della nonna es esame

Media ponderata

Gesù nostro signore(2)

Le Meraviglie d’Italia (chatgpt)

5/10/24 es. 7 -parole ripetute

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.

<!DOCTYPE html>
<style>
body 

::selection { color: #2d4045; background: none; }
::-webkit-scrollbar {background: none; width: 1px;}
::-webkit-scrollbar-thumb {background: #111; opacity: 0.1;}

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

::-webkit-scrollbar {

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



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

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

     width: 600px; 
     height: 600px;
     left: 50%;
     margin-left: -260px;
     margin-top: 10px;
}



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

.main_box {position: absolute; z-index:2; 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: 548px; 
     height: 580px;
     left: 50%;
     top: 50%;
     margin-left: -300px;
     margin-top: -300px;
     transition-delay: 4.5s;

     background-image: url(https://i.postimg.cc/ZRppWgRh/livascheda.png);
     background-position: 0px 0px;
     background-repeat: no-repeat;
     box-shadow: 0px 0px 5px #000;
}

.main_box:hover {

     transition-delay: 0.5s;
     background-image: url(https://i.postimg.cc/pV7MW6jL/livascuroscheda.png);
}



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

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

     width: 250px; 
     height: 0px;
     left: 50%;
     top: 50%;
     margin-left: -125px;
     margin-top: -70px; 

     background-color: #010101;
     transition-delay: 2s;
     box-shadow: 0px 0px 5px #000;
}

.main_box:hover .text_box-id {

     opacity: 1;
     height: 330px;
     transition-delay: 2s;

}

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

     width: 200px; 
     height: 265px;
     left: 50%;
     top: 100%;
     margin-left: -100px;
     margin-top: -290px;
     background: none;

     color: #444;
     font-family: 'Barlow', sans-serif;
     text-align: justify;
     font-size: 10px; 
     line-height: 11px; 
     text-shadow: 1px 1px 0px #000;
     letter-spacing: 0;
}



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

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

     width: 200px; 
     height: 200px;
     left: 50%;
     top: 50%;
     margin-left: -90px;
     margin-top: 10px;

     background-color: none;
     transition-delay: 1s;
     transform: rotate(-4deg);
}

.main_box:hover .text_box-p {

     opacity: 1;
     transition-delay: 3.0s;
     margin-left: -260px;
}

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

     width: 200px; 
     height: 200px;
     left: 50%;
     top: 50%;
     margin-left: 0px;
     margin-top: -100px;

     background-color: #050505;
     transition-delay: 0.5s;
     box-shadow: 0px 0px 5px #000;
}

.text_box-p2:hover { margin-left: -90px!important; transition-delay: 0.5s; }

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

     width: 95px; 
     height: 150px;
     left: 0%;
     top: 50%;
     margin-left: 15px;
     margin-top: -80px;
     background: none;

     color: #444;
     font-family: 'Barlow', sans-serif;
     text-align: left;
     font-size: 9px; 
     line-height: 11px; 
     letter-spacing: 0;
}



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

.gif_box { position: absolute; z-index:3; float: left; 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: 350px; 
     height: 190px;
     left: 50%;
     top: 50%;
     margin-left: -180px;
     margin-top: -250px;
     transform: rotate(15deg);
     box-shadow: 0px 0px 10px #000;

     background-image: url("https://64.media.tumblr.com/5b49eafa54fa79c037cdf4a2f4024f86/tumblr_o81xl0T1cJ1vu0nkmo5_250.gifv");
     background-size: cover;
     transition-delay: 2.8s;
     border: 5px solid #000;
}

.main_box:hover .gif_box {

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



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

.quote_box { position: absolute; z-index: 3;  overflow: hidden; opacity: 0; background-color: none;
     -moz-transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; 

     width: 210px; 
     height: 10px;
     left: 50%;
     top: 50%;

     transform: rotate(90deg);
     filter: blur(2px);

     color: #333;
     font-family: calibri;
     text-align: center;
     text-transform: uppercase; 
     line-height: 10px; 
     font-weight: bold;
     letter-spacing: 1px;
     text-shadow: 1px 1px 0px #000;
}

#one {
     margin-left: 80px;
     margin-top: 30px;
     font-size: 12px; 
     transition-delay: 0.5s;
}

#two {
     margin-left: 70px;
     margin-top: 90px;
     font-size: 8px; 
     transition-delay: 0.7s;
}

#three {
     margin-left: 60px;
     margin-top: 50px;
     font-size: 8px; 
     transition-delay: 0.9s;
}

#fore {
     margin-left: 50px;
     margin-top: 110px;
     font-size: 12px; 
     transition-delay: 1.1s;
}

.main_box:hover #one {

     opacity: 1;
     margin-left: 60px;
     margin-top: 50px;
     filter: blur(0px);
     transition-delay: 5.4s;
}

.main_box:hover #two {

     opacity: 1;
     margin-left: 50px;
     margin-top: 110px;
     filter: blur(0px);
     transition-delay: 5.1s;
}

.main_box:hover #three {

     opacity: 1;
     margin-left: 40px;
     margin-top: 70px;
     filter: blur(0px);
     transition-delay: 4.8s;
}

.main_box:hover #fore {

     opacity: 1;
     margin-left: 30px;
     margin-top: 130px;
     filter: blur(0px);
     transition-delay: 4.5s;
}



f { color: #491212; text-shadow: 1px -1px 0px #000;}
m { font-family: 'Roboto Mono', monospace; color: #3b0707; color: #333; text-transform: uppercase; text-shadow: 1px -1px 0px #000; -moz-transition: all ease-in 0.5s; -webkit-transition: all ease-in 0.5s; -o-transition: all ease-in 0.5s; }
m1:hover { color: #4c2b2b; } 
m1 { font-family: 'Roboto Mono', monospace; color: #3b0707; color: #333; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px -1px 0px #000; -moz-transition: all ease-in 0.5s; -webkit-transition: all ease-in 0.5s; -o-transition: all ease-in 0.5s; }
a { -moz-transition: all ease-in 0.2s; -webkit-transition: all ease-in 0.2s; -o-transition: all ease-in 0.2s; text-decoration: none; color: #fff;} 
a:hover { color: #999!important; letter-spacing: 1.5px; cursor: help; }
g { font-family: georgia; text-transform: lowercase; font-style: italic; letter-spacing: 1px; color: #5D5C5C; }
g1 { font-family: georgia; text-transform: lowercase; font-style: italic; letter-spacing: 1.5px; color: #666; font-size: 8.5px;}
e { font-family: tahoma; text-transform: uppercase; color: #777; letter-spacing: 1px; font-style: bold; font-size: 8px; }
j {font-family: calibri; text-transform: uppercase; color: #333; letter-spacing: 1px; font-size: 8px; }


.credits {  position: absolute;
  width: 300px; 
  height: 30px; 
  background-color: none; 
  margin-left: 130px; 
  margin-top: 600px;
  float: left; 
  
text-align: center; font-family: tahoma; text-transform: uppercase; color: #777; letter-spacing: 1px; font-style: bold; font-size: 8px; text-shadow: 1px 1px 1px #000; }

</style>

<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=Archivo+Black&display=swap" rel="stylesheet">



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

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


    <div class="quote_box" id="one">

Better to reign in Hell

    </div>
    <div class="quote_box" id="two">

 E in fondo sapere che esisti, felicità

    </div>
    <div class="quote_box" id="three">

abbracciami ancora una volta, mi basterà

    </div>
        
     <div class="quote_box" id="fore">

than to serve in Heaven

    </div>


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

<m1>Liva Laerke Althea Laborde de Monpezat</m1> <g>- Copenaghen -</g> <g1>Contessa di Monpezat</g1> <k>///</k> <e>Principessa di Danimarca</e> <k>///</k> <g>Egocentrica</g>> <j>Egoista</j> <s>ma ha anche dei difetti</s>;   </br></br>
        
       <g>"Non sono cattiva, è che mi disegnano così" </br></br>
       Come trovi la strada quando non hai più una bussola? Per tutta la vita, Liva ha avuto ben chiaro cosa doveva fare: obbedire a suo padre. Sempre. Anche quando le ha chiesto di mentire per proteggere chi le aveva fatto del male. Anche quando le ha chiesto di uccidere Thea, la donna che amava. Per tutta la vita lei è sempre stata ubbediente. Ma ora suo padre è morto. E non c'è più nessuno a trattenerla. 

       </g>
        

 

      </div>
    </div>


    <div class="text_box-p">
      <div class="text_box-p2">
        <div class="text_box-inner-p">
      
<m><div style="color:	#9b0e0eff">
  
  Broken mind</div></m><g>I’m thе only one who’ll love your sins </br>
Feel the way my voicе gets underneath your skin</g>  

        </div>
      </div>
    </div>

    
    
  </div>
  
 
  
</div>