You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

232 lines
8.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Object Oriented Katamari</title>
<link rel="stylesheet" href="style.css" />
<script src="roll.js" defer></script>
</head>
<body>
<h1>A Katamari Damacy FAN FICTIOUS</h1>
<div class="baloon">
<img class="mugshoot" src="assets/frog.png" alt="3d Frog mugshot" />
<h2 class="character">Frog</h2>
<p class="text">
hello im the frog today im here on my lily pad ehe slurp a fly gnam ate it
</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/prince.jpg" alt="The prince mugshot" />
<h2 class="character">Prince</h2>
<p class="text">roll rooooollllll papa should be proud of me vrooom vroooom</p>
<p class="text">ohh papa can be so scary</p>
<p class="text">he is looking me from the above all the time</p>
<p class="text">everytime papa is sad my whole universe collapses</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/katamari-ball-1.jpg" alt="Katamari ball mugshot" />
<h2 class="character">Katamari Ball</h2>
<p class="text">
hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello
candy hello treasure hello television hello window hello chair hello fire
extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello
nietche hello beach hello whale hello waves hello
</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/giraffe.png" alt="Giraffe mugshot" />
<h2 class="character">Giraffe</h2>
<p class="text">hello katamari ball</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/king.png" alt="King mugshot" />
<h2 class="character">King of all Cosmos</h2>
<p class="text">PRINCEEEEEEEEEEEEEEEEE</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/prince.jpg" alt="Prince mugshot" />
<h2 class="character">Prince</h2>
<p class="text">OMG I cannot fail the king of all Cosmos</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/frog.png" alt="mugshot" />
<h2 class="character">Frog</h2>
<p class="text">What do they do a giraffe and a kettle together?</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/cigarette.jpeg" alt="mugshot" />
<h2 class="character">Cigarette</h2>
<p class="text">they roll a katamari</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/joint.jpg" alt="mugshot" />
<h2 class="character">Joint</h2>
<p class="text">🙄</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/carpet.webp" alt="mugshot" />
<h2 class="character">Carpet</h2>
<p class="text">this house is sooooo messy</p>
<p class="text">full of random things lying around</p>
<p class="text">bless the king of all Cosmos that takes care of all this chaos</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/king-pantheon.jpg" alt="mugshot" />
<h2 class="character">King of all Cosmos</h2>
<p class="text">YOU HEAR THAT PRINCE?? BLESS ME</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/carpet.webp" alt="mugshot" />
<h2 class="character">Carpet</h2>
<p class="text">NO BLESS ME</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/gersande panteon.jpg" alt="mugshot" />
<h2 class="character">XPUB1</h2>
<p class="text">NO BLESS ME</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/katamari-ball-2.jpg" alt="mugshot" />
<h2 class="character">Katamari Ball</h2>
<p class="text">
hello book hello shelves hello supermarket hello street hello car hello ceo of the
city public transportation system hello playstation hello carpet hello giraffe hello
frog hello ball hello dust hello microbs hello crown hello corona hello clown hello
mine hello mineral hello anti men mine hello gun hello killer hello kinder hello
children hello *rolling up all of them*
</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/pantheon_rome.jpg" alt="mugshot" />
<h2 class="character">King of all Cosmos</h2>
<p class="text">I'm the SUN, I'm the BOSS, I'm the HOLE of the PANTHEON</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/prince-junk.jpg" alt="mugshot" />
<h2 class="character">Prince</h2>
<p class="text">aaaaaaah more things more things more things more things</p>
<p class="text">a stample, a tampon, a rat, a frog ,</p>
<p class="text">ohhh a pile of cardsss let's take them all</p>
<p class="text">I am the prince and I'll restore</p>
<p class="text">sassy king's mess, my papa's faults</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/moon.webp" alt="mugshot" />
<h2 class="character">Moon</h2>
<p class="text">
I feel personally attacked by this katamari ball getting bigger and rounder
</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/earth.webp" alt="mugshot" />
<h2 class="character">Earth</h2>
<p class="text">It's not like it seems i can explain</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/katamari-ball-3.jpg" alt="mugshot" />
<h2 class="character">Katamari Ball</h2>
<p class="text">
hello moon hello earth hello rings of saturn hello orbital elements hello fixed
stars hello milky way hello popping stars hello shooting stars hello soundtrack
hello marimba hello calimba hello mazinga
</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/queen.webp" alt="mugshot" />
<h2 class="character">The intellectual katamari meta queen</h2>
<p class="text">
ah this is interesting bc the prince never talks. so then it could be that he's a
ventriloque and the katamari speaks for him ahhh yes he talks through the katamari,
wow so meta!
</p>
<p class="text">
yes like the katamari has one hidden face and sometimes it's autonomous, other times
it's the prince
</p>
<p class="text">
*the intellectual katamari queen is in reality the interface on which you can see
the prince from the front in the bottom right*
</p>
<p class="text">
But what consistence has the katamari ? is it crunchy or ?? yes crunchy and porous,
so it can attract the grainy items on earth like pieces of sauce
</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/king.png" alt="mugshot" />
<h2 class="character">King of all Cosmos</h2>
<p class="text">
ARE WE MAKING A PHILOSOPHICAL CLUB OR WHAT????? ROOOLLL ROOOOLLLL ROOOOLLLLLLLLLL
</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/queen.webp" alt="mugshot" />
<h2 class="character">The intellectual katamari meta queen</h2>
<div class="text">
nono. B🤍U🤍T maybe we can start one A💥N💥D I'm probably gonna be rolled up by
katamari as I can see it coming here. ciao.
</div>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/katamari-ball-4.jpg" alt="mugshot" />
<h2 class="character">Katamari Ball</h2>
<p class="text">hello king hello queen hello prince hello</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/king-horror.jpg" alt="mugshot" />
<h2 class="character">King of all Cosmos</h2>
<p class="text">STOPP STOOOOPP DONT YOU ROLL ON US</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/katamari-ball-5.jpg" alt="mugshot" />
<h2 class="character">Katamari Ball</h2>
<p class="text">Vroooooooooooom vroooooooooooooooooom</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/prince.jpg" alt="mugshot" />
<h2 class="character">Prince</h2>
<p class="text">
Papaaaaaaa I cannot control the katamariiiiiii (or maybe I can?) Oh nooooooooooooooo
</p>
</div>
<div class="baloon">
<img class="mugshoot" src="assets/blibli.jpg" alt="mugshot" />
<h2 class="character">blibli</h2>
<p class="text">
Meow I want a philosophical club *blibli starts a federici reading group*
</p>
</div>
<h2>Credits</h2>
A rolling fan faction written by Mitsa Erica and Kamo in the context of SI17: Productive
Play, with Lidia. It was fun fuction!
</body>
</html>