CODE

FREE TO USE CODE

⇐ Go back!

Hello, hello! This is my code page. Here I'll share all of my website's code available as templates, all free to use!
You can do whatever you want with the code, all I ask is that you do not remove the credit (you can move it to a dedicated "credit" page) and that you do not sell it. Other than that, my code is your oyster.
I'm very much still starting out, but constructive criticism and feedback is very much appreciated! Any questions can be directed to believeinthenet@protonmail.com.

"BEASTLY V.1.0" TEMPLATE (ADDED 15/09/2025)

A screenshot a webpage. It's a simplistic and long display with a background on the left.

RESPONSIVE. COPY + PASTE BELOW! (Pastebin Mirror)
A nice and simple change of pace from my previous page! This one is great for displaying lots of text and can be used for a lot of different thing! Like a blog, writing, or anything, really!
The code could be simpler but my brain farted so I made something slightly more complicated than it needed to be. Whoops!

<!DOCTYPE html>
<html>
  <head>
        
  <style>
  
    /* "BEASTLY V.1.0" Template, send any questions to believeinthenet@protonmail.com! Powered by long bass guitar solos. */
  
  /* Style body and background here.
  Background displays on the left */
body {
    padding:0;
    padding-right:0px;
    margin:0;
    background: black;
    background-image: url('BACKGROUND URL');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    font-family: "ms ui gothic";
    font-size:16px;
}
    
/* This wraps around .text and makes it so the background is black. I just realized while typing this that I could've just done background-color. I may be stupid!
At least with this weird mess you can set a border I guess...? */
.container {
  padding: 0px;
  margin: 0px;
  vertical-align: top;
  margin-left: auto; 
  margin-right: 0;
  text-align: right;
  background: black;
  color: white;
  max-width: 1393px;
}

/* You can change the look of the main text here.
This is for setting the width of the text area. */
.text {
  padding: 0px;
  margin: 0px;
  vertical-align: top;
  text-align: left;
  background: black;
  color: white;
  max-width: 700px;
}

/* Changes the .title text. */
.title  {
  color: rgba(223, 0, 43, 1);
  font-family: "Mael";
  font-size: 80px;
}

/* Changes the look of the div that contains the links. 
The background is a gradient, you can change it here.*/
.navDiv {
  margin: 0px;
  padding: 0px;
  background: #600010;
  background: linear-gradient(360deg,rgba(96, 0, 16, 1) 45%, rgba(223, 0, 43, 1) 90%);
  text-align: center;
  border-radius: 30px;
  padding-bottom: -20px;
}

/* Changes the look of visited links */
a:visited {
  color: #f9d73b;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

/* Changes the look of links. */
a:link {
  color: #f9d73b;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

/* Style h2 here. */
h2 {
  font-size:18px;
  font-family:"ms gothic";
  padding-left: 20px;
  color: rgba(223, 0, 43, 1);
}

/* Style paragraphs here. */
p {
  padding-left: 10px;
  padding-right: 10px;
}
  
/* You can add custom fonts here.
"font-family" is the name you denote to your font, it can be anything, it doesn't have to match the file name.
I recommend placing the font in a font sub-folder on your NeoCities dashboard. */       
    @font-face {
      font-family: "CUSTOM FONT";
      src: url(FONT URL);
    }

</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
      <link rel="icon" type="image/x-icon" href="FAVICON URL">
  </head>
  
  
<div class="container">

<br>

<div class="title"> TITLE </div>

</div>

<br>

<p style="text-align: center"> Template by <a href="https://recarmdra.neocities.org/">recarmdra</a>. </p>

<br>

</div>

</center>

</div>

</body>
</html>

"TREASURE GARDEN V.1.0" TEMPLATE (ADDED 15/09/2025)

A screenshot a webpage. There are five boxes to display information in.

RESPONSIVE. COPY + PASTE BELOW! (Pastebin Mirror)
My most complicated template so far! This one utilizes grid to achieve it's look. One of the grid contains a tab that you can use to toggle different sections, and the sidebar image rotates on hover!
Please forgive any messiness, but everything should be properly explained!

<!DOCTYPE html>
<html>
  <head>

/* Style the .grid here. Changes made here reflect across all elements within the .grid. */
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
max-width: 1200px;
font-family: "ms ui gothic";
margin-top: 4.3%
}

/* Style the .about grid here. */
.about { 
  grid-area: 1 / 1 / 3 / 2; 
  background-color: #F4EBFA;
  border: 1px solid #9646CF;
  text-align: left;
  }
  
  /* Style <ul> here. You can change the bullet point. */
ul {
    padding: 0px;
    margin: 0px;
    margin-left: 25px;
    margin-right: 10px;
    list-style-type:"»"
  }

/* Style the .likes grid here. */
.likes { 
  grid-area: 1 / 2 / 2 / 3; 
  background-color: #F4EBFA;
  border: 1px solid #9646CF;
  text-align: left;
  }

/* Style the .dislikes grid here. */
.dislikes {
grid-area: 1 / 3 / 2 / 4; 
background-color: #F4EBFA;
border: 1px solid #9646CF;
text-align: left;
}

/* Style the wide .main grid here. */
.main { 
  grid-area: 2 / 2 / 3 / 4; 
  background-color: #F4EBFA;
  border: 1px solid #9646CF;
  }
  
/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #79EDBB;
}

/* Style the buttons inside the tab */
.tab button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-family:"ms gothic";
  font-weight: bold;
  text-align: left;
  margin: 0px;
  padding: 5px;
  color: white;
  background-color: #47E6A1;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #98F1CA;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #1FE08C;
}

/* Style the tab content */
.tabcontent {
  text-align: left;
  padding: 10px;
  padding-top: 0px;
  max-height: 300px;
  overflow-y: scroll;
  scrollbar-color: #1FE08C #79EDBB;
  scrollbar-width: thin;
}

/* Style the .links grid here. */
.links { 
  grid-area: 1 / 4 / 3 / 5; 
  background-color: #F4EBFA;
  border: 1px solid #9646CF;
  text-align: left;
  } 
  
  
  /* Changes the text that's placed on top of the header 
"text-shadow" is used to make a border, you are able to change the color.
You may have to change "top" and "left" depending on what font you're using. */
.title  {
  color: #79EDBB;
  font-family: "Graffiti";
  font-size: 100px;
  transform: rotate(-0.03turn);
  text-align: left;
  position: absolute;
  left: 280px;
  top: 20px;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

/* This is the div that is used for the .grid titles, you can change the gradient here. */
.info {
  margin: 0px;
  padding: 0px;
  background: linear-gradient(180deg,rgba(150, 70, 207, 1) 45%, rgba(235, 189, 255, 1) 90%);
}

/* This is what gives the icon a rounded look. The animation that plays when you stop hovering over it is also here. */
  .icon {
border-radius: 150px;
transition: transform .7s ease-in-out;
}

/* This is what makes the icon spin when hovering over it. */
.icon:hover {
  transform: rotate(360deg);
}

/* Small div that displays below the main div. */
.bottom {
    background-color: #9646CF;
    max-width: 200px;
    color: white;
    text-align: center;
    border: 1px solid;
    border-color: white;
    font-family: "ms ui gothic";
    font-size:14px;
  
}
  
  
/* This media query is responsible for making the website responsive. */
  @media only screen and (max-width: 600px) {
  .about {grid-area: 1 / span 5;}
  .likes {grid-area: 2 / span 5;}
  .dislikes {grid-area: 3 / span 5;}
  .main {grid-area: 4 / span 5;}
  .links {grid-area: 5 / span 5;}
}

/* This removes the .title when on mobile devices. */
@media (max-width: 600px) {
  .title {
    display: none;
  }
}

/* Change background here. */
body {background-image: url('BACKGROUND URL');
            background-repeat: no-repeat;
            background-attachment: fixed;  
            background-size: cover;
}

/* You can add custom fonts here.
"font-family" is the name you denote to your font, it can be anything, it doesn't have to match the file name.
I recommend placing the font in a font sub-folder on your NeoCities dashboard. */       
    @font-face {
      font-family: "CUSTOM FONT";
      src: url(CUSTOM FONT URL);
    }
    
    
/* Style h1 here */
  h1 {
    font-size:25px; 
    font-family:"ms gothic";
    margin: 0px;
    padding: 0px;
    color: white;
  }
  
  /* Style h2 here */
h2 {
  font-size:18px;
  font-family:"ms gothic";
  padding-left: 20px;
}
  
  /* You can change the look of links here. */
a:link {
  color: #79EDBB;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

/* Changes the look of visited links */
a:visited {
  color: #79EDBB;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

<div class="title">TITLE</div>

<div class="info"> <center> <h1>TITLE</h1> </center> </div>

</center>

</div>

<div class="likes"> 
<div class="info"> <center><h1>TITLE</h1></center> </div>

</div>

<div class="dislikes"> 
<div class="info"> <center><h1>TITLE</h1></center> </div>

</div>

<div class="main"> 
<div class="info"> <h1>TITLE</h1> </div>
<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Videogames')" id="defaultOpen">TAB 1</button> 
  <button class="tablinks" onclick="openTab(event, 'Animanga')">TAB 2</button>
  <button class="tablinks" onclick="openTab(event, 'Music')">TAB 3</button>
  <button class="tablinks" onclick="openTab(event, 'Other')">TAB 4</button>
</div>

<div id="Videogames" class="tabcontent">
Content.
</div>

<div id="Animanga" class="tabcontent">
Content.
</div>

<div id="Music" class="tabcontent">
Content.
</div>

<div id="Other" class="tabcontent">
Content.
</div>

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

</script>
</div>

<div class="links"> 
<div class="info"> <center> <h1>TITLE</h1> </center> </div>

</div>

<br>

<div class="bottom">
Template by <a href="https://recarmdra.neocities.org/">recarmdra</a>.
</div>

</center>

</body>
</html>

"SANCTUARY V.1.0" TEMPLATE (ADDED 14/09/2025)

A screenshot of a simple homepage with a sidebar on the left

RESPONSIVE. COPY + PASTE BELOW! (Pastebin Mirror)
Another really basic theme! This one utilizes grids and has an image on the bottom right. Initially, the image was animated, but the animation div covered up the whole page, expect an update as soon as I fix that.
Has some minor jank when it comes to displaying on mobile as the whole grid is indented, but looks just fine!

<!DOCTYPE html>
<html>
  <head>
        
  <style>
  
  /* Sanctuary V.1.0 Template, send any questions to believeinthenet@protonmail.com! Powered by 2014 Tumblr discourse. */
  
  /* Style body and background here.
  Background is set to be a gradient by default. */
body {
    padding:0;
    padding-left:50px;
    margin:0;
    background: #020024;
    background-image: linear-gradient(0deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(91, 247, 252, 1) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: "ms ui gothic";
    font-size:16px;
}

/* Style your paragraphs here. */
p {
  padding: 10px;
  margin: 10px;
}
  
  /* Style the grid here.
  Changes made on .grid reflect on both .side and .main.*/
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
border-left: 6px solid;
border-right: 6px solid;
border-color: #5bf7fc;
background: #0a0d13;
color: #f0fbff;
padding: 0px;
margin: 0px;
vertical-align: top;
max-width:1050px;
}

/* Style sidebar here. */
.side { 
grid-area: 1 / 1 / 2 / 2;
background-color: #696969;
border-right: 1px solid;
border-color: #5bf7fc;
height: 100%;
}

/* Style the main page here. */
.main { 
grid-area: 1 / 2 / 2 / 6;
}

/* Style the text displayed at the top of .main here */
.title  {
  max-width: 100%;
  color: #5bf7fc;
  font-family: "NGage";
  font-size: 4.17vw;
  padding-left: 35px;
}

/* This positions the image on the bottom right. */
.bottomRight {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* This changes the look of the horizontal line. */
hr {
  color:#5bf7fc;
}

/* Customize lists here. */
ul {
  list-style-type: "▶";
  font-size: 20px;
}

/* You can change the look of links here. */
a:link {
  color: #2aebb7;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

/* Changes the look of visited links */
a:visited {
  color: #2aebb7;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

/* Style h1 here */
  h1 {
    font-size:25px; 
    font-family:"ms gothic";
    text-align: center;
  }
  
  /* Style h2 here */
h2 {
  font-size:18px;
  font-family:"ms gothic";
  padding-left: 20px;
}

/* You can add custom fonts here.
"font-family" is the name you denote to your font, it can be anything, it doesn't have to match the file name.
I recommend placing the font in a font sub-folder on your NeoCities dashboard. */       
    @font-face {
      font-family: "CUSTOM FONT";
      src: url(FONT URL);
    }
    
    
/* This makes it so .side is displayed below .main when on mobile devices. */
@media only screen and (max-width: 600px) {
  .main {grid-area: 1 / span 5;}
  .side {grid-area: 2 / span 5;}
}

/* This removes the image on the bottom right when on mobile devices. */
@media (max-width: 600px) {
  .bottomRight {
    display: none;
  }
}

</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CODE</title>
      <link rel="icon" type="image/x-icon" href="FAVICON URL">
  </head>
  
  
  <img class="bottomRight" src="BOTTOM RIGHT IMAGE URL" style="max-width:20%">
  
  <div class="grid">
  
<div class="side">
<center> <h1 style="margin-top:57px;"> NAVIGATION </h1> </center>
<hr>

<div class="main">
<div class="title"> TITLE </div>
<hr>

<h1> SECONDARY TITLE </h1>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nulla sed libero hendrerit consequat eu sed metus. Aliquam erat volutpat. Fusce placerat est at arcu varius ultricies. Duis dapibus feugiat lacus, porta ultrices nunc lacinia quis. Integer vitae gravida magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae neque sed magna pellentesque faucibus a ut ex. Mauris molestie metus quis nulla tincidunt tempor. Proin volutpat quam non felis sagittis viverra. Quisque a mauris justo. Morbi efficitur lectus orci, sit amet pellentesque arcu semper ut. Praesent bibendum justo at nisl vulputate suscipit. Etiam auctor lobortis blandit. In hac habitasse platea dictumst.</p>

<p> Etiam ultricies sit amet leo ut interdum. Vivamus tincidunt egestas mattis. Vivamus sed consequat risus. Curabitur nec tempor nibh, quis blandit nunc. Sed congue viverra eleifend. Sed molestie blandit urna, iaculis fermentum ex consectetur quis. Aliquam lobortis id nibh ac commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae nunc ac urna blandit finibus. Aliquam a commodo nisl, eget molestie nisl. Phasellus fermentum tortor lectus, ac pellentesque diam dictum ut. Fusce molestie orci id nisl venenatis, id efficitur nunc vehicula. Suspendisse sollicitudin posuere justo. Mauris in iaculis nunc.</p>

<p> Nunc at sem tempus, egestas turpis a, iaculis est. Nam in ligula ut libero pretium gravida. In hac habitasse platea dictumst. Etiam commodo, justo vestibulum eleifend dapibus, enim odio porttitor leo, eu venenatis sapien mauris vel dui. Ut vel sodales ipsum. Quisque imperdiet nisl quis dictum tempus. Nam sagittis bibendum ultricies.</p>

<p> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mattis consequat mi, sit amet rutrum lectus. Aliquam ornare consectetur velit vel lacinia. Vivamus consectetur vestibulum felis, eu fringilla risus scelerisque sed. Phasellus accumsan mollis elit non iaculis. Cras vehicula vulputate egestas. Pellentesque sit amet dolor mi. Nulla laoreet finibus libero sed ultricies. Proin maximus viverra auctor. Proin finibus in sem id dictum. Vivamus convallis eget ex ac consequat. Aliquam ut blandit sapien, eu viverra arcu. Proin metus mauris, lacinia vitae efficitur id, semper sollicitudin turpis. Pellentesque auctor, lorem eget accumsan iaculis, erat metus sodales metus, in consequat quam augue ac magna. Ut tincidunt blandit ornare.</p>

<p> Sed sagittis urna et risus condimentum, non sollicitudin odio maximus. Vivamus non varius ipsum, sit amet rhoncus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ex lacus, tincidunt et blandit vitae, tristique sed magna. Aliquam ultrices nunc a neque rhoncus placerat. Phasellus at est orci. Nam in pharetra justo. Mauris egestas blandit velit, ut mattis ipsum consectetur et. Nunc non accumsan leo. Vestibulum in dui id justo tempus viverra non euismod dolor. Nam sagittis, libero ut elementum vulputate, turpis lacus rhoncus turpis, et varius lacus dui id ipsum.</p>

<p> Aliquam erat volutpat. Duis consequat sem non dictum imperdiet. Mauris at interdum dui. Nulla pharetra molestie tellus blandit tincidunt. Aliquam rutrum commodo dignissim. Integer ultrices suscipit mauris, in varius nibh ullamcorper sed. Vivamus id tellus risus. Ut placerat varius neque, sed placerat enim pharetra ac. Suspendisse sed gravida lectus, sit amet lobortis mauris. Sed at maximus lectus, pulvinar ultricies est. Praesent nec ante quis metus aliquet semper quis vitae erat. Vivamus scelerisque facilisis neque, vitae tincidunt purus.</p>

<p> Cras eget ex tempus, sollicitudin felis a, cursus quam. Ut rhoncus a magna ullamcorper cursus. Mauris bibendum euismod convallis. Morbi aliquet fermentum nulla ac ornare. Sed laoreet malesuada augue, id facilisis nisl faucibus in. Mauris euismod neque lorem, eget elementum risus ullamcorper sed. Morbi egestas ligula libero, ut maximus mi posuere feugiat. Phasellus sit amet arcu porttitor odio efficitur iaculis non non nisl.</p>

<p> Nulla finibus elit vitae justo cursus, ac porttitor nisi iaculis. Vestibulum dictum tortor arcu, ac fringilla tortor malesuada rhoncus. Nulla ut urna ullamcorper, auctor dolor eu, bibendum dolor. Nam vel placerat dolor. Vivamus at mi sem. Curabitur sed tortor varius risus placerat commodo. Mauris fermentum neque quis ultrices venenatis.</p>

<p> Nunc fringilla commodo ligula, vitae luctus purus pulvinar vel. Quisque id ipsum sit amet nisi laoreet posuere quis eu justo. Quisque eget orci molestie, pretium odio sed, fringilla ipsum. Donec id sapien non neque ullamcorper euismod ut scelerisque quam. Ut rutrum justo enim, a ultrices quam eleifend varius. Suspendisse dapibus odio ac nibh ornare, eu porttitor lacus lobortis. Fusce volutpat aliquam quam. Maecenas eu convallis mauris, vel dignissim elit. Pellentesque elementum nulla eget consectetur tristique. Praesent a augue vel dui hendrerit imperdiet id sit amet dui.</p>

<p> Mauris pulvinar eu ipsum eget consequat. Nulla facilisi. Integer tellus nulla, sollicitudin id scelerisque id, malesuada sed sem. Donec accumsan ante id felis rhoncus placerat. Aenean sit amet feugiat erat. Morbi feugiat non velit ac tempus. Sed ut malesuada est, a tempus ante. Ut hendrerit leo ac feugiat faucibus. In vel libero eleifend, luctus dui id, facilisis ex. </p>

<br>

<center> <p>Template by <a href="https://recarmdra.neocities.org/">recarmdra</a>.</p> </center>

</div>
</div>

</body>
</html>

"VIRTUOSO V.1.0" TEMPLATE (ADDED 14/09/2025)

A screenshot of a simple homepage with a rounded header image on top.

RESPONSIVE. COPY + PASTE BELOW! (Pastebin Mirror)
I'm quite proud of this one! A basic template with a nice and rounded header image that can be used for a blog, writing pages, and more!
Make sure that you properly resize your image if you want it to be responsive.

<!DOCTYPE html>
<html>
  <head>
 
 
 
  <style>
 
/* Virtuoso V.1.0 Template, send any questions to believeinthenet@protonmail.com! Powered by friendship and VGM. */
 
 
/* Changes to the main div are made here. 
"border-radius:" is the property responsible for rounding the borders.
"overflow: hidden;" is necessary for the scrollbar to be rounded. */
.mainDiv { 
    background-color: #fff6f9;
    max-width: 900px;
    color: #d62b3d;
    text-align: left;
    border: 6px dashed;
    border-color: #f8c7dd;
    border-radius: 50px;
    font-family: "ms ui gothic";
    font-size:16px;
    overflow: hidden;
}
 
/* Style your paragraphs here. */
p {
  padding: 10px;
  margin: 10px;
}
 
/* Img class property utilized to round out the top left and right corners of the header image.
the radius must match .mainDiv's radius. 
"vertical-align: middle;" gets rid of the space between the image and the bottom of the div. */
.headerImg {
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  vertical-align: middle;
}
 
/* Contains the .headerText, responsible for making it display on top of the image. */
.container {
 position: relative;
 text-align: center;
}
 
/* Positions the .title text that displays on top of the .headerImg.
You may need to change "bottom" and "left" depending on your font */
.headerText {
  position: absolute;
  bottom: 0px;
  left: 20px;
}
 
/* Changes the text that's placed on top of the header 
"text-shadow" is used to make a border, you are able to change the color. */
.title  {
  max-width: 900px;
  color: #d62b3d;
  font-family: "Cheshire";
  font-size: 80px;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
 
/* Changes the look of the div that contains the links. 
The padding and margin properties make it so the div touches the outer border. */
.navigation {
  margin: 0;
  padding-left: -10px
  padding-right: -10px
  padding: 0;
  font-family: "ms gothic";
  background-color: #d62b3d;
  color: #fff6f9;
}
 
/* Div that contains the main text.
"max-height" makes it so the text is contained to a certain area, you can remove it you'd like. 
You can also change the look of the scrollbar here. */
.mainText {
  max-height: 470px;
  overflow-y: auto;
  scrollbar-color: #efc815 #d62b3d;
  scrollbar-width: thin;
}
 
/* Small div that displays below the main div. */
.bottom {
    background-color: #d62b3d;
    max-width: 200px;
    color: #fff6f9;
    text-align: center;
    border: 1px solid;
    border-color: #fff6f9;
    border-radius: 50px;
    font-family: "ms ui gothic";
    font-size:14px;
 
}
 
/* You can change the look of links here. */
a:link {
  color: #fff6f9;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}
 
/* Changes the look of visited links */
a:visited {
  color: #fff6f9;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}
 
/* Changes the look of links when you hover on them. */
a:hover {
  color: #f8c7dd;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}
 
/* Style h1 here */
  h1 {
    font-size:25px; 
    font-family:"ms gothic";
  }
 
  /* Style h2 here */
h2 {
  font-size:18px;
  font-family:"ms gothic";
  padding-left: 20px;
}
 
/* Body properties.
The background repeats vertically and horizontally, please use a seamless pattern for the best look. */
      body {background-image: url('BACKGROUND URL');
            background-repeat: repeat;
            margin: 0; 
            padding: 0;
            }
 
 
/* You can add custom fonts here.
"font-family" is the name you denote to your font, it can be anything, it doesn't have to match the file name.
I recommend placing the font in a font sub-folder on your NeoCities dashboard. */       
    @font-face {
      font-family: "FONT NAME";
      src: url(FONT URL);
    }
 
 
 
 
 
 
 
</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
      <link rel="icon" type="image/x-icon" href="FAVICON URL">
  </head>
 
 
 
<center>
 
<br>
<br>
 
<div class="mainDiv">
 
<div class="container">
 
<img class="headerImg" src="HEADER IMAGE URL" style="max-width:100%"> 
 
<div class="headerText"> <div class="title">Title</div></div>
 
</div>
 
<div class="navigation">
<nav style="padding-left:10px">
LINK 1 ♡ LINK 2 ♡ LINK 3 ♡ LINK 4 ♡ LINK 5 ♡ LINK 6 ♡ LINK 7
</nav>
 
</div>
 
<div class="mainText">
 
 <center><strong><h1>Secondary Title</h1></strong></center>
 
 
 
 
 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus, neque in aliquet vehicula, lacus nunc malesuada lorem, vitae convallis arcu leo ut elit. Aenean semper dui quis nunc vulputate venenatis. Phasellus molestie, est non volutpat consequat, metus augue consectetur sem, sit amet condimentum magna purus sit amet ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce tincidunt ipsum id turpis aliquam, in dapibus erat dignissim. Quisque sit amet erat ac quam malesuada ullamcorper. Aenean sit amet tincidunt purus. Nunc molestie sapien quis fermentum rutrum. Maecenas odio nisi, sollicitudin in justo vitae, mattis ullamcorper enim. Nullam suscipit fermentum nisi quis fringilla. Vivamus tristique felis a lectus hendrerit, vitae pharetra lacus accumsan. Sed ultricies pretium enim, ut fermentum turpis congue id. Mauris viverra lectus vel diam elementum, vitae euismod justo convallis. Sed ac ligula nec odio bibendum tincidunt. Nulla sed laoreet leo, eget dapibus nibh. Ut eu sapien consectetur, finibus neque vitae, finibus metus.</p>
 
<p>Fusce urna dui, interdum sit amet enim eget, lacinia consectetur dolor. Integer magna felis, ultricies a fermentum et, placerat et eros. Maecenas quis ipsum convallis, sollicitudin lorem vel, accumsan eros. Donec blandit condimentum nibh quis sodales. Cras at tristique orci. Nam accumsan arcu scelerisque, iaculis libero id, placerat tellus. Praesent rhoncus, sapien nec mattis vestibulum, enim tellus ornare justo, ac faucibus leo ante vitae risus. Nullam non ligula massa. In tempor eu erat nec finibus. In tempor dui eu suscipit placerat. Cras iaculis imperdiet turpis vel tincidunt. Aenean ut libero sodales, dictum ex sed, fermentum sapien. Sed consequat quam sed orci vestibulum, nec egestas enim congue.</p>
 
<p>Vestibulum rutrum varius tristique. Nunc vel lorem quam. Pellentesque tristique nec enim vel tincidunt. Quisque ac lacus in urna volutpat tristique. Phasellus malesuada neque non blandit sollicitudin. Maecenas aliquet, diam non eleifend accumsan, tortor risus auctor lacus, sed ultrices sem dui et risus. Aliquam quis mi urna. Proin malesuada suscipit augue at pulvinar. Duis volutpat nulla vitae ex sollicitudin gravida nec in lectus. Sed faucibus tellus massa, ac pretium leo tincidunt vitae. Ut non malesuada leo, et pulvinar eros.</p>
 
<p>Nulla mollis feugiat lorem, quis sodales ex pharetra ornare. Cras ultrices, nulla vel aliquam sagittis, felis ante laoreet elit, ut tempus dui ligula id risus. Donec rutrum mauris in libero tempor aliquet. Nam tincidunt sed sem ut commodo. Vestibulum vitae interdum turpis, sed feugiat turpis. Duis a ultricies nunc. Maecenas scelerisque tempor nunc et pharetra. Mauris at condimentum ex. Nulla a quam neque.</p>
 
<p>Mauris odio tortor, malesuada posuere viverra nec, varius eu enim. Aliquam ultrices maximus velit, et efficitur purus scelerisque eget. Proin cursus lacus nec quam rhoncus, nec pulvinar dolor tristique. Proin finibus risus vel vestibulum pretium. Quisque nec justo mi. Integer venenatis urna vitae felis maximus, eget volutpat velit finibus. Fusce at erat ut mi ultricies mollis nec et velit. Nam accumsan lectus eu lacus pellentesque, sed congue quam semper. Aenean non eleifend nunc. Curabitur purus tellus, ullamcorper varius arcu et, porta dictum lacus. Duis aliquet lacus ac risus interdum, at volutpat turpis pellentesque. Phasellus quis posuere ipsum. Etiam non posuere nisi. Proin in accumsan enim, tempus pharetra sem. Sed id magna facilisis neque lacinia mattis placerat sed turpis. </p>
 
    <br>
 
 
 
</div>
</div>
 
<br>
 
 
<div class="bottom">
Template by <a href="https://recarmdra.neocities.org/">recarmdra</a>.
</div>
 
</center>
 
 
 
 
 
 
  </body>
</html>

"POMP AND CIRCUMSTANCE V.1.0" TEMPLATE (ADDED 13/09/2025)

A screenshot of a simple homepage with a sidebar on the right.

RESPONSIVE. COPY + PASTE BELOW! (Pastebin Mirror)
My very first template! So... go easy on it...
The padding and margin are both set to 0px so the .navigation div can touch the colored borders. If you don't plan on using that div or don't mind the gap, I recommend changing that to at least 10px. If you don't, you will have to style your paragraphs to have margins and padding instead.

<!DOCTYPE html>
<html>
  <head>
 
 
 
  <style>
 
/* Pomp and Circumstance V.1.0 Template, send any questions to believeinthenet@protonmail.com! Powered by yerba mate and autism. */
 
 
/* Changes to .grid style reflect across both main and side
IE if you change the background-color to white both main and side will have white backgrounds */
.grid { 
    display: grid;
    background-color: #fff6f9;
    max-width: 1200px;
    color: #d62b3d;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr); 
    gap: 0px;
}
 
/* Changes to main style will reflect only on main not on side
Has a border-right property be half of the border property so together main and side look like they only have one border
Scrollbar color and width can be changed here */ 
.main { 
  grid-area: 1 / 1 / 2 / 5;
  padding: 0px;
  margin: 0px;
  border: 6px solid #f8c7dd;
  border-right: 3px solid #f8c7dd;
  text-align: left;
  font-family: "ms ui gothic";
  font-size:16px;
  max-height: 785px;
  overflow-y: scroll;
  scrollbar-color: #efc815 #d62b3d;
  scrollbar-width: thin;
}
 
/* Same as the above */
.side { 
  grid-area: 1 / 5 / 2 / 6; 
  padding: 0px;
  padding-top: 6px;
  margin: 0px;
  font-family: "ms ui gothic";
  font-size: 18px;
  border: 6px solid #f8c7dd;
  border-left: 3px solid #f8c7dd;
  text-align: left;
}
 
/* Changes the text at the top of the page
displayed on top of grid */
.title  {
  max-width: 1200px;
  color: #f8c7dd;
  font-family: "ms gothic";
  font-size: 80px;
  margin: 0;
  padding: 0;
  margin-bottom: -20px;
  text-align: left;
}
 
/* Change link colors */
a:link {
  color: #efc815;
  background-color: transparent;
  text-decoration: underline;
}
 
/* Change link colors on already visited links */
a:visited {
  color: #efc815;
  background-color: transparent;
  text-decoration: underline;
}
 
/* This media query is responsible for making the website functional on mobile
At 600px of less side will display below main */
@media only screen and (max-width: 600px) {
  .main {grid-area: 1 / span 5;}
  .side {grid-area: 2 / span 5;}
}
 
/* Body properties
I did most of this on grid instead of body
so this is only here for the background and to remove excess padding and margins */
      body {background-image: url('BACKGROUND URL');
            background-repeat: no-repeat;
            background-attachment: fixed;  
            background-size: cover;
            margin: 0; 
            padding: 0;
            }
 
/* This is what makes the icon displayed on side have rounded corners */
  .icon {
border-radius: 50px;
}
 
/* A div that is the same color as the border 
I called it navigation but it can be called anything else */
.navigation {
  margin: 0;
  padding-left: -10px
  padding-right: -10px
  padding: 0;
  font-family: "ms gothic";
  background-color: #2ca5dd
}
 
/* This makes the randomText display properly */
.randomText {
  font-size:25px; 
  font-family:"ms gothic";
  font-weight: bold;
}
 
/* Change the bullet points for ul here */
  ul {
    padding-left: 30px;
    list-style-type:"★";
  }
 
/* Style h1 here */
  h1 {
    font-size:25px; 
    font-family:"ms gothic";
  }
 
/* Style h2 here */
h2 {
  font-size:18px;
  font-family:"ms gothic";
  padding: 10px;
  margin-top: -20px;
}        
 
 
</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
      <link rel="icon" type="image/x-icon" href="FAVICON URL">
  </head>
 
  <body style="background-color:white;">
 
 
<center>
 
<div class="title">TITLE</div>
 
<div class="grid">
    <div class="main">    
 
  <center><strong><h1>SECONDARY TITLE</h1></strong></center>    
    <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>
    </div>
 
    <div class="side">    
    <center><img class= "icon" src="ICON URL" style="max-width:95%;height:auto;"> 
 
    <h1> LINKS </h1></center>
 
    <nav>
    <ul>
    <li>LINK 1</li>
    <li>LINK 2</li>
    <li>LINK 3</li>
    <li>LINK 4</li>
    <li>LINK 5</li>
    <li>LINK 6</li>
    <li>LINK 7</li>
    </ul>
    </nav>
 
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
 
    <center><p style="font-size: 16px;"> Template by <a href="https://recarmdra.neocities.org/">recarmdra</a></p></center>
 
 
    </div>
</div>
</center>
  </body>
</html>

Burning brightly since 2025!