NOAH by @MILENUCCIA87 - Codewith.it

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

References

_blankApre i collegamenti ipertestuali in una nuova scheda del browser
hrefDefinisce l'URL della risorsa/pagina di destinazione.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<title>Definisce il titolo della pagina web.

Users

Log in to search for users

Explore

Find inspiration

Round+ - social bar

fibonacci manoel

Navbar Example 2

inserimento immagini in un testo

Esercitazione 1

esercizio 4 esame

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


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

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

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


/* -------------------- IMMAGINE -----------------*/

.immagine { background-image: url('https://i.imgur.com/6UNXYKY.png');
     background-position: 0px 0px;
     background-repeat: no-repeat;
     border: 2px solid #000;
     box-shadow: 0px 0px 10px #000; 
     width:450px; height:450px; filter: grayscale(20%);}

  .imgtop {
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 4;
    background: url(https://64.media.tumblr.com/c433cbe36027c7b1f558bf67ca096e53/6835f41d4c4c0d09-78/s540x810/7ddadfec3a0a4f01f7ce66ab39c9a1f2486aa4e4.gif);
    background-size: 100%;
    margin-top: -420px;
    margin-left: 405px;
    outline: 6px double #000000;
    outline-offset: 2px;
  }

  .imgmed {
width: 80px;
    height: 80px;
    position: relative;
    z-index: 4;
    background: url(https://66.media.tumblr.com/8018958d88f9d5815c4b0b62a9842151/tumblr_inline_ptaxsmdDgO1w7l1zl_540.gif);
    background-size: 100%;
    margin-top: 50px;
    margin-left: 405px;
    outline: 6px double #000000;
    outline-offset: 3px;
  }

  .imgbot {
  width: 80px;
    height: 80px;
    position: relative;
    z-index: 4;
    background: url(https://64.media.tumblr.com/338c7ce3b897e68127e0cf94bc85dca2/6835f41d4c4c0d09-26/s540x810/a52981a9e7c58625cf40ac7c0c21e8bc5c60b924.gif);
    background-size: 100%;
    margin-top: 50px;
    margin-left: 405px;
    outline: 6px double #000000;
    outline-offset: 3px;
  }

  .testo { width: 200px;  height: 245px; background-color: #000000; position: absolute; margin-top: -25px; z-index: 3; opacity: 0;
  }

  .testodentro { width: 188px; height: 232pxpx; 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;}

  .testoaff { width: 150px;  height: 100px; background-color: #000000; position: absolute; margin-top: -15px; z-index: 3; opacity: 0;
  }

  .testodentroaff { width: 128px; height: 80px; 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; -50px;}

  .testodentro::-webkit-scrollbar {
    width: 1px;
  }

  .testodentro::-webkit-scrollbar-track {
    background: #be4f52;
  }

  .testodentro::-webkit-scrollbar-thumb {
    background: #be4f52;
  }

    .imgtop:hover .testo {
    margin-left: 90px;
    opacity: 1;
    transition: all 1.5s ease-in-out;
  }

  .imgbot:hover .testoaff {
    margin-left: 90px;
    margin-top: -10px;
    opacity: 1;
    transition: all 1.5s ease-in-out;
  }
/*-------------------NOME-------------------------------------------*/
div.c2 {  
       width: 500px;
       font-family: 'Big Shoulders Stencil Text', cursive; 
       font-size: 100px; 
       transform: rotate(90deg);
        z-index: 8;
       line-height:85px; 
       position: relative;
       margin-top: -397px;
       margin-left: 180px;
       text-transform: uppercase; 
       text-shadow: none; 
       background:url('https://acegif.com/wp-content/gifs/fire-17.gif')center bottom; 
       background-size: 100px 50px; 
       -webkit-background-clip:text; 
       -webkit-text-fill-color:transparent; 
       } 
  /* -------------SCRITTE ----------------*/
f {font-family: inconsolata; font-size: 14px; color: rgb(114,45,32,0.8);text-transform: uppercase; letter-spacing: 4px; text-shadow: 2px 1px 1px #000;}
n { font-family: georgia; font-size: 9px; line-height: 7px; color: rgb(183,171,161); text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px 1px #000000;}
m {font-family: georgia; color:#daa28f;font-size: 9px;text-shadow:2px 1px 1px #000;opacity:0.8;}
l {color: #694233; font-family: georgia; letter-spacing: 1px; text-transform: uppercase; font-size: 9px;}
o {font-family: verdana; font-size: 10px; color: rgb(191,77,36,0.72); cursor: default; font-weight: normal; text-transform: lowercase;}
g {color: #a61a22;  font-size: 9px; font-family: Tahoma; letter-spacing: 2px;text-transform: uppercase;text-shadow: 1px #000; font-family: georgia;}
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: #746054; letter-spacing: 1px; border-bottom: 1px dotted #363636;}

    </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=Sedgwick+Ave&display=swap" rel="stylesheet">
<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">
<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=Big+Shoulders+Stencil+Text:wght@500&display=swap" rel="stylesheet">
<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:wght@600&display=swap" rel="stylesheet">
    <br>
<div class="contenitore"><div class="immagine"></div>
  </div><div class="c2">OH CACCHIO...</div>
 <div class="imgtop">
    <div class="testo">
      <div class="testodentro"><f>Aries & Taurus</f> - Dalla madre ha ereditato il taglio <n>UN POCO ALLUNGATO</n> dello sguardo ed un naso stranamente storto,  i colori, invece, sono <n>inconfondibilmente</n> quelli del padre. Da lui, come di consueto, ha ottenuto tutti i <o>bellissimi</o> <u>difetti</u> che un singolo uomo <strong>NON</strong> dovrebbe avere. Ha il <n>fascino sfrontato ed arrogante</n> del padre, la <g>parlantina sciolta</g> e la mano pesante della madre che l'ha cresciuto a suon di punizioni (<m><em>che non sono servite a niente</em></m>). La consapevolezza di essere un <o>semidio</o> ne ha fatto l'emblema del <f>SUPERUOMO</f> che desidera affermare la sua leadership e sentirsi <l>primo in tutto</l>. <u>Non eccelle in altezza</u> ma da  l'impressione di guardare il mondo un paio di gradini più in alto.
      </div>
    </div>
  </div>
  <a onclick=" window.open('http://indian.altervista.org/pillsnoah.html','',' scrollbars=no,menubar=no,width=450, height=350, ,resizable=no, cursor=help,')"><div class="imgmed"></div></a>
  <div class="imgbot">
    <div class="testoaff">
      <div class="testodentroaff"><center><f>CABIN V</f><br><br><g>Anita</g>; <n>Eli</n>; <n>Logan</n>;<br>NOME; NOME; NOME;</center>
      </div></div><br><br><br><br><br><br><br><br><br>

      <center><div style="width: 210px; color: #777;font-family: verdana; font-size: 10px;">@Jacinta Dianti & MoneyPenny rivisitato<br>Pills click sulla seconda immagine<br>il resto mousovera in giro</div></center>