templates

sol notes: these are all in reverse chronological order, meaning the newest is at the top and the oldest is at the bottom!

these are all free to modify and reuse, don't feel guilty about it :) credit is not needed but appreciated!

these will have screenshots... soon. eventually. OCT 11 2024: yippee

i suggest using phcode or codepen to modify these before upload!

easy peasy v2

sol notes: revamp of easy peasy lemon squeezy. added a ton of comments, so this is great for beginners!

html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>easy peasy v2</title> 
  <link rel="icon" type="image/png" href="/silly.png"> 
  <meta name="description" content="now with extra comments!"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

blue webcore template

sol notes: kill. intermediate-beginner

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>she web on my core till i</title>
  <meta name="description" content="evil viscera">
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="stylesheet" href="scrollbar.css">
  
  <style>
    :root {
      --sin: #e0efff;
      --gray: #7a8893;
    }
    
    @keyframes fadein {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    * {transition: .5s;}
    
    body {
      background-image:url('https://64.media.tumblr.com/e099716f97cef424d66e10f2db6dcaea/tumblr_p3oy0dTEWw1wqlt9mo1_1280.pnj');
      background-color:var(--sin); 
      color:var(--gray);
      animation: fadein 2s;
    }
    
    ::selection {background:var(--gray); color:white;}
    
    h1, h2, h3, h4, h5, h6 {
      font-family:'virale';
      letter-spacing:3px;
      margin:1vh;
    }
    @font-face { font-family: 'virale'; src: url(virale.ttf); }
    
    a {color:dodgerblue;}
    a:hover {color:dodgerblue; letter-spacing:1px; font-style:italic;}
    
    img {max-width:100%; border-radius:25px; border:1px solid var(--gray);}
    
    #hold {
      display:grid;
      gap:.5vh;
      grid-template-columns:1fr 1fr 1fr 1fr;
      grid-template-rows:.5fr 1fr .5fr .1fr;
      grid-template-areas:
        "top top top top"
        "nav main main right"
        "sts main main right"
        "btom btom btom btom";
      background:white;
      border:1px solid var(--gray);
      border-radius:25px;
      box-shadow: inset 0 0 50px var(--sin);
      padding:5px;
    }
    
    #top, #nav, #sts, #main, #right, #btom {padding:5px;}
    #nav, #sts, #main, #right {overflow:auto;}
    
    #top {
      grid-area:top;
      background-image:url('https://64.media.tumblr.com/e099716f97cef424d66e10f2db6dcaea/tumblr_p3oy0dTEWw1wqlt9mo1_1280.pnj');
      background-color:var(--sin);
      background-position:0 -60%;
      border-bottom:1px solid var(--gray);
      border-radius:25px;
      text-align:right;
      color:white
    }
    #top > h1 {
      filter: drop-shadow(.5px .5px 0 var(--gray)) drop-shadow(-.5px 1px 0 var(--gray)) drop-shadow(0 -.5px 0 var(--gray)) drop-shadow(1px 0 var(--gray));
    }
    
    #nav {
      grid-area:nav;
    }
    #nav > a {
      display:block;
      border:1px solid var(--gray);
      border-radius:25px;
      padding:5px;
      margin-bottom:5px;
      overflow:auto;
    }
    
    #sts {
      grid-area:sts;
      border-top:1px solid var(--gray);
    }
    
    #main {
      grid-area:main;
      border-left:1px solid var(--gray);
      border-right:1px solid var(--gray);
    }
    
    #right {
      grid-area:right;
    }
    
    #btom {
      grid-area:btom;
      border-top:1px solid var(--gray);
      border-radius:25px;
      text-align:center;
    }
    
    @media screen and (max-width: 400px) {
      #hold {
        width:96vw;
        height:98vh;
      }
    }
  </style>
</head>
<body>  
  <div id="hold" class="box">
    <header id="top">
      <h1>...webcore!?</h1>
    </header>
    
    <nav id="nav">
      <h3>navigation</h3>
        <a href="#">placehold</a>
        <a href="#">placehold</a>
        <a href="#">placehold</a>
        <a href="#">placehold</a>
        <a href="#">placehold</a>
        <a href="#">placehold</a>
        <a href="#">placehold</a>
        <a href="#">even longer placeholder aaa</a>
    </nav>
    
    <aside id="sts">
      put nekoweb stats, buttons, or whatever else in here.
      <p>kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. </p>
    </aside>
    
    <main id="main">
      <h3>main</h3>
        <p>kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. </p>
    </main>
    
    <aside id="right">
      <img src="https://p16-va.lemon8cdn.com/tos-maliva-v-ac5634-us/oku1YCFTMID664ADqQAQf8EgldQrtWoBJArveC~tplv-tej9nj120t-origin.webp">
        <h3>web master</h3>
          <p style="font-size:small;">pro/nouns + whatever you want to put here!</p>
          
        <p>kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. kitten ipsum silly splink or something. i really need to work on my lorem ipsum skills. </p>
    </aside>
    
    <footer id="btom">
      <a href="https://ultrakill.nekoweb.org">starredhalo</a> // f2u!
    </footer>
  </div>
</body>
</html>

starfruit.html

sol notes: pretty similar to my current homepage, but edited to look more starfruitlike, i guess. three main columns, header, links at the top, etc. your basic template complete with a lot of comments. intended for near-total beginners!

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ST★R FRUIT</title> 
  <meta name="description" content="maiming"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="icon" type="image/png" href="https://xyz.crd.co/assets/images/gallery01/f3a0955c.gif?v=de6feabd"> 
  
  <style> /* this styles everything in your page! */
    :root { /*this holds the variables for some of the stuff seen in the code */
      --accent: #FFD9B9; /* light accent */
      --satur: #d47870; /* dark accent (im not good at naming things) */
      --dark: #5d391a; /* font color */
    }
    
    body { /* styles everything... */
      background-image:url('https://dl.imgdrop.io/file/aed8b140-8472-4813-922b-7ce35ef93c9e/2024/11/07/imaged4ba588a51e3ee98.png'); /* fullsize background image */
      background-size:cover; /* keeps it from looking too bad on computer */
      font-family:'basiic', 'Courier', monospace; /* these are the fonts i used while working, but you can find more at https://fonts.google.com/ !! */
      color:var(--dark); /* font color */
    }
    @font-face { font-family: 'basiic'; src: url(basiic.ttf); } /* imported font */
    
    #contain { /* this is what keeps everything in place */
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr; /* columns are vertical :P */
      grid-template-rows: 1fr 1fr 1fr 1fr; /* rows are horizontal */
      grid-template-areas:
        "e e e e"
        "e e e e"
        "e e e e"
        "e e e e";
      border:solid;
      border-image:url('https://mypillowfort.nekoweb.org/border/52.png') 8 fill round; /* exactly what it says on the tin. don't hotlink though. */
      padding:3px;
      margin-inline:auto; /* keeps it horizontally centered */
      position:absolute;
      left:50%;top:50%;transform: translateX(-50%) translateY(-50%); /* keeps it vertically centered */
      height:85vh;width:65vw; /* height and width */
    }
    
    #inside { /* interior grid */
      grid-area:e;
      display:grid;
      grid-template-columns: .7fr 1fr 1fr .7fr; /* columns are vertical :P */
      grid-template-rows: .1fr .2fr 1fr 1fr 1fr 1fr .1fr; /* rows are horizontal */
      grid-template-areas:
        "n n n b"
        "i i i i"
        "l main main w"
        "l main main w"
        "l main main d"
        "l main main u"
        "f f f f";
      border:2px dotted var(--accent);
      border-radius:20px;
      padding:5px;
    }
    
    #index, #left, #main, #web, #un, #foot { /* gives most elements a border and padding */
      border:1px solid var(--dark);
      padding:5px;
    }
    #left, #main, #web, #un { /* gives these elements the ability to overflow if there's too much content within */
      overflow:auto;
    }
    
    #name { /* text on the top left */
      grid-area:n;
      padding:7px;
    }
    #name h1 {margin:0;}
    
    #buttons { /* fake buttons at the top right */
      grid-area:b;
      text-align:right;
      padding:15px;
    }
    
    #index { /* link area */
      grid-area:i;
      text-align:center;
    }
    #index a { /* link area link styling */
      display:inline-block;
    }
    
    #left { /* left column. */
      grid-area:l;
      border-top:none;
      border-right:none;
    }
    
    #main { /* big center column */
      grid-area:main;
      border-top:none;
    }
    
    #web { /* upper right column */
      grid-area:w;
      border-top:none;
      border-left:none;
    }
    
    #deco { /* middle right column */
      grid-area:d;
      padding:3px;
    }
    
    #un { /* bottom right column */
      grid-area:u;
      border-left:none;
    }
    
    #foot { /* footer */
      grid-area:f;
      text-align:center;
      border-top:none;
    }
    
    a { /* link style */
      color:var(--satur);
      text-decoration: underline var(--accent);
      transition: letter-spacing 1s;
    }
    a:hover { /* link on hover */
      color:inherit;
      letter-spacing: 1px;
      text-decoration:inherit;
    }
    
    img {width:100%;} /* makes all images fit into the grid */
    
    u {text-decoration: underline var(--satur);}

::selection {background:var(--accent);color:white;} /* selected text */
  </style>
</head>
<body>
  <div id="contain">
    <div id="inside">
      <header id="name"><h1>name of your website !!</h1></header>

<nav id="index"> 
        <a href="https://crouton.net">more crouton.net</a> |
        <a href="https://crouton.net">more crouton.net</a> |
        <a href="https://crouton.net">more crouton.net</a> |
      </nav>

<aside id="left">
        <p>you can put a cbox here if you want or something similar :)</p>
        
        <ul>
          <li>item</li>
          <li>this is called an <b>unordered</b> list!</li>
        </ul>
        
        <ol>
          <li>item</li>
          <li>this is called an <b>ordered</b> list!</li>
        </ol>
        
        <p>this is normal text. <i>this is italic text!</i> <b>this is bold text!</b> <u>this is underlined text.</u> <s>this is strikethrough text.</s></p>
      </aside>

<main id="main">
        <p>if you want to edit this, i recommend reading the <a href="https://www.w3schools.com/html/html_basic.asp">w3schools html basics article</a> and/or the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">mozilla dev docs on html</a> or <a href="https://dokode.moe/learn/html_1">dokodemo's html basics</a> before trying to edit so things make sense.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTf9FSWFWdExGJelZ8vzpnvDNCoxKq5T3pBkQ&s">
        <p>asmo</p>
      </main>

<aside id="web">
        <img src="https://placehold.co/600x400" style="border:1px solid var(--dark);">
        <h4 style="margin:0">webmaster</h4>
          <p>pro/nouns + gender + 1-2 sentences of extra info</p>
      </aside>
      
      <aside id="deco">
        <img src="https://biscuit.crd.co/assets/images/gallery42/8cb69120.gif?v=cc1c6dfa"> 
      </aside>

<aside id="un">
        <p>random box for stats, status.cafe, etc...</p>
      </aside>

<footer id="foot">
        <p style="margin:0;">template by <a href="https://ultrakill.nekoweb.org">sol</a>, edited by <b>you!</b></p>
      </footer>
    </div>
  </div>
</body>
</html>

shrine to your blorbo V2

sol notes: updated version of shrine to your blorbo, hence the name. way more complicated and, to be frank, could probably be used as a homepage layout. i used a style tag instead of making separate css this time.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>shrine template v2 (VEE TWO !?)</title>
  <meta name="description" content="HATE. FOR CREATION, I FEEL NOTHING BUT HATE.">
  <link rel="icon" type="image/png" href="https://file.garden/ZkRD3wbiZDsBIZnn/puter.png"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  
  <style> /* don't delete this! */
    :root {
      --accent: #635bbb; /* you should probably choose a color picked from your background so it matches. this'll be for links and stuff like that. */
      /* to use this, type var(--accent) where you would normally put a color! check the link styling for an example :) */
    }
    
    body {
      background-image:url('sky.jpg'); /* replace this with any image url to get a different background image */
      background-attachment:fixed;
      background-size:cover;
      
      font-family: 'cozette', 'pixel', 'Courier', monospace; /* you can import fonts from https://fonts.google.com/ if you wanna choose something else */
      color:black;
      font-size:1.2em; /* roughly equivalent to 16 or 17px i think */
    }

@font-face { font-family: pixel; src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0); } 
    @font-face {font-family: 'cozette'; src:url(CozetteVector.ttf);} /* imported fonts, delete these if not using */
    
    #contain { /* this holds everything inside it! */
      display:grid;
      gap:10px 15px;
      grid-template-columns: .5fr 1fr 1fr .5fr;
      grid-template-rows: .4fr .2fr 1fr 1fr 1fr .4fr;
      grid-template-areas:
        "h h h h"
        "i i i i"
        "l c c r"
        "l c c r"
        "l c c r"
        "f f f f";
      padding:5px;
      margin-inline:auto; /* this keeps it all horizontally centered */
      position:absolute;
      left:50%;top:50%;transform: translateX(-50%) translateY(-50%); /* this keeps it all vertically centered */
      height:85vh;width:75vw; /* this keeps it responsive to different screen sizes */
    }
    
    #head, #inks, #foot {text-align:center;}
    
    #left, #center, #right {
      border:2px solid;
      padding:7px;
      background:white;
      overflow:auto;
    }
    
    #head {grid-area:h;}
    
    #inks {grid-area:i;}
    
    #left {grid-area:l;}
    
    #left a { /* left column's link styling */
      background:var(--accent);
      color:white;
      margin:5px;
      padding:3px;
      display:block;
    }
    #left a:hover { /* left column link style on hover */
      background:white;
      border:1px solid var(--accent);
      color:var(--accent);
      font-weight:bold;
    }
    
    #center {grid-area:c;}
    
    #right {grid-area:r;}
    
    #foot {grid-area:f;}
    
    h1, h2, h3, h4, h5, h6 {
      margin:0; /* removes margins from all header texts */
    }
    
    a {
      color:var(--accent);
      text-decoration:none;
    }
    a:hover {
      color:inherit;
    }
    
    img {width:100%;} /* prevents overflow */
    
    hr { /* hr stands for horizontal ruling. basically it's a divider. */
      border: 1px solid;
      overflow: visible;
      text-align: center;
      margin:none;
    }
    
    .txtborder {color:white;text-shadow: -1px -1px 0 black, 2px -1px 0 black, -1px 2px 0 black, 1px 1px 0 black;} /* replace white and black with any other combos to make a different type of border if you want. */
    
    .tab { /* button styling */
      border:2px solid;
      padding:3px;
      background-color:white;
      font-family:'cozette', 'pixel', 'Courier', monospace;
      font-size:inherit;
    }
    
    .tab:hover {
      background-color:var(--accent);
      color:white;
    }
    
    .scroll { /* le scrollbox */
      overflow: auto;
      border:1px solid var(--accent);
      padding:5px;
    }
    
    ::selection { /* this is what stuff'll look like when you select it */
      background:var(--accent);
      color:white;
    }
    
    body::before {
      content: " ";
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
      z-index: 2;
      background-size: 100% 2px, 3px 100%;
      pointer-events: none;
    } /* scanline effect */
  </style>
  
  <script> /* this is the thing that makes the tabs work. don't delete! */
    function openCity(cityName) {
      var i;
      var x = document.getElementsByClassName("city");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      document.getElementById(cityName).style.display = "block";  
    }
  </script>
</head>
<body>
  <div id="contain">
    <header id="head">
      <h1 class="txtborder">the blorbus blorbo</h1> 
    </header>
    
    <section id="inks"> 
      <button class="tab" onclick="openCity('home')">home</button>
      <button class="tab" onclick="openCity('2')">second</button>
      <button class="tab" onclick="openCity('3')">third</button>
      
    </section>
    
    <aside id="left"> 
      <h2 class="txtborder">navigation</h2>
        <a href="https://crouton.net">crouton.net</a>
        <a href="https://crouton.net">crouton.net (again)</a>
        <a href="https://crouton.net">more crouton.net</a>
        <a href="https://crouton.net">god why is it all crouton dot net</a>
        <a href="https://crouton.net">HUMANITY IS DEAD / HELL IS FULL / BLOOD IS FUEL</a>
      
      <h2 class="txtborder">updates</h2>
        <p>nov 6 '24: coding that thang
    </aside>
    
    <main id="center">
      <img src="https://dl.imgdrop.io/file/aed8b140-8472-4813-922b-7ce35ef93c9e/2024/10/08/2024_10_08_0h5_Klekib5d315794f574571.png" style="height:50%;"> 
      
      <div id="home" class="city"> 
        <p>i love blorbo so freaking much and here's why.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec condimentum dolor, non dignissim velit. Nulla lacus est, efficitur dapibus fringilla eget, gravida eget erat. Integer et ipsum erat. Nunc dignissim nisl et suscipit tempor. Etiam blandit ante lectus, sit amet malesuada tellus mattis sed. Cras euismod, lectus accumsan fringilla vehicula, quam diam ornare ante, vitae pharetra mi augue eget ex. Suspendisse at egestas odio, ac porta risus. Morbi accumsan erat vitae nunc aliquet, eget scelerisque lacus convallis. Donec id mauris posuere, cursus mauris sit amet, lobortis ligula. Nam eleifend, nisl vitae convallis tincidunt, nisl dolor ornare turpis, nec lacinia lacus leo molestie odio.</p> <hr>
        <p>Praesent efficitur congue odio vitae sagittis. Donec aliquet pharetra consequat. Morbi eleifend cursus tortor, eu iaculis est. Suspendisse lorem nibh, ultricies a eros non, cursus convallis elit. Phasellus tincidunt justo nec libero convallis, id posuere risus gravida. Aenean at eros justo. Maecenas eget vestibulum augue, at mattis velit. Cras mollis consectetur velit vel accumsan. Nunc tellus mauris, finibus id lobortis mattis, sagittis a nisi. Pellentesque leo nibh, tristique quis nunc vel, efficitur tempus libero. Duis nunc elit, dictum vitae urna ut, congue fringilla turpis. Suspendisse quis tempor dolor.</p>
        
      </div>
      
      <div id="2" class="city" display="none"> 
        <p>i love them so much i will <span style="background:black">YOUR MOTHER !!!</span></p>
      </div>
      
      <div id="3" class="city" display="none">
        <p>naner</p> <hr>
      </div>
    </main>
    
    <aside id="right"> 
      <h2 class="txtborder">the box</h2>
        <div class="scroll">
          AAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAA AAAAAA AAAAAAAAA  AA  A AAAAA
        </div> <br>
      
      <h2 class="txtborder">webmaster</h2>
        <div style="border:1px solid var(--accent);padding:5px;"> 
          <img src="https://media.tenor.com/eZHAeJvePwAAAAAM/ultrakill-v1-ultrakill.gif">
          <p><i>y/n,</i> pro/nouns, 1-2 sentences of info ^_^</p>
        </div>
    </aside>
    
    <footer id="foot">
      <p class="txtborder" style="margin:0;">template by <a href="https://ultrakill.nekoweb.org">sol</a>, edited by <b>you!</b></p>
    </footer>
  </div>
</body>
</html>

shrine to your blorbo

sol notes: pretty simple. includes javascript tabs!! super cool!!!

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>shrine</title>
        <link rel="stylesheet" href="i_forgor.css"/>
        <link href="https://fonts.cdnfonts.com/css/vcr-osd-mono" rel="stylesheet">
        <link rel="icon" type="image/png" href="https://pixels.crd.co/assets/images/gallery23/fb8555af.gif?v=99d3974e">
        <meta name="description" content="i can be normal about stuff">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script>
            function openCity(cityName) {
              var i;
              var x = document.getElementsByClassName("city");
              for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";  
              }
              document.getElementById(cityName).style.display = "block";  
            }
        </script>
    </head>
    <body>
        <main>
            <div class="hi">
                <div class="m">
                    <h1>shrine to your blorbo</h1>
                        <button class="tab" onclick="openCity('home')">home</button>
                        <button class="tab" onclick="openCity('2')">2</button>
                        <button class="tab" onclick="openCity('3')">3</button>
                        <img src="https://dl.imgdrop.io/file/aed8b140-8472-4813-922b-7ce35ef93c9e/2024/10/08/2024_10_08_0h5_Klekib5d315794f574571.png" style="width:100%;height:100px;">

<div id="home" class="city">
                          <h2>this is my shrine to my blorbo</h2>
                          <p>my blorbo's name is bleeblus blonky and i love them. here's why.</p>
                        </div>

<div id="2" class="city" style="display:none">
                          <h2>2</h2>
                          <p>second tab.</p> 
                        </div>

<div id="3" class="city" style="display:none">
                          <h2>3</h2>
                          <p>third tab.</p>
                        </div>
                </div>
                
                <footer>
                    here's my footer.
                </footer>
            </div>
        </main>
    </body>
</html>

css

body {
background-color:black;
font-family: "VCR OSD Mono";
color:white;
font-size: 15px;
}

main {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". hi hi hi hi ."
    ". hi hi hi hi ."
    ". hi hi hi hi ."
    ". hi hi hi hi ."
    ". hi hi hi hi .";
  width:500px;
  height:500px;
  margin:auto;
  position:relative;
}

.hi {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr .1fr;
  gap:5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    ". m m m m ."
    ". m m m m ."
    ". m m m m ."
    ". m m m m ." 
    ". m m m m ."
    ". m m m m ."
    "f f f f f f";
  width:500px;
  height:500px;
}

.m {
    grid-area:m;
    border:1px solid red;
    padding:5px;
}

footer {
  grid-area:f;
  border:1px solid red;
  padding:5px;
}

h1, h2, h3 {
  font-weight:normal;
  text-align: center;
}

h1 {
  font-size: 25px;
}

h2 {
font-size:20px;
}

h3 {
font-size:17px;
}

section {
  border:1px solid white;
  margin:10px;
  padding:5px;
}

.tab {
    background-color: black;
    color:white;
    font-weight:bold;
    border:1px dotted white;
    border-radius:10px 10px 0px 0px;
    border-bottom:none;
}

p {text-indent:15px;}

a:link {
	text-decoration: underline dotted;
	color: inherit;
}
a:visited {
	text-decoration: underline dotted;
	color: inherit;
}
a:hover {
	text-decoration: none;
  color: #fff200;
  position: relative; bottom: 1.5px;
}
a:active {
	text-decoration: none;
	color:white;
	font-weight: normal;
}

::selection {
  color:#fff200;
}

.flex {
	display:flex;
	flex-direction: row;
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

easy peasy lemon squeezy code

sol notes: it *should* be easy peasy lemon squeezy... it remains to be seen if it truly is...

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>put a title here</title>
    <link rel="icon" type="image/png" href=""> 
    <link href=".css" rel="stylesheet" type="text/css" media="all"/> 
  </head>

<body>
    <main>
        <p style="position:absolute;bottom:150px;"><b>waow how did this get here?? the answer is simple: "position:absolute" !!</b></p> 
        <div class="hi">
            <div class="t">
                <b>this is a header! you can put a marquee here if you want, or maybe an image.</b>
            </div>

<div class="one">
                here's the first column! <a href="">here's a link!</a> <br>
                <ul> 
                    <li>list item</li>
                    <li>another list item</li>
                </ul>

<ol> 
                    <li>numero uno...</li>
                    <li>numero dos...</li>
                </ol>
            </div>

<div class="two">
                here's the second column! it's pretty thin!
            </div>

<div class="three">
                here's the thirst column! here's an image! (i scaled it down)<br> <img src="https://file.garden/ZkRD3wbiZDsBIZnn/angel.png" style="width:75%">
            </div>

<div class="f">
                this is a footer! you can put a marquee here if you want :)
            </div>
        </div>
    </main>
  </body>
</html>

css

body {
  background-color:white;
  /* background-image: url(); you can put an image link here too! */
  font-family: 'Courier New', Courier, monospace;
  color:black;
  font-size: 15px;
}

.hi {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  gap:5px 5px;
  grid-template-areas:
    "t t t t t"
    "one one two three three"
    "one one two three three"
    "one one two three three"
    "one one two three three"
    "f f f f f";
  width:500px;
  height:500px;
}

.t, .one, .two, .three, .f {
  border:1px solid black;
  padding:3px;
  overflow:auto;
}

.t {
  grid-area:t;
  background-image: url(https://file.garden/ZkRD3wbiZDsBIZnn/v1_torment.gif);
  background-position:5%;
}

.one {
  grid-area:one;
}

.two {
  grid-area:two;
}

.three {
  grid-area:three;
}

.f {
  grid-area:f;
}

h2 {
font-size:20px;
font-weight:normal;
text-align: center;
}

h3 {
font-size:17px;
font-weight:normal;
text-align: center;
}

p {text-indent:15px;}

b {
  color:white;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  /* delete this if you don't want your bold text to have a black outline. */
}

a:link {
	text-decoration: underline;
	color: inherit;
}
a:visited {
	text-decoration: underline;
	color: inherit;
}
a:hover {
	text-decoration: none;
  color: blue;
  position: relative; bottom: 1.5px;
}
a:active {
	text-decoration: none;
	color:white;
	font-weight: normal;
}

::selection {
  color:blue;
  /* this is the style for selected text */
}

terminal code

sol notes: modified version of my old layout. the css doesnt work LMAO sorry

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>terminal</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="all"/>

</head>

<div class="container">
        <div class="box" id="g0">
            YOUR WEBSITE NAME
        </div>

<div class="box" id="g1">
            <h2>level select</h2>
                <ul>
                    <a href="/"> <li>home</li> </a>
                    <a href="/"> <li>about me</li> </a>
                    <a href="/"> <li>blog</li> </a>
                    <a href="/"> <li>credits</li> </a>
                        <hr>
                    <a href="/"> <li>fandom</li> </a>
                        <ul>
                            <a href="/"> <li>something you like</li> </a>
                        </ul>
                        <hr>
                    <li>"original content"</li>
                        <ul>
                            <a href="/"> <li></li> </a>
                            <a href=""> <li></li> </a>
                            <a href="/"> <li></li> </a>
                            <a href="/"> <li></li> </a>
                            <a href=""> <li></li> </a>
                        </ul>
                </ul>
        </div>

<div class="box" id="g2">
            <h2>main :3</h2>
                <p>lorem ipsun blab blah</p>
                <hr>
            <h2>chat box</h2>
                <p>put your cbox here!</p>
        </div>

<div class="box" id="g4">
             <h2>webrings</h2>
        </div>

<div class="box" id="g5">
            <h2>extra box</h2>   
        </div>

<div class="box" id="g6">
            <h2>to do...</h2>
                <div class="scroll" style="height:150px;overflow:auto;">
                    <ul>
                        <li>finish homepage</li>
                    </ul>
                </div>
        </div>

<div class="box" id="g8">
            <h2>what are they thinking rn??</h2>
                put ur status.cafe here!!
        </div>

<div class="box" id="g9">
            <h2>stats</h2>
            	<script src="statLoad.js"></script>
                <span id="created"></span>
                <span id="updated"></span>
                <span id="visitors"></span>
                <span id="followers"></span>
                <p>(shoutout to those on the nekoweb discord for helping me out!!) (note: this only works if you have nekoweb)</p>
        </div>

<div class="box" id="g10">
            <marquee onmouseover="this.stop();" onmouseout="this.start();" scrollamount="15;">
                put your buttons here or something
            </marquee>
        </div>

<div id="footer">
            <center> <p> template by sol starredhalo // the meowing meower </p> </center>
        </div>
    </div>
  </body>
</html>

css

</head>

<div class="container">
        <div class="box" id="g0">
            YOUR WEBSITE NAME
        </div>

<div class="box" id="g4">
             <h2>webrings</h2>
        </div>

<div class="box" id="g5">
            <h2>extra box</h2>   
        </div>

<div class="box" id="g8">
            <h2>what are they thinking rn??</h2>
                put ur status.cafe here!!
        </div>

<div id="footer">
            <center> <p> template by sol starredhalo // the meowing meower </p> </center>
        </div>
    </div>
  </body>
</html>