-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
569 lines (491 loc) · 36.4 KB
/
Copy pathindex.html
File metadata and controls
569 lines (491 loc) · 36.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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Histoire de la France - Timeline Interactive</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(to right, #002395 0%, #002395 33.33%, #FFFFFF 33.33%, #FFFFFF 66.66%, #ED2939 66.66%, #ED2939 100%);
background-attachment: fixed;
color: #333;
overflow-x: hidden;
}
.intro-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.97);
}
.intro-content {
max-width: 900px;
text-align: center;
animation: fadeIn 1.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.intro-content h1 {
font-size: 3.5em;
color: #002395;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.intro-content .subtitle {
font-size: 1.3em;
color: #ED2939;
margin-bottom: 30px;
font-weight: 600;
}
.intro-text {
font-size: 1.1em;
line-height: 1.8;
color: #555;
text-align: justify;
margin-bottom: 40px;
}
.scroll-indicator {
font-size: 2em;
color: #002395;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
.timeline-container {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
position: relative;
}
.timeline-line {
position: absolute;
left: 50px;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #002395, #ED2939);
z-index: 1;
}
.timeline-item {
position: relative;
margin: 60px 0;
padding-left: 100px;
opacity: 0;
transform: translateX(-50px);
transition: all 0.6s ease;
}
.timeline-item.visible {
opacity: 1;
transform: translateX(0);
}
.timeline-icon {
position: absolute;
left: 26px;
top: 0;
width: 50px;
height: 50px;
background: white;
border: 4px solid #002395;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
z-index: 2;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.timeline-content {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.timeline-content:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
transform: translateY(-5px);
}
.content-image {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
}
.content-body {
padding: 25px;
}
.period-title {
font-size: 1.8em;
color: #002395;
margin-bottom: 8px;
font-weight: bold;
}
.date-range {
font-size: 1em;
color: #ED2939;
font-weight: bold;
margin-bottom: 15px;
}
.description {
line-height: 1.7;
color: #555;
text-align: justify;
font-size: 0.95em;
}
.description p {
margin-bottom: 12px;
}
.key-points {
margin-top: 15px;
padding: 15px;
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
border-radius: 8px;
border-left: 4px solid #002395;
}
.key-points h4 {
color: #002395;
margin-bottom: 10px;
font-size: 1.1em;
}
.key-points ul {
list-style: none;
padding-left: 0;
}
.key-points li {
padding: 5px 0;
color: #555;
font-size: 0.9em;
}
.key-points li:before {
content: "🔹 ";
color: #ED2939;
}
.credits-section {
background: white;
margin: 80px auto 0;
padding: 60px 40px;
text-align: center;
}
.credits-section h2 {
font-size: 2.5em;
color: #002395;
margin-bottom: 20px;
}
.credits-section .group-name {
font-size: 2em;
color: #ED2939;
font-weight: bold;
margin: 30px 0;
}
.credits-section h3 {
font-size: 1.5em;
color: #002395;
margin: 30px 0 20px;
}
.credits-list {
list-style: none;
padding: 0;
max-width: 600px;
margin: 0 auto;
}
.credits-list li {
font-size: 1.2em;
padding: 15px;
margin: 10px 0;
background: linear-gradient(135deg, #002395 0%, #ED2939 100%);
color: white;
border-radius: 10px;
transition: transform 0.3s ease;
}
.credits-list li:hover {
transform: translateX(10px);
}
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
background: linear-gradient(135deg, #002395, #ED2939);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1000;
}
.scroll-top.visible {
opacity: 1;
}
.scroll-top:hover {
transform: translateY(-5px);
}
@media (max-width: 768px) {
.intro-content h1 {
font-size: 2.2em;
}
.intro-content .subtitle {
font-size: 1.1em;
}
.intro-text {
font-size: 1em;
}
.timeline-line {
left: 25px;
}
.timeline-item {
padding-left: 70px;
}
.timeline-icon {
left: 0;
width: 50px;
height: 50px;
}
.period-title {
font-size: 1.4em;
}
.content-image {
height: 200px;
}
.credits-section {
padding: 40px 20px;
}
.credits-section h2 {
font-size: 2em;
}
}
</style>
</head>
<body>
<div>
<img src="./New folder/map.jpg" alt="" style="width: 75vw; margin: 10vh auto; display: block; border-radius: 5%;">
</div>
<div class="intro-section">
<div class="intro-content">
<h1>🇫🇷 Histoire de la France</h1>
<p class="subtitle">Un Voyage à Travers les Siècles</p>
<div class="intro-text">
L'histoire de la France est l'une des plus riches et influentes d'Europe et du monde. Depuis l'époque gauloise jusqu'à l'ère contemporaine, la France a été le théâtre de transformations politiques, sociales, culturelles et intellectuelles majeures. Elle a vu naître des dynasties royales puissantes, des réformes religieuses, des mouvements philosophiques et artistiques qui ont marqué le monde, et des révolutions qui ont inspiré d'autres nations à revendiquer liberté et égalité. Son rôle mondial s'est étendu à travers les explorations, la colonisation, les guerres mondiales et sa participation active à la diplomatie et aux organisations internationales modernes.
</div>
<div class="scroll-indicator">↓</div>
</div>
</div>
<div class="timeline-container">
<div class="timeline-line"></div>
<div class="timeline-item">
<div class="timeline-icon">📜</div>
<div class="timeline-content">
<img src="./New folder/1.1.jpeg" alt="Medieval France" class="content-image">
<div class="content-body">
<div class="period-title">La France ancienne et médiévale</div>
<div class="date-range">500 - 1500</div>
<div class="description">
<h3>🇫🇷 Les Origines du Royaume de France et le Moyen Âge</h3>
<p>Après la chute de l’Empire romain d’Occident en 476, la Gaule, ancien territoire romain, sombre dans une période d’instabilité politique et de migrations. Parmi les nombreux peuples germaniques qui s’installent, les Francs, dirigés par la dynastie mérovingienne, parviennent peu à peu à imposer leur autorité.
Clovis Ier (vers 466–511), roi des Francs saliens, joue un rôle fondateur : il unifie les différentes tribus franques sous son commandement et fait de Paris l’un des centres politiques du royaume. Sa conversion au christianisme vers 496, à la suite de sa victoire à Tolbiac, marque un tournant décisif. En se faisant baptiser par l’évêque Rémi de Reims, Clovis obtient le soutien de l’Église catholique, créant une alliance durable entre la monarchie et la religion, qui définira l’identité française pendant plus d’un millénaire.
La dynastie mérovingienne, qui succède à Clovis, se fragilise progressivement. Les rois deviennent faibles et souvent qualifiés de « rois fainéants », tandis que le véritable pouvoir passe aux maires du palais, sortes de premiers ministres puissants. Parmi eux, Charles Martel se distingue. En 732, il arrête l’expansion musulmane en Europe lors de la bataille de Poitiers, victoire perçue comme un événement fondateur de la chrétienté occidentale.
Son fils, Pépin le Bref, met fin à la dynastie mérovingienne et fonde la dynastie carolingienne. Pépin consolide le pouvoir royal et renforce l’alliance entre le trône et la papauté, donnant ainsi à la monarchie française une légitimité religieuse. Son fils, Charlemagne (742–814), élargit considérablement le territoire, formant un empire qui couvre la majeure partie de l’Europe occidentale : de la France actuelle à l’Allemagne, en passant par l’Italie et les Pays-Bas.
Sous son règne, l’Europe connaît une renaissance intellectuelle et artistique, appelée Renaissance carolingienne. Les monastères deviennent des centres d’apprentissage, la copie des manuscrits antiques est encouragée, et un système éducatif rudimentaire voit le jour. Charlemagne est couronné empereur d’Occident en 800 par le pape Léon III à Rome, marquant la naissance symbolique du Saint-Empire romain germanique.
Après la mort de Charlemagne, son empire est partagé entre ses petits-fils par le traité de Verdun (843), divisant l’Europe en trois royaumes : la Francie occidentale (future France), la Francie orientale (future Allemagne) et la Lotharingie (territoires intermédiaires). C’est ainsi que se dessine peu à peu le territoire français.</p>
<h3>Le Système Féodal et la Société Médiévale</h3>
<p>Le Moyen Âge voit l’émergence du système féodal, fondé sur les liens de vassalité et la possession de terres. Les seigneurs locaux détiennent une autorité politique, économique et militaire sur leurs domaines. En échange de protection, les paysans et serfs travaillent leurs terres, créant une société profondément hiérarchisée. Les châteaux forts et les villages fortifiés deviennent le cœur de la vie rurale.
L’Église, quant à elle, domine la vie spirituelle, sociale et culturelle. Elle détient d’immenses richesses, influence les rois et dicte les comportements moraux. Les monastères jouent un rôle essentiel dans la conservation du savoir, la copie de manuscrits et la diffusion du christianisme. Les cathédrales gothiques, telles que Notre-Dame de Paris, symbolisent la foi et la puissance de cette époque, alliant prouesse architecturale et spiritualité.</p>
<h3>Les Grandes Crises et la Guerre de Cent Ans</h3>
<p>À partir du XIVᵉ siècle, la France traverse une série de crises profondes : famines, peste noire (1347–1352), révoltes paysannes et conflits incessants. Le plus célèbre de ces conflits est la Guerre de Cent Ans (1337–1453), qui oppose la France et l’Angleterre pour la succession au trône de France.
Cette guerre, longue et dévastatrice, voit émerger des figures légendaires, notamment Jeanne d’Arc, jeune paysanne inspirée par des visions divines. Elle rallie les troupes françaises, redonne espoir à la nation et contribue à la levée du siège d’Orléans (1429). Capturée puis condamnée par les Anglais, elle est brûlée vive à Rouen en 1431, avant d’être canonisée des siècles plus tard.
La guerre s’achève par la reconquête du territoire français et renforce le sentiment national. Les rois de France, notamment Charles VII et Louis XI, centralisent progressivement le pouvoir, affaiblissant la féodalité et posant les bases de la monarchie absolue des siècles suivants.</p>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">⚔️</div>
<div class="timeline-content">
<img src="./New folder/2.png" alt="Renaissance Versailles" class="content-image">
<div class="content-body">
<div class="period-title">La Renaissance et l’Âge Classique</div>
<div class="date-range">1500 - 1700</div>
<div class="description">
<p>La Renaissance en France fut une époque de profond renouveau artistique, intellectuel et scientifique. Inspirée par les idées venues d’Italie, elle marqua la transition entre le Moyen Âge et les temps modernes. Sous le règne de François Ier (1515–1547), la France s’ouvrit pleinement à la culture humaniste. Le roi, passionné par les arts et la connaissance, fit venir à sa cour de nombreux artistes italiens, dont Léonard de Vinci, qui passa ses dernières années au château du Clos Lucé à Amboise. François Ier encouragea également la diffusion de l’imprimerie, la création de collèges et la fondation du Collège de France, symbole de la liberté intellectuelle et de la recherche scientifique. Cette période vit l’essor d’une nouvelle manière de penser, fondée sur la raison, l’observation et la curiosité du monde.</p>
<p>Cependant, cette époque de lumière fut aussi assombrie par de terribles conflits religieux. À partir du milieu du XVIe siècle, les tensions entre catholiques et protestants (huguenots) plongèrent le royaume dans une série de guerres civiles sanglantes. Le massacre de la Saint-Barthélemy, en 1572, où des milliers de protestants furent tués à Paris et en province, marqua l’un des moments les plus tragiques de l’histoire de France. Ce climat de haine et de division ne prit fin qu’avec l’avènement d’Henri IV, un roi pragmatique et tolérant, qui tenta de réconcilier ses sujets. Par l’Édit de Nantes en 1598, il accorda aux protestants la liberté de culte dans certaines régions, ramenant une paix fragile et relative après des décennies de guerre.</p>
<p>Au XVIIe siècle, le pouvoir royal atteignit son apogée sous le règne de Louis XIV, le Roi Soleil (1643–1715). Symbole du pouvoir absolu, il incarna la monarchie dans toute sa splendeur. En centralisant l’autorité autour de sa personne et en affaiblissant la noblesse, il fit de la France la première puissance politique et culturelle d’Europe. La construction du somptueux château de Versailles illustrait sa volonté de grandeur et de contrôle, tandis que la cour devint le centre de la vie artistique et intellectuelle du royaume. Sous son règne, la France rayonna par ses écrivains (Molière, Racine, La Fontaine), ses peintres, ses musiciens et ses architectes.</p>
<p>Mais cette grandeur eut un prix : les guerres incessantes menées par Louis XIV pour étendre les frontières de la France épuisèrent les finances du royaume. Parallèlement, la France étendit son influence au-delà de l’Europe, amorçant une vaste expansion coloniale. Des territoires furent conquis en Amérique du Nord — notamment la fondation de Québec par Samuel de Champlain en 1608 —, ainsi qu’en Afrique et en Asie, où furent établis de nombreux comptoirs commerciaux. Ce double héritage, de puissance et d’épuisement, marqua profondément la France à la veille du siècle des Lumières.</p>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">🌍</div>
<div class="timeline-content">
<img src="./New folder/3.avif" alt="Paris Revolution" class="content-image">
<div class="content-body">
<div class="period-title">Révolution française et ère napoléonienne</div>
<div class="date-range">1789 - 1815</div>
<div class="description">
<p>La Révolution française, éclatant en 1789, fut l’un des événements les plus marquants de l’histoire mondiale. Elle naquit d’un profond malaise économique et social : le royaume était ruiné par des guerres coûteuses et un système fiscal injuste, dans lequel le clergé et la noblesse jouissaient de privilèges tandis que le tiers état supportait l’essentiel des impôts. Les idées des Lumières — prônant la raison, la liberté et l’égalité — avaient profondément transformé les mentalités, remettant en question l’autorité absolue du roi et le pouvoir de l’Église.</p>
<p>L’année 1789 fut celle des grands bouleversements. La convocation des États généraux, suivie du serment du Jeu de Paume, marqua le début d’une nouvelle ère politique. Quelques semaines plus tard, la prise de la Bastille, le 14 juillet, devint le symbole de la liberté conquise sur la tyrannie. Dans les campagnes, la peur se répandit et les privilèges féodaux furent abolis dans la nuit du 4 août. Peu après, l’Assemblée nationale adopta la Déclaration des droits de l’homme et du citoyen, affirmant les principes universels de liberté, d’égalité et de souveraineté populaire — des valeurs qui inspireront de nombreuses démocraties modernes.</p>
<p>Cependant, la Révolution prit rapidement un tournant plus radical. Entre 1793 et 1794, la Terreur s’installa, dirigée par Robespierre et les Montagnards, qui instaurèrent un régime de répression politique. Des milliers de personnes, considérées comme ennemies de la Révolution, furent guillotinées, y compris le roi Louis XVI et la reine Marie-Antoinette. Malgré ces excès, cette période permit aussi des avancées sociales majeures : la laïcisation de l’État, l’égalité civile et la mise en place d’une République unie autour de l’idée de citoyenneté.</p>
<p>À la suite de ce chaos politique, émergea un homme au destin exceptionnel : Napoléon Bonaparte. Général talentueux et stratège redoutable, il prit le pouvoir par un coup d’État le 18 brumaire an VIII (1799) et mit fin à l’instabilité révolutionnaire. Devenu empereur en 1804, Napoléon entreprit une série de réformes profondes et durables : le Code civil, la création des lycées, la Banque de France, et une administration centralisée qui structure encore aujourd’hui la France moderne. Sur le plan militaire, il mena une série de campagnes victorieuses à travers l’Europe, redéfinissant les frontières et diffusant les idéaux révolutionnaires.</p>
<p>Mais cette expansion se solda par une usure progressive et une coalition de puissances européennes qui mirent fin à son empire. Après la désastreuse campagne de Russie (1812) et sa défaite finale à Waterloo en 1815, Napoléon fut exilé sur l’île de Sainte-Hélène. Son épopée laissa une empreinte indélébile : il avait transformé la France en une puissance moderne, fondée sur le mérite, la loi et l’administration, tout en marquant durablement la politique et la géographie de l’Europe.</p>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">🏛️</div>
<div class="timeline-content">
<img src="./New folder/4.png" alt="XIXe siècle" class="content-image">
<div class="content-body">
<div class="period-title">Le XIXe siècle : Révolutions, modernisation et progrès</div>
<div class="date-range">1815 - 1914</div>
<div class="description">
<p>Le XIXe siècle fut une période de profonds bouleversements politiques, économiques et sociaux pour la France. Après la chute de Napoléon en 1815, le pays entra dans une phase d’instabilité où se succédèrent divers régimes, témoignant de la difficile recherche d’un équilibre entre monarchie, empire et république.</p>
<p>La Restauration (1815–1830) vit le retour des Bourbons sur le trône avec Louis XVIII puis Charles X, qui tentèrent de rétablir l’ordre monarchique et les privilèges de l’Ancien Régime. Mais les aspirations libérales de la bourgeoisie et les idéaux nés de la Révolution restaient vivaces. En 1830, une nouvelle insurrection — les Trois Glorieuses — mit fin à la Restauration et porta au pouvoir Louis-Philippe d’Orléans, proclamé « roi des Français ». Son règne, appelé la Monarchie de Juillet, se voulait plus libéral et bourgeois, favorisant la prospérité économique, mais il resta marqué par les inégalités sociales et les révoltes ouvrières, notamment celle de 1848, qui mit fin à sa dynastie.</p>
<p>La Deuxième République (1848–1852) fut proclamée dans un climat d’espoir démocratique : on y instaura le suffrage universel masculin, l’abolition de l’esclavage dans les colonies et de nouvelles libertés politiques. Cependant, les tensions entre républicains modérés et socialistes menèrent à l’instabilité, ouvrant la voie à Louis-Napoléon Bonaparte, neveu de Napoléon Ier. Ce dernier prit le pouvoir par un coup d’État en 1851 et fonda le Second Empire (1852–1870), devenant Napoléon III.</p>
<p>Sous son règne, la France entra dans une ère de modernisation accélérée. Le baron Haussmann transforma Paris avec ses grands boulevards, ses parcs et ses immeubles élégants, donnant à la capitale son visage moderne. L’économie connut une croissance remarquable grâce à l’industrialisation, au développement du chemin de fer, et à l’essor du commerce mondial. Napoléon III encouragea également l’expansion coloniale, étendant l’influence française en Afrique, en Asie et dans le Pacifique. Toutefois, ses ambitions militaires aboutirent à la défaite contre la Prusse en 1870, provoquant sa chute et la naissance d’un nouveau régime.</p>
<p>La Troisième République (1870–1940) s’affirma peu à peu comme le régime durable de la France moderne. Elle mit en place d’importantes réformes éducatives avec Jules Ferry, rendant l’école gratuite, laïque et obligatoire. Cette époque consolida les valeurs de laïcité, de citoyenneté et de progrès social, tout en voyant la France devenir un centre majeur de la science, de la culture et des arts.</p>
<p>Le XIXe siècle français fut aussi un âge d’or intellectuel et artistique. Des écrivains comme Victor Hugo, Émile Zola et Gustave Flaubert explorèrent la condition humaine, la justice et la liberté. En peinture, les Impressionnistes — Monet, Renoir, Degas — bouleversèrent la vision artistique traditionnelle, tandis que la science connut un essor extraordinaire avec Louis Pasteur, pionnier de la microbiologie, et Marie Curie, lauréate du prix Nobel pour ses découvertes sur la radioactivité. Ces avancées illustrèrent la puissance créative et intellectuelle de la France, dont le rayonnement s’étendait bien au-delà de ses frontières.</p>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">⚠️</div>
<div class="timeline-content">
<img src="./New folder/5.png" alt="Guerres mondiales" class="content-image">
<div class="content-body">
<div class="period-title">Le XXe siècle : Guerres mondiales et renaissance de la République</div>
<div class="date-range">1914 - 1945</div>
<div class="description">
<p>Le XXe siècle débuta pour la France sous le signe du progrès industriel et scientifique, mais il fut bientôt marqué par deux guerres mondiales dévastatrices qui bouleversèrent profondément la société et l’identité nationale.</p>
<p>La Première Guerre mondiale (1914–1918), surnommée « la Grande Guerre », plongea la France dans un conflit d’une ampleur sans précédent. Les combats, particulièrement meurtriers sur le front de l’Ouest, firent des millions de morts et de blessés. Des batailles emblématiques comme Verdun et la Somme devinrent les symboles du courage, du sacrifice et de la souffrance d’une génération entière. Les tranchées, la boue, les gaz toxiques et la guerre d’usure marquèrent durablement les esprits. Malgré ces pertes immenses, la France sortit victorieuse en 1918, mais profondément meurtrie et appauvrie, avec un territoire dévasté et une population endeuillée.</p>
<p>À peine deux décennies plus tard, la France fut de nouveau entraînée dans un conflit mondial. En 1939, la Seconde Guerre mondiale éclata. En 1940, l’armée française fut rapidement vaincue par l’Allemagne nazie, conduisant à l’occupation du pays et à la mise en place du régime de Vichy dirigé par le maréchal Pétain, qui collabora avec l’ennemi. Une grande partie du territoire fut contrôlée par les forces allemandes, tandis que la population subissait la répression, la censure et les privations.</p>
<p>Mais au cœur de cette période sombre, la Résistance s’organisa, à la fois intérieure, avec des réseaux clandestins, et extérieure, menée depuis Londres par Charles de Gaulle, qui lança son célèbre Appel du 18 juin 1940. Ces résistants, hommes et femmes de toutes origines, incarnèrent l’espoir et la lutte pour la liberté.</p>
<p>En 1944, avec le Débarquement de Normandie et l’appui des Alliés, la France fut progressivement libérée. La Libération de Paris, en août 1944, symbolisa le retour de la République et de la souveraineté nationale. Sous l’impulsion de Charles de Gaulle, la France entama alors une reconstruction politique, morale et économique, redonnant vie à ses institutions républicaines et à ses idéaux de liberté, d’égalité et de fraternité.</p>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">🇫🇷</div>
<div class="timeline-content">
<img src="./New folder/6.png" alt="France contemporaine" class="content-image">
<div class="content-body">
<div class="period-title">La France contemporaine : De la décolonisation à la Cinquième République</div>
<div class="date-range">1945 - Aujourd'hui</div>
<div class="description">
<p>Après la Seconde Guerre mondiale, la France connut une période de reconstruction, de tensions coloniales et de profonds changements sociaux. La Quatrième République (1946–1958), bien qu’ayant permis une reprise économique rapide grâce au Plan Marshall et à l’industrialisation, fut marquée par une instabilité politique chronique et les guerres de décolonisation, notamment en Indochine et en Algérie.</p>
<p>En 1958, face à la crise algérienne et à la paralysie du gouvernement, Charles de Gaulle fut rappelé au pouvoir. Il fonda la Cinquième République, dotée d’une Constitution renforçant considérablement les pouvoirs du président, garantissant ainsi une stabilité politique durable. Cette nouvelle république mit fin à la guerre d’Algérie par les Accords d’Évian en 1962, accordant l’indépendance au pays après des années de conflits sanglants. Cet événement marqua une étape majeure dans le processus de décolonisation, qui transforma les relations de la France avec ses anciens territoires d’Afrique et d’Asie, donnant naissance à une politique de coopération fondée sur la francophonie et les échanges culturels.</p>
<p>Les années 1960 et 1970 furent également celles d’une transformation sociale et culturelle profonde. En mai 1968, une série de manifestations étudiantes et ouvrières secoua la France entière. Ce mouvement, né d’un rejet de l’autorité et d’une aspiration à plus de liberté, marqua un tournant dans la société française : il contribua à l’évolution des mentalités, à la libération des mœurs, à la modernisation de l’éducation et à la reconnaissance de nouvelles valeurs comme l’égalité entre les sexes et la liberté d’expression.</p>
<p>Au fil des décennies, la France a consolidé son rôle d’acteur majeur sur la scène mondiale. Membre fondateur de l’Union européenne, elle a œuvré pour l’intégration politique et économique du continent tout en maintenant une influence diplomatique indépendante. Sur le plan international, elle s’est engagée dans des missions de maintien de la paix, dans la lutte contre le terrorisme et dans la défense des droits de l’homme.</p>
<p>La France contemporaine se distingue aussi par son rayonnement culturel, scientifique et technologique. Sa gastronomie, son cinéma, sa mode et ses arts continuent d’incarner l’élégance et la créativité. Dans le domaine scientifique, la recherche française joue un rôle clé, notamment dans les énergies renouvelables, la médecine et la conquête spatiale. Enfin, face aux défis du XXIe siècle, la France s’affirme comme un acteur engagé dans la lutte contre le changement climatique, prônant le développement durable et la coopération internationale pour un avenir plus équitable.</p>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">🎨</div>
<div class="timeline-content">
<img src="./New folder/last.jpeg" alt="Influence culturelle" class="content-image">
<div class="content-body">
<div class="period-title">Influence culturelle et intellectuelle</div>
<div class="date-range">Héritage Mondial</div>
<div class="description">
<p>La France a profondément marqué le monde à travers de nombreuses contributions majeures.</p>
</div>
<div class="key-points">
<h4>Domaines d'influence:</h4>
<ul>
<li>
<strong>Philosophie:</strong>
<p>Des penseurs comme René Descartes, Montesquieu, Rousseau, Jean-Paul Sartre et Simone de Beauvoir ont façonné la pensée moderne, la politique, l'éthique et l'existentialisme.</p>
</li>
<li>
<strong>Littérature:</strong>
<p>Molière, Victor Hugo, Émile Zola et Albert Camus ont créé des œuvres intemporelles explorant la nature humaine, la justice sociale et l'absurde.</p>
</li>
<li>
<strong>Arts:</strong>
<p>L’impressionnisme (Monet, Renoir) et le cubisme (Braque, Picasso) ont révolutionné la peinture, tandis que l’architecture française va des cathédrales gothiques aux bâtiments modernes comme le Centre Pompidou.</p>
</li>
<li>
<strong>Sciences et technologie:</strong>
<p>Louis Pasteur a développé la théorie des germes et des vaccins, Marie Curie a découvert la radioactivité, et des entreprises comme Airbus et le programme Ariane illustrent l’innovation moderne.</p>
</li>
<li>
<strong>Langue et culture:</strong>
<p>Le français est parlé dans 29 pays et sert de langue diplomatique et culturelle. La gastronomie française est reconnue par l’UNESCO et Paris est un centre mondial de mode et de cinéma.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="credits-section">
<h2>👥 Crédits du Groupe</h2>
<p class="group-name">LE GROUPE 5</p>
<h3>Les Membres:</h3>
<ul class="credits-list">
<li>Raiyan S (RA2511003010431)</li>
<li>Ganesh (RA2511003010383)</li>
<li>Vinesh (RA2511003010401)</li>
<li>Vishnu (RA2511003010412)</li>
<li>Himanish (RA2511003010411)</li>
</ul>
</div>
<div class="scroll-top" id="scrollTop">↑</div>
<script>
const scrollTopBtn = document.getElementById('scrollTop');
// Show scroll-top button
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
scrollTopBtn.classList.add('visible');
} else {
scrollTopBtn.classList.remove('visible');
}
});
scrollTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Animate timeline items both ways
const timelineItems = document.querySelectorAll('.timeline-item');
const observerOptions = {
threshold: 0.2,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// When the element enters viewport
entry.target.classList.add('visible');
} else {
// When it leaves viewport (scroll past or scroll up)
entry.target.classList.remove('visible');
}
});
}, observerOptions);
timelineItems.forEach(item => observer.observe(item));
</script>
</body>
</html>