WL:Таймлайн: различия между версиями

Материал из Space Station 14 Вики
(Новая страница: «<!DOCTYPE html> <html> <head> <style> .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 { font-size: 1.2em; font-weight: bold; border-bottom: 1px solid #a2a9b1; margin-bottom: 12px; padding-bottom: 8px; } .timeline-entry { margin: 16px 0; padding-left: 20px;...»)
 
Нет описания правки
Строка 3: Строка 3:
<head>
<head>
<style>
<style>
/* Timeline container */
.timeline {
.timeline {
     border: 1px solid #a2a9b1;
     border: 1px solid #a2a9b1;
Строка 11: Строка 12:
}
}


.timeline-header {
/* Timeline header */
.timeline .header {
     font-size: 1.2em;
     font-size: 1.2em;
     font-weight: bold;
     font-weight: bold;
Строка 19: Строка 21:
}
}


.timeline-entry {
/* Timeline entry */
.timeline .entry {
     margin: 16px 0;
     margin: 16px 0;
     padding-left: 20px;
     padding-left: 20px;
Строка 25: Строка 28:
}
}


.timeline-entry::before {
/* Entry dot */
.timeline .entry::before {
     content: "";
     content: "";
     position: absolute;
     position: absolute;
Строка 36: Строка 40:
}
}


.timeline-date {
/* Entry date */
.timeline .date {
     font-weight: bold;
     font-weight: bold;
     color: #36c;
     color: #36c;
}
}


.timeline-event {
/* Entry content */
.timeline .event {
     margin-top: 4px;
     margin-top: 4px;
}
}


.timeline-description {
.timeline .description {
     color: #54595d;
     color: #54595d;
     font-size: 0.95em;
     font-size: 0.95em;
Строка 51: Строка 57:
}
}


.era-marker {
/* Era marker */
.timeline .era {
     background-color: #eaecf0;
     background-color: #eaecf0;
     padding: 8px;
     padding: 8px;
Строка 63: Строка 70:


<div class="timeline">
<div class="timeline">
     <div class="timeline-header">Game Universe Timeline</div>
     <div class="header">Game Universe Timeline</div>
      
      
     <div class="era-marker">Ancient Era</div>
     <div class="era">Ancient Era</div>
      
      
     <div class="timeline-entry">
     <div class="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, marking the beginning of recorded history.</div>
     </div>
     </div>
      
      
     <div class="timeline-entry">
     <div class="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, establishing the foundations of civilization.</div>
     </div>
     </div>
      
      
     <div class="era-marker">Classical Era</div>
     <div class="era">Classical Era</div>
      
      
     <div class="timeline-entry">
     <div class="entry">
         <div class="timeline-date">Year 1000</div>
         <div class="date">Year 1000</div>
         <div class="timeline-event">The Age of Magic</div>
         <div class="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 class="description">Discovery of arcane arts transforms society, leading to rapid technological and cultural advancement.</div>
     </div>
     </div>
      
      
     <div class="timeline-entry">
     <div class="entry">
         <div class="timeline-date">Year 1247</div>
         <div class="date">Year 1247</div>
         <div class="timeline-event">The Great War</div>
         <div class="event">The Great War</div>
         <div class="timeline-description">A devastating conflict between magical factions reshapes the political landscape.</div>
         <div class="description">A devastating conflict between magical factions reshapes the political landscape.</div>
     </div>
     </div>
      
      
     <div class="era-marker">Modern Era</div>
     <div class="era">Modern Era</div>
      
      
     <div class="timeline-entry">
     <div class="entry">
         <div class="timeline-date">Year 2000</div>
         <div class="date">Year 2000</div>
         <div class="timeline-event">The Convergence</div>
         <div class="event">The Convergence</div>
         <div class="timeline-description">Technology and magic merge, ushering in an unprecedented age of progress and discovery.</div>
         <div class="description">Technology and magic merge, ushering in an unprecedented age of progress and discovery.</div>
     </div>
     </div>
</div>
</div>

Версия от 22:46, 13 ноября 2024

<!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;

}

/* Era marker */ .timeline .era { 

   background-color: #eaecf0;
   padding: 8px;
   margin: 16px -12px;
   font-weight: bold;
   color: #202122;

} </style> </head> <body>

Game Universe Timeline
Ancient Era
Year 0
The Great Awakening
The first conscious beings emerge from the primordial chaos, marking the beginning of recorded history.
Year 372
Formation of the First Kingdom
The scattered tribes unite under a single banner, establishing the foundations of civilization.
Classical Era
Year 1000
The Age of Magic
Discovery of arcane arts transforms society, leading to rapid technological and cultural advancement.
Year 1247
The Great War
A devastating conflict between magical factions reshapes the political landscape.
Modern Era
Year 2000
The Convergence
Technology and magic merge, ushering in an unprecedented age of progress and discovery.

</body> </html>

Источник — https://station14.ru/index.php?title=WL:Таймлайн&oldid=56458