Haruko by @AndyMasy - Codewith.it

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

References

valueValore alfanumerico o booleano contenuto in un elemento
<canvas>Tag per disegnare grafica dinamica su pagine web.
<caption>Definisce didascalie all'interno di una tabella
<h1>Titolo di intestazione di primo livello
<q>Indica una parte di testo come citazione breve
downloadConsente di scaricare file al click di collegamento ipertestuale.

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

Differences in Forms of Government

Pagina Di Prova 1.11.23

Scheda Lavorazione CNC

affettiminoriwill

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Popup Link</title>
  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Press+Start+2P&display=swap" rel="stylesheet">
  <style>
    body {
      background-image: url(https://i.imgur.com/b8NqwIl.png);
    }
    
    .contenitore {
    width: 700px;
    height: 700px;
    margin: 10px auto; /* Questo centra orizzontalmente */
    position: relative; /* Necessario per il centraggio verticale con flexbox */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra orizzontalmente */
    padding: 40px; /* Spazio interno */
}

    
    .athe {
      background-image: url(https://i.imgur.com/KAnz0jS.jpeg);
      width: 500px;
      height: 500px;
      transition: all ease-out 1.5s;
      border: solid 2px #000;
      position: absolute;
      box-shadow: 5px 5px 10px #000;
    }
    
    .athe:hover {
      width: 250px;
      background-image: url(https://i.imgur.com/KAnz0jS.jpeg);
      border: solid 2px #000;
      box-shadow: 5px 5px 10px #000;
      position: absolute;
    }
    
    .fail {
      opacity: 0;
      width: 497px;
      transform: rotate(-90deg);
      background-color: #000;
      font-family: inconsolata;
      font-size: 10px;
      text-transform: uppercase;
      color: #ea6e9f;
      padding: 5px;
      text-align: center;
      line-height: 10px;
      letter-spacing: 1px;
      margin-left: 5px;
      margin-top: 238px;
      position: absolute;
      z-index: 2;
      box-shadow: -2px -2px 10px #000;
      transition: all ease-out 0.4s;
    }
    
    .athe:hover .fail {
      opacity: 1;
      position: absolute;
      z-index: 2;
      transition: all ease-out 4s;
      transition-delay: 0.5s;
    }
    
    .gif {
      position: absolute;
      transition: all ease-out 0.4s;
      border: 2px solid #000;
      width: 100px;
      opacity: 0;
      left: 255px;
      top: 20px;
    }
    
    .athe:hover .gif {
      position: absolute;
      transition: all ease-out 4s;
      opacity: 1;
      left: 255px;
      top: 20px;
    }
    
    .gif-1 {
      position: absolute;
      transition: all ease-out 0.4s;
      border: 2px solid #000;
      width: 100px;
      opacity: 0;
      left: 254px;
      top: 175px;
    }
    
    .athe:hover .gif-1 {
      position: absolute;
      transition: all ease-out 4s;
      opacity: 1;
      left: 254px;
      top: 175px;
    }
    
    .gif-2 {
      position: absolute;
      transition: all ease-out 0.4s;
      border: 2px solid #000;
      width: 100px;
      opacity: 0;
      left: 254px;
      top: 330px;
    }
    
    .athe:hover .gif-2 {
      position: absolute;
      transition: all ease-out 4s;
      opacity: 1;
      left: 254px;
      top: 330px;
    }
    
    .flower {
      opacity: 0;
      width: 300px;
      text-align: right;
      margin-top: 30px;
      margin-left: 100px;
      font-size: 10px;
      letter-spacing: 1px;
      font-family: shorelines;
      color: #8A4D53;
      transition: all ease-out 0.4s;
      z-index: 0;
    }
    
    .athe:hover .flower {
      width: 300px;
      opacity: 1;
      position: relative;
      margin-top: 30px;
      margin-left: 100px;
      transition: all ease-out 4s;
    }
    
    .id {
      opacity: 0;
      width: 176px;
      height: 420px;
      font-size: 9px;
      line-height: 10px;
      color: #777;
      text-transform: lowercase;
      background-color: #0B0B0B;
      letter-spacing: 0.5px;
      border: 1px dotted #000;
      text-align: justify;
      position: relative;
      font-family: tahoma;
      padding: 10px;
      transition: all ease-out 0.4s;
      z-index: 2;
    }
    
    .athe:hover .id {
      opacity: 1;
      margin-top: 30px;
      margin-left: 350px;
      transition: all ease-out 1.5s;
    }
    
    .sunset {
      background-image: url(https://i.imgur.com/D9YBXP1.gif);
      width: 150px;
      height: 10px;
      opacity: 1;
      position: relative;
      z-index: 0;
      border: 2px solid #000;
      margin-left: 10px;
    }
    
    c {
      font-family: tahoma;
      font-size: 10px;
      line-height: 12px;
      letter-spacing: 2px;
      color: #e897c1;
      text-shadow: #000000 1px 1px;
      cursor: default;
      display: inline;
    }
    
    d {
      font-family: inconsolata;
      font-size: 12px;
      color: #ea6e9f;
      letter-spacing: 1px;
      line-height: 15px;
      text-transform: uppercase;
    }
    
    e {
      font-family: soulwave;
      color: #956770;
      font-size: 12px;
      cursor: default;
      letter-spacing: 1px;
      line-height: 10px;
      font-weight: 900;
      font-style: italic;
      text-align: center;
    }
    
    f {
      font-family: garamound;
      font-size: 10px;
      line-height: 10px;
      color: #b00b4d;
      text-shadow: #050505 1px 1px 0px;
      cursor: default;
      text-transform: lowercase;
      display: inline;
      letter-spacing: 2px;
    }
    
    g {
      color: #ed0000;
      font-family: inconsolata;
      font-size: 10px;
      text-transform: uppercase;
      line-height: 10px;
      letter-spacing: 1px;
      line-height: 12px;
    }
    
    k {
      font-family: cambria;
      color: #777;
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: lowercase;
      display: inline;
      line-height: 10px;
    }
    
    l {
      font-family: tahoma;
      font-size: 9px;
      color: #eeccff;
      text-transform: lowercase;
      letter-spacing: 1px;
      line-height: 12px;
    }
    
    m {
      font-family: Tahoma, Verdana, Segoe, sans-serif;
      color: #852988;
      font-size: 9px;
      letter-spacing: 2px;
      font-weight: 700;
      text-transform: lowercase;
      border-bottom: 1px dashed #b10890;
    }
    
    n {
      color: #fd006e;
      font-family: georgia;
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: lowercase;
      line-height: 7px;
      font-style: italic;
    }
    
    .z {
      height: 260px;
      overflow-x: auto;
    }
  </style>
</head>
<body>
  <div class="contenitore">
    <div class="athe">
      <div class="fail">If you can't say something nice, don't say nothing at all</div>
      <img src="https://i.imgur.com/EWqDWeb.gif" class="gif" />
      <img src="https://i.imgur.com/yVVEhow.gif" class="gif-1" />
      <img src="https://i.imgur.com/Vc9pZCN.gif" class="gif-2" />

      <div class="flower"></div>
      <div class="id">
        <center><d>I got my own back</d></center>
        <br />
        <div class="z">
          <c>Winifred "Fred" Morgan</c> || <k><i>anglo-thailandese</i></k> - 170x63, occhi verde chiaro - capelli neri e molto folti.<br /><br />
          <span style="display: block; text-align: right;"><l><i><b>...background</b></i></l></span><br />

          Nasce e cresce a <n>Londra</n>, rivelandosi una perfetta londinese qualunque… a parte lo scoppio di poteri magici improvvisi, si intende. Viene cresciuta principalmente dal padre, <c>Elliot Morgan</c> <i>-inventore di giochi da tavolo e grande appassionato di cucina-</i>, ma passa moltissimo tempo anche nell'ambulatorio privato della madre, <c>Imogen “Jingjo” Morgan</c> <i>-veterinaria con la passione per i canguri-</i>.<br /> All'età di soli <b><n>dieci anni</n></b> sapeva già riconoscere diversi tipi di malattie semplici, estrarre le zecche e dare il biberon ai gattini orfani. Ma <m>soprattutto</m>, aveva già deciso che avrebbe seguito le orme materne. L'arrivo della lettera per Hogwarts genera non poco <f>tumulto</f>, nei suoi piani. Prevedeva di frequentare l'università, laurearsi in medicina veterinaria ed unirsi alla madre ampliando lo studio. Ha anche pensato di <n>rifiutarsi</n> di frequentare Hogwarts, salvo poi decidere che avere un po' più di controllo sui suoi poteri le avrebbe fatto comodo. In futuro, avrebbe sempre potuto riprendere gli studi nel mondo babbano e diventare comunque una veterinaria.<br /><br />

          Il Cappello Parlante la smista in <g>Grifondoro</g>, dove lei passa sette anni circondata da stressanti compagni di Casa per lo più chiacchieroni e casinisti. Non è necessariamente una strega brillante, ma si rivela essere sufficientemente brava. Com'era da aspettarsi, è particolarmente portata per <e>CDCM</e> e, con sua grande sorpresa, <e>DCAO</e> (soprattutto per quanto riguarda la parte relativa alle Creature Oscure). <e>Incantesimi</e> e <e>Trasfigurazione</e> si rivelano essere altre materie che lei affronta con leggerezza e divertimento, così come <e>Erbologia</e> e <e>Pozioni</e>, materie con le quali scopre di provare affinità grazie a tutto il tempo trascorso con suo padre tra i mercati e i fornelli.<br /><br />

          Quando scopre l'esistenza di una carriera equivalente a quella di veterinaria, ma <l><i>magica</i></l>, decide di far parte attivamente del mondo magico. Appena uscita da Hogwarts, quindi, intraprende il tirocinio per diventare <f><b>magizoologa</b></f>.<br /><br />
          <span style="display: block; text-align: right;"><l><i><b>...about her</b></i></l></span><br />

          Riluttante ad immergersi nella cultura magica, all'inizio si chiude un pochino in sé stessa. Non comprendendo la maggior parte dei discorsi fatti dai compagni, <m>fatica</m> a farsi amicizie e, anche quando prende confidenza, non sembra mai lasciarsi andare veramente. La cosa non ha mai sembrato turbarla. Fred ha messo al primo posto il suo lavoro, cosa che spesso l'ha fatta <n><i>dubitare</i></n> della scelta del Cappello Parlante. Non ha mai cercato di sviluppare profonde amicizie o relazioni amorose: non le fugge né le tronca, semplicemente non le cerca e non è necessariamente interessata ad approfondirle.<br /><br />
          C'è chi la definisce <l><b>“noiosa”</b></l>, anche se in realtà non disdegna uscire a bere un bel boccale di birra. Se c'è qualcosa a cui non può proprio resistere, inoltre, sono le <f>freddure</f>. È molto più facile vederla sorridere ad un gatto o ad un gufo o scambiare con loro qualche gesto affettuoso di quanto non sia vederla ridere con i colleghi <i>-prende tutto troppo sul serio-</i>.<br /><br />
          La madre le ha trasmesso l'amore per gli animali e, grazie a lei, quindi, <e>non li ha mai mangiati in vita sua</e>. Colleziona qualunque cosa sia a forma di <n>coniglio</n>.
        </div>
        <br />
        <div class="sunset"></div>
        <center>
          <br />
          <d>flock? herd? pride...?</d>
          <br /><br />
          <b><i><k>Coming soon, maybe...</k></i></b>
          <br /><br />
          <br />
          <br /><br><br>
          credits <a href="https://codepen.io/noone00" target="_blank"><c>@noone00</c></a>
        </center>
      </div>
    </div>
  </div>
</body>
</html>