-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
175 lines (163 loc) · 9 KB
/
Copy pathindex.html
File metadata and controls
175 lines (163 loc) · 9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Chronicles of Aethelgard</title>
<meta name="description"
content="Discover the world of Aethelgard. Read side stories, explore the lore, and meet the characters of this epic fantasy saga.">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet">
</head>
<body>
<header class="hero">
<nav class="main-nav">
<button class="mobile-menu-btn" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-links">
<li><a href="#lore">World Lore</a></li>
<li><a href="#characters">Characters</a></li>
<li><a href="#stories">Side Stories</a></li>
<li><a href="#author">Author</a></li>
<li><a href="#buy" class="cta-button">Buy the Book</a></li>
</ul>
</nav>
<div class="hero-content">
<h1 class="book-title">The Chronicles of Aethelgard</h1>
<p class="book-subtitle">Shadows Rise Where Light Fades</p>
<a href="#stories" class="read-teaser-btn">Read the Teasers</a>
</div>
</header>
<main>
<section id="lore" class="section lore-section">
<div class="container">
<h2>The World of Aethelgard</h2>
<div class="lore-grid">
<article class="lore-card">
<h3>The Crystal Spires</h3>
<p>Rising from the mists of the Silver Lake, the Crystal Spires have stood for a thousand years,
guarding the ancient secrets of the First Mages. It is said that the light reflected from
them can reveal one's true destiny.</p>
</article>
<article class="lore-card">
<h3>The Shadowlands</h3>
<p>Beyond the Iron Mountains lies a land where the sun never fully rises. The Shadowlands are
home to creatures of nightmare and the banished souls of the Betrayal War.</p>
</article>
<article class="lore-card">
<h3>The Guild of Whispers</h3>
<p>Not all power is wielded with swords or spells. The Guild of Whispers controls the flow of
information across the kingdoms, their spies hidden in every court and tavern.</p>
</article>
</div>
</div>
</section>
<section id="characters" class="section characters-section">
<div class="container">
<h2>Heroes & Villains</h2>
<div class="character-showcase">
<div class="character-card" tabindex="0">
<div class="char-portrait-container">
<img src="./assets/Elandra.png" alt="Elandra the Void-Walker" class="char-portrait">
</div>
<h3>Elandra the Void-Walker</h3>
<p class="char-role">The Protagonist</p>
<p>Born with the curse of the Void, Elandra must learn to control the darkness within her before
it consumes the world she swore to protect.</p>
</div>
<div class="character-card" tabindex="0">
<div class="char-portrait-container">
<img src="./assets/guardian.png" alt="Kaelen Ironheart" class="char-portrait">
</div>
<h3>Kaelen Ironheart</h3>
<p class="char-role">The Guardian</p>
<p>A disgraced knight seeking redemption. His blade has never bent, but his spirit is
fractured by the failures of his past.</p>
</div>
<div class="character-card" tabindex="0">
<div class="char-portrait-container">
<img src="./assets/Villain.png" alt="Malakor the Ashen" class="char-portrait">
</div>
<h3>Malakor the Ashen</h3>
<p class="char-role">The Antagonist</p>
<p>An ancient sorcerer who believes that only through destruction can the world be reborn into a
perfect order.</p>
</div>
</div>
</div>
</section>
<section id="stories" class="section stories-section">
<div class="container">
<h2>Tales from the Margins</h2>
<p class="section-intro">Glimpses into the lives that shape history.</p>
<article class="story-preview">
<h3>The Blacksmith's Daughter</h3>
<p class="story-excerpt">"The fire didn't burn her. That was the first sign. When the ember fell
onto her cradle, the wood charred, but the babe only giggled, reaching for the dancing flame
with chubby fingers..."</p>
<button class="read-more-btn">Read Full Teaser</button>
<div class="story-content hidden">
<p>As she grew, so did the rumors. They whispered that she had dragon's blood, that her father
had made a pact with a fire demon. But old man Horgus just hammered away at his anvil, his
eyes sad and knowing. He knew the truth was far more dangerous than any village gossip.</p>
<p>On her sixteenth nameday, the King's inquisitors came. They didn't knock. The door exploded
inward in a shower of splinters. "Where is the witch?" the captain bellowed, his armor
gleaming in the forge-light. Horgus stepped forward, hammer in hand. "There are no witches
here," he rumbled. "Only iron and blood."</p>
</div>
</article>
<article class="story-preview">
<h3>The Last Sentinel</h3>
<p class="story-excerpt">"Snow had been falling for three weeks. The pass was blocked, the supplies
were low, and something was scratching at the heavy oak doors of the watchtower..."</p>
<button class="read-more-btn">Read Full Teaser</button>
<div class="story-content hidden">
<p>Garrick tightened his grip on his spear. He was the last one left. The others had been taken,
one by one, in the night. No screams, just silence where a breathing man had been moments
before. The scratching stopped. The silence that followed was heavy, pressing against his
ears like deep water.</p>
<p>Then, a voice. Not from the door, but from the shadows behind him. "It is cold outside,
young sentinel. May I come in?"</p>
</div>
</article>
</div>
</section>
<section id="author" class="section author-section">
<div class="container">
<h2>About the Author</h2>
<div class="author-content">
<div class="author-bio">
<p><strong>A.R. Mythos</strong> has been crafting worlds since they were old enough to hold a
pen. Inspired by ancient mythology and modern folklore, they weave tales of magic, betrayal,
and redemption. When not writing, they can be found wandering through old forests or
collecting strange, forgotten maps.</p>
</div>
</div>
</div>
</section>
<section id="buy" class="section buy-section">
<div class="container">
<h2>Begin Your Journey</h2>
<p>The Chronicles of Aethelgard is available now.</p>
<a href="https://www.amazon.com/dp/EXAMPLE_BOOK_ID" target="_blank" rel="noopener noreferrer"
class="amazon-button">
Buy on Amazon
</a>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2025 The Chronicles of Aethelgard. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>