Sean 2 by @MILENUCCIA87 - Codewith.it

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

References

autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
Inserisce un commento nel codice
<blockquote>Inserisce citazioni in un documento HTML
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<body>Tag primario di un documento HTML
<tr>Definisce le righe di una tabella (rows)

Users

Log in to search for users

Explore

Find inspiration

Lezione 4 (seconda parte)

Esercizio tabella

Young Corporate Lawyer - Experienc

JS Oggetti ed eventi es1

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>

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

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

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

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

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

.moses {
	background-image:url(https://i.imgur.com/8ncK82t.png); 
	width: 450px;
	height: 450px;
	transition: all ease-out 1.2s;
	border: solid 2px #000;
	position: absolute;
	box-shadow: 5px 5px 10px #000;
  margin-left:20px;
} 

.moses:hover {
	width: 250px; 
	background-image: url(https://i.imgur.com/8ncK82t.png);
  background-position: -50px;
  outline: 4px double #111;
  background-repeat: no-repeat;
	border: solid 2px #000;
	box-shadow: 5px 5px 10px #000;
	position: absolute;
}

.box {
  background-color: #111; 
  box-shadow: 0px 0px 5px #000;
  text-align: center; 
  cursor: crosshair; 
  opacity:0; 
	width: 270px; 
	margin-top: -30px;
  margin-left: 130px;
	transition: all ease-out 0.4s;
  z-index: 0;
}

.moses:hover .box {
	width: 270px;
	opacity: 1;
	position: relative;
	margin-top: -5px;
	margin-left: 360px;
  transition: all ease-out 2s;
} 

.id {
    opacity: 1;
    background: #1a1a1a; box-shadow: 0px 0px 5px #000; overflow: auto; color: #777;font-family: verdana;font-size: 10px; text-align: justify; padding: 10px; line-height: 10px; margin-left: 10px; margin-top: -10px; margin-bottom: -10px; width:230px; height: 420px;
}


.f { font-family: verdana; width: 230px; font-size: 10px;  text-transform: normal; color: #777; text-align: justify; overflow: auto; height: 310px; }

/* --------------- QUOTE ----------------------- */
.quote {
    opacity: 0;
    width: 447px;
    transform: rotate(-90deg);
    background-color: #000;
    font-family: inconsolata;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: #5e686d;
    padding: 5px;
    text-align: center;
    line-height: 10px;
    letter-spacing: 2px;
    margin-left: 38px;
    margin-top: 215px;
    position: absolute;
    z-index: 2;
    box-shadow: -2px -2px 10px #000;
    transition: all ease-out 0.8s;
}

.moses:hover .quote {
	opacity: 1;
  position: absolute;
	z-index: 2;
  transition: all ease-out 4s;
  transition-deley: 0.7s;
} 

  /* ---------------------------- GIF------------------------------ */
.gif { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  width: 100px;
  opacity: 0;
  left: 257px;
  top: 60px;
}

.moses:hover .gif  {
  position: absolute;
  transition: all ease-out 4s;
  opacity: 1;
  left: 257px;
  top: 60px;
}

.gif-1 { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  width: 100px;
  opacity: 0;
  left: 257px;
  top: 169px;
}

.moses:hover .gif-1  {
  position: absolute;
  transition: all ease-out 4s;
  opacity: 1;
  left: 257px;
  top: 169px;
}

.gif-2 { 
  position: absolute;
  transition: all ease-out 0.4s;
  border: 2px solid #000;
  width: 100px;
  opacity: 0;
  left: 257px;
  top: 277px;
}

.moses:hover .gif-2  { position: absolute; transition: all ease-out 4s; opacity: 1; left: 257px; top: 277px;
}

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

f {font-family: inconsolata; font-size: 14px; color: #3a434c; text-transform: uppercase; letter-spacing: 4px; text-shadow: 2px 1px 1px #000;}
n { font-family: georgia; font-size: 9px; line-height: 7px; color: #626262; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000;}
m {font-family: georgia; font-size: 7.8px; color: #79838c; text-transform: uppercase; letter-spacing: 2px; text-shadow: 1px 1px 1px 1px #000000;}
l {font-family: georgia; font-size: 9px; line-height: 7px; color: #4c524f; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000;}
o {font-family: verdana; font-size: 10px; color: #71523e; cursor: default; font-weight: normal; text-transform: lowercase;}
g {font-size: 10px!important; letter-spacing: 1px; text-transform: lowercase; color: #433125;}
h {color: #888888; font-family: georgia; line-height: 7px; font-size: 10px; font-style: italic; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000; opacity: 0.5;}
u {font-family: verdana; font-size: 10px; color: #393939; letter-spacing: 0px; border-bottom: 1px dotted #363636; text-decoration: none; text-transform: lowercase;}
</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=Inconsolata:wght@300&display=swap" rel="stylesheet">
<center><br><div class="base"><br>
      <div class="moses">
          <div class="quote">
           Se qualcosa può andare storto, lo farà.
        </div>
           <img src="https://i.imgur.com/aBJylik.gif"class="gif"/>
         <img src="https://i.imgur.com/Z9FnYtj.gif" class="gif-1"/>
         <img src="https://i.imgur.com/r7SYN2x.gif"class="gif-2"/>
      <div class="box"><br><div class="id">
              <center><f>Moses Tobias Riddley</f><br/><m>scorpio sun gemini moon</m></center>
               <br/>
                <div class="f">Ancora prima di mettere piede al campo mezzosangue, <l>sapeva di doverci finire</l>. Saranno state le parole di suo padre. Il costante trambusto di frasi ripetute a macchinetta <o>come una specie di mantra strano</o> per ricordargli, ancora una volta, di come <g>quella maledetta sera</g> la Dea della Fortuna <h>gli ha fottuto la vita, l'anima</h> e l'ha lasciato con -in braccio- una bella gatta da pelare. Nel suo caso <u>un randagio</u> fatto di caotica resilienza, con più ricci che pensieri, un naso troppo ingombrante con altrettanta gobba perchè, come spesso si dice, <n>ci vuole sempre un certo fiuto per gli affari</n> e lui -a fiuto- pare sempre un passo avanti a tutti gli altri. Pelle sempre abbronzata, muscoli praticamente inesistenti ma una smisurata passione per il lancio delle cose. Contro le finestre soprattutto. Quelle di scuola per la precisione. <m>Ai ventun'anni c'è arrivato per puro miracolo</m> con il tintinnio di un paio di monete nella tasca ed un quantitativo tale di tabacco in corpo da chiedersi se, a quarant'anni, ci arriverà mai davvero. Scavezzacollo all'inverosimile con la costante ricerca di qualcosa sul quale scommettere perchè la fortuna è cieca e sua madre, almeno in questo, gli ha messo in mano una miniera d'oro sin da quando l'ha messo al mondo. <o>Avrebbe potuto essere tante cose</o>. Avrebbe potuto fare tante cose. Ha scelto le più improbabili solo per dimostrare di essere in grado di farle. Non tanto per bravura, che, comunque sente di possedere ma proprio per quel quantitativo industriale di fortuna che mamma <f>Tiche</f> gli ha buttato sulle spalle. Rancoroso come non mai, il giorno del suo ventunesimo compleanno, quando poteva iniziare a fare il cazzo che voleva senza chiedere il permesso a papà (spoiler: mai chiesto davvero), una <l>manticora</l> decide che è arrivato il momento di mangiargli il fegato. Sarà che al mondo esistono persone che possono e persone che non possono, lui non è neanche tanto sicuro di come ne sia uscito vivo. La triste realtà dei fatti è che, volente o nolente, sarebbe comunque riuscito a cavarsela. Come? <g>Le botte di culo, al giorno d'oggi, possono essere infinite</g>.
        </div>
        <center>
          <br/>
          <n>E' così triste essere bravi<br>si rischia di diventare abili</n>
          <br/><br>
        <f>Cabin XIX</f><br> nome nome nome nome nome nome nome nome nome nome nome
        </center>
        </div><br>
          </div>
    </div>
</div></center>