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

Материал из Space Station 14 Вики
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
<!DOCTYPE html>
<html>
<head>
<style>
/* Timeline container */
.timeline {
    background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
    padding: 30px;
    color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    font-family: 'Segoe UI', Roboto, sans-serif;
}
/* Timeline header */
.timeline-header {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #4a4a4a;
    color: #00bcd4;
    letter-spacing: 2px;
    text-transform: uppercase;
}
/* Era marker */
.era-marker {
    background: linear-gradient(90deg, #00bcd4, transparent);
    padding: 15px 25px;
    margin: 30px -30px;
    font-size: 1.4em;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}
/* Timeline entry */
.timeline-entry {
    margin: 30px 0;
    padding-left: 50px;
    position: relative;
    border-left: 2px solid #00bcd4;
    transition: all 0.3s ease;
}
.timeline-entry:hover {
    transform: translateX(10px);
}
/* Entry dot */
.timeline-entry::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 0;
    width: 20px;
    height: 20px;
    background: #00bcd4;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.5);
}
/* Entry date */
.timeline-date {
    font-size: 1.2em;
    font-weight: 600;
    color: #00bcd4;
    margin-bottom: 10px;
}
/* Entry title */
.timeline-title {
    font-size: 1.4em;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
}
/* Entry description */
.timeline-description {
    color: #b0b0b0;
    line-height: 1.6;
    font-size: 1em;
    padding-bottom: 20px;
    border-bottom: 1px solid #4a4a4a;
}
/* Hover effects */
.timeline-entry:hover::before {
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0, 188, 212, 0.8);
}
.timeline-entry:hover .timeline-title {
    color: #00bcd4;
}
/* Animation for entries */
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
.timeline-entry {
    animation: fadeIn 0.5s ease forwards;
}
</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>
      
      
     <div class="timeline era">Ancient Era</div>
     <div class="era-marker">Ancient Era</div>
      
      
     <div class="timeline entry">
     <div class="timeline-entry">
         <div class="date">Year 0</div>
         <div class="timeline-date">Year 0</div>
         <div class="event">The Great Awakening</div>
         <div class="timeline-title">The Great Awakening</div>
         <div class="description">The first conscious beings emerge from the primordial chaos.</div>
         <div class="timeline-description">The first conscious beings emerge from the primordial chaos, bringing forth a new age of existence in a universe previously shrouded in darkness.</div>
     </div>
     </div>
      
      
     <div class="timeline entry">
     <div class="timeline-entry">
         <div class="date">Year 372</div>
         <div class="timeline-date">Year 372</div>
         <div class="event">Formation of the First Kingdom</div>
         <div class="timeline-title">Formation of the First Kingdom</div>
         <div class="description">The scattered tribes unite under a single banner.</div>
         <div class="timeline-description">From the ashes of countless tribal conflicts, the first unified kingdom rises, marking the beginning of organized civilization and the dawn of recorded history.</div>
    </div>
   
    <div class="era-marker">Classical Era</div>
   
    <div class="timeline-entry">
        <div class="timeline-date">Year 1000</div>
        <div class="timeline-title">The Age of Magic</div>
        <div class="timeline-description">Ancient secrets of arcane power are unlocked, forever changing the fabric of society as mortals learn to harness the very essence of creation.</div>
    </div>
   
    <div class="timeline-entry">
        <div class="timeline-date">Year 1247</div>
        <div class="timeline-title">The Great War</div>
        <div class="timeline-description">A cataclysmic conflict erupts between the most powerful magical factions, reshaping continents and establishing new orders of power in its wake.</div>
     </div>
     </div>
</div>
</div>
</body>
</html>

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

<!DOCTYPE html> <html> <head> <style> /* Timeline container */ .timeline { 

   background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
   padding: 30px;
   color: #fff;
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   font-family: 'Segoe UI', Roboto, sans-serif;

}

/* Timeline header */ .timeline-header { 

   font-size: 2em;
   font-weight: 700;
   margin-bottom: 40px;
   padding-bottom: 20px;
   border-bottom: 2px solid #4a4a4a;
   color: #00bcd4;
   letter-spacing: 2px;
   text-transform: uppercase;

}

/* Era marker */ .era-marker { 

   background: linear-gradient(90deg, #00bcd4, transparent);
   padding: 15px 25px;
   margin: 30px -30px;
   font-size: 1.4em;
   font-weight: 600;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
   position: relative;

}

/* Timeline entry */ .timeline-entry { 

   margin: 30px 0;
   padding-left: 50px;
   position: relative;
   border-left: 2px solid #00bcd4;
   transition: all 0.3s ease;

}

.timeline-entry:hover { 

   transform: translateX(10px);

}

/* Entry dot */ .timeline-entry::before { 

   content: "";
   position: absolute;
   left: -11px;
   top: 0;
   width: 20px;
   height: 20px;
   background: #00bcd4;
   border-radius: 50%;
   box-shadow: 0 0 20px rgba(0, 188, 212, 0.5);

}

/* Entry date */ .timeline-date { 

   font-size: 1.2em;
   font-weight: 600;
   color: #00bcd4;
   margin-bottom: 10px;

}

/* Entry title */ .timeline-title { 

   font-size: 1.4em;
   font-weight: 500;
   color: #fff;
   margin-bottom: 10px;

}

/* Entry description */ .timeline-description { 

   color: #b0b0b0;
   line-height: 1.6;
   font-size: 1em;
   padding-bottom: 20px;
   border-bottom: 1px solid #4a4a4a;

}

/* Hover effects */ .timeline-entry:hover::before { 

   transform: scale(1.2);
   box-shadow: 0 0 30px rgba(0, 188, 212, 0.8);

}

.timeline-entry:hover .timeline-title { 

   color: #00bcd4;

}

/* Animation for entries */ @keyframes fadeIn { 

   from { opacity: 0; transform: translateX(-20px); }
   to { opacity: 1; transform: translateX(0); }

}

.timeline-entry { 

   animation: fadeIn 0.5s ease forwards;

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

Game Universe Timeline
Ancient Era
Year 0
The Great Awakening
The first conscious beings emerge from the primordial chaos, bringing forth a new age of existence in a universe previously shrouded in darkness.
Year 372
Formation of the First Kingdom
From the ashes of countless tribal conflicts, the first unified kingdom rises, marking the beginning of organized civilization and the dawn of recorded history.
Classical Era
Year 1000
The Age of Magic
Ancient secrets of arcane power are unlocked, forever changing the fabric of society as mortals learn to harness the very essence of creation.
Year 1247
The Great War
A cataclysmic conflict erupts between the most powerful magical factions, reshaping continents and establishing new orders of power in its wake.

</body> </html>

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