Urlich by @MILENUCCIA87 - Codewith.it

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

References

forSpecifica a quale id è associato l'elemento in cui è dichiarato.
requiredRende obbligatorio un campo di input
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
maxImposta il valore numerico o temporale massimo per un elemento input
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.

Users

Log in to search for users

Explore

Find inspiration

informatica 21/10 ii

Menu a tendina CSS

vendita ebay(2)

Esercitazione n. 1

Fumetto PCTO [Toastmasters]

Costruzione form

PROVA SITO ALEX

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: #000!important; width: 1px;}
::-webkit-scrollbar-thumb {background: #1a070c!important; opacity: 0.1;}

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

  .frase {position:relative; margin-top: -205px; margin-left: 231px; width:530px;height:500px; background-image: url('https://i.imgur.com/66Jk5FC.png'); font-family: Georgia; font-size: 11px; text-transform: uppercase; height: 9px; line-height: 8px; color: #5e6062;  letter-spacing: 18px; padding-top: 0.5px; padding-bottom: 0.5px; text-shadow: 1px 1px 0px #000; transition: 1s all ease-in-out}

  .frase1 {position:relative; margin-top: -37px; margin-left: 233px; width:500px;height:500px;font-family: Trajan; font-size: 50px; text-transform: uppercase; color: #222121;  letter-spacing: 30px;  text-shadow: 2px 2px 0px #000; text-align: center;transition: 1s all ease-in-out}

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

.img { position: relative; width: 774px; height: 430px; background-repeat: no-repeat; padding: px; transition: all ease-out 2.5s; }

.img:hover .box{ background-color: #111; box-shadow: 0px 0px 5px #000; width: 400px; height: 150px; position: relative; margin-left: 205px; margin-top: 175px; text-align: center; cursor: crosshair; opacity:1;}


/* --------------- TESTI --------------- */
.box { position: relative; width: 400px; height: 150px; background-repeat: no-repeat; padding: px; margin-top: 150px; margin-left: 205px; transition: all ease-out 2.5s;opacity:0;}

.testo {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: 360px; height: 112px;}

  /* ------------------ GIF------------------- */

.gif_box { position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1;

     width: 550px;
     height: 140px;
     left: 50%;
     top: 50%;
     margin-left: -74px;
     margin-top: -208px;
     background: none;
 }

.triangolo_bg-a {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1;
  

     width: 95px;
     height: 95px;
     top: 50%;
     margin-top: -45px;
     background: #222121;

     clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 50% 100%, 0% 0%, 0% 0%);
}


.triangolo_bg-b {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1;


     width: 95px;
     height: 95px;
     top: 50%;
     margin-top: -50px;
     background: #222121;

     clip-path: polygon(0% 0%, 0% 0%, 50% 0%, 100% 100%, 0% 100%, 50% 0%);
}

#bl {
     left: 0%;
     margin-left: 158px;
}

#br {
     right: 0%;
     margin-right: 158.1px;
}

.triangolo_bg-c {position: absolute; z-index:2; float: left; overflow: hidden; opacity:1;

     width: 135px;
     height: 135px;
     left: 50%;
     top: 50%;
     margin-left: -67.5px;
     margin-top: -67px;
     background: #222121;

     clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 50% 100%, 0% 0%, 0% 0%);
}


#al {
     left: 0%;
     margin-left: 97px;
}

#ar {
     right: 0%;
     margin-right: 97px;
}

.aesthetic_a {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1;

     width: 80px;
     height: 80px;
     left: 50%;
     top: 50%;
     margin-left: -40px;
     margin-top: -42.5px;

     clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 50% 100%, 0% 0%, 0% 0%);
}

.aesthetic_b {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1;

     width: 80px;
     height: 80px;
     left: 50%;
     top: 50%;
     margin-left: -40px;
     margin-top: -37.5px;

     clip-path: polygon(0% 0%, 0% 0%, 50% 0%, 100% 100%, 0% 100%, 50% 0%);
}

.aesthetic_c {position: absolute; z-index:2; float: left; overflow: hidden; opacity: 1;

     width: 120px;
     height: 120px;
     left: 50%;
     top: 50%;
     margin-left: -60px;
     margin-top: -62.5px;

     clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 50% 100%, 0% 0%, 0% 0%);
}

/* --------- credits ----------*/

.credits {width: 150px; heigth: 50px; font-family: georgia; font-size: 9px; line-height: 7px; color: #7b5741; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000; margin-top: -615px; margin-left: 660px; z-index:5;}

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

f {font-family: georgia; font-size: 9px; color: #5e6062; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 1px 1px #000;}
n { font-family: georgia; font-size: 9px; line-height: 7px; color: #7b5741; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000;}
m {font-family: georgia; font-size: 7.8px; color: #a8a6a0; text-transform: uppercase; letter-spacing: 2px; text-shadow: 1px 1px 1px 1px #000000;}
l {font-family: georgia; font-size: 9px; line-height: 7px; color: #ccd4d4; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000;}
o {font-family: verdana; font-size: 10px; color: #524642; 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>

<center><img src="https://i.imgur.com/JNl7oVP.png">
<div class="frase"><center>a freaking snob.</center></div><div class="frase1"><center>[URLICH]</center></div>
<div class="credits">@Hachi</div>
 <div class="gif_box">
    <div class="triangolo_bg-a" id="al">
      <img class="aesthetic_a" src="https://i.imgur.com/ummU0it.gif">
    </div>

    <div class="triangolo_bg-b" id="bl">
      <img class="aesthetic_b" src="https://i.imgur.com/Ur1YdsF.gif">
    </div>

    <div class="triangolo_bg-c">
      <img class="aesthetic_c" src="https://i.imgur.com/G7QFWNy.gif">
    </div>

    <div class="triangolo_bg-b" id="br">
      <img class="aesthetic_b" src="https://i.imgur.com/WyJaemd.gif">
    </div>

    <div class="triangolo_bg-a" id="ar">
      <img class="aesthetic_a" src="https://i.imgur.com/bC15eQr.gif">
    </div>
  </div>

<div class="img"><div class="box">
<br><div class="testo">scrivo scrivo scrivo scrivo scrivo</div></div><div></center>