|
|
| Ligne 1 : |
Ligne 1 : |
| Page servant de test pour les frises chronologiques, sera supprimé avant l'ouverture. | | Page servant de test pour les frises chronologiques, sera supprimé avant l'ouverture. |
|
| |
|
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>Chronologie - Âge de la plénitude</title>
| |
| <style>
| |
| * {
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
| body {
| |
| font-family: Arial, Helvetica, sans-serif;
| |
| background: #FFFFFF;
| |
| color: #111;
| |
| padding: 40px 20px 300px;
| |
| line-height: 1.45;
| |
| }
| |
| h1 {
| |
| text-align: center;
| |
| margin: 0 0 60px 0;
| |
| font-size: 2.4rem;
| |
| }
| |
| .timeline-wrapper {
| |
| position: relative;
| |
| max-width: 1600px;
| |
| margin: 0 auto;
| |
| }
| |
| .timeline {
| |
| position: relative;
| |
| height: 100px;
| |
| background: #FFFFFF;
| |
| border: 5px solid #000;
| |
| border-radius: 0px;
| |
| margin: 120px 0 220px 0;
| |
| box-shadow: 0 8px 24px rgba(0,0,0,0.18);
| |
| }
| |
| .segment {
| |
| position: absolute;
| |
| top: 0;
| |
| height: 100%;
| |
| cursor: pointer;
| |
| transition: filter 0.2s ease;
| |
| }
| |
| .segment:hover {
| |
| filter: brightness(1.38);
| |
| }
| |
| .tick {
| |
| position: absolute;
| |
| top: -50px;
| |
| transform: translateX(-50%) rotate(-90deg);
| |
| font-weight: bold;
| |
| font-size: 1.18rem;
| |
| color: #000;
| |
| white-space: nowrap;
| |
| text-align: right;
| |
| }
| |
| .tick-extreme {
| |
| top: -120px; /* -50px - 40px = décalage de 40px vers le haut */
| |
| }
| |
| .event-label {
| |
| position: absolute;
| |
| bottom: -250px;
| |
| width: 450px;
| |
| left: 50%; /* centrage corrigé */
| |
| transform: translateX(-50%) rotate(-90deg);
| |
| font-size: 1.08rem;
| |
| font-weight: 600;
| |
| color: #222;
| |
| line-height: 1.4;
| |
| letter-spacing: 0.4px;
| |
| white-space: nowrap;
| |
| text-align: right;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
|
| |
|
| <h1>Chronologie - Âge de la plénitude</h1> | | {{#if: {{{noframe|}}} | | {{navbox top |
| | | name = Extinction events graphical timeline |
| | | title = [[Extinction event]]s |
| | | titlestyle = background-color: #77BB77; |
| | | liststyle = background-color: white; font-size:112%; |
| | | innerstyle = table-layout:fixed; |
| | }}}}<div style="overflow:auto"> |
| | {{Simple Horizontal timeline |
| | |width=auto;min-width:80em |
| | |border=none |
|
| |
|
| <div class="timeline-wrapper">
| | |link-to=Extinction events graphical timeline |
| <div class="timeline">
| | |title=[[Extinction event]]s |
| | |collapsible=yes |
| | |row2=note |
| | |row2-1-text='''Minor events''' |
| | |row2-1-arrow= |
| | |row2-1-at=-590 |
| | |row2-2-at=-540 |
| | |row2-2-lift=-1em |
| | |row2-2-shift=-4.8em |
| | |row2-2-text=[[End-Ediacaran extinction|End-Ediacaran?]] |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | |row2-25-at=-488 |
| style="left: 0.0000%; width: 2.0000%; background: #83e7be;"
| | |row2-25-text=[[Cambrian–Ordovician extinction event|Cambrian-Ordovician]] |
| title="Signature du Traité d’El Dorado — Wikipédia">
| | |row2-25-lift=-1em |
| </a>
| | |row2-25-shift=-4.8em |
| <div class="event-label" style="left: 1.0000%;">
| |
| Signature du Traité d’El Dorado
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | |row2-3-at=-420 |
| style="left: 16.0000%; width: 2.0000%; background: #white;"
| | |row2-3-text=[[Lau event]] |
| title="-49 à -35 — Wikipédia">
| | |row2-3-lift=-1em |
| </a>
| | |row2-3-shift=-2.5em |
| <div class="event-label" style="left: 17.0000%;">
| |
| -49 à -35
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
| | |row2-4-at=-183 |
| style="left: 2.0000%; width: 28.0000%; background: #F59787;"
| | |row2-4-text=[[Jurassic#Toarcian Oceanic Anoxic Event|Toarcian turnover]] |
| title="Bataille du Royaume Céleste — Wikipédia">
| | |row2-4-lift=-1em |
| </a>
| | |row2-4-shift=-4.3em |
| <div class="event-label" style="left: 16.0000%;">
| | |row2-5-at=-116.5 |
| Bataille du Royaume Céleste
| | |row2-5-text=[[Aptian extinction|Aptian]] |
| </div>
| | |row2-5-shift=-3.4em |
| | |row2-6-at=-91.5 |
| | |row2-6-text=[[Cenomanian-Turonian boundary event|Cenomanian-Turonian]] |
| | |row2-6-lift=-1.3em |
| | |row2-6-shift=-5.1em |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | |row2-7-at=-13.5 |
| style="left: 4.0000%; width: 2.0000%; background: #FA5050;"
| | |row2-7-text=[[Middle Miocene disruption|Middle Miocene]] |
| title="Massacre de la forge — Wikipédia">
| | |row2-7-shift=-4.4em |
| </a>
| | |row2-7-lift=-1.3em |
| <div class="event-label" style="left: 5.0000%;">
| |
| Massacre de la forge
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | |row2-75-at=-270 |
| style="left: 6.0000%; width: 2.0000%; background: #F57C64;"
| | |row2-75-text=[[Olson's Extinction|Olson's]] |
| title="Invasion de Nocturna — Wikipédia">
| | |row2-75-shift=-3.8em |
| </a>
| | |row2-8-at=-305 |
| <div class="event-label" style="left: 7.0000%;">
| | |row2-8-text=[[Carboniferous rainforest collapse|Rainforest collapse]] |
| Invasion de Nocturna
| | |row2-8-shift=-9.0em |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment"
| | |row2-9-at=-260 |
| style="left: 70.0000%; width: 30.0000%; background: #FA5050;"
| | |row2-9-text=[[Capitanian mass extinction event|Capitanian]] |
| title="Deuxième guerre de l'Abîme — Wikipédia">
| | |row2-9-lift=-1em |
| </a>
| | |row2-9-shift=-2.8em |
| <div class="event-label" style="left: 85.0000%;">
| |
| Deuxième guerre de l'Abîme
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | |row2-10-at=-250 |
| style="left: 70.0000%; width: 2.0000%; background: #F59787;"
| | |row2-10-text=[[Smithian-Spathian boundary event|Smithian-Spathian]] |
| title="Bataille de Riddermark — Wikipédia">
| | |row2-10-shift=-0.3em |
| </a>
| |
| <div class="event-label" style="left: 71.0000%;">
| |
| Bataille de Riddermark
| |
| </div>
| |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | |row3=note |
| style="left: 92.0000%; width: 2.0000%; background: #F59787;"
| | |row3-2-at=-444 |
| title="Dernier carrée de Primordia — Wikipédia">
| | |row3-2-text=[[Late Ordovician mass extinction|Ordovician-Silurian]] |
| </a>
| | |row3-2-shift=-0.2em |
| <div class="event-label" style="left: 93.0000%;">
| | |row3-3-at=-364 |
| Dernier carrée de Primordia
| | |row3-3-text=[[Late Devonian extinction|Late Devonian]] |
| </div>
| | |row3-3-lift=-1em |
| | |row3-3-shift=-3.7em |
| | |row3-4-at=-251.4 |
| | |row3-4-text=[[Permian–Triassic extinction event|Permo-Triassic]] |
| | |row3-4-shift=-7.4em |
| | |row3-5-at=-200 |
| | |row3-5-text=[[Triassic–Jurassic extinction event|Triassic–Jurassic]] |
| | |row3-5-lift=-0.8em |
| | |row3-5-shift=-4.4em |
| | |row3-6-at=-{{Period start|Danian}} |
| | |row3-6-text=[[Cretaceous–Paleogene extinction event|Cretaceous–Paleogene]] |
| | |row3-6-lift=-0.8em |
| | |row3-6-shift=-3.4em |
| | |row3-7-at=-0 |
| | |row3-7-text=[[Holocene extinction event|Holocene]] |
| | |row3-7-lift=-0.8em |
| | |row3-7-shift=-2em |
| | |row3-8-text='''Major events''' |
| | |row3-8-at=-590 |
| | |row3-8-arrow= |
|
| |
|
| <a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment"
| | |row4={{Geological periods|-600|height=2.5em}} |
| style="left: 94.0000%; width: 2.0000%; background: #white;"
| | |row5={{Geological eras|-600|height=2em|bordertop=none|borderbottom=none}} |
| title="-4 à 0 — Wikipédia">
| |
| </a>
| |
| <div class="event-label" style="left: 95.0000%;">
| |
| -4 à 0
| |
| </div>
| |
|
| |
|
| <div class="tick tick-extreme" style="left: 0.0000%;">
| | |row6=scale |
| An -50
| | |from=-600 |
| </div>
| | |inc=50 |
| | |to=0 |
| | |axis-nudge=-1em |
|
| |
|
| <div class="tick" style="left: 4.0000%;">
| | |caption=Millions of years before present |
| -48
| | }}</div> |
| </div>
| | {{#if: {{{noframe|}}} | |{{navbox bottom}} }}<noinclude> |
| | | [[Category:Geological period templates]]</noinclude> |
| <div class="tick" style="left: 6.0000%;">
| |
| -47
| |
| </div>
| |
| | |
| <div class="tick" style="left: 2.0000%;">
| |
| -49
| |
| </div>
| |
| | |
| <div class="tick" style="left: 30.0000%;">
| |
| -35
| |
| </div>
| |
| | |
| <div class="tick" style="left: 70.0000%;">
| |
| -15
| |
| </div>
| |
| | |
| <div class="tick tick-extreme" style="left: 100.0000%;">
| |
| An 0
| |
| </div>
| |
| | |
| <div class="tick" style="left: 70.0000%;">
| |
| -15
| |
| </div>
| |
| | |
| <div class="tick" style="left: 92.0000%;">
| |
| -4
| |
| </div>
| |
| | |
| <div class="tick tick-extreme" style="left: 100.0000%;">
| |
| An 0
| |
| </div>
| |
| | |
| </div>
| |
| </div>
| |
| | |
| <p style="text-align: left; margin-top: 80px; color: #555; font-size: 2.05rem;">
| |
|
| |
| </p>
| |
| | |
| </body> | |