<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hypnospace Outlaw Base</title>
<style>
body {
margin: 0;
font-family: "Courier New", Courier, monospace;
background-color: #141414;
cursor: url("/img/hypnospace/arrow.png"), auto;
}
a {
text-decoration: none;
font-weight: bold;
color: #852a68; /* change the colors of links */
}
a:visited {
color: #852a68; /* keeps links the same color, even if you've clicked on them before */
}
a:hover {
text-decoration: underline;
cursor: url("/img/hypnospace/hover.png"), auto;
}
}
h1, h2, h3 {
margin: 0.9em 0 0.5em 0;
font-family: "Comic Sans MS", "Comic Sans", sans-serif;
}
h1 {
font-size: 1.7em;
text-align: center;
}
img {
max-width: 100%;
image-rendering: pixelated;
}
/* section: status image and text */
.top {
margin: 30px auto 20px auto;
width: 45%;
font-family: "Courier New", Courier, monospace;
font-size: 19px;
text-transform: uppercase;
color: white;
}
.lastupdated {
display: inline;
float: right;
color: #bdabab;
}
.statusitems {
display: flex;
margin: 6px 2px;
height: 75px;
justify-content: space-between;
gap: 20px;
text-transform: none;
}
.statusitems > div {
box-shadow: 2px 2px 0 #312454; /* shadow below emote box and status */
}
.icon {
width: 75px;
border-radius: 7px 0 7px 7px;
background-color: #575065;
}
.emote {
position: absolute;
}
.emote img {
max-width: 45px;
max-height: 65px;
}
.emoteribbon {
margin-top: 50px;
width: 76px;
height: 20px;
background-color: #312454;
}
.status {
flex: 80%;
padding: 6px;
border-radius: 7px;
background-color: #575065;
color: #dcd5d1;
}
/* section end */
/* section: hypnospace page */
/* hypnospace page container */
.page {
margin: auto auto 50px auto;
width: 48%;
/* to change the page's height, see .pagebottom */
background-color: #fd00fc;
background-image: linear-gradient(#fff8a0 80%, #fff); /* second color controls gradient at bottom */
}
/* white highlight at the top of the page */
.pagetopgradient {
width: 48%;
height: 67px;
position: absolute;
border-bottom-left-radius: 100% 70px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.8));
}
.pagetop {
padding: 50px 0 20px 0;
background-color: #fd00fc;
}
.websitetitle {
margin-left: 25px;
width: 500px;
font-size: 45px;
font-weight: bold;
font-family: "Comic Sans MS", "Comic Sans", sans-serif;
}
.websitetitle a {
text-decoration: none;
color: #fff;
}
.sideimg {
width: 225px;
height: 150px;
position: absolute;
top: 153px;
right: 395px;
left: auto;
background-image: /*url("filename.png"),*/ url("/img/hypnospace/bannerbg.png"); /* change banner/side image, remove the comment tags to add your own image */
background-repeat: no-repeat;
background-position: /*left top,*/ right top;
background-size: /*contain,*/ 115px;
content: ' ';
}
.pagebottom {
height: 100%; /* change page height */
padding-bottom: 3px;
background-image: linear-gradient(#fd00fc 10%, #fff8a0 27%, rgba(255, 255, 255, 0)); /* this is the gradient on the left, below the side links */
}
/* page content container */
.pagebody {
margin-right: 0;
margin-left: auto;
width: 75%;
height: 98%;
padding: 7px 10px 0 10px;
border-start-end-radius: 500px 20px;
font-family: "Courier New", Courier, monospace;
background-image: linear-gradient(#fff8a0 50%, rgba(255, 255, 255, 0));
}
.content {
margin: -25px -2px 0 30px;
font-size: 1em;
color: #852a68; /* change page content text color */
}
/* side links */
.links {
position: absolute;
overflow-x: hidden;
overflow-y: visible;
height: 100%;
margin: -20px 0 0 0;
padding: 0;
font-size: 23px;
font-family: "Comic Sans MS", "Comic Sans", sans-serif;
list-style-type: none;
}
.links li {
margin: 10px 0;
width: 140px;
height: 30px;
border-radius: 30px;
padding: 10px 30px;
font-weight: bold;
text-align: center;
color: #222034; /* side links text color */
background-color: #8EF544;
background-image: radial-gradient(farthest-corner at 50% 25%, #8ef544, #4cc205, #327d0a); /* side links background. add or remove colors as you'd like */
}
.links li:hover {
overflow: hidden;
background-color: red;
background-image: radial-gradient(farthest-corner at 50% 25%, #d7fc65, #98d405); /* background color when hovered. add or remove colors as you'd like */
}
.links a:hover {
text-decoration: none;
}
/* moves links to the left */
.second {
margin-left: -8px;
}
/* moves links to the left */
.third {
margin-left: -14px;
}
/* makes highlights for links */
.highlight {
margin-top: -5px;
margin-bottom: -16px;
margin-left: -15px;
width: 170px;
height: 20px;
border-radius: 30px;
background-image: linear-gradient(#f5faed 20%, rgba(255, 255, 255, 0));
content: ' ';
}
/* section end */
.credit {
width: 15px;
height: 15px;
margin: 6px;
padding: 3px;
text-align: center;
font-size: 12px;
}
/* mobile */
@media screen and (max-width: 480px) {
.top {
width: 80%;
font-size: 0.8em;
}
.page {
width: 90%;
}
.pagetopgradient {
width: 90%;
height: 60px;
}
.websitetitle {
width: 300px;
font-size: 1.8em;
}
.sideimg {
display: none; /* idk how to put this behind the page title so it goes hidden on smaller sized screens :( */
top: 155px;
right: 10px;
width: 125px;
height: 50px;
}
.pagebody {
width: 65%;
}
.content {
margin: -25px -2px 0 10px;
}
.links {
position: absolute;
overflow: hidden;
font-size: 0.8em;
}
.links li {
width: 80px;
height: 20px;
}
.highlight {
margin-top: -7px;
width: 100px;
height: 20px;
content: ' ';
}
}
</style>
</head>
<body>
<div class="top">
Carl Parker III's Status
<div class="lastupdated">Updated Today</div>
<div class="statusitems">
<div class="icon">
<div class="emote">
<img src="/img/hypnospace/yelling.png" style="scale: 2.4; margin: 22px 30px;"> <!-- scale and move emote if it doesn't fit -->
</div>
<div class="emoteribbon">
</div>
</div>
<div class="status"> <!-- write status here -->
what, the hell
</div>
</div>
</div>
<div class="page">
<div class="pagetopgradient"></div><div class="pagetop">
<div class="websitetitle"><a href="">Welcome to My Page!</a> <!-- write page title here -->
<div class="sideimg"></div> <!-- edit sideimg with the background-image property -->
</div>
</div>
<div class="pagebottom">
<nav>
<ul class="links"> <!-- links -->
<a href=""><div class="first"><li><div class="highlight"></div>First Link</li></div></a>
<a href=""><div class="second"><li><div class="highlight"></div>Second Link</li></div></a>
<a href=""><div class="third"><li><div class="highlight"></div>Third Link</li></div></a>
<a href=""><div class="third"><li><div class="highlight"></div>Fourth Link</li></div></a>
</ul>
</nav>
<div class="pagebody">
<div class="content"> <!-- write page text here -->
<h1>
Page Title Here!
</h1>
<p>This is the base code for <i>Hypnospace Outlaw Theme</i>. <a href="https://raw.githubusercontent.com/astronautiic/ramthemes/main/hypnospaceoutlaw">The code is available here.</a></p>
<p>Download the assets <a href="https://github.com/astronautiic/ramthemes/raw/main/hypnospace.zip" download>here</a>.
<br>The assets are linked using relative paths. If you don't want to change the image links, follow these instructions:</p>
<ol>
<li>In the Neocities "Home" menu, create a folder named "img"</li>
<li>Inside that folder, create another folder named "hypnospace"</li>
<li>Upload the assets into the "hypnospace" folder</li>
</ol>
<p>See the theme in use <a href="https://ranmpy.neocities.org/themes/hypnospace">here</a>. If you know a better way of coding this, <a href="https://github.com/astronautiic/ramthemes/blob/main/hypnospaceoutlaw">contribute here</a>.</p>
<center><img src="/img/hypnospace/people.png" width="205px" height="175px"></center>
<p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p>
<p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>
<p>Here's how you can add an image:</p>
<img src="/neocities.png">
<p>Here's how to make a list:</p>
<ul>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ul>
<p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p>
<h2>Resources</h2>
<ul>
<li><a href="https://www.spriters-resource.com/pc_computer/hypnospaceoutlaw/">The Spriters Resource</a></li>
<li><a href="https://www.reddit.com/r/neocities/comments/p2ohhf/martindisks_messy_guide_to_having_custom_fonts_on/">How to add custom fonts</a></li>
<li><a href="https://kiunlo.neocities.org/cursors">How to add custom cursors (plus some freebies)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="credit"><a href="https://ranmpy.neocities.org" title="theme by ranmpy">✿</a></div> <!-- credit ^_^ please don't remove -->
</body>
</html>