<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920">
<title>fun fun fun in the sun sun sun</title>
<link rel="stylesheet" href="home.css">
<link rel="icon" type="image/x-icon" href="icon.gif">
</head>
<body>
<script type="module">
import { bubbleCursor } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";
new bubbleCursor();
</script>
<script language="Javascript">
window.onload=function(){
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("Please visit on a computer for a better experience :3");
} else {
}
}
</script>
<div class="container">
<img src="headerimage.png" class="header-img" alt="YURI!!!">
<div class="header-buttons">
<img src="images\reisen.png" alt="reisen" style="width:88px; height:31px;">
<img src="images\neocitiesblue.gif" alt="neocities=">
<img src="images\dolphins.gif" alt="dolphin=">
<img src="images\dumbasswebmasterahead.gif" alt="dumbass">
<img src="images\cats.gif" alt="cats">
<img src="images\mikuapproved.gif" alt="miku">
<img src="images\tmbg.gif" alt="tmbg=">
<img src="images\ao3.jpg" alt="ao3">
<div class="header">
<a href="index.html">Shoals</a>
</div>
</div>
</div>
<br>
<div class="container">
<div class="box09">
<div class="box-inner">
<div class="div1">
<div class="home">
<h2>Welcome! <img src="images/asuka.gif"></h2>
<p>This virtual realm was made to facilitate my spontaneous urges of creating random web pages about the things I like and do, however I will most likely be pretty occupied with my studies (fuck A-Levels), so don't expect too much. I have learned HTML and CSS very loosely, meaning that my website has been designed rather amateurishly, so some bits may be a bit buggy and dodgy. I wanted to make the site mobile-compatible but I'm finding it too hard to integrate certain elements, so the mobile site looks pretty terrible. Just ignore that and focus on the funny fish.</p>
<img src="fishdiv.png" class="divider" alt="Text seperator">
<h2>Update log</h2>
<div class="updates-box">
<div class="update-table">
<table class="bordered">
<tr>
<td><b>02.02.25</b></td>
<td>Joined a bunch of webrings :3</td>
</tr>
<tr>
<td><b>30.01.25</b></td>
<td>Changed the bubbles so that they wouldn't move when viewed on screens of different sizes, now the website doesn't look as shit when the screen size is ever so slightly smaller/larger.</td>
</tr>
<tr>
<td><b>29.01.25</b></td>
<td>New site theme uploaded! I had to make a new one and change the name because the old one was so ugly! Now to make the other pages - the first one on my agenda is the about page. Unsure whether to make it its own page or to keep it here.</td>
</tr>
</table>
</div>
</div>
<br>
<img src="fishdiv.png" class="divider" alt="Text seperator">
<h2>About the website</h2>
<p>My love for 90's web design, combined with my personal graphic design preferences, helped create this site as an escape to the uncustomisable hellscape of modern social media sites. The name "Shoals" unfortunately doesn't stem from my love of the aquatic, but instead my genuinely sad obsession with the TV programme Red Dwarf (<a href="https://youtu.be/PHSRbD_69yk?t=26">you know??? goldfish shoals????</a>.) With that being said, I do still in fact love marine life. My favourite fish is the puffer!</p>
<img src="fishdiv.png" class="divider" alt="Text seperator">
<br>
<br>
</div>
</div>
<div class="div2">
<div class="home2">
<h2>Webrings</h2>
<a href="http://aromatic.wings.nu/">aromatic</a> // harbour mist
<br>
<a href='https://webring.dinhe.net/prev/https://shoals.neocities.org/'><</a> <a href="https://webring.dinhe.net/">Retronaut</a> <a href='https://webring.dinhe.net/next/https://shoals.neocities.org/'>></a>
<div id="smallvocaring"><script src="https://webring.adilene.net/smallwidget.js"></script></div>
<div style="
background-image:
linear-gradient(to top,#8b3f6375,#00000000),
url('images/madohomu.png');
background-size:cover;
display:grid;
height:140px;
width:184px;
border-radius:16px;
color:#fff;
font-size:16px">
<span style="display:inline-block;align-self:end;justify-self:center;text-align:center">
<a style="text-decoration:none;color:#fff" href="https://shandriy.github.io/static/webring.htm#JAM0">⇐</a>
<a style="text-decoration:none;color:#fff" href="https://shandriy.github.io/webring.htm">YURI WEBRING</a>
<a style="text-decoration:none;color:#fff" href="https://shandriy.github.io/static/webring.htm#JAM1">⇒</a>
</span>
</div>
<script src="https://nuthead.neocities.org/ring/ring.js"></script>
<br>
<hr class="solid">
<img src="images/weezer.gif">
<img src="images/flood.gif">
<img src="images/fihas.webp">
<img src="images/fishy.webp" style="max-height:20px;">
<hr class="solid">
<h2>My button</h2>
<img src="images/button.gif" alt="my button" style="border: outset 1px #fff">
<hr class="solid">
<h2>Friends</h2>
<a href="https://dert-cave.neocities.org/"><img src="images/dert-button.gif"></a>
<a href="https://franklins-space.neocities.org/"><img src="images/franklin_button_.gif"></a>
<hr class="solid">
<h2>Links</h2>
<a href="https://pawah.atabook.org/">Guestbook</a>
<br>
<a href="https://neocities.org/site/shoals">Neocities Profile</a>
<br>
<a href="https://pawah.tumblr.com/">Tumblr</a>
<br>
<a href="https://www.last.fm/user/pawahh">last.fm</a>
<hr class="solid">
</div>
</div>
</div>
</div>
<div class="bubbles">
<div id="about">
<a href="about.html">About</a>
</div>
<div id="shrines">
<a href="shrines.html">Shrines</a>
</div>
<div id="gallery">
<a href="gallery.html">Gallery</a>
</div>
<div id="graphics">
<a href="graphics.html">Graphics</a>
</div>
<div id="fishes"></div>
<div id="bubble"></div>
<div id="bubble2"></div>
<div id="bubble3"></div>
<div id="headbubble1"></div>
<div id="headbubble2"></div>
</div>
<img src="realistic-goldfish-transparent-free-png.webp" style="max-height:20%; position:fixed; margin-top:25%; margin-left:89%; filter:drop-shadow(1px 1px #000000ee);
animation:tilt 0.5s infinite;">
</body>
</html>