☆oudkee's corner☆

here is the code for the template! please be careful to read the notes i've left throughout. it's been written under the assumption that you know very basic html/css or at least know how to look up most things. don't be afraid to google specific elements and tags in detail if you want more options for customization.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 

<!-- Your website title goes in <title> -->
<title>☆oudkee's corner☆</title>

<!-- Favicon goes here, image will render 16x16 -->
<link rel="icon" type="image/x-icon" href="https://oudkee.neocities.org/sitewide/star.gif">


<!-- Link to an image here for decorative floating image on the side of your main theme, you can mess around with the values "left", "right", "top", and "bottom" as well as the number value. The z-index value controls whether your image will be on top of or behind other elements.  -->
<div style="position:fixed;z-index:-98;left:0px;bottom:0px;"><img src="https://oudkee.neocities.org/pikmin/pplanet.gif"></div>

<!-- Same as above, but generates a random image from the script below  -->
<div style="position:fixed;z-index:10;right:10px;bottom:0px;"><img id="image"></div> 

<!-- This <script> dictates which image will be randomly generated when you load the page. Link to the images in the var images = bracket and don't forget to add a comma after each separate image  -->
<script type="text/javascript"> 
var images = [
    "https://oudkee.neocities.org/sitewide/yohane.gif",
    "https://oudkee.neocities.org/tutorials/husband200px.gif",];
function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image').src = images[x];
}
randImg();
</script>


<style>

/* :root in this instance controls what colours are used with what keywords, making it easy to change your colour scheme quickly. if you need to do a quick swap without changing much else, my code's default #7 is purple, #D is pink, #F is off-white */
:root {
  --border-bg:#7B7B94;
  --selection-bg:#7B7B94;
  --hover-bg:#7B7B94;
  --content-bg:#D6ADB5;
  --span-bg:#F9F5E9;
}

/* For scrollbar. not supported by firefox */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--border-bg); }
::-webkit-scrollbar-thumb{ background:var(--content-bg); }

body {     
/* replace url with your own */
  background-image: url("https://oudkee.neocities.org/sitewide/starsky.gif");
/* attachment: fixed keeps background static when you scroll. Look up background-attachment css options for other ideas */
  background-attachment: fixed;
/* background colour only shows if you don't have an image set or loaded */
  background-color:var(--span-bg);
/* 14 to 18 is a good enough font size */
  font-size:16px;
/* i use bold text to keep things spicy */
  font-weight: bold;
/* color ONLY controls font colour */
  color:#302C30;
/* i don't remember what position does. maybe dont touch it */
  position: relative;
}
/* <span> doesn't inherently do anything by itself, I use it to make text more readable on patterned backgrounds */
span {
  background-color:var(--span-bg);
}

/* img block makes images display on the next line after anything else. use the <inline> tag to display images next to each other in a line */
img {
  display: block;
  margin: 0;
}
inline img{
  display: inline;
  vertical-align: bottom;
}

/* a options control how your links look */
a:link, a:visited {
  color: #302C30;
  text-decoration: none;
}
a:hover, a:active {
  background-color:var(--hover-bg);
  color:var(--span-bg);
}

/* pretty straightforward, when you highlight text with a mouse this is usually blue on default */
::selection {
  background:var(--selection-bg);
  color:var(--span-bg);
}

table, th, td {
/* table border in html can always be set manually */
  border: 1px var(--border-bg);
}

/* dont touch this i dont know what it does */
.flex {
  display:flex;
  justify-content: center;
}


/* smaller sidebar */
aside {
  margin-top:10px;
  width:300px;
/* change margin-right to margin-left if you want the small sidebar to be on the right side. */
  margin-right:10px;
}


/* main content area */
main {
  margin-top:10px;
  width:650px;
}

/* content areas for your smaller sidebar */
section {
  border:5px solid var(--border-bg);
  margin-bottom:10px;
  background-color:var(--content-bg);
}

/* content areas for your main content area */
article { 
  border:5px solid var(--border-bg);
  margin-bottom:10px;
  background-image: url("https://oudkee.neocities.org/161/sentretbg300.png");
  background-attachment: fixed;
  background-color:var(--content-bg);
}

/* just a lil way to highlight text, use <subtitle> */
.subtitle {
  background-color:var(--content-bg);
  text-align:center;
}

/* linkbutton and linkbutton:hover are a string i use to make link buttons distinguishable from generic links in paragraphs */
.linkbutton {
  background-color:var(--content-bg);
  text-align:center;
  font-size:16px;
  padding:1px;
}
.linkbutton:hover {
  background-color:var(--hover-bg);
  color:var(--span-bg)
}
footer {
  width:936px;
  margin-bottom:10px;
  border:5px solid var(--border-bg);
  background-color:var(--content-bg);
/* Use padding: value to keep images and text from touching the sides of a content box */
  padding: 10px;
}
</style>


</head>

<!-- so my <body> tag only looks like this because i kept having this weird issue of everything being spaced in 10 pixels by default and it was messing up my overlays and everything -->
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<div class="container">
  <div class="flex">

<!-- If you want your small sidebar on the left, use <aside> <section> before <main> and <article>. For small sidebar on the right, use <main> <article> <aside> <section>. Make sure to edit the margin-right property in the aside <style> as needed.  -->

<aside>
<section>
<!-- you can use link targets to open a link in a designated frame, scroll down to the <main> section for more frame tips  -->
        <a href="https://oudkee.neocities.org/not_found.html"  target="frame">
        <div class="linkbutton">
        <img align="left" src="https://oudkee.neocities.org/sitewide/ministar.gif">
        <img align="right" src="https://oudkee.neocities.org/sitewide/ministar.gif">
        frame test link - 404
        </div>
        </a>

        <a href="https://oudkee.neocities.org/tutorials.html">
        <div class="linkbutton">
        <img align="left" src="https://oudkee.neocities.org/sitewide/ministar.gif">
        <img align="right" src="https://oudkee.neocities.org/sitewide/ministar.gif">
        other tutorials
        </div>
        </a>

        <a href="https://oudkee.neocities.org/index.html">
        <div class="linkbutton">
        <img align="left" src="https://oudkee.neocities.org/sitewide/ministar.gif">
        <img align="right" src="https://oudkee.neocities.org/sitewide/ministar.gif">
        oudkee's website
        </div>
        </a>
</section>

<section>
test box to display content. you may put whatever you like in your sidebar - text, images, music, ad so on. <inline><img src="https://oudkee.neocities.org/sitewide/saskatchewan.gif" width=20px></inline>
</section>

<section>
<div align="center">
content here
</div>
</section>

    </aside>

    <main>
       
        <article>
<div align=center>
<span>
content here
</span>
<br>
<br>
</div>
      </article>

<article>
<!-- iframe is a frame you can load another webpage into so people don't have to leave your main page. if you want to use music on your website this makes it less annoying to navigate because you won't have to worry about your music stopping, BUT! you'll need to keep the html on your frame targets simple. change contact.html to whatever you want your default frame display to be. adjust height in the iframe tag as needed -->
      <iframe src="https://oudkee.neocities.org/contact.html" width="100%" height="300px" frameborder="0" scrolling="yes" name="frame" id="mainframe"><!--iframeDisplay-->
            </iframe>
      </article>   
        
    </main>


</div>
</div>
<div align=center>

    <footer>
    <div align=center>
content for footer goes here
    </div>
    </footer>
    </div>
</body>
</html>