agnes/alienhospital
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
alienhospital/hometest.html

801 lines
23 KiB
HTML
Raw Permalink Normal View History

first
2025-12-23 10:56:17 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Change your site title: (It is shown in the tab) -->
<title>ALIENH0SP1T4L</title>
<!-- Change your site description: (It is shown in Google results) -->
<meta content="My personal website!" name="description" />
<!-- Setting character encoding and viewport size. Do not remove. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- FavIcon (small image in tab), change to any image you want: -->
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- CSS: -->
<!-- You will have to change this to "../style.css" if this HTML file is in a subfolder, to "../../style.css" if this HTML file is in 2 subfolders, etc. -->
<link href="./style.css" rel="stylesheet" />
<script>
// Template generated with petrapixel's layout generator.
// (Please do not remove this credit.)
console.log("%c Template generated with petrapixel's layout generator.", "font-size: 14pt;");
console.log("%c https://petrapixel.neocities.org/coding/layout-generator", "font-size: 14pt;");
</script>
<link rel="stylesheet" href="https://fandomr.ing/onionring/onionring.css">
</head>
<body>
<!-- The next line is a skip-to-content link for keyboard users. Do not remove it! -->
<a href="#content" id="skip-to-content-link">Skip to content</a>
<div class="layout">
<!-- =============================================== -->
<!-- HEADER -->
<!-- =============================================== -->
<header>
<div class="header-image">
<img src="https://i.ibb.co/d4wzWNJw/tumblr-9521a9fc973bc72adeebdf473bee6653-94ca1a4f-540.png" alt="" />
</div>
<div class="header-content">
<div class="header-title"></div>
<!-- NAVIGATION -->
<nav>
<ul>
<li><a href="/homepage">Home</a></li>
<li><a href="/about">About Me</a></li>
<li><a href="/shrines">Shrines</a></li>
<li><a href="/resources">Resources</a></li>
<li>
<strong>More</strong>
<ul>
<li><a href="/paint">Games - Paint</a></li>
<li><a href="/kidpix">Games - Kidpix</a></li>
<li><a href="/secrets">Well of Secrets</a></li>
<li><a href="/fanworks">Archive of My Fanworks</a></li>
<li><a href="/links">Even More Links!</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<!-- =============================================== -->
<!-- LEFT SIDEBAR -->
<!-- =============================================== -->
<aside class="left-sidebar">
<div class="sidebar-section">
<a href="https://www.imood.com/users/alienhospital"><img src="https://moods.imood.com/display/uname-alienhospital/imood.gif" alt="The current mood of alienhospital at www.imood.com" border="0"></a>
</div>
<div class="sidebar-section">
<iframe src="https://www3.cbox.ws/box/?boxid=3546360&boxtag=8LrbMS" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</div>
<div class="sidebar-section">
<form method="post" action="https://poll.pollcode.com/17118689"><div style="background-color:#EEEEEE;padding:2px;width:175px;font-family:Arial;font-size:small;color:#000000;"><div style="padding:2px 0px 4px 2px;"><strong>whats the best bloc party album</strong></div><input type="radio" name="answer" value="1" id="answer171186891" style="float:left;" /><label for="answer171186891" style="float:left;width:150px;">silent alarm</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="2" id="answer171186892" style="float:left;" /><label for="answer171186892" style="float:left;width:150px;">intimacy</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="3" id="answer171186893" style="float:left;" /><label for="answer171186893" style="float:left;width:150px;">a weekend in the city</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="4" id="answer171186894" style="float:left;" /><label for="answer171186894" style="float:left;width:150px;">alpha games</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="5" id="answer171186895" style="float:left;" /><label for="answer171186895" style="float:left;width:150px;">four</label><div style="clear:both;height:2px;"></div><input type="radio" name="answer" value="6" id="answer171186896" style="float:left;" /><label for="answer171186896" style="float:left;width:150px;">hymns</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>
</div>
<div class="sidebar-section">
</div>
<div class="sidebar-section">
<div class="sidebar-title"></div>
</div>
<div class="sidebar-section">
<div class="sidebar-title">add my button</div>
<div class="site-button">
<a href="https://alienhospital.neocities.org/" target="_blank"><img src="https://i.ibb.co/qFkKvXyg/buttno2.gif" alt="alienhospita"></a>
<textarea><a href="https://alienhospital.neocities.org/" target="_blank"><img src="https://i.ibb.co/qFkKvXyg/buttno2.gif" alt="alienhospital"></a></textarea>
<br><br><center>other cool sites!
<div class="scrolly">
<a href="https://eunoia.sayitditto.net/buttons/"><img src="/buttons/eunoia.png"></a><a href="https://serpentinemalign.neocities.org/"><img src="/buttons/smbutton.png"></a><a href="https://linkyblog.neocities.org/"><img src="/linkybanner.png"></a> <a href="https://spirit.alien.hospital"><img src="https://i.ibb.co/Pv0Jd5XR/button.png" alt="button" border="0"></a>
</div>
<img src="https://i.ibb.co/KpMnG9hg/ao3e.png"> Additional <a href="https://alien.hospital/cliques">Tags:</a> Alien/Human Relationship
</div>
</aside>
<!-- =============================================== -->
<!-- RIGHT SIDEBAR -->
<!-- =============================================== -->
<aside class="right-sidebar">
<div class="sidebar-section">
<div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=aliens" defer></script>
</div>
<div class="sidebar-section">
<a href="https://www.last.fm/user/keegbovo"><img src="https://lastfm-recently-played.vercel.app/api?user=keegbovo" height="auto" width="250px"/></a>
</div>
<div class="sidebar-section">
<div class="sidebar-title">Updates</div>
<div class="updated">June 03, New page: novel excerpts. <br>June 02, 2025. New page: fandom badges.<br>May 28, 2025. Added more to Doom Patrol fic archive. <br>May 23, 2025. TNS shrine updated/improved.<br> May 04. 2025. Site Established & basic pages uploaded<br>
May 10. TNS dressup page, WIP fanwork archive and tns shrine uploaded<br></div>
</div>
<div class="sidebar-section">
<div class="sidebar-title">To-Do</div>
<div class="updated">
-Update fanfic archive<br>
-More shrines</div>
</div>
<div class="sidebar-section">
<iframe src="https://free.timeanddate.com/clock/i9vopxc0/n126/tt0/tw0/tm1/ts1/ta1/tb4" frameborder="0" width="126" height="34"></iframe>
</div>
<div class="sidebar-section">
<div class="sidebar-title"></div>
<iframe width="400" height="300" frameborder="0" src="https://cdn.abowman.com/widgets/turtles/?up_waterColor=d0dce5&up_percentWater=0.75&up_groundColor=eeeeee&up_numTurtles=8&up_turtle1LegColor=828250&up_turtle1HeadColor=828250&up_turtle1ShellColor=66663f&up_turtle2LegColor=828250&up_turtle2HeadColor=828250&up_turtle2ShellColor=66663f&up_turtle3LegColor=828250&up_turtle3HeadColor=828250&up_turtle3ShellColor=66663f&up_turtle4LegColor=828250&up_turtle4HeadColor=828250&up_turtle4ShellColor=66663f&up_turtle5LegColor=828250&up_turtle5HeadColor=828250&up_turtle5ShellColor=66663f&up_turtle6LegColor=828250&up_turtle6HeadColor=828250&up_turtle6ShellColor=66663f&up_turtle7LegColor=828250&up_turtle7HeadColor=828250&up_turtle7ShellColor=66663f&up_turtle8LegColor=828250&up_turtle8HeadColor=828250&up_turtle8ShellColor=66663f&up_turtle9LegColor=828250&up_turtle9HeadColor=828250&up_turtle9ShellColor=66663f&up_turtle10LegColor=828250&up_turtle10HeadColor=828250&up_turtle10ShellColor=66663f"></iframe><br><!-- // Begin Current Moon Phase HTML (c) [MoonConnection.com](http://MoonConnection.com) // -->
<center> <table cellpadding="0" cellspacing="0" border="0" width="138"> <tr> <td align="center"> <a href="https://www.moonconnection.com" target="mc\_moon\_ph"> <img src="https://www.moonmodule.com/cs/dm/vn.gif" width="138" height="210" border="0" alt="" /></a> <div style="position:relative;width:128px;"> <div style="position:absolute;top:-30px;left:6px;background:#000000;width:116px;text-align:center;"> <a href="https://www.moonconnection.com/moon\_phases.phtml" target="mc\_moon\_ph"> <font color="#7F7F7F" size="1" face="arial,helvetica,sans-serif"> <span style="color:#7F7F7F;font-family:arial,helvetica,sans-serif;font-size:10px;">lunar phase</span> </font> </a> </div> </div> </td> </tr> </table> </center><!-- // end moon phase HTML // -->
</div>
</aside>
<main id="content"> <!-- Do NOT remove the ID here -->
<!-- =============================================== -->
<!-- MAIN CONTENT -->
<!-- =============================================== -->
<section>
<center><img src="https://i.ibb.co/ZRfYtg7t/welcome5.gif">
<p>Hi! I'm Aggie. I'm a freakdyke alien in its mid 20s trying to create a little home on the web.</p><p>Here, you will find just about everything--thoughts on fiction, personal writing and artwork, fandom, fictosexuality, alterhumanity, and anything else haunting my mind at the moment.
<p>
<center>PICLOG!! <br><a href="https://piclog.blue/profile.php?id=365"><img src="https://piclog.blue/latest.php?id=365"></a>
<iframe width="314" height="321" scrolling="no" src="https://gifypet.neocities.org/pet/pet.html?name=tns&dob=1746414126&gender=undefined&element=Fire&pet=https%3A%2F%2Fi.ibb.co%2FxtJKZjZM%2Fimage1-Copy.png&map=https%3A%2F%2Fi.ibb.co%2FRTFX5DPc%2Fbackstar-1.gif&background=https%3A%2F%2Fi.ibb.co%2FbRgRHRYk%2Fcloudynite.gif&tablecolor=white&textcolor=white" frameborder="0"></iframe><div id='yume-ring'>
<script type="text/javascript" src="https://yume-ring.neocities.org/onionring-variables.js"></script>
<script type="text/javascript" src="https://yume-ring.neocities.org/onionring-widget2.js"></script>
</div>
<div id='fandomring'>
<script type="text/javascript" src="https://fandomr.ing/onionring/onionring-variables.js"></script>
<script type="text/javascript" src="https://fandomr.ing/onionring/onionring-widget.js"></script>
</div>
<div style="width: fit-content; border: 2px outset; text-align:center; background-image: url('https://i.ibb.co/XfyPJWWh/cloudynite.gif'); color: #fff;">
<p style="margin: 0; padding: 0.1em; border: 2px inset; color: #fff;"><img src="https://i.ibb.co/HTxfB4j8/stars.gif" width="35px"><br>This site is a member of <a href="https://alien.hospital/starburst/join" style="color:#fff;">Starburst Ring.</a></p>
<div style="display: flex">
<a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset; color: #fff;" href="https://webri.ng/webring/starburstring/previous?via=https%3A%2F%2Falien.hospital">prev </a>
<a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset; color: #fff;" href="https://webri.ng/webring/starburstring/random?via=https%3A%2F%2Falien.hospital">random</a>
<a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset; color: #fff;" href="https://webri.ng/webring/starburstring/next?via=https%3A%2F%2Falien.hospital">next </a>
</div>
</div>
<div id="anticensorselfship69">
<script type="text/javascript" src="https://anticensorselfship.neocities.org/onionring-variables.js"></script>
<script type="text/javascript" src="https://anticensorselfship.neocities.org/onionring-widget.js"></script>
</div>
</section>
</main>
<!-- Closing .layout: -->
</div>
<!-- Add any additional Javascript code (<script></script>) here. -->
</body>
<style>
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */
/* Variables are used like this: var(--text-color) */
:root {
/* Background Colors: */
--background-color: #ffffff;
--content-background-color: #ffffff;
--sidebar-background-color: #ffffff;
/* Text Colors: */
--text-color: #000000;
--sidebar-text-color: #2500dd;
--link-color: #000d63;
--link-color-hover: #5e00ec;
/* Text: */
--font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--font-size: 18px;
/* Other Settings: */
--margin: 25px;
--padding: 24px;
--border: 10px inset #001457;
--round-borders: 0px;
--sidebar-width: 300px;
}
/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
* {
box-sizing: border-box;
}
.scrolly {
width: 150px;
height: 100px;
overflow-y: scroll;
}
body {
display: flex;
align-items: center;
font-weight: 900;
justify-content: center;
min-height: 100vh;
font-size: var(--font-size);
margin: 0;
padding: var(--margin);
color: var(--text-color);
font-family: var(--font);
line-height: 1.2;
background: var(--background-color);
background-image: url("https://i.ibb.co/214VBwsN/pkg50004.jpg");
}
::selection {
/* (Text highlighted by the user) */
background: rgba(0, 0, 0, 0.2);
}
mark {
/* Text highlighted by using the <mark> element */
text-shadow: 1px 1px 4px var(--link-color);
background-color: inherit;
color: var(--text-color);
}
/* Links: */
a {
text-decoration: underline;
}
a,
a:visited {
color: var(--link-color);
}
a:hover,
a:focus {
color: var(--link-color-hover);
text-decoration: none;
}
/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */
.layout {
width: 1200px;
display: grid;
grid-gap: var(--margin);
grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
main {
grid-area: main;
overflow-y: auto;
padding: var(--padding);
background: var(--content-background-color);
border: var(--border);
border-radius: var(--round-borders);
}
/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */
header {
grid-area: header;
font-size: 1.2em;
border: var(--border);
border-radius: var(--round-borders);
background: var(--content-background-color);
}
.header-content {
padding: var(--padding);
}
.header-title {
font-family: var(--heading-font);
font-size: 1.5em;
font-weight: bold;
}
.header-image img {
width: 100%;
height: auto;
}
/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */
aside {
grid-area: aside;
border: var(--border);
border-radius: var(--round-borders);
overflow: hidden;
background: var(--sidebar-background-color);
padding: var(--padding);
color: var(--sidebar-text-color);
}
.left-sidebar {
grid-area: leftSidebar;
}
.right-sidebar {
grid-area: rightSidebar;
}
.sidebar-title {
font-weight: bold;
font-size: 1.2em;
font-family: var(--heading-font);
}
.sidebar-section:not(:last-child) {
margin-bottom: 3em;
}
.sidebar-section ul,
.sidebar-section ol {
padding-left: 1.5em;
}
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
margin-top: 10px;
}
/* Sidebar Blockquote: */
.sidebar-section blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
overflow: hidden;
}
.sidebar-section blockquote > *:first-child {
margin-top: 0;
}
.sidebar-section blockquote > *:last-child {
margin-bottom: 0;
}
/* Site Button: */
.site-button {
display: flex;
flex-direction: column;
align-items: center;
}
.site-button textarea {
font-family: monospace;
font-size: 0.7em;
}
#statuscafe {
padding: .8em;
border: 7px double darkblue;
}
#statuscafe a {
color:darkblue;
}
#statuscafe-username {
margin-bottom: .5em; color:darkblue;
}
#statuscafe-content {
margin: 0 1em 0.5em 1em;
color:darkblue;
}
/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */
nav {
margin-bottom: 3em;
}
nav .sidebar-title {
margin-bottom: 0.5em;
}
nav ul {
margin: 0 -5px;
padding: 0;
list-style: none;
user-select: none;
}
nav ul li {
margin-bottom: 0;
}
nav > ul li > a,
nav > ul li > strong {
display: inline-block;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 5px 10px;
}
nav > ul li > a.active,
nav > ul li > details.active summary {
font-weight: bold;
}
nav ul summary {
cursor: pointer;
}
nav ul ul li > a {
padding-left: 30px;
}
/* NAVIGATION IN HEADER */
header nav {
margin-bottom: 0;
}
header nav ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
header nav ul li {
position: relative;
}
header nav ul li:first-child > a {
padding-left: 0;
}
header nav ul li:last-child > a {
padding-right: 0;
}
/* Subnavigation (Drop-Down): */
header nav ul ul {
background: var(--content-background-color);
display: none;
position: absolute;
top: 100%;
left: 10px;
padding: 0.5em;
z-index: 1;
border: var(--border);
min-width: 100%;
box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}
header nav ul li:hover ul,
header nav ul li:focus-within ul {
display: block;
}
header nav ul li strong {
color: var(--link-color);
text-decoration: underline;
font-weight: normal;
}
header nav ul ul li a {
display: block;
padding-left: 0;
padding-right: 0;
}
/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */
main {
line-height: 1.5;
}
main a,
main a:visited {
color: var(--link-color);
}
main a:hover,
main a:focus {
color: var(--link-color-hover);
text-decoration-style: wavy;
}
main p,
main .image,
main .full-width-image,
main .two-columns {
margin: 0.75em 0;
}
main ol,
main ul {
margin: 0.5em 0;
padding-left: 1.5em;
}
main ol li,
main ul li {
margin-bottom: 0.2em;
line-height: 1.3;
}
main ol {
padding-left: 2em;
}
main blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
}
main pre {
margin: 1em 0 1.5em;
}
main code {
text-transform: none;
}
main center {
margin: 1em 0;
padding: 0 1em;
}
main hr {
border: 0;
border-top: var(--border);
margin: 1.5em 0;
}
/* HEADINGS: */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
font-family: var(--heading-font);
margin-bottom: 0;
line-height: 1.5;
}
main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
margin-top: 0;
}
main h1 {
font-size: 1.5em;
}
main h2 {
font-size: 1.4em;
}
main h3 {
font-size: 1.3em;
}
main h4 {
font-size: 1.2em;
}
main h5 {
font-size: 1.1em;
}
main h6 {
font-size: 1em;
}
/* COLUMNS: */
.two-columns {
display: flex;
}
.two-columns > * {
flex: 1 1 0;
margin: 0;
}
.two-columns > *:first-child {
padding-right: 0.75em;
}
.two-columns > *:last-child {
padding-left: 0.75em;
}
/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */
.image {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.full-width-image {
display: block;
width: 100%;
height: auto;
}
.images {
display: flex;
width: calc(100% + 5px + 5px);
margin-left: -5px;
margin-right: -5px;
}
.images img {
width: 100%;
height: auto;
padding: 5px;
margin: 0;
overflow: hidden;
}
/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */
/* please do not remove this. */
#skip-to-content-link {
position: fixed;
top: 0;
left: 0;
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1;
font-size: 1.25rem;
background-color: var(--content-background-color);
color: var(--text-color);
transform: translateY(-3rem);
transition: transform 0.1s ease-in;
z-index: 99999999999;
}
.updated {
height: 150px;
width: 180px;
overflow: scroll;
}
#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
transform: translateY(0);
}
/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */
/* CSS Code for devices < 800px */
@media (max-width: 800px) {
body {
font-size: 14px;
}
.layout {
width: 100%;
grid-template: "header" auto "rightSidebar" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
aside {
border-bottom: 1px solid;
padding: 9px;
font-size: 0.9em;
}
nav {
padding: 0;
}
nav > ul {
padding-top: 0.5em;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 0.5em;
}
main {
max-height: none;
padding: 15px;
}
.images {
flex-wrap: wrap;
}
.images img {
width: 100%;
}
#skip-to-content-link {
font-size: 1rem;
}
}
</style>
</html>
Reference in a new issue Copy permalink