-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
283 lines (227 loc) · 14.3 KB
/
index.html
File metadata and controls
283 lines (227 loc) · 14.3 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Shire</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Uncial+Antiqua&display=swap" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="navbar">
<a href="index.html"><img id="header-img" src="assets/images/title.png" alt="Lord Of The Rings"></a>
</div>
<div class="hero">
<div class="intro">
<div class="intro-img">
<img class="intro-image" src="assets/images/shire.jpg" alt="The Shire">
<img class="intro-image" src="assets/images/build.jpg" alt="Sauron in NYC">
<img class="intro-image" src="assets/images/frodo.gif" alt="Frodo in Boston">
</div>
<div class="intro-descrip">
<p id="intro-descrip">
<b>BREAKING NEWS: </b><strong><Eye of Sauron> Signs Lease at Empire State Building</strong><br>
25 / 05 / 2025<br>
New York, Middle-Earth Sector<br><br>
In a move that has <s>shocked real estate agents</s> and <u>terrified pigeons</u>, the <mark style="background-color: orange; color: black; display: inline-block; padding: 5px 5px;">Eye of Sauron</mark> has officially relocated from <big>Barad-dûr</big> to the <small>Empire State Building</small>.<br>
Citing "<i>better visibility, stronger Wi-Fi, and a DoorDash range that doesn't stop at Mordor,</i>" the <b><mark style="background-color: red; color: black; display: inline-block; padding: 10px 5px; border-radius: 300px;">Dark Lord's fiery eyeball</mark></b> now looms over Manhattan with impeccable line-of-sight to every <big>Starbucks</big>.<br>
Local residents were initially alarmed by the sudden, flaming vortex in the sky, mistaking it for either a new Marvel villain or a badly optimized Times Square ad. Authorities have since confirmed:<br>
<blockquote style="border-left: 5px solid gold; padding-left: 20px; color: #f0e6d2; font-style: italic; background-color: #1c1c1c;">"No, it's just Sauron. Again."</blockquote><br>
Sauron's Real Estate Agent, Sméagol & Co., <s>released a statement</s>:<br>
<blockquote style="border-left: 5px solid silver; padding-left: 20px; color: #adadad; font-style: italic; background-color: #1c1c1c;">"Yesss, precious… The view, the power, the... central heating! We loves it."</blockquote><br>
Meanwhile, Frodo was <small>spotted</small> outside a Brooklyn café <u>furiously</u> updating his resume on LinkedIn:<br>
<code>Ringbearer. Hiker. Volcano enthusiast. Looking for remote work away from surveillance.</code><br><br>
Gandalf, commenting from a nearby rooftop, lit his pipe and sighed:<br>
<blockquote style="background-color: white; color: black; display: inline-block; padding: 10px 15px; border-radius: 10px;
box-shadow: 0 0 20px white;">
"At this point, I say we just give him New Jersey."
</blockquote><br>
<del>Tourist reactions were mixed:</del><br>
<ins>"I thought it was a Stranger Things pop-up."</ins><br>
<blockquote style="border-left: 5px solid orange; padding-left: 20px; color: grey; font-style: italic; background-color: #1c1c1c;">"Honestly, this is still not the weirdest thing I've seen in New York today."</blockquote><br><hr>
With his new HQ in place, Sauron has reportedly begun planning a <b>Mordor-themed</b> Broadway musical,<br> tentatively titled: "<sub>You</sub> Shall<sup>Not<sup> Sing</sup></sup> !"<br>
</p>
</div>
</div>
</div>
</div>
<div class="container2">
<h2 class="fiery-text" style="text-align: center;">The Three Hunters</h2>
<p>The Three Hunters—Aragorn, Legolas, and Gimli—formed a legendary trio during the War of the Ring. After the breaking of the Fellowship, they pursued the Uruk-hai across Rohan to rescue the captured hobbits, Merry and Pippin. United by purpose, loyalty, and mutual respect, they overcame ancient racial divisions to become close allies and lifelong friends, known for their speed, skill, and unbreakable bond in battle.</p>
<div class="cardContainer">
<div class="card">
<div class="card-inner">
<!-- Front Side -->
<div class="card-front">
<img src="assets/images/legolas.jpg" alt="Legolas">
<div class="card-content">
<h3>Legolas Greenleaf</h3>
<p>Legolas brings deadly precision and elven agility to the Fellowship. His friendship with Gimli becomes legendary across Middle-earth.</p>
</div>
</div>
<!-- Back Side -->
<div class="card-back">
<div class="card-content">
<ul>
<li><strong>Race:</strong> Elf (Sindar, Woodland Realm)</li>
<li><strong>Title:</strong> Prince of Mirkwood</li>
<li><strong>Weapon:</strong> Bow of the Galadhrim, twin daggers</li>
<li><strong>Skills:</strong> Archery, agility, stealth, keen sight</li>
<li><strong>Traits:</strong> Graceful, perceptive, swift, calm</li>
</ul>
<!-- Stat Meters -->
<h4 style="margin-bottom: 0; margin-top: 0;">Stats:</h4>
<ul>
<li><strong>Strength:</strong> <meter value="0.6" min="0" max="1"></meter></li>
<li><strong>Agility:</strong> <meter value="1" min="0" max="1"></meter></li>
<li><strong>Wisdom:</strong> <meter value="0.8" min="0" max="1"></meter></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Aragorn's Card -->
<div class="card">
<div class="card-inner">
<!-- Front Side -->
<div class="card-front">
<img src="assets/images/aragon.jpg" alt="Aragorn">
<div class="card-content">
<h3>Aragorn II Elessar</h3>
<p>Ranger of the North and heir to Gondor’s throne. A skilled warrior and noble leader.</p>
</div>
</div>
<!-- Back Side -->
<div class="card-back">
<div class="card-content">
<ul>
<li><strong>Race:</strong> Human (Dúnedain, Númenórean descent)</li>
<li><strong>Titles:</strong> Chieftain of the Dúnedain, King of Gondor</li>
<li><strong>Weapon:</strong> Andúril, Flame of the West</li>
<li><strong>Skills:</strong> Swordsmanship, tracking, healing, leadership</li>
<li><strong>Traits:</strong> Noble, humble, wise, courageous</li>
</ul>
<!-- Stat Meters -->
<h4 style="margin-bottom: 0; margin-top: 0;">Stats:</h4>
<ul>
<li><strong>Strength:</strong> <meter value="0.9" min="0" max="1"></meter></li>
<li><strong>Agility:</strong> <meter value="0.7" min="0" max="1"></meter></li>
<li><strong>Wisdom:</strong> <meter value="1" min="0" max="1"></meter></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Gimli's Card -->
<div class="card">
<div class="card-inner">
<!-- Front Side -->
<div class="card-front">
<img src="assets/images/gimli.png" alt="Gimli">
<div class="card-content">
<h3>Gimli, Son of Glóin</h3>
<p>Gimli is a fierce warrior with a strong sense of loyalty and pride. His rivalry-turned-friendship with Legolas becomes a symbol of unity.</p>
</div>
</div>
<!-- Back Side -->
<div class="card-back">
<div class="card-content">
<ul>
<li><strong>Race:</strong> Dwarf (Longbeard clan)</li>
<li><strong>Title:</strong> Lord of the Glittering Caves (later)</li>
<li><strong>Weapon:</strong> Double-bladed axe</li>
<li><strong>Skills:</strong> Axe combat, endurance, stonecraft</li>
<li><strong>Traits:</strong> Stubborn, fearless, proud, honorable</li>
</ul>
<!-- Stat Meters -->
<h4 style="margin-bottom: 0; margin-top: 0;">Stats:</h4>
<ul>
<li><strong>Strength:</strong> <meter value="1" min="0" max="1"></meter></li>
<li><strong>Agility:</strong> <meter value="0.6" min="0" max="1"></meter></li>
<li><strong>Wisdom:</strong> <meter value="0.7" min="0" max="1"></meter></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container3">
<div class="potrait">
<img src="./assets/images/ring.png" class="ring-image" />
<p class="mordor-text">Welcome to Mordor</p>
<img src="assets/images/gollum.png" alt="gollum" class="gollum-image">
</div>
</div>
<div class="container4">
<!-- Frodo Poster -->
<div class="poster-wrapper">
<img src="./assets/images/wanted.png" alt="Wanted Poster" class="wanted-poster" />
<div class="bounty-text">Bounty: 10,000 Gold</div>
<img src="./assets/images/frodostand.png" alt="Frodo Standing" class="character-standing" />
</div>
<!-- Sam Poster -->
<div class="poster-wrapper">
<img src="./assets/images/wanted.png" alt="Wanted Poster" class="wanted-poster" />
<div class="bounty-text">Bounty: 7,500 Gold</div>
<img src="./assets/images/samstand.png" alt="Sam Standing" class="character-standing" />
</div>
<!-- Gandalf Poster -->
<div class="poster-wrapper claimed">
<img src="./assets/images/wanted.png" alt="Wanted Poster" class="wanted-poster" />
<div class="bounty-text">Bounty: ???</div>
<img src="./assets/images/gandalfstanding.png" alt="Gandalf Standing" class="character-standing" />
<div class="claimed-overlay">CLAIMED</div>
<div class="claimed-cross"></div>
</div>
</div>
<div class="container5">
<!-- 🧿 Sauron Section -->
<div class="lore-section">
<img src="./assets/images/sauron.png" alt="Sauron The Overdramatic" class="lore-img">
<div class="lore-content">
<h2 class="lore-title">Sauron: The Overdramatic Eyeball</h2>
<p>
Once a decent jewelry designer, Sauron took things too far when he created the One Ring just to feel something. Now reduced to a flaming eye with serious boundary issues, he spends most of his days spying on everyone like the world's creepiest security cam. His hobbies include incinerating hobbits, whispering menacing things through rings, and being outsmarted by walking trees.
</p>
<p>
Despite being all-seeing, he still didn’t notice two barefoot hobbits sneaking into his backyard. Sources say he's still bitter about not being invited to the Last Alliance's group photo.
</p>
</div>
</div>
<!-- 🧙 Saruman Section -->
<div class="lore-section reverse">
<div class="lore-content">
<h2 class="lore-title">Saruman: The White-ish Wizard</h2>
<p>
Once a wise wizard with the best hair care routine in Middle-earth, Saruman fell from grace because he just *really* liked spinning chairs and talking to flaming eyeballs. After redecorating Isengard into a gothic factory, he declared war on trees — a strange choice in a world where trees fight back.
</p>
<p>
Famous for his dramatic speeches and a voice deeper than Mount Doom, Saruman now enjoys long monologues, creating failed orc hybrids, and getting defeated by a literal flock of birds. His greatest regret? Not investing in earplugs before that Ent attack.
</p>
</div>
<img src="./assets/images/saruman.png" alt="Saruman the Slightly Unhinged" class="lore-img">
</div>
</div>
<div class="container6">
<h2>Hello there <em>Fellow Traveller</em></h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" placeholder="Your message here..." required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
<footer style="text-align: center; margin-top: 3em; padding: 1em; color: white; font-family: 'Georgia', serif;">
Made by <span style="color: black; background-color: rgb(255, 255, 0); padding: 10px 10px; border-radius: 10px; box-shadow: 0 0 20px yellow;"><a href="https://x.com/blogsofJay" style="color: inherit; text-decoration: none;">SK</a></span><br>Referred <a href="https://justfuckingusehtml.com/" style="color: inherit; text-decoration: none;">Just fucking use HTML</a>
</footer>
</body>
</html>