-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
612 lines (573 loc) · 30.8 KB
/
index.html
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
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="images/logo/logo-2.jpg" />
<title>Free Palestine</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<!-- ---------- Navbar Section Start----------- -->
<nav class="navbar navbar-expand-lg nav-bg p-1 p-lg-3 sticky-top">
<div class="container-fluid">
<div class="d-flex justify-content-center align-items-center">
<div class="logo">
<img
class="img-thumbnail rounded-circle"
src="Images/logo/logo-1.jpg"
alt="free palestine logo"
/>
</div>
<h3 class="txt display-5 fw-bolder">Free Palestine</h3>
</div>
<button
class="navbar-toggler bg-success-subtle"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon mb-1"></span>
</button>
<div
class="collapse navbar-collapse nav-links"
id="navbarSupportedContent"
>
<ul class="navbar-nav mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link fw-bold" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="#country">Country Info</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="#magazine">Magazine Cover</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="#war-gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="#support">Support</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- ---------- Navbar Section End----------- -->
<!-- ----------Carousel Section Start----------- -->
<section id="home">
<div
id="carouselExampleCaptions"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="Images/cover/cover-4.jpg"
class="d-block w-100"
alt="carousel cover 1."
/>
<div class="carousel-caption d-none d-md-block">
<h5 class="text-success fw-bolder fs-2">Palestine Triumph</h5>
<p class="text-danger fs-5">
Palestinians celebrate by waving their flags high in the air as
a symbol of resilience and hope for a brighter future.
</p>
</div>
</div>
<div class="carousel-item">
<img
src="Images/cover/cover-2.jpg"
class="d-block w-100"
alt="carousel cover 2"
/>
<div class="carousel-caption d-none d-md-block">
<h5 class="text-success fw-bolder fs-2">Flag Embrace</h5>
<p class="text-danger fs-5">
The streets come alive as people join together under the
Palestinian flag, embodying the spirit of solidarity and
determination for a liberated Palestine.
</p>
</div>
</div>
<div class="carousel-item">
<img
src="Images/cover/cover-1.jpg"
class="d-block w-100"
alt="carousel cover 3"
/>
<div class="carousel-caption d-none d-md-block">
<h5 class="text-success fw-bolder fs-2">Freedom Cheers</h5>
<p class="text-danger fs-5">
A joyous scene unfolds as the people of Palestine joyfully wave
their flags, marking a historic moment in their quest for
freedom and self-determination.
</p>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- ----------Carousel Section End----------- -->
<!-- ----------Country Intro Section Start-------------- -->
<section id="country">
<div class="container-fluid">
<div class=" row row-cols-1 row-cols-lg-1 ">
<div class="py-3 py-lg-5 country-info-container">
<h3 class="text-center p-2 text-success fw-bolder fs-1">
State of Palestine
</h3>
<p class="fw-medium">
<span class="fw-bold text-primary">Population: </span>5 millions
(Approx.)
</p>
<p class="fw-medium">
<span class="fw-bold text-primary">Area: </span>6,220 square
kilometers(Approx.)
</p>
<p class="fw-medium">
<span class="fw-bold text-primary">Currency: </span> The official
currency is the Israeli new shekel (ILS) and the Jordanian dinar
(JOD)
</p>
<h5 class="text-danger fw-bolder text-center fs-3">
Historical Dates and Movements:
</h5>
<p class="fw-medium">
<span class="text-primary">1. Balfour Declaration (1917):</span> The
Balfour Declaration by the British government expressed support for
the establishment of a "national home for the Jewish people" in
Palestine.
</p>
<p class="fw-medium">
<span class="text-primary">2. Partition Plan (1947):</span> The
United Nations proposed a partition plan, leading to the
establishment of the State of Israel and triggering conflict.
</p>
<p class="fw-medium">
<span class="text-primary">3. Nakba (1948):</span>The Nakba, or
"catastrophe," refers to the displacement of Palestinian Arabs
during the 1948 Arab-Israeli war and the establishment of the State
of Israel.
</p>
<p class="fw-medium">
<span class="text-primary">4. Six-Day War (1967):</span>Israel
occupied the West Bank, East Jerusalem, and the Gaza Strip during
the Six-Day War, shaping the ongoing Israeli-Palestinian conflict.
</p>
<p class="fw-medium">
<span class="text-primary">5. Oslo Accords (1993):</span>The Oslo
Accords marked a series of agreements between Israel and the
Palestine Liberation Organization (PLO), aiming to establish a
framework for the future relations between the two entities.
</p>
<p class="fw-medium">
<span class="text-primary">6. Second Intifada (2000-2005):</span>A
period of intensified Israeli-Palestinian violence, triggered by
various factors, including the collapse of peace talks.
</p>
</div>
<div class="container-fluid bg-dark-subtle">
<div class="row align-items-center">
<div class="col-4">
<img
class="img-fluid p-2"
src="Images/flag/flag-6.png"
alt="country mosque "
/>
<h5 class="text-center">Masjidul Aqsa</h5>
</div>
<div class="col-4">
<img
class="img-fluid p-2"
src="Images/flag/flag-4.jpg"
alt="country map"
/>
<h5 class="text-center">Country Map</h5>
</div>
<div class="col-4">
<img
class="img-fluid p-2"
src="Images/logo/flag-1.jpg"
alt="country flag"
/>
<h5 class="text-center">National Flag</h5>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ----------Country Intro Section End--------------- -->
<!-- -----------Magazine Cover Section Start----------- -->
<section id="magazine">
<div>
<div class="py-1 py-lg-5 px-2 px-lg-4 bg-success-subtle">
<h3 class="text-primary fs-1 fw-bolder text-center py-1 py-lg-3">
Journals Covering the Conflict
</h3>
<p class="fw-medium text-dark text-center">
In the profound pages of journals covering the Palestine war, the
narratives unfold with a poignant exploration of the conflict's
human toll. These journals meticulously document the struggles,
resilience, and the untold stories of individuals caught in the
crossfire. Through in-depth analyses, first-hand accounts, and vivid
imagery, they provide a comprehensive understanding of the
multifaceted dimensions of the war, shedding light on both the
heart-wrenching tragedies and the indomitable spirit of those
affected.
</p>
</div>
<div class="container-fluid">
<div class="row justify-content-center align-items-center bg-success-subtle">
<div class="card col-6 col-lg-3 p-1 p-lg-3 " >
<img class="img-fluid rounded-2 border border-2 border-primary" src="Images/magazine/mag-1.jpg" class="card-img-top" alt="magazine cover">
<div class="card-body">
<p class="card-text fw-bolder text-center fs-4 text-danger">Beyond Headlines</p>
</div>
</div>
<div class="card col-6 col-lg-3 p-1 p-lg-3 " >
<img class="img-fluid rounded-2 border border-2 border-primary" src="Images/magazine/mag-5.jpg" class="card-img-top" alt="magazine cover">
<div class="card-body">
<p class="card-text fw-bolder text-center fs-4 text-danger">Frontline Focus</p>
</div>
</div>
<div class="card col-6 col-lg-3 p-1 p-lg-3 " >
<img class="img-fluid rounded-2 border border-2 border-primary" src="Images/magazine/mag-2.jpg" class="card-img-top" alt="magazine cover">
<div class="card-body">
<p class="card-text fw-bolder text-center fs-4 text-danger">War Chronicles</p>
</div>
</div>
<div class="card col-6 col-lg-3 p-1 p-lg-3 " >
<img class="img-fluid rounded-2 border border-2 border-primary" src="Images/magazine/mag-6.jpg" class="card-img-top" alt="magazine cover">
<div class="card-body">
<p class="card-text fw-bolder text-center fs-4 text-danger">The Line of Fire</p>
</div>
</div>
<div class="card col-6 col-lg-3 p-1 p-lg-3 " >
<img class="img-fluid rounded-2 border border-2 border-primary" src="Images/magazine/mag-3.jpg" class="card-img-top" alt="magazine cover">
<div class="card-body">
<p class="card-text fw-bolder text-center fs-4 text-danger">Tales of Turmoil</p>
</div>
</div>
<div class="card col-6 col-lg-3 p-1 p-lg-3 " >
<img class="img-fluid rounded-2 border border-2 border-primary" src="Images/magazine/mag-7.jpg" class="card-img-top" alt="magazine cover">
<div class="card-body">
<p class="card-text fw-bolder text-center fs-4 text-danger">Witnessing War</p>
</div>
</div>
<div class="card col-6 col-lg-3 p-1 p-lg-3 " >
<img class="img-fluid rounded-2 border border-2 border-primary" src="Images/magazine/mag-4.jpg" class="card-img-top" alt="magazine cover">
<div class="card-body">
<p class="card-text fw-bolder text-center fs-4 text-danger">War Zone Unveiled</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- -----------Magazine Cover Section End----------- -->
<!-- -----------War Situation Section Start------------- -->
<section id="war-gallery">
<div class="container-fluid">
<div class="py-lg-5 py-1"> <h3 class="text-warning fs-1 fw-bolder text-center py-1 py-lg-2">
War-Torn Homeland
</h3>
<p class="fw-bold text-center px-lg-3 px-2">
In the wake of relentless conflicts, Palestine stands as a war-torn homeland, bearing witness to the enduring struggles and indomitable spirit of its people amid the scars of battle. The term "war-torn homeland" encapsulates the profound challenges and resilience etched into the very fabric of the Palestinian experience.</p></div>
<div class="row p-3 ">
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1 ">
<img class="img-fluid" src="Images/war/war-1.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1 ">"War-Torn Homeland: Understanding the Devastation in Palestine"</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1 ">
<img class="img-fluid" src="Images/war/war-2.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"Palestine's Ongoing Struggle: The Impact of Wars and Conflicts"</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1 ">
<img class="img-fluid" src="Images/war/war-3.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"From Nakba to Today: Tracing the War Disasters in Palestine"</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1">
<img class="img-fluid" src="Images/war/war-4.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"Echoes of Conflict: The War-Induced Disasters Faced by Palestinians"</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1">
<img class="img-fluid" src="Images/war/war-5.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"Conflict Chronicles: A Closer Look at the War Disasters in Palestine"</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1">
<img class="img-fluid" src="Images/war/war-6.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"Surviving Strife: The Resilience of Palestine Amidst Wars"
</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1">
<img class="img-fluid" src="Images/war/war-9.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"Broken Lives, Shattered Dreams: The Consequences of War in Palestine"
</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1">
<img class="img-fluid" src="Images/war/war-8.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"Unveiling the Tragedy: The Human Cost of Palestine's Wars"
</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1">
<img class="img-fluid" src="Images/war/war-7.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"Behind the Headlines: Humanitarian Crisis in Palestine's War Zones"
</h5>
</div>
</div>
<div class="col-12 col-lg-6 card text-bg-dark mb-lg-2 mb-1">
<img class="img-fluid" src="Images/war/war-10.jpg" class="card-img" alt="war img">
<div class="card-img-overlay">
<h5 class="card-title text-black fw-bolder bg-secondary p-1">"War's Toll on Palestine: A Comprehensive Examination of the Disasters"
</h5>
</div>
</div>
</div>
</div>
</section>
<!-- -----------War Situation Section End-------------- -->
<!-- -----------Supporting Countries Section Start ---- -->
<section id="support">
<div class="container-fluid">
<div class="py-lg-5 py-1 bg-secondary"> <h3 class="text-info fs-1 fw-bolder text-center py-1 py-lg-2">
World Stands with Palestine
</h3>
<p class="fw-bold text-center px-lg-3 px-2">
In a resounding show of solidarity, nations across the globe are uniting to express unwavering support for Palestine. Calls for justice, peace, and a just resolution to the longstanding conflict resonate as the world stands shoulder to shoulder with the Palestinian people. From grassroots movements to diplomatic initiatives, the international community is collectively advocating for a future that upholds the rights and aspirations of all in the region.</p></div>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="Images/support/sup-3.jpg" class="card-img-top" alt="support img">
<div class="card-body">
<h5 class="card-title text-primary fw-bold">Global Solidarity: Nations Rally for Palestine</h5>
<p class="card-text text-black">
Amidst escalating tensions, a wave of global solidarity has emerged as nations rally in support of Palestine. Diplomatic efforts, public demonstrations, and calls for peaceful resolution are echoing worldwide, urging a just and lasting solution to the Israeli-Palestinian conflict. The international community's united front underscores the urgency of addressing the humanitarian and political challenges faced by the people of Palestine.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="Images/support/sup-4.jpg" class="card-img-top" alt="sup img">
<div class="card-body">
<h5 class="card-title text-primary fw-bold">International Support Grows for Palestinian Cause</h5>
<p class="card-text text-black">
The Palestinian cause is gaining momentum on the global stage as international support continues to grow. From diplomatic forums to grassroots movements, nations are increasingly aligning with the aspirations of the Palestinian people for justice, self-determination, and a peaceful resolution to the conflict. This burgeoning solidarity reflects a shared commitment to addressing the complex challenges faced by Palestinians. </p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="Images/support/sup-5.jpeg" class="card-img-top" alt="sup img">
<div class="card-body">
<h5 class="card-title text-primary fw-bold">Nations Support Palestinian Rights</h5>
<p class="card-text text-black">
Countries worldwide are actively championing the cause of Palestinian rights, emphasizing the need for justice, dignity, and self-determination. As a growing number of nations stand in solidarity, the call for recognizing and safeguarding Palestinian rights resonates on the international stage. The diplomatic efforts and vocal endorsements collective commitment for Palestinian people</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="Images/support/sup-8.jpg" class="card-img-top" alt="sup img">
<div class="card-body">
<h5 class="card-title text-primary fw-bold">International Solidarity for Palestine</h5>
<p class="card-text text-black">
In a powerful display of unity, nations globally are expressing unwavering solidarity for Palestine. International voices join together to advocate for justice, human rights, and a peaceful resolution to the Israeli-Palestinian conflict. The surge in support reflects a shared commitment to addressing the plight of the Palestinian people and fostering a future defined by equality and stability.</p>
</div>
</div>
</div>
</div>
<div class="card-group py-1 py-lg-3 gap-lg-1 ">
<div class="card bg-secondary-subtle">
<img class="w-75 h-75 mx-auto p-1 border border-1 rounded border-primary" src="Images/support/sup-1.jpg" class="card-img-top" alt="sup img">
<div class="card-body text-center">
<h5 class="card-title fw-bold ">Unity in Colors: A Harmonious Blend of Palestine and Solidarity</h5>
<p class="card-text text-black">In a symbolic visual representation of global support, the flag of Palestine seamlessly fuses with that of its allies, creating a powerful emblem of unity and solidarity. The distinctive tricolors of Palestine, with their bands of black, white, green, and the red chevron, intertwine gracefully with the vibrant hues of supporting nations..</p>
</div>
</div>
<div class="card bg-success-subtle">
<img class="w-75 h-75 mx-auto p-1 border border-1 rounded border-primary" src="Images/support/sup-6.png" class="card-img-top" alt="sup img">
<div class="card-body text-center">
<h5 class="card-title fw-bold">UN Human Rights Focus: Advocating for Equality in Palestine</h5>
<p class="card-text text-black">In the realm of international human rights, the United Nations directs attention to the ongoing situation in Palestine, championing the cause for justice, equality, and fundamental rights. The organization remains steadfast in its commitment to addressing the complexities and ensuring the protection of human rights for all Palestinians.</p>
</div>
</div>
<div class="card bg-primary-subtle">
<img class="w-75 h-75 mx-auto p-1 border border-1 rounded border-primary" src="Images/support/sup-7.png" class="card-img-top" alt="sup img">
<div class="card-body text-center">
<h5 class="card-title fw-bold">UN Palestinian Rights Committee: Guardians of Justice</h5>
<p class="card-text text-black">Dedicated to upholding justice, the United Nations Palestinian Rights Committee plays a pivotal role in addressing the rights and well-being of Palestinians. Through rigorous advocacy and diplomatic efforts, the committee strives to create a platform for dialogue and action, working towards a future that respects the fundamental rights of the Palestinian people.</p>
</div>
</div>
</div>
</div>
</section>
<!-- -----------Supporting Countries Section End ----- -->
<!-- ------------Contact Section Start --------------------- -->
<section id="contact">
<div class="container-fluid bg-secondary-subtle">
<h3 class="text-primary fs-1 fw-bolder text-center py-1 py-lg-3">Contact Us</h3>
>
<div class="row p-1 p-lg-3">
<div class="col col-lg-6">
<h4 class="text-success fw-bolder text-center py-1 py-lg-2">Frequently Asked Questions (FAQ)</h4>
<!-- Accordion -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="accordion-button fw-bolder" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
1. What are the root causes of the conflict in Palestine?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>The Israeli-Palestinian conflict</strong> stems from historical disputes over territory, identity, and competing national aspirations, primarily centered around the establishment of the State of Israel in 1948.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed fw-bolder" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
2. How has the international community responded to the Palestine-Israel conflict?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>The international community</strong> has engaged in diplomatic efforts, resolutions, and peace initiatives, with varying degrees of success. Ongoing dialogue seeks a two-state solution, recognizing both Israeli and Palestinian rights.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed fw-bolder" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
3. What is the significance of Jerusalem in the conflict?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Jerusalem holds religious and cultural significance</strong> for both Israelis and Palestinians. Its status remains a contentious issue, often influencing negotiations and contributing to the complexity of reaching a comprehensive peace agreement
</div>
</div>
</div>
</div>
</div>
<div class="col col-lg-6 ">
<div class="mx-auto">
<h4 class="text-success fw-bolder text-center py-1 py-lg-2">Contact Form</h4>
<!-- -->
<form class="p-4 border border-primary border-2 rounded-2 text-center">
<div class="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label fw-bold">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="mb-3 d-flex p-2 text-center ">
<label for="message" class="form-label fw-bold">Message: </label>
<textarea name="message" id="" cols="40" rows="5" placeholder= "Enter Your Message"></textarea>
</div>
<button type="submit" class="btn btn-primary fw-bolder">Send Message</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- ------------Contact Section End --------------------- -->
<!-- -------------Footer Section Start--------------------- -->
<section id="footer">
<footer class="bg-black txt fw-bolder py-lg-4">
<div class="container-fluid">
<div class="row">
<!-- Left side with logo and text -->
<div class="col-6 col-md-5">
<img src="Images/logo/logo-2.jpg" alt="Logo" class="img-fluid rounded-5 " style="max-width: 50px;">
<span class="ml-2 p-2 fs-5">Free Palestine</span>
</div>
<!-- Middle with copyright information -->
<div class=" col-6 col-md-7 text-center py-lg-2">
© Copyrights @ Farhan Fardid 2024
</div>
</div>
</div>
</footer>
</section>
<!-- -------------Footer Section End--------------------- -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</body>
</html>