-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
307 lines (298 loc) · 13.4 KB
/
about.html
File metadata and controls
307 lines (298 loc) · 13.4 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
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brother's In Arms -B.I.A</title>
<link
rel="icon"
type="image/png"
href="favicon/favicon-96x96.png"
sizes="96x96"
/>
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="favicon/apple-touch-icon.png"
/>
<meta name="apple-mobile-web-app-title" content="Brother In Arms" />
<link rel="manifest" href="favicon/site.webmanifest" />
<link href="css/reset.css" rel="stylesheet" />
<link href="css/grid.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<!-- Google Font -->
<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=DM+Serif+Text:ital@0;1&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!-- Plyr -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<!-- Javascript -->
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script defer src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="module" defer src="js/about.js"></script>
</head>
<body>
<section class="nav-con">
<nav>
<a href="index.html">
<img src="images/logo-flower-02.svg" alt="Brothers In Arms Logo" />
</a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="history_stories.html">History & Stories</a></li>
<li><a href="victoriacrosses.html">Victoria Crosses</a></li>
<li><a href="donors.html">Donors</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#" class="donate-button">Donate</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<header class="sub-header about-header">
<div class="header-content">
<h1>About Us</h1>
<p>
Honoring the sacrifices of soldiers who fought for freedom and
humanity.
</p>
</div>
</header>
<main class="about-main">
<section class="project-background">
<div class="container grid-con">
<h2 class="col-span-full">Project Background</h2>
<p class="col-span-full m-col-span-6 l-col-span-5">
During World War I, over 1.4 million Indian soldiers and 650,000
Canadian soldiers served, with many fighting side by side on the
Western Front. Indian soldiers arrived in Europe in 1914 and played
a crucial role in key battles like Ypres, Neuve Chapelle, the Somme,
and Vimy Ridge. The memorial aims to honor their sacrifices and
highlight the forgotten story of their collaboration.
</p>
<img
src="images/drone-shot.JPG"
alt="Location"
class="col-span-full m-col-span-6 l-col-start-7 l-col-span-6"
/>
</div>
</section>
<section class="mission-vision">
<div class="container">
<div class="mission">
<h2>Mission</h2>
<p>
To highlight the forgotten story of collaboration between Indian
and Canadian soldiers on the Western Front in Europe. The memorial
will reflect the lessons from their heroism, sacrifices, and
voices of liberation.
</p>
</div>
<div class="vision">
<h2>Vision</h2>
<p>
To commemorate the valour of Indian and Canadian Brothers In Arms
and to inspire future generations to uphold the values of humanity
and freedom.
</p>
</div>
</div>
</section>
<section class="phases">
<div class="container">
<h2>Phases of the Memorial</h2>
<div class="phase phase-1 grid-con">
<h3 class="col-span-full">Phase 1: Living Guard of Honour</h3>
<div class="phase-img col-span-full m-col-span-6">
<img src="images/phase1.jpg" alt="Phase 1" />
</div>
<div class="phase-img col-span-full m-col-span-6">
<p>
Completed in May 2018 for the WWI Centennial, the Living Guard
of Honour was the first step in commemorating the bravery of
Indian and Canadian soldiers who fought side by side. This phase
introduced a ceremonial space featuring symbolic elements that
reflect the unity and sacrifice of these soldiers. The Living
Guard of Honour consists of a formation of trees representing
the enduring bond between the two nations, symbolizing strength,
resilience, and remembrance.
</p>
</div>
<div class="col-span-full">
<p>
The trees stand tall like soldiers on the battlefield,
representing those who never returned home. Each tree is
dedicated to a regiment or battalion that played a crucial role
in World War I. The space also includes plaques with
inscriptions that tell the story of the soldiers’ struggles,
courage, and contributions. The unveiling ceremony in 2018 was
attended by veterans, historians, and families of the fallen,
ensuring that their memories live on for future generations.
</p>
</div>
</div>
<div class="phase phase-2 grid-con">
<h3 class="col-span-full">Phase 2: Granite Rock Memorial</h3>
<div class="phase-img col-span-full m-col-span-6">
<p>
The second phase of the memorial, set to be completed by
November 11, 2026, will feature a Granite Rock Memorial with
hand-carved battlefield scenes. These intricate carvings will
depict significant moments from battles such as Ypres, Neuve
Chapelle, the Somme, and Vimy Ridge, where Indian and Canadian
soldiers fought side by side.
</p>
</div>
<div class="phase-img col-span-full m-col-span-6">
<img src="images/phase2.jpg" alt="Phase 2" />
</div>
<div class="col-span-full">
<p>
The memorial will serve as a lasting tribute, etched in stone,
to remind visitors of the soldiers' hardships and sacrifices.
The battlefield carvings will be created by skilled artisans who
will ensure that every detail—from the expressions of the
soldiers to the chaotic yet courageous battle scenes—captures
the essence of war.
</p>
<p>
Additionally, the Granite Rock Memorial will have an interactive
digital display, allowing visitors to learn about individual
soldiers’ stories, the history of each regiment, and personal
letters written from the frontlines. This will create an
immersive and educational experience, ensuring that the
sacrifices made over a century ago are never forgotten.
</p>
</div>
</div>
</div>
</section>
<section class="purpose">
<div class="container">
<h2>Purpose of the Memorial Site</h2>
<ul>
<li>
Recognizing the 135,000+ Indian soldiers who fought alongside
Canadians: The memorial serves as a tribute to the Indian soldiers
who fought shoulder to shoulder with Canadian forces during World
War I. Their contributions, courage, and resilience on the
battlefield played a vital role in key battles, yet their stories
have often been overlooked in mainstream historical narratives. By
recognizing their service, the memorial aims to bring their
sacrifices into the public consciousness and ensure they receive
the respect and remembrance they deserve.
</li>
<li>
Preserving stories of bravery and sacrifice: Many Indian and
Canadian soldiers displayed extraordinary bravery, enduring harsh
conditions, intense combat, and significant hardships in their
pursuit of freedom and peace. This memorial will safeguard their
stories, ensuring that their heroism is not forgotten. Through
historical records, personal accounts, and visual storytelling, it
will serve as a permanent space where future generations can learn
about the immense sacrifices made on the battlefield.
</li>
<li>
Educating the public on this lesser-known chapter of history: The
collaboration between Indian and Canadian soldiers in World War I
remains an underrepresented part of military history. This
memorial seeks to bridge that gap by providing educational
resources, historical insights, and engaging narratives that
highlight the significance of their contributions. Schools,
researchers, and visitors will have access to a wealth of
information, fostering a deeper appreciation of the shared history
and values that bind Canada and India.
</li>
</ul>
</div>
</section>
<section class="location">
<div class="container">
<h2>Location of Memorial Site</h2>
<p>
The memorial will be located in London, Ontario, featuring a Granite
Rock Memorial with battlefield carvings, a Living Guard of Honour,
and a Memorial Park with pathways, plaques, and landscaping.
</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58221.401735355095!2d-81.24553068356292!3d43.01728290738738!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882eed86c5160bf1%3A0x8c0f6a26dd419342!2sValue%20Village%20Community%20Donation%20Centre!5e1!3m2!1sen!2sca!4v1737900442388!5m2!1sen!2sca"
width="600"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<h1 class="hidden">Footer</h1>
<div class="footer-content">
<h2 class="hidden">Footer Content</h2>
<div class="footer-section about">
<div id="logo-footer">
<img src="images/logo-flower-02.svg" alt="Brothers In Arm Logo" />
</div>
<h4>Brothers in Arms Memorial</h4>
<p>
A digital tribute to the Indian and Canadian soldiers who fought
together in World War
</p>
<div class="contact">
<span><i class="fa fa-phone"></i> +1 (123) 456-7890</span>
<span
><i class="fa fa-envelope"></i>
info@brothersinarmsmemorial.com</span
>
</div>
</div>
<div class="footer-section links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="history_stories.html">History & Stories</a></li>
<li><a href="victoriacrosses.html">Victoria Crosses</a></li>
<li><a href="donors.html">Donors</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-section social">
<h4>Follow Us</h4>
<div class="social-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
</div>
<p>Subscribe to our newsletter for updates:</p>
<form class="newsletter-form">
<input type="email" placeholder="Enter your email" required />
<button type="submit">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Brothers in Arms Memorial. All rights reserved.</p>
<p>Designed with <i class="fa fa-heart"></i> by M.A.A.K.E</p>
</div>
</footer>
</body>
</html>