Ella by @MILENUCCIA87 - Codewith.it

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

References

<em>Formatta il testo in corsivo/italico enfatizzato
multipart/form-dataCodifica dei caratteri di un form
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
text/plainDefinisce un metodo di non codifica dei valori di un form

Users

Log in to search for users

Explore

Find inspiration

scheda paziente es esame

Elenchi puntati con HTML

Orologio Analitico

Lezione 4 (seconda parte)

tabella html(2)

Esercizio media Prof

preparazione esame

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.

<style>

::-webkit-scrollbar {width: 1px; float: left}
::-webkit-scrollbar-track {background: rgba(0,0,0,0.5)}
::-webkit-scrollbar-thumb {background: #050505 !important}

/* --------------- AREA LAVORO --------------- */
.base {position: relative; background-color: none; 
       width: 620px; 
       height: 550px;
       margin-top: 30px;
       margin-left: 90px;}

/* --------------- IMMAGE --------------- */
.dietro {position: relative; width: 430px; height: 491px; background-image: url('https://i.postimg.cc/hPSdBR90/bgretro-copia.png'); margin-top: 0px; margin-left: 150px; transform: rotate(5deg); -moz-transition: all ease-out 1s; -webkit-transition: all ease-out 1s; -o-transition: all ease-out 1s; z-index: 1; border: 1px solid #000000;}

.dietro1 {position: relative; width: 430px; height: 491px; background-image: url('https://i.postimg.cc/05MFxh0h/bgretro.png'); margin-top: -490px; margin-left: 155px; transform: rotate(-7deg); -moz-transition: all ease-out 1.7s; -webkit-transition: all ease-out 1.7s; -o-transition: all ease-out 1.7s; z-index: 1;}

.sfondoA {width: 430px; 
          height:491px; 
          position: relative; 
          z-index: 2;
          border: 1px solid #000000;
          left: 150px; 
          margin-top:-490px;
          background-image:url(https://i.postimg.cc/Ls4KfZyr/bg1-copia.png);
          z-index: 2;
          transition: 1s all ease-in-out}

.sfondoB {width: 430px; 
          height:491px; 
          position: relative; 
          z-index: 2;
          left: 0px;
          background-image:url(https://i.postimg.cc/Ls4KfZyr/bg1-copia.png); 
          opacity:0; 
          transition: 1s all ease-in-out}

.sfondoA:hover .sfondoB {background: rgba(139,0,0, 0.3); opacity: 1; transition: 1.5s all ease-in-out}
.sfondoA:hover .quote {position:relative; z-index:4; margin-top: -90px; margin-left: 35px; transition: 1.5s all ease-in-out}

.gif { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  height: 70px;
  left: 135px;
  top: 15px;
}

.gif-1 { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  width: 70px;
  left: 231px;
  top: 15px;
}

.gif-2 { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  width: 70px;
  left: 57px;
  top: 15px;
}
/* --------------- SEZIONE --------------- */

.testo1 {transition: 1.2s all ease-in-out; 
         position: relative; 
         top: -360px; 
         left:34px; 
         padding: 11px; 
         width: 150px; 
         height: 230px; 
         line-height: 10px; 
         overflow: auto; 
         font-size: 11px; 
         color: #474747; 
         font-family: calibri; 
         text-align: justify; 
         background-color: #000; 
         border-top: 2px solid #8b0000;
         border-bottom: 2px solid #8b0000;}

.testo1:hover {transform: rotate(0deg); margin-left: -54px; transition: 1s all ease-in-out}

.testo2 {transition: 1s all ease-in-out; 
         position: relative; 
         top: -600px; 
         left:490px; 
         padding: 10px; 
         width: 115px; 
         height: 80px; 
         line-height: 10px; 
         overflow: auto; 
         font-size: 11px; 
         color: #474747; 
         font-family: calibri; 
         text-align: justify; 
         background-color: #000; 
         border-top: 2px solid #8b0000;
         border-bottom: 2px solid #8b0000;}

.testo2:hover {margin-left:55px; transition: 1s all ease-in-out}


.quote { position:relative; 
        margin-top: -200px; 
        margin-left: 35px; 
        transition: 1s all ease-in-out}

/* Gradient color1 - color2 - color1 */

hr {
    border: 0;
    height: 1px;
    background: #29271f;
    background-image: linear-gradient(to right, #29271f, #474747, #29271f);
}

/* --------------- STYLE SCRITTE --------------- */

e {height: 15px; padding:2px; background-color:#000; font-size: 8px; font-family: arial; color: #777; text-transform:uppercase; letter-spacing:1px;}

c {letter-spacing: 1px; color: #29271f; font-family: georgia; font-size: 10px;}

d { 
  font-family: georgia;  font-size: 11px;  letter-spacing: 1px; text-transform: normal; color: #b22222; opacity: 0.3; }

f { 
  font-family: georgia; font-size: 10px; letter-spacing: 0.5px; text-transform: lowercase; color: #29271f; opacity: 0.7; text-align: center; font-style: italic;}

m { 
  text-transform: lowercase; font-size:10px; color: #b22222; opacity: 0.3; font-family: Georgia, Times, "Times New Roman", serif; letter-spacing: 1px; line-height: 11px;font-weight: normal; font-style: italic;}

t { text-transform: lowercase; font-size:10px;line-height: 10px;letter-spacing:1px; color: #3e3725; font-family: tahoma; }

 g {letter-spacing: 1px; color: #29271f; font-family: georgia; font-size: 10px;}

 a:link{
	text-decoration: none;
	color: #009900;
	}

a:visited{
	text-decoration: none;
	color: Gray;
	}

a:hover{
	color: rgba(139,0,0, 0.3);
	text-decoration: none;
	}


</style>

<div class"base"><div class="dietro"></div><div class="dietro1"></div><div class="sfondoA"><div class="sfondoB"></div>
<div class="quote"><div style="margin-left: 130px; margin-top: -25px; width:280px;"><e>The spell is done</e></div>
<div style="width:355px; margin-left: 90px; margin-top: 85px;"><e>è come urlare e non sentirsi mai</e></div>
<img src="https://i.pinimg.com/originals/a8/a6/67/a8a667b0ea6ac48b2a7ede3eb9ce418d.gif" class="gif-1"><img src="https://i.pinimg.com/originals/9c/00/7b/9c007b82058afcd18d55839548322cda.gif"class="gif"><img src="https://64.media.tumblr.com/tumblr_mc47wqisHK1rxzuceo3_250.gif"class="gif-2"><br><br><br></div>  

</div>
  <div class="testo1"><e>Selina Davies (Ekajaṭī)</e> Birmania » Maine, 30.10 — <t>sentiero psichemantico</t> — Quel grido sommesso che vediamo in ogni posa, che riusciamo a sentire nel sottofondo di ogni affermazione. È sempre lì, a darle sostegno e spingerla giù. È un distacco, una deviazione dalla retta originale dell’esistenza. <g>Vedere oltre qualsiasi velo, oltre qualsiasi parete</g> — È così difficile, allora, distinguere quale sia il contenitore e quale sia la vera realtà? Cos’è interno, cos'è esterno. <m>Probabilmente, basterebbe solo vedere le cose da un’altra prospettiva.</m><br><hr><center><a onclick=" window.open('pagina.html','','scrollbars=no,menubar=no,width=480, height=580,resizable=yes')">home</a> — <a onclick=" window.open('pagina.html','','scrollbars=no,menubar=no,width=480, height=580,resizable=yes')">cose</a> — <a onclick=" window.open('pagina.html','','scrollbars=no,menubar=no,width=480, height=580,resizable=yes')">altro</a></center></div>
  <div class="testo2"><center><d> Affetto 1, affetto 2, affetto 3</d><br><f>affetto 4 affetto 5 affetto 6</f><br><m>affetto 7 affetto 8 affetto 9 affetto 10</m></center></div></div>