diff --git a/images/ulud.jpg b/images/ulud.jpg index aeb92c0..971e316 100644 Binary files a/images/ulud.jpg and b/images/ulud.jpg differ diff --git a/index.html b/index.html index 414627b..2bef638 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,14 @@ + Ulud & Arcaena +

Ulud & Arcaena

-
@@ -25,13 +22,12 @@

- +
- Ulud portrait -
+

Ulud — The Wandering Soul

- Drop Ulud’s backstory here. Who is he? Where has he been? What drives him? + Write Ulud’s backstory here. Describe his class, struggles, and vibe.

  • Race: ???
  • @@ -39,37 +35,48 @@
  • Alignment: ???
-
- - -
- Arcaena portrait -
-

Arcaena — The Silent Flame

-

- Drop Arcaena’s backstory here. Her elven grace, her path, her hidden heart. -

-
    -
  • Race: Elf
  • -
  • Class: ???
  • -
  • Alignment: ???
  • -
+
+ Ulud portrait
- + +
+
+

Arcaena — The Silent Flame

+

+ Arcaena is a short 1.5m tall elf with a slender build. + Her vibe is empty, mysterious, and a bit eerie. + She reads books out of habit, not passion. + Usually just wanders into situations, and then asks herself "Why am I in this mess?" + + Incredibly intelligent and useful, but non talkative, never eager and just plain weird. + +

+
    +
  • Race: Elf
  • +
  • Class: Wizard
  • +
  • Alignment: Chaotic neutral.
  • +
+
+
+ Arcaena portrait +
+
+ +
diff --git a/style.css b/style.css index 9367198..afb77e9 100644 --- a/style.css +++ b/style.css @@ -1,126 +1,149 @@ +/* Global */ body { - font-family: 'Georgia', serif; - margin: 0; - background: #0d0d0d; - color: #eee; - line-height: 1.6; + font-family: 'Georgia', serif; + margin: 0; + background: #0d0d0d; + color: #eee; + line-height: 1.6; +} + +h1, h2 { + font-family: 'Cinzel', serif; + margin: 0.5em 0; } header { - background: #222; - padding: 1em; - text-align: center; - position: sticky; - top: 0; - z-index: 1000; + background: #222; + padding: 1em; + text-align: center; + position: sticky; + top: 0; + z-index: 1000; } nav a { - color: #ffcc66; - margin: 0 1em; - text-decoration: none; + color: #ffcc66; + margin: 0 0.8em; + text-decoration: none; } nav a:hover { - text-decoration: underline; + text-decoration: underline; } .intro { - text-align: center; - padding: 3em 1em; - background: #111; + text-align: center; + padding: 3em 1em; + background: #111; } +/* Character Sections */ .character { - display: flex; - align-items: flex-start; - padding: 3em 2em; - border-bottom: 1px solid #333; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 3em 1em; + gap: 2em; + border-bottom: 1px solid #333; } -.character img { - width: 250px; - margin-right: 2em; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0,0,0,0.7); +.char-text { + flex: 1 1 300px; + max-width: 500px; } -.character.alt { - flex-direction: row-reverse; - background: #1a1a1a; +.char-img img { + width: 100%; + max-width: 300px; + border-radius: 8px; + box-shadow: 0 0 12px rgba(0,0,0,0.7); } -.character.alt img { - margin-right: 0; - margin-left: 2em; +/* 🌿 Ulud — Turtle Druid */ +#ulud { + background: linear-gradient(135deg, #030504, #0c2216); } +#ulud h2 { + color: #4de68a; +} + +#ulud ul li strong { + color: #39c16d; +} + +/* 🌌 Arcaena — Wizard Elf */ +#arcaena { + background: linear-gradient(135deg, #030303, #1a233f); +} + +#arcaena h2 { + color: #6da7ff; +} + +#arcaena ul li strong { + color: #3e72d9; +} + +/* Gallery */ .gallery { - padding: 3em 2em; - text-align: center; + padding: 3em 1em; + text-align: center; } .gallery .grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 1em; - margin-top: 1.5em; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1em; + margin-top: 2em; } .gallery img { - width: 100%; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0,0,0,0.7); + width: 100%; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.7); } +/* Footer */ footer { - text-align: center; - padding: 1em; - background: #111; - font-size: 0.9em; + text-align: center; + padding: 1em; + background: #111; + font-size: 0.9em; } -/* 📱 RESPONSIVE TWEAKS */ +/* Responsive Tweaks */ @media (max-width: 768px) { - .character { - flex-direction: column; - text-align: center; - } + nav a { + display: inline-block; + margin: 0.5em; + } - .character img { - margin: 0 0 1.5em 0; - width: 70%; - max-width: 300px; - } + .character { + flex-direction: column; + text-align: center; + } - .character.alt { - flex-direction: column; - } - - .character.alt img { - margin: 0 0 1.5em 0; - } - - nav a { - display: inline-block; - margin: 0.5em; - } + .char-img img { + max-width: 250px; + } } @media (max-width: 480px) { - body { - font-size: 0.95em; - } + body { + font-size: 0.95em; + } - h1 { - font-size: 1.5em; - } + h1 { + font-size: 1.6em; + } - h2 { - font-size: 1.2em; - } + h2 { + font-size: 1.2em; + } - nav a { - font-size: 0.9em; - } + nav a { + font-size: 0.9em; + } }