```html
<!-- =========================================
     DARK RED OC ARCHIVE
     Main Toyhouse Profile / Homepage
     ========================================= -->

<style>
/* ---------- MAIN COLORS ---------- */

:root {
  --black: #10090b;
  --dark: #1b0c10;
  --dark-red: #3a0d14;
  --red: #6f111b;
  --bright-red: #8b0000;
  --light-red: #a52a35;
  --cream: #ead8d0;
  --muted: #b99b98;
}

/* ---------- PAGE ---------- */

body {
  background:
    radial-gradient(circle at top, #3a0d14 0%, #10090b 55%);
  color: var(--cream);
  font-family: Georgia, serif;
}

/* removes the normal Toyhouse container feeling */
.container {
  max-width: 1100px;
}

/* ---------- LINKS ---------- */

a {
  color: #c45a63;
  transition: 0.2s;
}

a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* ---------- MAIN HEADER ---------- */

.oc-header {
  background: linear-gradient(135deg, #2b0b10, #10090b);
  border: 1px solid #6f111b;
  border-radius: 14px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 0 25px rgba(139,0,0,.25);
  text-align: center;
}

.oc-header h1 {
  color: #d35b63;
  font-size: 34px;
  letter-spacing: 3px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.oc-header p {
  color: #b99b98;
  font-style: italic;
}

/* ---------- DECORATIVE DIVIDER ---------- */

.red-divider {
  height: 55px;
  margin: 15px 0;
  background:
    linear-gradient(
      transparent 42%,
      #8b0000 43%,
      #8b0000 57%,
      transparent 58%
    );
  position: relative;
}

.red-divider::before,
.red-divider::after {
  content: "✦";
  color: #a52a35;
  font-size: 20px;
  position: absolute;
  top: 13px;
}

.red-divider::before {
  left: 10%;
}

.red-divider::after {
  right: 10%;
}

/* ---------- BOXES ---------- */

.red-box {
  background: rgba(27, 12, 16, .94);
  border: 1px solid #5c1019;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 5px 20px rgba(0,0,0,.35);
}

.red-box h2 {
  color: #c94b57;
  border-bottom: 1px solid #6f111b;
  padding-bottom: 8px;
  margin-top: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 20px;
}

/* ---------- ABOUT ME ---------- */

.about {
  min-height: 230px;
}

.about-icon {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #8b0000;
  float: left;
  margin: 0 20px 10px 0;
}

/* ---------- FEATURED CHARACTERS ---------- */

.character-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.character-card {
  background: #17090d;
  border: 1px solid #57101a;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: .2s;
}

.character-card:hover {
  transform: translateY(-4px);
  border-color: #a52a35;
  box-shadow: 0 5px 20px rgba(139,0,0,.25);
}

.character-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.character-card .name {
  display: block;
  padding: 10px;
  color: #d35b63;
  font-weight: bold;
}

/* ---------- STAMPS ---------- */

.stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 10px;
}

.stamps img {
  max-width: 150px;
  image-rendering: auto;
}

/* ---------- BLINKIES ---------- */

.blinkies {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 15px;
}

.blinkies img {
  max-height: 25px;
}

/* ---------- TWO COLUMN SECTION ---------- */

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ---------- OC CATEGORIES ---------- */

.category {
  display: block;
  background: #210b11;
  border-left: 4px solid #8b0000;
  padding: 13px 15px;
  margin-bottom: 8px;
  border-radius: 5px;
  color: #d8bbb6;
}

.category:hover {
  background: #341016;
  color: white;
}

/* ---------- FOOTER ---------- */

.footer {
  text-align: center;
  padding: 25px;
  color: #79595a;
  font-size: 12px;
}

.footer span {
  color: #8b0000;
}

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

  .character-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .two-column {
    grid-template-columns: 1fr;
  }

  .about-icon {
    float: none;
    display: block;
    margin: 0 auto 15px;
  }

}
</style>


<!-- ================= HEADER ================= -->

<div class="oc-header">

  <h1>WELCOME TO MY LITTLE CORNER</h1>

  <p>
    characters • stories • art • questionable decisions
  </p>

</div>


<div class="red-divider"></div>


<!-- ================= ABOUT ME ================= -->

<div class="red-box about">

  <h2>About Me</h2>

  <!-- Replace this with your sona/icon -->
  <img
    class="about-icon"
    src="YOUR-IMAGE-URL-HERE"
    alt="my sona"
  >

  <p>
    Hey!! I'm <b>YOUR NAME</b> ♡
  </p>

  <p>
    Welcome to my little OC archive!
    This is where I keep my characters, stories,
    art, and whatever other nonsense I've decided
    belongs in my universe.
  </p>

  <p>
    Feel free to look around and meet everybody.
  </p>


  <!-- BLINKIES LIVE INSIDE ABOUT ME -->

  <div class="blinkies">

    <img src="BLINKIE-URL-1" alt="">
    <img src="BLINKIE-URL-2" alt="">
    <img src="BLINKIE-URL-3" alt="">
    <img src="BLINKIE-URL-4" alt="">

  </div>

</div>


<!-- ================= FEATURED CHARACTERS ================= -->

<div class="red-box">

  <h2>Featured Characters</h2>

  <div class="character-grid">

    <a class="character-card" href="CHARACTER-LINK-1">

      <img src="CHARACTER-IMAGE-1" alt="Character">

      <span class="name">Character One</span>

    </a>


    <a class="character-card" href="CHARACTER-LINK-2">

      <img src="CHARACTER-IMAGE-2" alt="Character">

      <span class="name">Character Two</span>

    </a>


    <a class="character-card" href="CHARACTER-LINK-3">

      <img src="CHARACTER-IMAGE-3" alt="Character">

      <span class="name">Character Three</span>

    </a>


    <a class="character-card" href="CHARACTER-LINK-4">

      <img src="CHARACTER-IMAGE-4" alt="Character">

      <span class="name">Character Four</span>

    </a>

  </div>

</div>


<!-- ================= STAMPS ================= -->

<!-- No "STAMPS" heading on purpose -->

<div class="red-box">

  <div class="stamps">

    <img src="STAMP-1" alt="">
    <img src="STAMP-2" alt="">
    <img src="STAMP-3" alt="">
    <img src="STAMP-4" alt="">
    <img src="STAMP-5" alt="">

  </div>

</div>


<div class="red-divider"></div>


<!-- ================= OC ARCHIVE ================= -->

<div class="red-box">

  <h2>My Characters</h2>

  <p>
    A collection of my little guys.
    Click around and explore their worlds!
  </p>

  <a class="category" href="LINK">
    ♱ Main Characters
  </a>

  <a class="category" href="LINK">
    ♱ Side Characters
  </a>

  <a class="category" href="LINK">
    ♱ Villains
  </a>

  <a class="category" href="LINK">
    ♱ Creatures / Non-Humans
  </a>

  <a class="category" href="LINK">
    ♱ Miscellaneous
  </a>

</div>


<!-- ================= TWO COLUMN ================= -->

<div class="two-column">

  <div class="red-box">

    <h2>Current Obsessions</h2>

    <p>
      ✦ character I'm currently drawing<br>
      ✦ story I'm currently working on<br>
      ✦ something I'm completely normal about
    </p>

  </div>


  <div class="red-box">

    <h2>Site Navigation</h2>

    <a class="category" href="LINK">
      ♡ Art
    </a>

    <a class="category" href="LINK">
      ♡ Toyhouse
    </a>

    <a class="category" href="LINK">
      ♡ Characters
    </a>

    <a class="category" href="LINK">
      ♡ Worldbuilding
    </a>

  </div>

</div>


<!-- ================= FOOTER ================= -->

<div class="footer">

  made with <span>♥</span> and probably too many PNGs

</div>
```