From 7adf2e7f58c02002c16fd7a94ec0f0a453ff7a0a Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Tue, 15 Jul 2025 13:12:40 -0700
Subject: [PATCH] feat: characters page

---
 src/app/characters/characters.css  | 26 ++++++++++++++++++++++++++
 src/app/characters/characters.html | 13 ++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/app/characters/characters.css b/src/app/characters/characters.css
index e69de29..237cd73 100644
--- a/src/app/characters/characters.css
+++ b/src/app/characters/characters.css
@@ -0,0 +1,26 @@
+.character {
+  display: grid;
+  grid-template-areas:
+    "image name"
+    "image description";
+  grid-template-columns: 250px auto;
+}
+
+img {
+  grid-area: image;
+  width: 250px;
+  height: auto;
+}
+
+h2 {
+  grid-area: name;
+}
+
+p {
+  grid-area: description;
+}
+
+hr {
+  border: 2px solid var(--foreground);
+  margin: 10px 0;
+}
diff --git a/src/app/characters/characters.html b/src/app/characters/characters.html
index ead478d..f4ed7f4 100644
--- a/src/app/characters/characters.html
+++ b/src/app/characters/characters.html
@@ -1 +1,12 @@
-<p>characters works!</p>
+<h1>Characters</h1>
+<div class="character">
+  <h2>Emi</h2>
+  <img src="https://cdn.nhcarrigan.com/yurigpt/avatars/emi.png" alt="Emi's avatar">
+  <p>Our main character, Emi has always struggled to make friends in person. But she thrives online, where she feels she can be her true self.</p>
+</div>
+<hr />
+<div class="character">
+  <h2>Mira</h2>
+  <img src="https://cdn.nhcarrigan.com/yurigpt/avatars/mira.png" alt="Mira's avatar">
+  <p>Mira is Emi's online girlfriend. They are in a long-distance relationship, so they have not met. This works out great for Emi, but maybe not all is as it seems?</p>
+</div>