Sean 2 by @MILENUCCIA87 - Codewith.it

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

Referenze

<table>Tag primario per la creazione di tabelle
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<body>Tag primario di un documento HTML
<h6>Titolo di intestazione di sesto livello
<h5>Titolo di intestazione di quinto livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio:sito web

form per il torneo misto disfor s

Download 7-Zip for PC Windows

spotify dashboard

Inserimento immagini in un testo

Compito informatica

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.

<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;}


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

.base { position: relative; background-color: none;

     width: 600px;
     height: 600px;
     margin-top: 20px;
}

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

.img {position: absolute; z-index:2; float: left; overflow: none;
     -moz-transition: all ease-out 1.5s; -webkit-transition: all ease-out 1.5s; -o-transition: all ease-out 1.5s; 
     width: 600px; 
     height: 450px;
     left: 10px;
     margin-top: 5px;
     background-image: url('https://i.imgur.com/bdbibqg.png');
     background-position: 0px 0px;
     background-repeat: no-repeat;
     border: 2px solid #1d191c;
     box-shadow: 0px 0px 10px #1d191c;}

.img:hover {background-image: url('https://i.imgur.com/bdbibqg.png'); filter: brightness(0.6) contrast(1.0);}

 .img:hover .box{opacity: 1; margin-top: 10px; z-index:3; transition: all 1.8s ease-in-out; }
 .img:hover .box1{opacity: 1; margin-top: -254px; margin-left: -100px; transition: all 1.8s ease-in-out; }



/* --------------- TESTI --------------- */

.box {box-shadow: 0px 5px 15px #000; background-image: url('https://i.imgur.com/lISwF0q.png'); border-bottom: 4px solid #222; border-top: 4px solid #222; width: 400px; height: 380px; position: relative; margin-left:-10px; margin-top: -350px;text-align: center; cursor: crosshair; z-index: 5; opacity:0; transition: all 1s ease-in-out;}

.testo {overflow: auto; color: #777; border-left: 1px dashed #333;font-family: verdana;font-size: 10px; text-align: justify; padding: 10px; line-height: 11px; margin-left: 25px; border-right: 1px dashed #333; margin-top: -10px; margin-bottom: 10px; width: 320px; height: 260px;}

.box1 {width: 100px; height: 150px;position: relative;box-shadow: 0px 5px 15px #000; background-color:#111; margin-left: 10px; margin-top: -320px; transform: rotate(-5deg); text-align: center;cursor: crosshair; opacity:1; transition: all 1s ease-in-out;}

.testo1 {overflow: auto; color: #777;font-family: verdana;font-size: 10px; text-align: justify; padding: 6px; line-height: 8px; width: 90px; height: 130px;}



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

  .frase {position:relative; margin-top:235px; margin-left: -8px; width:530px;height:500px; color: #566556;font-family: 'Bebas Neue', sans-serif; text-transform:uppercase; letter-spacing:0.5px; font-size:35px;text-align:center;text-shadow:1px 1px 1px #000;}

  .frase1 {position:relative; margin-top: -465px; margin-left: -10px; width:310px; color:#000000;font-family: "Inter", sans-serif; background-color: rgba(86,101,86, .6); font-weight:bold;letter-spacing:1px; text-transform:uppercase;font-size:9px;text-align:center;text-shadow:1px 1px #000; }

  /* ------------------GIF -----------------*/
.gif {width: 350px; height:100px; margin-left: 20px; margin-top: -5px;}

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

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

f {
     font-family: calibri; 
     color: #8e9c8b;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 8px;
     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: #826f6d;
     text-shadow: 1px 1px 0px #111; 
} 

w {
     text-transform: uppercase;
     font-weight: bold;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #000000; 
     background: rgb(86,101,86, 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>


<center><div class="base">
<div class="img">
<div class="frase"><center>E' SULL'ORLO DEL PRECIPIZIO</center></div><div class="frase1"><center>che l'equilibrio è massimo</center></div>
<div class="box"><div class="gif"><img src="https://i.imgur.com/UAMV58w.gif" style="transform: rotate(-5deg); width: 150px; object-fit: cover;border: 1px solid #566556;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/9P3lrI7.gif"  style="transform: rotate(2deg); width: 150px;object-fit: cover;border: 1px solid #566556;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 class="testo">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; in un bacio umido di sale e sudore; in una birra rubata 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 di quell'equilibrio</d> che ha tanto cercato, rincorso da una <w>manticora</w> che sembrava avere tutte le intenzioni di divorarlo vivo.<br><br><center><w>Spiros Anatoly Vasilakis</w><br><d>Sole in ariete e luna in toro</d><br><h>progenie di nemesi</h></center></div>
<div><div class="box1"><div class="testo1"><center><w>XVI</w>>br>Kieran; Mila; Tabitha;</div></div></div></center>