Dodajanje about us in timeline
Deploy to Production on Develop Push / deploy (push) Successful in 1m13s
Deploy to Production on Develop Push / deploy (push) Successful in 1m13s
This commit is contained in:
Mark Poljanšek committed
1 parent
0b5d53abb9
commit
544791f37e
32 files changed
+11254
-1576
No files matched your search
@@ -0,0 +1,196 @@
|
||||
/* ==========================================================================
|
||||
Timeline Page Specific Styles
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* This file contains styles used exclusively on the Timeline & Milestones page.
|
||||
*
|
||||
* 1. Timeline container and line
|
||||
* 2. Timeline items and markers
|
||||
* 3. Timeline content (text and images)
|
||||
* 4. Mobile Styles for Timeline
|
||||
*/
|
||||
|
||||
/* 1. Timeline container and line */
|
||||
.timeline-section {
|
||||
padding: 96px 0;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.timeline-banner {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto 96px;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.timeline-banner img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
max-width: 1110px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
/* The vertical line */
|
||||
.timeline-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
width: 2px;
|
||||
background-color: #EAECF0; /* Gray/200 */
|
||||
z-index: 1; /* Ensure the line is behind the markers */
|
||||
}
|
||||
|
||||
|
||||
/* 2. Timeline items and markers */
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 88px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
background-color: #FA7850;
|
||||
z-index: 2; /* Ensure markers are above the line */
|
||||
}
|
||||
|
||||
.timeline-marker.milestone {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #D0D5DD;
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
|
||||
/* 3. Timeline content */
|
||||
.timeline-entry {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-content .timeline-year,
|
||||
.timeline-content .timeline-date {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 600;
|
||||
color: #FA7850;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.timeline-content .timeline-year {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.timeline-content .timeline-date {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.timeline-content h2, .timeline-content h3 {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: #101828;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
.timeline-content h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #667085;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
.timeline-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-content ul {
|
||||
list-style-type: none;
|
||||
padding-left: 24px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.timeline-content li {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #667085;
|
||||
margin-bottom: 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-content li::before {
|
||||
content: '•';
|
||||
color: #FA7850;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em;
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Mobile Timeline Styles
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline-section {
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
||||
.timeline-banner {
|
||||
padding: 0 24px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.timeline-container::before {
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding-left: 56px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.timeline-marker,
|
||||
.timeline-marker.milestone {
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.timeline-content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.timeline-content h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.timeline-content p, .timeline-content li {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user