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
+3
-1
@@ -29,4 +29,6 @@
|
||||
/* 4. Page-specific Styles */
|
||||
@import 'pages/_home.css';
|
||||
@import 'pages/_projects.css';
|
||||
@import 'pages/_article.css';
|
||||
@import 'pages/_article.css';
|
||||
@import 'pages/_about.css';
|
||||
@import 'pages/_timeline.css';
|
||||
@@ -0,0 +1,134 @@
|
||||
/* ==========================================================================
|
||||
About Us Page Specific Styles
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* This file contains styles used exclusively on the About us page.
|
||||
*
|
||||
* 1. Meet the team section
|
||||
* 2. Our values section
|
||||
* 3. Mission and Vision
|
||||
* 4. Mobile Styles
|
||||
*/
|
||||
|
||||
/* 1. Meet the team section */
|
||||
.team-section {
|
||||
padding: 96px 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team-members-grid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap; /* Allows wrapping on smaller screens */
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.team-member-card {
|
||||
flex: 1;
|
||||
min-width: 240px;
|
||||
max-width: 243px; /* Adjusted max-width to fit 5 cards in a 1280px container with gaps */
|
||||
background-color: #F9FAFB;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-member-card img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.team-member-card h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.team-member-card .role {
|
||||
color: #FA7850;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px;
|
||||
min-height: 48px; /* Added min-height for alignment */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.team-member-card .description {
|
||||
font-size: 14px;
|
||||
color: #667085;
|
||||
flex-grow: 1; /* Allows the description to take up remaining space */
|
||||
}
|
||||
|
||||
.team-member-card .social-icon-btn {
|
||||
margin-top: 16px;
|
||||
border-color: #EAECF0;
|
||||
}
|
||||
|
||||
|
||||
/* 2. Our values section */
|
||||
.values-section {
|
||||
background-color: #F9FAFB;
|
||||
}
|
||||
|
||||
/* 3. Mission and Vision */
|
||||
.mission-vision {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
max-width: 768px;
|
||||
margin: 64px auto 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mission-vision > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mission-vision h4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
/* 4. Mobile Styles for About Us page */
|
||||
@media (max-width: 1280px) {
|
||||
.team-members-grid {
|
||||
justify-content: center; /* Center items when they wrap */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.team-section {
|
||||
padding: 64px 24px;
|
||||
}
|
||||
|
||||
.team-members-grid {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.team-member-card {
|
||||
max-width: 100%;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.mission-vision {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -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