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;
+}

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>