Do you like the layout I used for my character pages?

Do you want to use it yourself?

Here's the HTML and CSS!

HTML

<!--
/********************************************************************************************************************************
*********************************************************************************************************************************

SNAGEN'S CHARACTER PAGE TEMPLATE
    
    RULES:
      1. Feel free to modify and frankenstein to your preference!
      2. Do not remove credit. You may move it to a different area of the page, but it still needs to be clearly visible.
      3. If you want to share a modified version with others, make it clear that the template was made by me & link back.
      You may only provide it for COMPLETELY free and may not lock it behind a paywall or otherwise profit off of redistributing
      or modifying my code.
      4. Do not copy the appearance of my website 1-1. Make something original instead!

*********************************************************************************************************************************
*********************************************************************************************************************************/
-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link href="URL TO CSS" rel="stylesheet" type="text/css" media="all">
  </head>
  
  <body>
    <div class="grid-container">
      <div class="header">
        <div class="navbuttons">
          
          <a href="/index">Index</a>
        </div>
      </div>
      
      <div class="ref">
        <a href="IMG URL" target="_blank"><img src="IMG URL" style="width: 100%; margin: 0;"></a>
        <p>Artwork by <a href="ARTIST URL" target="_blank">ARTIST NAME</a></p>
      </div>
      
      <div class="basics">
      
        <div class="headertext basicsname">
          Name
        </div>
        <hr style='line-height=0;'>
        <span class="headertext basicstext">
          <br>Pronouns
          <br>Gender
          <br>Sexuality
          <br>Age
          <br>Race/Species
          <br>
          <br>Designer:
          <br><a href="ARTIST URL">ARTIST NAME</a>
        </span>
      </div>
      
      <div class="main mainbox">
        <div class="text1">
          <p>Character bio</p>
        </div>
      </div>
      
      <div class="gallery">
        
        <div class="gallerybox">
          <a href="SQUIDGE VIEWER URL" target="_blank">
            <img src="DIRECT URL">
          </a>
          <a href="ARTIST URL" target="_blank">ARTIST NAME</a>
        </div>
        
        <div class="gallerybox">
          <a href="SQUIDGE VIEWER URL" target="_blank" class="spoil">
            <img src="DIRECT URL">
          </a>
          <div class="spoiltext">Content Warning Here</div>
          <a href="ARTIST URL" target="_blank">ARTIST NAME</a>
        </div>
        
        
        
      </div>
      
      <div class="footer">
        
        <a href="https://spicedsnake.gay/pages/resources/charatemplate.html">Template by Snagen</a>
      </div>
      
    </div>
  </body>
</html>

CSS

/********************************************************************************************************************************
*********************************************************************************************************************************

/*******************************************
FONTS
*******************************************/
@font-face {
  font-family: 'linktext';
  src: url('URL FOR NAVIGATION BAR FONT');
}
.linktext {
  font-family: linktext;
}

@font-face {
  font-family: 'regulartext';
  src: url('URL FOR PRIMARY TEXT FONT');
}
.regulartext {
  font-family: regulartext;
}

@font-face {
  font-family: 'headertext';
  src: url('URL FOR HEADER TEXT FONT');
}
.headertext {
  font-family: headertext;
}

/*******************************************
BODY
*******************************************/

body {
  /* Alignment */
  margin: 0;
  
  /* Font */
  font-family: regulartext, sans-serif;
  text-align: center;
  color: #fff;
  
  /* Background */
  background-color: #0d0d0d;
  background-image: url(URLHERE);
  /* Delete background-image property if not used. If you want to use a CSS pattern instead of an image, I recommend https://www.magicpattern.design/tools/css-backgrounds */
}

/* Text Boxes */
.text1 {
  width: 85%;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.text2 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
  font-family: headertext, serif;
  text-decoration: none;
  text-transform: uppercase;
}

/* Links */
a {
  text-decoration: none;
  color: #bae6ff;
}
/* Link color when hovered over */
a:hover {
  color: #7ca5de;
}

/* Horizontal Rules */
hr {
  border-color: #fff;
  width: 60%;
}

/* Text Decorations - I made these a lighter color on my own page, just delete if you don't want to do that */
strong {
  color:#fff;
}
em {
  color:#fff;
}

/* Lists */
ul {
  text-align:left;
}

/* Gallery Boxes */
.gallerybox a {
  text-decoration: none;
}

/* Spoiler Gallery Images */
/* This is the class to apply to the IMAGE */
.spoil {
  filter: blur(5px) brightness(50%) contrast(50%);
}
.spoil:hover {
  filter: blur(0) brightness(100%) contrast(100%);
}
/* This is the class to apply to the WARNING TEXT */
.spoiltext {
  position: relative;
  top: -100px;
  font-family: headertext, serif;
  /* -webkit-text-stroke: 1px black; Add this back if the text is hard to read against the image. May look weird on some fonts */
  font-size: 15pt;
  line-height: 0;
  display: block;
}
.gallerybox:hover .spoiltext {
  display: none;
}

/*******************************************
GRID
*******************************************/

/* All Grid Items */
.grid-container > div {
}

/* Header */
.header {
  grid-area: header;
  
  /* Font */
  text-align: center;
  font-size: 20pt;
  font-family: linktext, serif;
  text-transform: uppercase;
  
  /* Background */
  background-color: #1c1c1c;
  
  /* Border */
  border-style:solid;
  border-width:3px;
  border-color:#fff;
}

.navbuttons {
  vertical-align: middle;
  text-align: center;
}
.navbuttons a {
  background-color: #1c1c1c;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-family: linktext, serif;
}
/* Navigation Buttons Hover Colors */
.navbuttons a:hover {
  background-color: #fff;
  color: #1c1c1c;
}

/* Ref Box */
.ref {
  grid-area: ref;
  
  background-color: #1c1c1c;
  
  /* Border */
  border-style:solid;
  border-width:3px;
  border-color:#fff;
}

/* Box Next to Ref */
.basics {
  grid-area: basics;
  
  /* Background */
  background-color: #1c1c1c;
  
  /* Border */
  border-style:solid;
  border-width:3px;
  border-color:#fff;
}

/* Main */
.main {
  grid-area: main;
}
.mainbox {
  /* Background */
  background-color: #1c1c1c;
  
  /* Border */
  border-style:solid;
  border-width:3px;
  border-color:#fff;
}

/* Gallery */
.gallery {
  grid-area: gallery;
}
.gallerybox {
  max-width: 100%;
  
  /* Background */
  background-color: #1c1c1c;
  
  /* Border */
  border-style:solid;
  border-width:3px;
  border-color:#fff;
}
.gallerybox img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Footer */
.footer {
  grid-area: footer; text-align: center;
  
  /* Background */
  background-color: #1c1c1c;
  
  /* Border */
  border-style:solid;
  border-width:3px;
  border-color:#fff;
}

/******** MOBILE ********/
@media screen and (max-width: 800px) {
  
  /* Grid Layout */
  .grid-container {
    display: grid;
    grid-template-areas:
      'header'
      'basics'
      'ref'
      'main'
      'gallery'
      'footer';
    gap: 20px;
    padding: 10px;
    height: max;
  }
  .grid-container > div {
  }

/* Paragraphs */
  p,ul {
    font-size: 14pt;
  }
  
  /* Header */
  .header {
    padding: 10px;
    font-size: 25pt;
  }
  
  /* Main */
  .main {
    padding: 10px;
  }
  
  /* Basics */
  .basics {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .basicstext {
    font-size: 20pt;
    text-transform: uppercase;
    line-height: 40px;
  }
  .basicsname {
    font-size: 30pt;
    text-transform: uppercase;
  }
  
  /* Gallery */
  .gallerybox {
    display: block;
    width: 80%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  .gallerybox img {
    max-width: 100%;
  }
}
 
/******** DESKTOP ********/

@media screen and (min-width: 800px) {
  /* Grid Layout */
  .grid-container {
    display: grid;
    grid-template-areas:
      'header header header header'
      'ref ref ref basics'
      'main main main main'
      'gallery gallery gallery gallery'
      'footer footer footer footer';
    gap: 25px;
    /* Sizing & Placement */
    padding: 10px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Paragraphs */
  p,ul {
    font-size: 15pt;
  }
  
  /* Navbuttons */
  .navbuttons a {
    padding: 5px;
    display: inline-block;
    font-size: 40pt;
    vertical-align: top;
  }
  .navbuttons {
    width: 100%;
    padding: 15px;
  }
  .navwrap {
    min-width: 200px;
    max-width: 300px;
  }
  
  /* Header */
  .header {
    font-size: 50pt;
  }
  
  /* Basics */
  .basicstext {
    font-size: 25pt;
    text-transform: uppercase;
    line-height: 50px;
  }
  .basicsname {
    font-size: 40pt;
    text-transform: uppercase;
  }
  
  /* Footer */
  .footer {
    padding: 15px;
    font-size: 15pt;
  }
  
  /* Gallery */
  .gallerybox {
    margin: 20px;
    display: inline-block;
    vertical-align: top;
  }
  .gallerybox img {
    height: 200px;
  }
}

If you pasted it all properly AND linked the CSS, it should look like this.

RULES:

Feel free to modify and frankenstein to your preference!
Do not remove credit. You may move it to a different area of the page, but it still needs to be clearly visible.
If you want to share a modified version with others, make it clear that the template was made by me & link back. You may only provide it for COMPLETELY free and may not lock it behind a paywall or otherwise profit off of redistributing or modifying my code.
4. Do not copy the appearance of my website 1-1. Make something original instead!