Haruko by @AndyMasy - 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
autofocusAttiva un elemento al caricamento della pagina.
<h2>Titolo di intestazione di secondo livello
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento

Users

Log in to search for users

Explore

Find inspiration

WebDeveloper 2025 - Portfolio Wave

stringhe casuali

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>
body {background: url('https://i.imgur.com/BIRCjlw.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;}

::-webkit-scrollbar {background: rgba (0,0,0, 0.3);
width: 0px;
cursor: s-resize;
padding: 0;
margin-right: -10px;}

.table {
position:relative;
width: 500px;
height: 550px;}
.bg_img { width: 600px;
height: 658px; 
background-repeat: no-repeat;}
.box_text { background-image: url('https://imgur.com/zPFREl5.png');
box-shadow: 0px 0px 18px #000;
position: absolute; 
width: 176px;
height: 176px;
margin-left: 20px; 
border: 5px double #000;
padding:10px; 
color: #6d6d6d;
font-family: arial;
text-align: justify;
font-size: 10px; 
line-height: 10px;
opacity: 0.9; 
text-shadow: 3px 0px 0px #000;
}
.mini_box_testo { 
height: 176px;
overflow-y: scroll;}
.box_text_2 { background-image: url('https://imgur.com/zPFREl5.png');
box-shadow: 0px 0px 18px #000;
position: absolute; 
width: 176px;
height: 176px; 
margin-top: -615px;
right: 20px;
border: 5px double #000;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
color: #6d6d6d;
opacity: 0.9; 
font-family: arial;
text-align: justify;
font-size: 10px; 
line-height: 10px; 
text-shadow: 3px 0px 0px #000;}
#first { 
margin-top: -640px;
}
#second { 
margin-top: -335px;
}
.box_gif { background-color: rgba(0,0,0,0);
height: 510px;
width: 220px;
position: absolute;
margin-top: -623px;
left: 230px;}
.giffine {
width: 254px;
height: 506px; 
text-align: center; 
border: px double #000;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
position: relative;
margin-top: -16px;}
.patina { width: 90px;
height: 90px;
float: left;
position: absolute;
background-color: rgba(0,0,0,0); 
z-index: 1;
margin-left: 5px; }
#uno { margin-top: -97px;}
#due { margin-top: -97px;}
#tre { margin-top: -97px;}
#quattro { margin-top: -97px;}
.giffine:hover { filter: grayscale(0%);}
.titolini { width: 174px;
height: 20px;
position: absolute;
margin-top: 0px;
font-family: cormorant; 
text-transform:uppercase;
font-size:10px; 
color: #440c15;
letter-spacing: 1px;
text-align: center;}
.box_testo { height: 365px;
overflow-y: scroll; 
margin-top: -30px;}
b, strong { color: #802030; cursor:crosshair; text-transform: uppercase; font-weight: normal;
text-shadow: 1px 1px 0px #000000; font-family: Tahoma; font-size: 10px; line-height:9px; } 
i, em {cursor:crosshair; font-family:Georgia; font-size:10px;
color: #802030; text-shadow: 1px 1px 0px #000000; letter-spacing:1px; }
u {cursor:crosshair; border-bottom: 1px dashed #802030; font-family:tahoma; font-size:10px;
color: #802030; text-shadow: 1px 1px 0px #000000; text-decoration: none; }
y { font-family: Georgia; font-size: 11px; color: #802030; text-transform: uppercase;opacity:0.8; line-height: 10px; letter-spacing: 1px; }
k { font-family: Georgia; color: #802030; font-size: 10px; line-height: 10px; letter-spacing: 1px; font-style: italic; }
m { font-family: Georgia; color: #802030; font-size: 10px; line-height: 10px; }
r { font-family: arial; color: #3f3e3e; font-size: 10px; letter-spacing: 0px; line-height: 10px; }
g { font-family: Georgia; color: #2D2D2D; font-size: 10px; letter-spacing: 1px; font-style: italic; }
n{ font-family: tahoma; color: #3D4147; font-size: 10px; letter-spacing:2px; text-transform:uppercase}
.off_text { background-image: url('https://imgur.com/zPFREl5.png');
box-shadow: 0px 0px 18px #000;
width: 176px;
height: 176px;
border: 5px double #000;
padding:10px; 
color: #6d6d6d;
font-family: arial;
text-align: justify;
font-size: 10px; 
line-height: 10px;
opacity: 0.9; 
text-shadow: 3px 0px 0px #000;
}
</style>

<center>
<div class="table">
<div class="bg_img"></div>
<div class="box_text" id="first">
  <div class="mini_box_testo"> <y>• haruko watanabe •</y> <r>01.06.2008</r> <g>gemini</g> <u>Figlia di Ermes</u>
    Nata e cresciuta a Charlottetown, sull'Isola del Principe Edoardo, tra aggeggi elettronici, souvenir di viaggio, chincaglierie giapponesi e libri scolastici. Sua madre Nozomi Hoshino è originaria di Kyoto. Cresciuta in una famiglia conservatrice, ha sempre desiderato di viaggiare e vedere il mondo. A diciannove anni parte quindi per un lungo viaggio senza una meta, armata di videocamera e di un piccolo canale YouTube sul quale documentare la propria vita on the road. Durante una delle sue tappe, a New York, incontra Ermes. Quella che avrebbe dovuto essere una breve avventura si trasforma in qualcosa di più, almeno per qualche tempo. Continuano a incontrarsi, a condividere esperienze e sogni, finché le loro strade non si separano a causa della partenza di lei. Nessuno dei due lo sa ancora, ma Nozomi porta già Haruko in grembo. Lasciata New York, Nozomi raggiunge il Canada e fa tappa sull'Isola del Principe Edoardo. Lì incontra Ryan Watanabe, uno studente di informatica nippo-canadese con il sogno di diventare insegnante. I due iniziano a frequentarsi e quella che doveva essere solo una tappa si troasforma nella meta. Quando Nozomi scopre di essere incinta, Ryan decide di resteare con lei e di crescere la bambina come se fosse sua. Giapponese, inglese e poi anche francese. Haruko si mostra portata per le lingue sin da piccola. Un po' meno portata per tutto il resto... È curiosa, piena di energia, ma integrarsi non le riesce bene e non eccelle nemmeno nello studio. I compagni la prendono in giro per il cibo che porta a scuola, non giocano con lei perché cambia spesso le regole dei giochi e imparano presto a considerarla inaffidabile nei lavori di gruppo perché si distrae in fretta ed è troppo lenta. Lei, dal canto suo, non sembra mai capire davvero dove stia sbagliando. Sviluppa anche la pessima abitudine di rubacchiare cose. Giocattoli, braccialetti, vestiti... Non perché le servano davvero, ma solo perché le piacciono. Con il tempo smette quasi del tutto di cercare di integrarsi. Si rifugia online, dove il suo accento, il suo aspetto e il contenuto del suo pranzo non interessano a nessuno. Lì trova persone che apprezzano il suo umorismo e le sue battute pungenti. Nella vita reale, invece, l'unica presenza costante è Phil, un vicino di casa ripetente e con una buffa barbetta che non parla molto, ma si siede con lei a pranzo e fa la strada casa-scuola con lei. Le prime avvisaglie del risveglio dei suoi poteri arrivano durante una festa del college nella quale riesce ad imbucarsi. Dà la colpa all'alcol e al fumo passivo, perché è impossibile che abbia visto una donna con dei serpenti al posto delle gambe, no? Eppure, da quel momento, episodi simili iniziano a verificarsi sempre più spesso. Il giorno in cui Phil bussa per la prima volta alla porta di casa sua, accompagnato ad un uomo che lei non aveva mai visto prima, è anche il giorno in cui Haruko scopre che Ryan non è davvero suo padre. Fare le valigie, lasciarsi alle spalle un mondo in cui ha solo vissuto a metà, entrare a far parte di un mondo del quale invece non conosce nemmeno l'esistenza... Come può lei, che non è davvero giapponese, ma nemmeno davvero canadese, essere davvero una semidea?
</div><br><img src="https://64.media.tumblr.com/850e745b5f678ac66f0a413065179e1c/tumblr_inline_r2t33mRsd21t0yoye_500.gif" style="width: 89px; height: 84px; border: 1px solid #000; padding: 1px; margin-top: 10px; margin-left: -10px; filter: grayscale(50%);
"> <img src="https://64.media.tumblr.com/605533ef34a3ffd79396936722609603/tumblr_inline_r2t33rR2vv1t0yoye_500.gif" style="width: 89px; height: 84px; border: 1px solid #000; padding: 1px; margin-top: 10px; position: absolute; margin-left: 6px; filter: grayscale(50%);
"><br></div>
<div class="box_text" id="second">
<div class="mini_box_testo"> 
   <div class="titolini">
      don't you let them<br>
     see you struggle
      <br>
      hiding your tears
  </div>
  <br><br><br><br><br>
  <y>lorem ipsus</y> [ <g>lorem ipsus</g> <y>•</y> <i>lorem</i> ]
  <br><br> 
  <y>lorem ipsus</y> - parole <g>parole</g> parole.
  <br><br>
  <g>lorem ipsus</g> <y>•</y> lorem ipsus <y>•</y> testo <y>•</y> testo <y>•</y> <i>testo</i> <y>•</y> testo <y>•</y> testo <y>•</y> testo <y>•</y> testo <y>•</y> <i>testo</i> <y>•</y> testo
<br><br><br><br>
</div></div>
<div class="box_gif">
<img class="giffine" src="https://i.postimg.cc/fRRzBPbJ/Siobhan2.png"></img>
</div>
</div>
</center>