NOAH by @MILENUCCIA87 - Codewith.it

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

References

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<table>Tag primario per la creazione di tabelle
Inserisce un commento nel codice
minImposta il valore numerico o temporale minimo per un elemento input
<object>Incorpora risorse varie nella pagina web.
<li>Inserisce voci all'interno di una lista

Users

Log in to search for users

Explore

Find inspiration

Chronē — Orologi d\'autore •

Esercizio riepilogativo

esercizio 1.1-1.6

20240126 pagina html

Esercitazione n. 2

Review of Functions I

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>