NUOVO PROGETTO by @MILENUCCIA87 - Codewith.it

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

References

<video>Integra e controlla video in una pagina HTML
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<input>Definisce un area di input per l'invio di dati e informazioni
<caption>Definisce didascalie all'interno di una tabella
formSpecifica a quale form appartiene un elemento.

Users

Log in to search for users

Explore

Find inspiration

Pitone Tutorial -esercizio conclus

ESERCIZIO FINALE

X-Dsigner (Blu Eletric)– Web & U

PROGETTO DIGITAL

Review of Functions I

Ruota delle Cucine

Calcolatrice Top

Pagina di Esempio

Ragdoll Archers

Conta vocali prof

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>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@200&family=Roboto&display=swap');

::selection { color: #635856; background: none; }
::-webkit-scrollbar {background-color: #000!important; width: 1px;}
::-webkit-scrollbar-thumb {background: #1a070c!important; opacity: 0.1;}
}

/*-------BASE-------*/

.sfondo {
width: 800px;
height: 600px;
position: relative;
margin: auto;

}
  
.immagine {
background: url(https://i.imgur.com/IupP0iO.png);
margin: auto;
width: 700px;
height: 500px;
margin-left: 20px;
margin-top: 24px;
border: 1px solid #000000;
position: relative;
z-index: 3;
transition: all 1.8s ease-in-out;

}
.sfondo:hover .immagine {
width: 260px;
background-position-x: -353px;
background-image: url(https://i.imgur.com/noKi0jU.png);
transition: all 1.5s ease-in-out;
filter: brightness(0.5);
}

.boxSotto {
position: relative;
z-index: 1;
width: 450px; 
height: 510px; 
margin-top: -500px;
margin-left: 40px; 
transition-delay: 1.5s; 
transition: all 1.5s ease-in-out;
}
  
.sfondo:hover .boxSotto {
margin-left: 295px; 
transition: all 1.5s ease-in-out;
}
  
.testo { background-image: url('https://i.imgur.com/lISwF0q.png'); overflow: auto; color: #6A6A6A; font-family: verdana;font-size: 10px; text-align: justify; padding: 10px; line-height: 11px; margin-left: -8px; margin-top: 20px; margin-bottom: 10px; width: 230px; height: 390px; z-index: 5;
        }

.testo1 { background-image: url('https://i.imgur.com/lISwF0q.png'); overflow: auto; color: #777; font-family: verdana;font-size: 10px; text-align: justify; padding: 10px; line-height: 11px; margin-left: 250px; margin-top: -166px; margin-bottom: 10px; width: 150px; height: 100px; z-index: 5;
        }
        
/* --------------- QUOTE ----------------------- */

.frase {position:relative; margin-top: 5px; margin-left: -20px; width:500px;height:50px; color: rgb(218,165,32, .8) ;font-family: 'Bebas Neue', sans-serif; text-transform:uppercase; letter-spacing:0.5px; font-size:24px;text-align:center;text-shadow:1px 1px 1px #000; z-index:2;}

  .frase1 {position:relative; margin-top: -26px; margin-left: 80px; width:300px; color:#000000;font-family: "Inter", sans-serif; background-color: rgba(144,116,48, .6); font-weight:bold;letter-spacing:1px; text-transform:uppercase;font-size:9px;text-align:center;text-shadow:2px 1px #948484; z-index:2;}

/* -----------------REGALI ------------------*/

.regali {width: 80px; height: 80px; margin-left: -20px; margin-top: -35px; opacity: 0.6; }


/* ------------------GIF -----------------*/
.gif {width: 150px; height:100px; margin-left: 258px;  margin-top: -445px; }

   /*-------------STYLE---------*/
a {
     text-decoration:none!important;
}

d { color: #907430; opacity: 0.8; font-family: georgia; font-size: 9px; line-height: 9px;font-style: italic; font-weight: bold;  letter-spacing: 0.5px;
}

f {
     font-family: calibri; 
     color: #a98307;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 8px;
     opacity: 0.8;
     line-height: 9px!important;
     letter-spacing: 2px; 
}

h {
     font-family: georgia; 
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 3px; 
     color: #b89e14;
     text-shadow: 1px 1px 0px #111; 
} 

w {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     text-shadow:1px 1px #0a0a0a;
     letter-spacing: 2px; 
     color:#000000; 
     background-color: #a07e28; 
     opacity: 0.5;
     padding-left:7px;
     padding-right:7px;
} 


/* ------------------------------ B - I - U - S ------------------------------ */

b, i, u, s {
     color: #444;
}


u {
     text-decoration: underline dashed #533a33; 
     line-height: 9px;
    </style>

<div class="sfondo">
<div class="immagine"></div>
<div class="boxSotto">
<div class="testo"><br>Alcune leggi non scritte regolano il mondo in un <w>costante do ut des</w>. Un dare ed avere così da mantenere l'equilibrio eppure Spiros, <f>un equilibrio non ce l'ha</f>. A casa. A scuola. Con gli amici. Nella vita in generale che l'ha visto crescere senza genitori. <d>Orfano</d> defraudato di un organo importante: il cuore. <h>Vittima sacrificale</h> di una terra fatta di sole e di mare. Di salsedine che ti entra nelle ossa e nel sangue tanto da rendere la pelle salata. <u>Spiros come suo nonno</u>. <u>Anatoly come suo padre</u> o, almeno, così ha sempre detto la nonna paterna. Donnona austera, fatta di foulard colorati e di ampie gonne di lino fresco. "<w>Lo devi cercare Spiros, il tuo equilibrio</w>" ma lui lo cerca nei posti sbagliati: in una rissa ai margini della strada dove ne esce -stranamente- sempre vittorioso; in un bacio umido di sale e sudore che ottiene quasi sempre; in una birra rubata, sempre con troppa facilità, dal bancone di un bar. Fredda. Ghiacciata. Arida come la terra brulla dove è nato, tra quelle <h>quattro ossa e scarti di pelle</h> che lo compongono. Per poi scoprire, una sera d'inverno, di essere <d>figlio della Dea bendata</d> rincorso da una <w>manticora</w> che sembrava avere tutte le intenzioni di divorarlo vivo. Non c'è riuscita. <br><br><center><w>Spiros Anatoly Vasilakis</w><br><d>Sole in ariete e luna in toro</d><br><h>progenie di Tiche</h></center></div>
<div class="frase"><center>La fortuna ha l’abitudine peculiare</center></div><div class="frase1"><center>di favorire coloro che non dipendono da essa</center></div>
<div class="testo1"><center><w>XIX</w> - <u>Noah</u>; <a href="#"onclick="window.open('https://somewhereunderthesky.altervista.org/AFFETTIOLF/MAEVE.html','nuovaFinestra','width=510,height=480, scrollbars=1')"><f>Maeve</f></a>;<br>Leo; Puck; Lynx;</center><br><center><a href="#"onclick="window.open('https://somewhereunderthesky.altervista.org/AFFETTIOLF/LLYR.html','nuovaFinestra','width=510,height=480, scrollbars=1')"><h>Llyr</h></a>;  <a href="#"onclick="window.open('https://somewhereunderthesky.altervista.org/AFFETTIOLF/THEO.html','nuovaFinestra','width=510,height=480, scrollbars=1')"><f>Theo</f></a>dora; <a href="#"onclick="window.open('https://somewhereunderthesky.altervista.org/AFFETTIOLF/KIERAN.html','nuovaFinestra','width=510,height=480, scrollbars=1')"><h>Kai</h></a>;  <d>L</d>iam; <h>L</h>ove; <a href="#"onclick="window.open('https://somewhereunderthesky.altervista.org/AFFETTIOLF/SETH.html','nuovaFinestra','width=510,height=480, scrollbars=1')"><d><s>Seth</s></d></a>&<a href="#"onclick="window.open('https://somewhereunderthesky.altervista.org/AFFETTIOLF/RUE.html','nuovaFinestra','width=510,height=480, scrollbars=1')"><d><s>Rue</s></d></a>; <f>Ronan</f>; <u>Guadalupe</u>; Max; Samuel; Trajan; Eleanor; Tabitha; Opal; Len; Lydia; Thiago;</center></div>

<div class="regali"><a href="#"onclick="window.open('https://somewhereunderthesky.altervista.org/AFFETTIOLF/regali.html#','nuovaFinestra','width=510,height=480, scrollbars=1')"><img src="https://i.imgur.com/hLTMjK1.png"></a></div>

<div class="gif"><img src="https://i.imgur.com/X6x1aHl.gif"  style="transform: rotate(-2deg); width: 140px; object-fit: cover;border: 1px solid #000000;filter: brightness(90%); box-shadow: rgba(0,0,0,0.19) 0px 10px 20px, rgba(0,0,0, 0.23) 0px 6px 6px;"><img src="https://i.imgur.com/dNDVj9V.gif" style="transform: rotate(3deg); width: 140px; object-fit: cover;border: 1px solid #000000;filter: brightness(90%);box-shadow: rgba(0,0,0, 0.19) 0px 10px 20px, rgba(0,0,0, 0.23) 0px 6px 6px;"><img src="https://i.imgur.com/Bgoj8dd.gif"  style="transform: rotate(-2deg); width: 140px; object-fit: cover;border: 1px solid #000000;filter: brightness(90%); box-shadow: rgba(0,0,0,0.19) 0px 10px 20px, rgba(0,0,0, 0.23) 0px 6px 6px;"></div>

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