commit e1bfb8736076c56fc61c19b8e33a388d98ae5b73 Author: waifu Date: Fri Sep 5 23:07:24 2025 -0300 init diff --git a/images/arcaena.jpeg b/images/arcaena.jpeg new file mode 100644 index 0000000..4330286 Binary files /dev/null and b/images/arcaena.jpeg differ diff --git a/images/ulud.jpg b/images/ulud.jpg new file mode 100644 index 0000000..aeb92c0 Binary files /dev/null and b/images/ulud.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..414627b --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + Ulud & Arcaena + + + +
+

Ulud & Arcaena

+ +
+ +
+ +
+

Welcome, traveler...

+

+ Step into the world of Ulud and Arcaena, two adventurers whose stories + weave through danger, magic, and mystery. Scroll down to meet them. +

+
+ + +
+ Ulud portrait +
+

Ulud — The Wandering Soul

+

+ Drop Ulud’s backstory here. Who is he? Where has he been? What drives him? +

+
    +
  • Race: ???
    • +
  • Class: ???
    • +
  • Alignment: ???
    • +
+
+
+ + +
+ Arcaena portrait +
+

Arcaena — The Silent Flame

+

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

+
    +
  • Race: Elf
    • +
  • Class: ???
    • +
  • Alignment: ???
    • +
+
+
+ + + +
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..9367198 --- /dev/null +++ b/style.css @@ -0,0 +1,126 @@ +body { + font-family: 'Georgia', serif; + margin: 0; + background: #0d0d0d; + color: #eee; + line-height: 1.6; +} + +header { + background: #222; + padding: 1em; + text-align: center; + position: sticky; + top: 0; + z-index: 1000; +} + +nav a { + color: #ffcc66; + margin: 0 1em; + text-decoration: none; +} + +nav a:hover { + text-decoration: underline; +} + +.intro { + text-align: center; + padding: 3em 1em; + background: #111; +} + +.character { + display: flex; + align-items: flex-start; + padding: 3em 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); +} + +.character.alt { + flex-direction: row-reverse; + background: #1a1a1a; +} + +.character.alt img { + margin-right: 0; + margin-left: 2em; +} + +.gallery { + padding: 3em 2em; + text-align: center; +} + +.gallery .grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1em; + margin-top: 1.5em; +} + +.gallery img { + width: 100%; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.7); +} + +footer { + text-align: center; + padding: 1em; + background: #111; + font-size: 0.9em; +} + +/* 📱 RESPONSIVE TWEAKS */ +@media (max-width: 768px) { + .character { + flex-direction: column; + text-align: center; + } + + .character img { + margin: 0 0 1.5em 0; + width: 70%; + max-width: 300px; + } + + .character.alt { + flex-direction: column; + } + + .character.alt img { + margin: 0 0 1.5em 0; + } + + nav a { + display: inline-block; + margin: 0.5em; + } +} + +@media (max-width: 480px) { + body { + font-size: 0.95em; + } + + h1 { + font-size: 1.5em; + } + + h2 { + font-size: 1.2em; + } + + nav a { + font-size: 0.9em; + } +}