|
|
| Строка 1: |
Строка 1: |
| <!DOCTYPE html>
| |
| <html>
| |
| <head>
| |
| <style>
| |
| /* Timeline container */
| |
| .timeline {
| |
| border: 1px solid #a2a9b1;
| |
| background-color: #f8f9fa;
| |
| padding: 12px;
| |
| margin: 16px 0;
| |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
| |
| }
| |
|
| |
| /* Timeline header */
| |
| .timeline.header {
| |
| font-size: 1.2em;
| |
| font-weight: bold;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| margin-bottom: 12px;
| |
| padding-bottom: 8px;
| |
| }
| |
|
| |
| /* Timeline entry */
| |
| .timeline.entry {
| |
| margin: 16px 0;
| |
| padding-left: 20px;
| |
| position: relative;
| |
| }
| |
|
| |
| /* Entry dot */
| |
| .timeline.entry::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: 0;
| |
| top: 6px;
| |
| height: 8px;
| |
| width: 8px;
| |
| background: #36c;
| |
| border-radius: 50%;
| |
| }
| |
|
| |
| /* Entry date */
| |
| .timeline.date {
| |
| font-weight: bold;
| |
| color: #36c;
| |
| }
| |
|
| |
| /* Entry content */
| |
| .timeline.event {
| |
| margin-top: 4px;
| |
| }
| |
|
| |
| .timeline.description {
| |
| color: #54595d;
| |
| font-size: 0.95em;
| |
| margin-top: 4px;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| /* Entry dot */
| |
| .timeline.entry::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: 0;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| width: 10px;
| |
| height: 10px;
| |
| background-color: #36c;
| |
| border-radius: 50%;
| |
| }
| |
|
| |
| /* Era marker */
| |
| .timeline.era {
| |
| background-color: #eaecf0;
| |
| padding: 8px;
| |
| margin: 16px -12px;
| |
| font-weight: bold;
| |
| color: #202122;
| |
| border-left: 3px solid #36c;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
|
| |
| <div class="timeline"> | | <div class="timeline"> |
| <div class="timeline header">Game Universe Timeline</div> | | <div class="timeline header">Game Universe Timeline</div> |
| Строка 90: |
Строка 5: |
| | | |
| <div class="timeline entry"> | | <div class="timeline entry"> |
| <div class="timeline date">Year 0</div> | | <div class="date">Year 0</div> |
| <div class="timeline event">The Great Awakening</div> | | <div class="event">The Great Awakening</div> |
| <div class="timeline description">The first conscious beings emerge from the primordial chaos, marking the beginning of recorded history.</div> | | <div class="description">The first conscious beings emerge from the primordial chaos.</div> |
| </div> | | </div> |
| | | |
| <div class="timeline entry"> | | <div class="timeline entry"> |
| <div class="timeline date">Year 372</div> | | <div class="date">Year 372</div> |
| <div class="timeline event">Formation of the First Kingdom</div> | | <div class="event">Formation of the First Kingdom</div> |
| <div class="timeline description">The scattered tribes unite under a single banner, establishing the foundations of civilization.</div> | | <div class="description">The scattered tribes unite under a single banner.</div> |
| </div>
| |
|
| |
| <div class="timeline era">Classical Era</div>
| |
|
| |
| <div class="timeline entry">
| |
| <div class="timeline date">Year 1000</div>
| |
| <div class="timeline event">The Age of Magic</div>
| |
| <div class="timeline description">Discovery of arcane arts transforms society, leading to rapid technological and cultural advancement.</div>
| |
| </div>
| |
|
| |
| <div class="timeline entry">
| |
| <div class="timeline date">Year 1247</div>
| |
| <div class="timeline event">The Great War</div>
| |
| <div class="timeline description">A devastating conflict between magical factions reshapes the political landscape.</div>
| |
| </div> | | </div> |
| </div> | | </div> |
|
| |
| </body>
| |
| </html>
| |
