Basil 2 by @MILENUCCIA87 - Codewith.it

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

References

<strong>Definisce una parte del testo importante con formattazione in grassetto.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<title>Definisce il titolo della pagina web.
<pre>Indica una parte di testo preformattato
methodDetermina il metodo di invio dei dati di un form al server
langSpecifica la lingua del contenuto di un elemento

Users

Log in to search for users

Explore

Find inspiration

Esercizi 05/03/2024 es5

esercizio gattino

“esercitazione7.html”

Italiano-Cinema [Bacheca]

Esercitazione 1

countdown passaporto 2

educazione civica info

CAPODANNO SENZA LUCI

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.

<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=Barlow+Condensed&family=Barlow:wght@600&family=Festive&display=swap" rel="stylesheet">

<div class="table">

  <div class="main_box">
    <div class="main_box-inner-a">
      <div class="main_box-mask-a">
        <div class="main_box-img-a">
        </div>
      </div>
    </div>
    <div class="main_box-inner-b">
      <div class="main_box-mask-b">
        <div class="main_box-img-b">
        </div>
      </div>
    </div>
    <div class="text_box">
      <div class="text_box-inner">
      </div>
    </div>
        <div class="text_box-inner-id">
<center><o>JONATHAN "GUIPAGO" EDWARDS</o><br>
<h>taurus sun and capricorn moon</h><br>
<w>There's a violence living inside me</w>
</center>Classe '85. Non è mai stato un santo e l'essere diventato lupo l'ha reso ancora più <o>territoriale</o> rispetto a prima. <s>Per il sentore di appartenere a qualcosa</s>. <n>Viscerale</n>. Ferale. Forastico. <n>Selvatico</n>. Stitico a livello di emozioni, più incline alla violenza che alla discussione. Stesse orme del padre, a compensazione di <s>un temperamento tutt'altro che pacifico</s>. | <n>(blood, beatings and clandestine fights)</n> | Stesso addestramento. <h>Stessa testardaggine</h>.  Stessa necessità di stare a contatto con una natura che sta imparando a conoscere bene <w>solamente ora</w>.
        </div>
        <div class="people_box">

<g>NOME</g> - <d>nome</d><br>
<w>nome</w> • <h>nome</h> • <e>nome</e><br>
 nome • nome
        </div>

        <div class="quote_box-1">
SOME KIND OF BEAST
        </div>




        <div class="gif_box-a">
        </div>
        <div class="gif_box-b">
        </div>
  </div>
</div></div>

/* GENERICO */

::-webkit-scrollbar {

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

::-moz-selection {

     color: #111;
     background: #332929;
     text-shadow: 1px 1px 0px #362929;
}

::selection {

     color: #522222;
     background: none;
     text-shadow: 0px 0px 0px #000!important;
}

div {

    cursor:text;
}

/* AREA LAVORO */

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

     width: 750px;
     height: 500px;
     left: 50%;
     top: 50%;
     margin-left: -375px;
     margin-top: -250px;
}

/* IMMAGE */

.main_box {position: absolute; z-index:2; float: left; overflow: none; opacity: 1;
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

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

     background-image: none;
     background-position: 0px 0px;
     background-repeat: no-repeat;
}

.main_box:hover .main_box-inner-a {

     opacity:1;
     transition-delay: 0s;
     margin-left: -350px;

}

.main_box:hover .main_box-inner-b {

     opacity:1;
     transition-delay: 0s;
     margin-left: -50px;

}

.main_box-inner-a {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: 400px; 
     height: 400px;
     left: 50%;
     top: 50%;
     margin-left: -200px;
     margin-top: -200px;

     background-image: none;
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transition-delay: 1s;
}

.main_box-mask-a {
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     -webkit-mask:url(https://i.imgur.com/ceFnetj.png)no-repeat -60px;
     mask:url(https://i.imgur.com/ceFnetj.png)no-repeat 0px;
     -webkit-mask-size:auto;
     mask-size:auto;
     transition-delay: 1s;

}

.main_box-img-a {
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     height:400px;
     width:400px;
     background:#ddd url(https://i.imgur.com/mUIeqXj.png);
     background-size:cover;
     transition-delay: 1s;

}

.main_box-inner-b {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: 400px; 
     height: 400px;
     left: 50%;
     top: 50%;
     margin-left: -200px;
     margin-top: -200px;

     background-image: none;
     background-position: 0px 0px;
     background-repeat: no-repeat;
     transition-delay: 1s;
}


.main_box-mask-b {
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     -webkit-mask:url(https://i.imgur.com/hG0hRnS.png)no-repeat 60px;
     mask:url(https://i.imgur.com/hG0hRnS.png)0px;
     -webkit-mask-size:auto;
     mask-size:auto;
     transition-delay: 1s;

}

.main_box-img-b {
     -moz-transition: all ease-in-out 1s; -webkit-transition: all ease-in-out 1s; -o-transition: all ease-in-out 1s; 

     height:400px;
     width:400px;
     background:#ddd url(https://i.imgur.com/mUIeqXj.png);
     background-size:cover;
     transition-delay: 1.5s;

}



/* TESTI */

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

     width: 380px; 
     height: 300px;
     left: 50%;
     top: 50%;
     margin-left: -190px;
     margin-top: -150px;

     background:#76747c url(https://i.imgur.com/DvSLMHT.png);
     background-position: -5px -20px;
     background-repeat: no-repeat;
     border:3px double #000;
     transition-delay: 1s;
}

.text_box-inner {position: absolute; z-index:1; 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: 380px; 
     height: 300px;
     left: 50%;
     top: 50%;
     margin-left: -190px;
     margin-top: -150px;

     background: #76747c;
     transition-delay: 0s;
}

.main_box:hover .text_box-inner {

     opacity: 1;
     transition-delay: 1s;
     background: rgba(118, 116, 124, 0.5);
}

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

     width: 230px; 
     margin-top: 125px;
     left: 50%;
     top: 50%;
     margin-left: -125px;
     margin-top: -110px;
     background-color: rgba(0, 0, 0, 0.8);
     padding:10px;
     transition-delay: 0.5s;

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

.main_box:hover .text_box-inner-id {

     opacity: 1;
     transition-delay: 1.5s;
     z-index:3;
}



/* AESTHETIC */

.gif_box-a { position: absolute; z-index: 0;  overflow: hidden; opacity: 1;
     -moz-transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; 

     width: 125px; 
     height: 70px;
     left: 50%;
     top: 50%;
     margin-left: -62.5px;
     margin-top: 110px;

     background:#76747c url(https://64.media.tumblr.com/a1a9db34477f718a1aa5acca452f6c3e/d6dfc5897bcbba86-95/s250x400/31a47767118870563a924716de839586679d0d0d.gif);
     background-position: -50px -45px;
     background-repeat: no-repeat;
     border:3px double #222;
     transition-delay: 1s;
     transform: rotate(10deg);
}

.main_box:hover .gif_box-a {

     margin-top: 150px;
     transition-delay: 1.5s;

}

.gif_box-b { position: absolute; z-index: 0;  overflow: hidden; opacity: 1;
     -moz-transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; 

     width: 125px; 
     height: 70px;
     left: 50%;
     top: 50%;
     margin-left: -62.5px;
     margin-top: -185px;

     background:#76747c url(https://64.media.tumblr.com/38d567dd6e5af8f688f5d324c7d6b472/d6dfc5897bcbba86-45/s250x400/6ca45a4f05f8928ae1c247d6487ee5b7e11274bf.gif); 
     background-position: -50px -20px;
     background-repeat: no-repeat;
     border:3px double #222;
     transition-delay: 1s;
     transform: rotate(-10deg);
}

.main_box:hover .gif_box-b {

     margin-top: -217.5px;
     transition-delay: 1.5s;

}

/* AFFETTI */

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

     width: 230px; 
     margin-top: 115px;
     left: 50%;
     top: 50%;
     margin-left: -125px;
     margin-top: 85px;
     background-color: rgba(0, 0, 0, 0.8);
     padding:10px;
     transition-delay: 0.5s;

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

.main_box:hover .people_box {

     opacity: 1;
     transition-delay: 1.5s;
     z-index:3;
}



/* QUOTE */

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

     width: 250px; 
     height: 27.5px;
     left: 50%;
     top: 50%;
     margin-left: -125px;
     margin-top: 65px;
     transition-delay: 1s;
     filter:blur(2px);

     color: #6b4b3f;
     font-family: 'Barlow Condensed', sans-serif;
     text-align: center;
     text-transform:uppercase; 
     font-size: 20px; 
     font-weight:bold;
     letter-spacing: 2px;
     text-shadow: 1px 1px 0px #000, -1px -1px 0px #000;
}

.main_box:hover .quote_box-1 {

     transition-delay: 2s;
     filter:blur(0px);
     opacity:1;
}



/* STYLE */

a {
     text-decoration:none!important;
}

z {
     letter-spacing:0px;
}

k {
     letter-spacing:3px;
     color: #783a3a;
     font-size: 8px;
}

m {
     color: #483737!important;
     font-family: cambria!important;
     font-size: 8px!important;
     line-height: 13px; 
     text-transform:uppercase!important;
     letter-spacing: 6px!important;
     text-decoration:none!important;
}

g {
     -moz-transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; 
}

g:hover {
     color: #826363;
     text-shadow: 2px 0px 0px #362929, -2px 0px 0px #362929;
}

d {
     color: #6e3a3a;
     font-family: calibri;
     font-size: 8px;
     line-height: 15px; 
     text-transform:uppercase;
     letter-spacing: 2px;
}



/* TESTO */

e {
     font-family: cambria, pallatio; 
     color: #7a3838;
     font-size: 8px; 
     line-height: 9px!important;
     text-transform: uppercase;
     letter-spacing: 1px;
} 

w {
     text-transform: uppercase;
     font-size: 8px;
     line-height: 9px!important;
     letter-spacing: 2px; 
     color: #684f4f; 
     background: rgba(70, 44, 44, 0.5); 

     padding-left:5px;
     padding-right:3px;
} 

f {
     font-family: calibri; 
     color: #804141; 
     text-shadow: 1px 1px 0px #472525;
     letter-spacing: 1px;
     font-weight: bold;
     font-size: 9px;
     line-height: 9px!important;
}

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

n {
     color: #5e1f1f;
     font-family: georgia, palatino;
     letter-spacing: 0.5px;
     font-size: 10px;
     line-height: 9px!important;
}

o { 
  text-transform: uppercase; 
  font-size: 10px;
  line-height: 11px;
  letter-spacing:1px;
  color: #482021;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

b, i, u, s {color: #6a6a6a;}
s {letter-spacing:2px; text-decoration: line-through wavy #472a2a; line-height: 9px;}
u {text-decoration: underline dashed #a95959; line-height: 9px;}