<!DOCTYPE html>
<html>
<head>
	<title>clovergotchi </title>
	<link href="indexcss.css" rel="stylesheet" type="text/css" media="all">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	
	   <link rel="icon" href="/images/clover.png" type="image/png">
	   
</head>
<body>
  <div class="page-wrapper">
 <div class="container">

<header>
			<span>clovergotchi</span>
		</header>
		
		
				<section class="full">
<marquee behavior="alternate" scrollamount="7">
<img src="/images/htmljunkie.gif">
<img src="/images/tama.gif">
<img src="/images/friends.gif">
<img src="/images/baka.gif">
<img src="/images/rainbow.gif">
<img src="/images/chii.gif">
<img src="/images/clover.gif">
<img src="/images/twinkle.gif">
</marquee>
		</section>
		
		<div class="small">
			<nav>
				<div>navigation</div>
				<a href="aboutme.html"><img src="/images/crayons.gif" width="10px">‎ about me!</a>
				<a href=""><img src="/images/song.gif" width="10px">‎ media log</a>
				<a href=""><img src="/images/house.gif" width="10px">‎ shrines</a>
				<a href=""><img src="/images/cutestar.gif" width="10px">‎ stamp collection</a>
				<a href="https://clovergotchi.neocities.org/stickerbook/stickerbook"><img src="/images/cuteclover.gif" width="10px">‎ sticker book ‎ ‎<img src="/images/new.gif" width="20px"</a></a>
				<a href=""><img src="/images/sparklerainbow.gif" width="10px">‎ projects</a>
				<a href=""><img src="/images/paw2.gif" width="10px">‎ link</a>
				<a href=""><img src="/images/ghost.gif" width="10px">‎ link</a>
				<a href="https://neocities.org/site/clovergotchi"><img src="/images/balloon.gif" width="10px">‎ neocities profile</a>
				<a href="credits.html"><img src="/images/jelly.gif" width="10px">‎ credits‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ <img src="/images/new.gif" width="20px"</a>
			</nav>
			
			<iframe src="https://calendar.sakura.ne.jp/blog_cal.html" scholling="no" style="background-color:#fbe;padding:0px;border:0;margin:0px;overflow:hidden;width:167px;height:209px;overflow:hidden;"></iframe>

<section class="half">
	<p>feed my tamanotchi!</p>
	<center><a href="https://tamanotchi.world/26240c"><img src="https://tamanotchi.world/i/26240" alt="It's tamaNOTchi! Click to feed!" width="50px"></a></center>
	
	</br>
		<center><p><u>answer the poll!</u></p></center>
<center><form method="post" action="https://poll.pollcode.com/58678956"><div style="background-color:#FFFFFF;padding:2px;width:135px;font-family:Arial;font-size:small;color:#7ED977;"><div style="padding:2px 0px 4px 2px;"><strong>fav critter? ♡</strong></div><input type="radio" name="answer" value="1" id="answer586789561" style="float:left;" /><label for="answer586789561" style="float:left;width:110px;">puppy</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="2" id="answer586789562" style="float:left;" /><label for="answer586789562" style="float:left;width:110px;">bunny</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="3" id="answer586789563" style="float:left;" /><label for="answer586789563" style="float:left;width:110px;">kitty</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="4" id="answer586789564" style="float:left;" /><label for="answer586789564" style="float:left;width:110px;">deer</label><div style="clear:both;height:2px;"></div><div align="center" style="padding:3px;"><input type="submit" value=" Vote ">&nbsp;<input type="submit" name="view" value=" View "></div><div align="right" style="font-size:10px">pollcode.com <a href="https://pollcode.com/">free polls</a></div></div></form></center>

</br>
		</div>
		
		
		<section class="half">
			<h1><img src="/images/squidgreen.gif" width="20px"> <b>welcome to clovergotchi!</b><img src="/images/squidpink.gif" width="20px"></h1>
			<p>
				 <img class="blink" src="/images/blink.gif"  width="100px" height="140px">hi there!<img src="/images/paw.gif"> my name is <b>hailey</b>, and i am a <b>20 year old</b> cybersecurity student, freelance digital artist, & 'webmaster' of clovergotchi. when it comes to coding <b>i have no idea what im doing</b> . . . but i desperately want to learn
				and make my own website from the ground up one day! this site serves as a chance to <b>learn html/css</b> and my personal corner of the interweb! i hope you enjoy browsing my site and please enjoy your stay! ♡
				<h1></h1>

<section class="half">
			<div style="height:120px;width:500px;overflow:auto;">
			<b><img src="/images/dolphin.gif">9/14/25</b></br>
continuing my spaghetti code journey.. added webrings, site updates scrollbox, polls, tamanotchi, and more fun extra stuff to clutter the site. started stickerbook page and learned how to make floating images stick in place!</br>
</br>
<b><img src="/images/dolphin.gif">9/13/25</b> </br>
site created!</br>
</br>
</div>

</section>
			</p>
		</section>

<section class="small">
			<h2>currently . . . . . .</h2>
			<b>feeling: </b>
			</br><a href="https://www.imood.com/users/clovergotchi"><img src="https://moods.imood.com/display/uname-clovergotchi/imood.gif" alt="The current mood of clovergotchi at www.imood.com" border="0"></a><br/>
			 <b>reading:</b><p style=" color: black;">one of us is lying</p>
			<b>watching: </b><p style=" color: black;">arcane</p>

<div class="small">
			<nav>
<p>leave a note ⤵ <img src="/images/heart.gif" width="15px"></p>
			<iframe id="commentsframe" src="https://www3.cbox.ws/box/?boxid=3549069&boxtag=koHelX" width="100%" height="200" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto">
			</iframe>
			</nav>
		
			
				<div class="small">
			<nav>
				<div>site to-do</div>
				<a href=""><img src="/images/crayon.gif" width="15px"> write abt me</a>
				<a href=""><img src="/images/crayon.gif" width="15px"> write credits</a>
				<a href=""><img src="/images/crayon.gif" width="15px"> ...etc.</a>
			</nav>
			
			</br>

<center><div style="height:120px;width:120px;overflow:auto;">
<map name="win7widget-compact">
<area href="https://baccyflap.com/noai" target="_blank" shape="rect" coords="0,0,216,29" alt="no ai webring" title="no ai webring">
<area href="https://baccyflap.com/noai/?prv&s=clv" target="_top" shape="rect" coords="102,45,199,71" alt="previous" title="previous">
<area href="https://baccyflap.com/noai/?rnd" target="_top" shape="rect" coords="102,81,199,105" alt="random" title="random">
<area href="https://baccyflap.com/noai/?nxt&s=clv" target="_top" shape="rect" coords="102,116,199,141" alt="next" title="next">
</map>
<img usemap="#win7widget-compact" src="https://baccyflap.com/noai/win7widget-compact.gif" alt="a Windows 7 style dialog box titled 'The No AI Webring' with a little icon showing a computer chip in a rubbish bin. beside it are three clickable buttons, labeled Previous, Random and Next">
</br>
<img src="https://file.garden/ZTGFo3KnrXRNz4je/inkpink.png"> <i><b>BOOYAH!</b></i> hailey is part of the <a href="https://tsuinosora.neocities.org/textcliques/splatoon/">INKLING SQUAD!</a> <img src="https://file.garden/ZTGFo3KnrXRNz4je/inkpink.png">
</br>
<a href="https://pkmn.caelestis.nu" rel="noopener noreferrer" style="border: 0px none; background: transparent;" title="I Choose You! | PokemonName"><img src="/images/slowpoke.png" style="margin: auto -10px;"></a>
<a href="https://clownfred.zone/webpets"><img src="/images/webpet.png" width="30px"></a>
</br>
<a href="https://lovesick.cafe/grrrl"><img src="https://lovesick.cafe/img/sozai/grrrl/madebya-pink.png" ></a>
</br>
</br>
<script src="https://transring.neocities.org/ring.js" data-widget="cloud"></script>
</br>
</div></center>

<p> you're vistor</p>
<center><script language="javascript" type="text/javascript" src="//counter1.fc2.com/counter.php?id=40551452&main=1"></script><noscript><img src="//counter1.fc2.com/counter_img.php?id=40551452&main=1" /></noscript></center>
		</section>
		
		<section class="full">
<marquee behavior="alternate" scrollamount="7">
<img src="/images/silly.gif">
<img src="/images/lovebf.gif">
<img src="/images/luckystar.gif">
<img src="/images/southpark.gif">
<img src="/images/woa.gif">
<img src="/images/sparklefur.gif">
<img src="/images/music.gif">
<img src="/images/shark.gif">
</marquee>
</section>
<section class="full">
<center><img src="/images/rainbowright.gif" width="15px">  coded with my own two paws | est. 9/13/2025 with ♡  <img src="/images/rainbowleft.gif" width="15px"></center>
		</section>

</div>

</body>
</html>

/* start light mode styling */

:root {
		--text: #FF7CB3;
		--border: #FF7CB3;
		--accent: #FF7CB3;
		--bg: #dce3e1;
		--gradientTop: white;
		--gradientBottom: rgb(240, 248, 255, .8);
	}
	header {
		background: url('/images/pokemonbanner.jpg');
	}
/* end light mode styling */

/* start dark mode styling */
	@media (prefers-color-scheme: dark) {
		:root {
			--text: white;
			--border: #5a7678;
			--accent: #74C365;
			--bg: rgb(0,60,60,.8);
			--gradientBottom: rgb(0, 50, 60);
			--gradientTop: darkslategrey;
			a:link { color: lightblue; }
		}
		header {
			background: url('***dark mode banner image***');
		}
	}
/* end dark mode styling */

* { 
	box-sizing: border-box;
}
body {
  cursor: url("/images/pawcursor.gif"), auto;
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: #FF7CB3

/* page background pattern */
	background-color: var(--gradientTop);
	background-image: url(/images/checkeredbg.png);
	background-size: 20px 35px;
	background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

a:hover {
        cursor: url('/images/pawcursor.gif'), pointer;
    }

.container {
	max-width: 55rem;
	margin: 5vw auto 12px auto;
	border: 6px ridge var(--border);
	outline: 3px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;
	color: #FF7CB3;

/* container background pattern */
	background-color: var(--gradientBottom);
	background-image: url(/images/starsbg.png)
}
/* these control the column widths */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }

header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 120px; /* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
	color: #FF7CB3;
}
header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
	text-shadow: 1px 1px var(--text),
		-1px 1px var(--text),
		1px -1px var(--accent),
		-1px -1px var(--accent);
	color: var(--gradientTop);
}

nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
nav a {
	display: block;
	margin: 5px;
	background: linear-gradient(to right,var(--bg),var(--gradientBottom));
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {
	background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 5px auto;
	border:2px ridge var(--border);
	border-radius: 5px;
}

section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
	padding: 5px;
}

footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }

a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}

.blink {
  float: left;
  margin-right: 15px;
  width: 100px;
  height: 150px;  
}

.scroll-box {
        width: 500px;
        overflow: scroll; 
        border: 1px solid #ccc; /* Optional: Add a border for visibility */
        padding: 10px; /* Optional: Add padding for content */
    }

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground