262 lines
6.8 KiB
HTML
262 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>alien hospital</title>
|
||
|
|
<!-- The style.css file allows you to change the look of your web pages.
|
||
|
|
If you include the next line in all your web pages, they will all share the same look.
|
||
|
|
This makes it easier to make new pages for your site. -->
|
||
|
|
<link rel="alternate" type="application/rss+xml"
|
||
|
|
href="/feed.xml" title="RSS">
|
||
|
|
<style>
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-image: url('/MOON.JPG');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
font-size: 26px;
|
||
|
|
background-color: #fff;
|
||
|
|
width: 100px;
|
||
|
|
}
|
||
|
|
.bg {
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-top: 90px;
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
}
|
||
|
|
.spacebg {
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.about {
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 130px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
webkit-filter: blur(1px);
|
||
|
|
filter: blur(1px);
|
||
|
|
}
|
||
|
|
.kin {
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 650px;
|
||
|
|
margin-top: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inner {
|
||
|
|
width: 750px;
|
||
|
|
height: 600px;
|
||
|
|
font-family: arial;
|
||
|
|
border: 8px #260040 groove;
|
||
|
|
font-size: 19px;
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 0 auto;
|
||
|
|
overflow-y: scroll;
|
||
|
|
padding: 5px;
|
||
|
|
box-shadow: 20px 6px 2px -5px #d5b6e3 ;
|
||
|
|
|
||
|
|
}
|
||
|
|
.etc {
|
||
|
|
color: #000;
|
||
|
|
border: 8px #260040 groove;
|
||
|
|
background: #fff;
|
||
|
|
position: absolute;
|
||
|
|
width: 450px;
|
||
|
|
margin-left: 350px;
|
||
|
|
margin-top: 0px;
|
||
|
|
padding: 4px;
|
||
|
|
height: 240px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
|
||
|
|
width: 858px;
|
||
|
|
height: 650px;
|
||
|
|
background-image: url('/stars5.gif');
|
||
|
|
margin: 0 auto;
|
||
|
|
z-index: 99;
|
||
|
|
bottom: 29px;
|
||
|
|
border: 1px white solid;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 20px 2px 2px #d5b6e3 ;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imgav {
|
||
|
|
position: absolute;
|
||
|
|
top: 10;
|
||
|
|
left: 60;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.navlink{
|
||
|
|
background-color: white;
|
||
|
|
display: block;
|
||
|
|
padding: 5px;
|
||
|
|
margin: 8px 5px 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainbox {
|
||
|
|
width: 700px;
|
||
|
|
height:300px;
|
||
|
|
padding: 5px;
|
||
|
|
border: 8px #260040 groove;
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 300px;
|
||
|
|
margin-left: 65px;
|
||
|
|
color: #000;
|
||
|
|
overflow-y: scroll;
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
.mywork {
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 55px;
|
||
|
|
margin-top: 150px;
|
||
|
|
}
|
||
|
|
.sitemap {
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 250px;
|
||
|
|
margin-top: 3px;
|
||
|
|
}
|
||
|
|
.photoart{
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 350px;
|
||
|
|
margin-top: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:visited {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
button:a {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
.journal {
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 200px;
|
||
|
|
margin-top: 220px;
|
||
|
|
}
|
||
|
|
.collections {
|
||
|
|
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 90px;
|
||
|
|
margin-top: 330px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
aside {
|
||
|
|
background-color: #000;
|
||
|
|
width: 180px;
|
||
|
|
height: 650px; z-index: 1;
|
||
|
|
|
||
|
|
padding: 20px;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
overflow-y: scroll;
|
||
|
|
overflow-x: hidden;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secrets {
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 570px;
|
||
|
|
margin-top: 380px;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.updated {
|
||
|
|
height: 100px;
|
||
|
|
width: 180px;
|
||
|
|
overflow: scroll;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.tg {border-collapse:collapse;border-spacing:0;}
|
||
|
|
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||
|
|
overflow:hidden;padding:10px 5px;word-break:normal;}
|
||
|
|
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||
|
|
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
|
||
|
|
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
|
||
|
|
.roomtransition {
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 700px;
|
||
|
|
margin-top: 250px;
|
||
|
|
}
|
||
|
|
* {box-sizing: border-box;}
|
||
|
|
canvas {
|
||
|
|
border: 1px solid black;
|
||
|
|
cursor: crosshair;
|
||
|
|
}
|
||
|
|
#gallery {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.image-container {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 5px;
|
||
|
|
max-width: 200px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.image-container img {
|
||
|
|
max-width: 100%;
|
||
|
|
height: auto;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview {
|
||
|
|
font-family: 'symphonyfont';
|
||
|
|
font-weight: 900;
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<center><div class="header"><a href="/homepage">back</a></div> </center>
|
||
|
|
<div class="container"><div class="inner"><h1>For You!</h1> Not much here yet...
|
||
|
|
<center>AO3 Clone in HTML</center>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
A while ago I made a semi-functional AO3 clone in HTML/css. You use this by copying and pasting your works into the work template, then updating the profile and tag pages to link to each work.
|
||
|
|
<br><br>
|
||
|
|
It's insane, but if you're curious or up for a tedious project, or are dreaming of hosting OTW-Archive one day and want to spin up a prototype, you can download it <a href="https://github.com/owoctober/AO3-html">here</a>.<br><br>
|
||
|
|
|
||
|
|
<center>My Font</center><br>
|
||
|
|
This is my handwriting font! It has letters and numbers and some punctuation but not all. If you like it feel free to use!<br><br>
|
||
|
|
<div class="preview">Preview: the quick brown fox jumped over the lazy dog.</a></div>
|
||
|
|
<a href="https://file.garden/aJzQmzrHVB4BLKwu/symphonyfont%20(1)(1).ttf">Download</a>
|
||
|
|
<hr>
|
||
|
|
<center>My Font - Pixel Version</center><br>
|
||
|
|
The above, but pixelly!<br>
|
||
|
|
<img src="https://i.ibb.co/1Gs4gnM2/image.png" width="700px">
|
||
|
|
<a href="https://file.garden/aJzQmzrHVB4BLKwu/symphonypixel(1).ttf">Download</a><hr>
|
||
|
|
<center>Graphics</center>
|
||
|
|
<img src="https://i.ibb.co/V0FPZT9b/janestamp.png" alt="janestamp" border="0">
|
||
|
|
<img src="https://i.ibb.co/kgwxz7sd/flexstamp.png" alt="flexstamp" border="0">
|
||
|
|
<img src="https://i.ibb.co/dsrLDFLx/cliffstamp.png" alt="cliffstamp" border="0">
|
||
|
|
<img src="https://i.ibb.co/zhsm4VhV/larrystamp.png" alt="larrystamp" border="0">
|
||
|
|
<img src="https://i.ibb.co/355pgmCS/ritastamp.png" alt="ritastamp" border="0">
|
||
|
|
<img src="https://i.ibb.co/s9PvmBqJ/maurastamp.png" alt="maurastamp" border="0">
|
||
|
|
<img src="https://i.ibb.co/21f0Fjv6/laurastamp.png" alt="laurastamp" border="0">
|
||
|
|
<img src="https://i.ibb.co/tpYytR2h/vicstamp.png" alt="vicstamp" border="0">
|
||
|
|
<img src="https://i.ibb.co/v612b01V/babylon5stamp.png" alt="babylon5stamp" border="0"><br/><img src="https://i.ibb.co/ccjjrxNC/DOOM-PATROL.png" alt="DOOM-PATROL" border="0">
|
||
|
|
<img src="https://i.ibb.co/DP5xmbSp/ALIEN-GENDER.png" alt="ALIEN-GENDER" border="0">
|
||
|
|
<img src="https://i.ibb.co/XrZ6y4mc/YAY-LESBIANS.png" alt="YAY-LESBIANS" border="0">
|
||
|
|
<img src="https://i.ibb.co/FLZJgtKz/BUTCH-LESBIAN.png" alt="BUTCH-LESBIAN" border="0">
|
||
|
|
<img src="https://i.ibb.co/rLgsL0K/FEMME-LESBIAN-1.png" alt="FEMME-LESBIAN-1" border="0"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|