Posodobljen about us
Deploy to Production on Develop Push / deploy (push) Successful in 1m33s
Details
Deploy to Production on Develop Push / deploy (push) Successful in 1m33s
Details
This commit is contained in:
Mark Poljanšek
parent
37b72526d8
commit
66c4631769
5540
code_export.txt
5540
code_export.txt
File diff suppressed because it is too large
Load Diff
|
|
@ -1,134 +1,459 @@
|
||||||
|
/* css/pages/_about.css */
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
About Us Page Specific Styles
|
About Us Page Specific Styles (Redesign)
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This file contains styles used exclusively on the About us page.
|
* This file contains styles used exclusively on the "Our team, mission, vision & core values" page.
|
||||||
*
|
*
|
||||||
* 1. Meet the team section
|
* 1. Leadership Team Section
|
||||||
* 2. Our values section
|
* 2. Our Core Values Section
|
||||||
* 3. Mission and Vision
|
* 3. Mission and Vision Section
|
||||||
* 4. Mobile Styles
|
* 4. Call to Action (FAQ) Section
|
||||||
|
* 5. Mobile Styles for the page
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* 1. Meet the team section */
|
/* ==========================================================================
|
||||||
|
1. Leadership Team Section
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
.team-section {
|
.team-section {
|
||||||
padding: 96px 80px;
|
padding: 48px 80px 96px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-members-grid {
|
.team-section .page-header-section {
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 16px;
|
gap: 32px;
|
||||||
flex-wrap: wrap; /* Allows wrapping on smaller screens */
|
flex-wrap: wrap;
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-member-card {
|
.member-card {
|
||||||
flex: 1;
|
position: relative;
|
||||||
min-width: 240px;
|
width: 326px;
|
||||||
max-width: 243px; /* Adjusted max-width to fit 5 cards in a 1280px container with gaps */
|
height: 400px;
|
||||||
background-color: #F9FAFB;
|
|
||||||
text-align: center;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
|
||||||
|
z-index: 1;
|
||||||
|
transition: opacity 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #2D738C;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 2;
|
||||||
|
transition: opacity 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 24px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-member-card .description {
|
.member-socials {
|
||||||
font-size: 14px;
|
display: flex;
|
||||||
color: #667085;
|
gap: 32px;
|
||||||
flex-grow: 1; /* Allows the description to take up remaining space */
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-member-card .social-icon-btn {
|
.member-socials a {
|
||||||
margin-top: 16px;
|
color: #FFFFFF;
|
||||||
border-color: #EAECF0;
|
font-size: 32px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease, transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-socials a:hover {
|
||||||
|
color: #FA7850;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-info {
|
||||||
|
text-align: center;
|
||||||
|
transform: translateY(115px);
|
||||||
|
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card h4 {
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 29px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card .role {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFE16E;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover effects only for devices that support it (desktops) */
|
||||||
|
@media (hover: hover) {
|
||||||
|
.member-card:hover::before {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.member-card:hover::after {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.member-card:hover .member-socials {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transform: translateY(0);
|
||||||
|
transition: opacity 0.3s 0.1s ease, transform 0.3s 0.1s ease, visibility 0s 0s;
|
||||||
|
}
|
||||||
|
.member-card:hover .member-info {
|
||||||
|
transform: translateY(40px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 2. Our values section */
|
#member-kristijan { background-image: url('../../images/about_kristijan.jpg'); }
|
||||||
.values-section {
|
#member-lea { background-image: url('../../images/about_lea.jpg'); }
|
||||||
|
#member-marko { background-image: url('../../images/about_marko.jpg'); }
|
||||||
|
#member-marija { background-image: url('../../images/about_marija.jpg'); }
|
||||||
|
#member-monika { background-image: url('../../images/about_monika.jpg'); }
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
2. Our Core Values Section
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.core-values-section {
|
||||||
|
padding: 80px 80px 120px;
|
||||||
background-color: #F9FAFB;
|
background-color: #F9FAFB;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 3. Mission and Vision */
|
.core-values-section > .page-header-section {
|
||||||
.mission-vision {
|
padding: 0;
|
||||||
display: flex;
|
margin-bottom: 64px;
|
||||||
justify-content: center;
|
background: transparent;
|
||||||
gap: 32px;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.core-values-section > .page-header-section h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 44px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: #101828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.core-values-section > .page-header-section p {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #667085;
|
||||||
max-width: 768px;
|
max-width: 768px;
|
||||||
margin: 64px auto 0;
|
margin: 20px auto 0;
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-vision > div {
|
.values-container {
|
||||||
flex: 1;
|
max-width: 1062px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-vision h4 {
|
.value-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 24px;
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 4. Mobile Styles for About Us page */
|
.value-row:nth-child(even) {
|
||||||
@media (max-width: 1280px) {
|
flex-direction: row-reverse;
|
||||||
.team-members-grid {
|
}
|
||||||
justify-content: center; /* Center items when they wrap */
|
|
||||||
}
|
.value-image {
|
||||||
|
flex-basis: 519px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 270px;
|
||||||
|
border-radius: 16px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-content {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
max-width: 519px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-content h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #101828;
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-content p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #667085;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
3. Mission and Vision Section
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.mission-vision-section {
|
||||||
|
padding: 96px 80px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-vision-section .page-header-section {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-vision-section .page-header-section h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #101828;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-vision-grid {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 40px;
|
||||||
|
max-width: 1060px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-box,
|
||||||
|
.vision-box {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
height: 200px;
|
||||||
|
background: #F9FAFB;
|
||||||
|
border-radius: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-content p {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #667085;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-content img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-icon-content,
|
||||||
|
.vision-icon-content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Animation Logic --- */
|
||||||
|
.mission-text-content { opacity: 1; transform: translateY(0); }
|
||||||
|
.mission-icon-content { opacity: 0; transform: translateY(20px); }
|
||||||
|
.vision-text-content { opacity: 0; transform: translateY(20px); }
|
||||||
|
.vision-icon-content { opacity: 1; transform: translateY(0); }
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
.mission-vision-grid.show-vision .mission-text-content { opacity: 0; transform: translateY(-20px); }
|
||||||
|
.mission-vision-grid.show-vision .mission-icon-content { opacity: 1; transform: translateY(0); }
|
||||||
|
.mission-vision-grid.show-vision .vision-text-content { opacity: 1; transform: translateY(0); }
|
||||||
|
.mission-vision-grid.show-vision .vision-icon-content { opacity: 0; transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
4. Call to Action (FAQ) Section
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.faq-cta-section {
|
||||||
|
padding: 96px 80px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-cta-container {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 32px;
|
||||||
|
background-color: #F9FAFB;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-group {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
height: 56px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #FFFFFF;
|
||||||
|
position: absolute;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.avatar:nth-child(1) { left: 0; z-index: 1;}
|
||||||
|
.avatar:nth-child(2) { left: 50%; transform: translateX(-50%); z-index: 2;}
|
||||||
|
.avatar:nth-child(3) { right: 0; z-index: 1;}
|
||||||
|
|
||||||
|
.avatar.large {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-cta-container h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #101828;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-cta-container p {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 28px;
|
||||||
|
color: #667085;
|
||||||
|
margin: -24px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
5. Mobile Styles for About Us Page
|
||||||
|
========================================================================== */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.team-grid { max-width: 700px; }
|
||||||
|
.values-container { gap: 64px; }
|
||||||
|
.value-row { gap: 32px; }
|
||||||
|
.value-image { flex-basis: 45%; min-width: 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.team-section {
|
.team-section,
|
||||||
|
.core-values-section,
|
||||||
|
.mission-vision-section,
|
||||||
|
.faq-cta-section {
|
||||||
padding: 64px 24px;
|
padding: 64px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-members-grid {
|
.team-section .page-header-section { margin-bottom: 48px; }
|
||||||
|
.team-grid { flex-direction: column; align-items: center; gap: 24px; }
|
||||||
|
.member-card { width: 100%; max-width: 326px; height: 400px; }
|
||||||
|
|
||||||
|
/* Core Values on Mobile */
|
||||||
|
.core-values-section .page-header-section { margin-bottom: 48px; }
|
||||||
|
.core-values-section > .page-header-section h2 { font-size: 32px; line-height: 40px; }
|
||||||
|
.core-values-section > .page-header-section p { font-size: 18px; line-height: 28px; }
|
||||||
|
|
||||||
|
.values-container { gap: 48px; }
|
||||||
|
.value-row, .value-row:nth-child(even) { flex-direction: column; gap: 24px; }
|
||||||
|
.value-row .value-content { order: 1; }
|
||||||
|
.value-row .value-image { order: 2; }
|
||||||
|
.value-image { width: 100%; flex-basis: auto; }
|
||||||
|
.value-content { text-align: center; max-width: 100%; }
|
||||||
|
.value-content h3 { font-size: 24px; line-height: 32px; }
|
||||||
|
.value-content p { font-size: 16px; line-height: 26px; }
|
||||||
|
|
||||||
|
/* Mission and Vision on Mobile */
|
||||||
|
.mission-vision-grid { flex-direction: column; gap: 24px; }
|
||||||
|
.mission-box, .vision-box { cursor: default; height: auto; padding: 32px; }
|
||||||
|
|
||||||
|
.box-content {
|
||||||
|
position: static;
|
||||||
|
transform: none !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.mission-box, .vision-box {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: 16px;
|
||||||
gap: 24px;
|
}
|
||||||
|
.mission-icon-content, .vision-icon-content {
|
||||||
|
order: 1;
|
||||||
|
opacity: 1 !important; /* Ensure icons are visible */
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
.mission-text-content, .vision-text-content {
|
||||||
|
order: 2;
|
||||||
|
opacity: 1 !important; /* Ensure text is visible */
|
||||||
|
transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-member-card {
|
.faq-cta-container { padding: 32px; }
|
||||||
max-width: 100%;
|
.faq-cta-container h3 { font-size: 18px; }
|
||||||
min-width: 280px;
|
.faq-cta-container p { font-size: 16px; line-height: 24px; }
|
||||||
}
|
|
||||||
|
|
||||||
.mission-vision {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>About Us - Macedonian Student Organisation in Slovenia</title>
|
<title>Our Team, Mission, Vision & Core Values - MSOS</title>
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
|
@ -177,150 +177,167 @@
|
||||||
<!-- About Us Header Section -->
|
<!-- About Us Header Section -->
|
||||||
<section class="page-header-section">
|
<section class="page-header-section">
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
<span class="page-subtitle">About us</span>
|
<span class="page-subtitle" style="text-transform: uppercase;">About us</span>
|
||||||
<h1>About MSOS</h1>
|
<h1>Our team, mission, vision & core values</h1>
|
||||||
<p class="page-description">Learn more about the company and the team behind it.</p>
|
<p class="page-description">MSOS is more than an organization - it is the energy of the team behind it. Our members are the heart and driving force that inspires us, writing this story and shaping student life in Slovenia.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- MSOS Foundation Section -->
|
<!-- Leadership Team Section -->
|
||||||
<section class="meet-the-team-section">
|
|
||||||
<div class="team-content">
|
|
||||||
<p class="article-publish-date" style="text-align: left;">3rd October 2023</p>
|
|
||||||
<h2>MSOS Foundation</h2>
|
|
||||||
<p style="text-align: left;">Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop. Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.</p>
|
|
||||||
<div class="navigation-arrows" style="display: flex; gap: 1rem; margin-top: 2rem;">
|
|
||||||
<button class="social-icon-btn"><i class="fas fa-arrow-left"></i></button>
|
|
||||||
<button class="social-icon-btn"><i class="fas fa-arrow-right"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="video-container">
|
|
||||||
<img src="../../images/msos_foundation.jpg" alt="MSOS Foundation members" class="video-thumbnail">
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Meet our team section -->
|
|
||||||
<section class="team-section">
|
<section class="team-section">
|
||||||
<div class="become-part-header">
|
<div class="page-header-section">
|
||||||
<h2>Meet our team</h2>
|
<h2>Leadership team</h2>
|
||||||
<p>Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="team-members-grid">
|
<div class="team-grid">
|
||||||
<!-- Team Member 1 -->
|
<!-- Kristijan Popovski -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-kristijan">
|
||||||
<img src="../../images/kristijan_popovski.jpg" alt="Kristijan Popovski">
|
<div class="member-content">
|
||||||
<h4>Kristijan Popovski</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Founder & CEO</p>
|
<a href="mailto:kristijan.popovski@msosorg.com" aria-label="Email Kristijan Popovski"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Former co-founder of Opendoor. Early staff at Spotify and Clearbit.</p>
|
<a href="https://www.linkedin.com/in/popovski-k?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Kristijan Popovski"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/popovski.k/" target="_blank" aria-label="Instagram profile of Kristijan Popovski"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Kristijan Popovski</h4>
|
||||||
|
<p class="role">Founder and President</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Team Member 2 -->
|
<!-- Lea Janachkovska -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-lea">
|
||||||
<img src="../../images/bisera_nikolovska.jpg" alt="Bisera Nikolovska">
|
<div class="member-content">
|
||||||
<h4>Bisera Nikolovska</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Former PM for Linear, Lambda School, and On Deck.</p>
|
<a href="mailto:lea.janackovska@msosorg.com" aria-label="Email Lea Janachkovska"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
|
<a href="https://www.linkedin.com/in/lea-janachkovska-9833b9246?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Lea Janachkovska"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/lea_janackovska?igsh=djl0M2hjMXc0cWF2" target="_blank" aria-label="Instagram profile of Lea Janachkovska"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Lea Janachkovska</h4>
|
||||||
|
<p class="role">Board Member</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Team Member 3 -->
|
<!-- Marko Arsov -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-marko">
|
||||||
<img src="../../images/kiara_lazic.jpg" alt="Kiara Lazic">
|
<div class="member-content">
|
||||||
<h4>Kiara Lazic</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Media and public relations</p>
|
<a href="mailto:marko.arsov@msosorg.com" aria-label="Email Marko Arsov"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
|
<a href="https://www.linkedin.com/in/marko-arsov-3313202b9?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Marko Arsov"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/marko.arsov?igsh=OXh6dnRkNGNuZmpw" target="_blank" aria-label="Instagram profile of Marko Arsov"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Marko Arsov</h4>
|
||||||
|
<p class="role">Board Member</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Team Member 4 -->
|
<!-- Marija Koshtrevska -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-marija">
|
||||||
<img src="../../images/leon_shumanski.jpg" alt="Leon Shumanski">
|
<div class="member-content">
|
||||||
<h4>Leon Shumanski</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Former frontend dev for Linear, Coinbase, and Postscript.</p>
|
<a href="mailto:marija.koshtrevska@msosorg.com" aria-label="Email Marija Koshtrevska"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
|
<a href="https://www.linkedin.com/in/marija-koshtrevska?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Marija Koshtrevska"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/koshtrevska_10?igsh=eng3a2RlNHA5NGRn" target="_blank" aria-label="Instagram profile of Marija Koshtrevska"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Marija Koshtrevska</h4>
|
||||||
|
<p class="role">Board Member</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Team Member 5 -->
|
<!-- Monika Velinova -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-monika">
|
||||||
<img src="../../images/leon_shumanski.jpg" alt="Leon Shumanski">
|
<div class="member-content">
|
||||||
<h4>Leon Shumanski</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Former frontend dev for Linear, Coinbase, and Postscript.</p>
|
<a href="mailto:monika.velinova@msosorg.com" aria-label="Email Monika Velinova"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
|
<a href="https://www.linkedin.com/in/monika-velinova-21632517a?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Monika Velinova"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/monivelinova?igsh=MTUxOGRmNjNkeXdiaA==" target="_blank" aria-label="Instagram profile of Monika Velinova"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Monika Velinova</h4>
|
||||||
|
<p class="role">Board Member</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Our values section -->
|
<!-- Our Core Values Section -->
|
||||||
<section class="faq-section values-section">
|
<section class="core-values-section">
|
||||||
<div class="faq-header">
|
<div class="page-header-section">
|
||||||
<h2>Our values</h2>
|
<h2>Our core values</h2>
|
||||||
<p>Our shared values keep us connected and guide us as one team.</p>
|
<p class="page-description">Our shared values keep us connected and guide us as one team.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="faq-grid" style="max-width: 1024px;">
|
<div class="values-container">
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-users"></i></div><h3>Care about our team</h3><p>Understand what matters to our employees. Give them what they need to do their best work.</p></div>
|
<div class="value-row">
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-heart"></i></div><h3>Be excellent to each other</h3><p>No games. No bullshit. We rely on our peers to improve. Be open, honest and kind.</p></div>
|
<div class="value-content">
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-chart-line"></i></div><h3>Pride in what we do</h3><p>Value quality and integrity in everything we do. At all times. No exceptions.</p></div>
|
<h3>Volunteer spirit</h3>
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-smile"></i></div><h3>Don't f*#& the customer</h3><p>Understand customers' stated and unstated needs. Make them wildly successful.</p></div>
|
<p>The strength of MSOS comes from giving our time and energy selflessly. Every project, event, and idea in MSOS is built on the hard work of our amazing volunteers. Our volunteer spirit is a testament to the dedication, passion, and collaborative energy of our community and the reason why we grow stronger together.</p>
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-rocket"></i></div><h3>Do the impossible</h3><p>Be energized by difficult problems. Revel in unknowns. Ask “Why?”, but always question, “Why not?”</p></div>
|
</div>
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-bolt"></i></div><h3>Sweat the small stuff</h3><p>We believe the best products come from the best attention to detail. Sweat the small stuff.</p></div>
|
<div class="value-image">
|
||||||
</div>
|
<img src="../../images/about_volunteer_spirit.jpg" alt="A group of volunteers working together with positive energy.">
|
||||||
<div class="mission-vision">
|
</div>
|
||||||
<div>
|
|
||||||
<h4><i class="fas fa-flag"></i> Mission</h4>
|
|
||||||
<p>Understand customers' stated and unstated needs. Make them wildly successful.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="value-row">
|
||||||
<h4><i class="fas fa-eye"></i> Vision</h4>
|
<div class="value-image">
|
||||||
<p>Be energized by difficult problems. Revel in unknowns. Ask “Why?”, but always question, “Why not?”</p>
|
<img src="../../images/about_solidarity_and_care_for_each_other.jpg" alt="Students supporting each other in a friendly and caring manner.">
|
||||||
|
</div>
|
||||||
|
<div class="value-content">
|
||||||
|
<h3>Solidarity & care for each other</h3>
|
||||||
|
<p>We are more than a group of students, but a family. We look after one another and support each other not just with studies, but also with everyday challenges. We are here to listen, help, and celebrate successes together. It's about giving without expecting anything in return and creating a safe, warm, and uplifting environment where everyone feels they belong.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="value-row">
|
||||||
|
<div class="value-content">
|
||||||
|
<h3>Love for our roots & ambition for the future</h3>
|
||||||
|
<p>We are proud of where we come from and carry our Macedonian heritage with us, while striving for a brighter future. Our roots give us strength, and our ambition pushes us forward. Our ambition drives us to be professional, innovative, and influential leaders and role models in our host country.</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-image">
|
||||||
|
<img src="../../images/about_love_for_our_roots_ambition_for_the_future.jpg" alt="A blend of traditional Macedonian culture and modern ambitious students.">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Become Part Section -->
|
<!-- Mission and Vision Section -->
|
||||||
<section class="become-part-section" style="background-color: #FFFFFF;">
|
<section class="mission-vision-section">
|
||||||
<div class="become-part-header">
|
<div class="page-header-section">
|
||||||
<h2>Become part of our amazing team</h2>
|
<h2>Mission and Vision</h2>
|
||||||
<p>We're a 100% remote team spread all across the world. Join us!</p>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="../../images/amazing_team.png" alt="Our amazing team in a classroom setting" class="team-photo">
|
<div class="mission-vision-grid" id="mission-vision-interactive">
|
||||||
|
<!-- Mission Box -->
|
||||||
|
<div class="mission-box">
|
||||||
|
<div class="box-content mission-text-content">
|
||||||
|
<p>The mission of MSOS is to represent the interests, improve the lives, and ease the studies of Macedonian students in the Republic of Slovenia.</p>
|
||||||
|
</div>
|
||||||
|
<div class="box-content mission-icon-content">
|
||||||
|
<img src="../../images/about_mission.png" alt="Mission Icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Vision Box -->
|
||||||
|
<div class="vision-box">
|
||||||
|
<div class="box-content vision-text-content">
|
||||||
|
<p>The vision of the MSOS is to provide a voice, a home, and support for Macedonian students in the Republic of Slovenia, while encouraging their active involvement in projects of common interest.</p>
|
||||||
|
</div>
|
||||||
|
<div class="box-content vision-icon-content">
|
||||||
|
<img src="../../images/about_vision.png" alt="Vision Icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="contact-form-container">
|
<!-- FAQ Call to Action Section -->
|
||||||
<form class="contact-form">
|
<section class="faq-cta-section">
|
||||||
<div class="form-row">
|
<div class="faq-cta-container">
|
||||||
<div class="form-group">
|
<div class="avatar-group">
|
||||||
<label for="first-name">First name</label>
|
<img src="../../images/about_marija_min.jpg" alt="Avatar of Marija" class="avatar">
|
||||||
<input type="text" id="first-name" placeholder="First name">
|
<img src="../../images/about_kristijan_min.jpg" alt="Avatar of Kristijan" class="avatar large">
|
||||||
</div>
|
<img src="../../images/about_lea_min.jpg" alt="Avatar of Lea" class="avatar">
|
||||||
<div class="form-group">
|
</div>
|
||||||
<label for="last-name">Last name</label>
|
<h3>Have any questions?</h3>
|
||||||
<input type="text" id="last-name" placeholder="Last name">
|
<p class="page-description" style="margin: 0;">Can't find the answer you're looking for? Please chat to our friendly team.</p>
|
||||||
</div>
|
<a href="#" class="btn btn-primary-orange">See all FAQs</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">Email</label>
|
|
||||||
<input type="email" id="email" placeholder="student@email.com">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="phone-number">Phone number</label>
|
|
||||||
<div class="phone-input">
|
|
||||||
<select id="country-code" aria-label="Country code">
|
|
||||||
<option>SL</option>
|
|
||||||
<option>US</option>
|
|
||||||
<option>MK</option>
|
|
||||||
</select>
|
|
||||||
<input type="tel" id="phone-number" placeholder="+386 (00) 000-000">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="message">Message</label>
|
|
||||||
<textarea id="message" rows="5"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<input type="checkbox" id="privacy-policy">
|
|
||||||
<label for="privacy-policy">You agree to our friendly <a href="#">privacy policy</a>.</label>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Send message</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
@ -379,6 +396,5 @@
|
||||||
</footer>
|
</footer>
|
||||||
<!-- END_FOOTER -->
|
<!-- END_FOOTER -->
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>About Us - Macedonian Student Organisation in Slovenia</title>
|
<title>Our Team, Mission, Vision & Core Values - MSOS</title>
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
|
@ -19,368 +19,375 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- START_HEADER -->
|
<!-- START_HEADER -->
|
||||||
<header class="dropdown-header-navigation">
|
<header class="dropdown-header-navigation">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header-content">
|
|
||||||
<a href="../../en/" class="logo-link">
|
<a href="../../en/" class="logo-link">
|
||||||
<img src="../../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
|
<img src="../../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
|
||||||
</a>
|
</a>
|
||||||
<!-- Desktop Navigation -->
|
<div class="header-right-wrapper">
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="navigation desktop-nav">
|
<ul class="navigation desktop-nav">
|
||||||
<li class="menu-item menu-item-has-children">
|
<li class="menu-item menu-item-has-children">
|
||||||
<a href="#">Who We Are</a>
|
<a href="#">Who We Are</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Timeline & Milestones</a></li>
|
<li><a href="#">Timeline & Milestones</a></li>
|
||||||
<li><a href="#">Our team, mission, vision & core values</a></li>
|
<li><a href="#">Our team, mission, vision & core values</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="menu-item menu-item-has-children">
|
<li class="menu-item menu-item-has-children">
|
||||||
<a href="#">What We Do</a>
|
<a href="#">What We Do</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="../../en/projects/">Event & Projects</a></li>
|
<li><a href="../../en/projects/">Event & Projects</a></li>
|
||||||
<li><a href="#">Blog</a></li>
|
<li><a href="#">Blog</a></li>
|
||||||
<li><a href="#">Gallery</a></li>
|
<li><a href="#">Gallery</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="menu-item menu-item-has-children">
|
<li class="menu-item menu-item-has-children">
|
||||||
<a href="#">Get Involved</a>
|
<a href="#">Get Involved</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Become a member</a></li>
|
<li><a href="#">Become a member</a></li>
|
||||||
<li><a href="#">Support MSOS</a></li>
|
<li><a href="#">Support MSOS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="menu-item menu-item-has-children">
|
<li class="menu-item menu-item-has-children">
|
||||||
<a href="#">For Students</a>
|
<a href="#">For Students</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Student Welcome Guide</a></li>
|
<li><a href="#">Student Welcome Guide</a></li>
|
||||||
<li><a href="#">Mentorship Programme</a></li>
|
<li><a href="#">Mentorship Programme</a></li>
|
||||||
<li><a href="#">FAQs</a></li>
|
<li><a href="#">FAQs</a></li>
|
||||||
<li><a href="#">Get to know Slovenia</a></li>
|
<li><a href="#">Get to know Slovenia</a></li>
|
||||||
<li><a href="#">Get to know North Macedonia</a></li>
|
<li><a href="#">Get to know North Macedonia</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="menu-item menu-item-has-children">
|
<li class="menu-item menu-item-has-children">
|
||||||
<a href="#">News</a>
|
<a href="#">News</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Announcements</a></li>
|
<li><a href="#">Announcements</a></li>
|
||||||
<li><a href="#">Open calls</a></li>
|
<li><a href="#">Open calls</a></li>
|
||||||
<li><a href="#">Press releases</a></li>
|
<li><a href="#">Press releases</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="navigation-actions">
|
||||||
|
<button class="btn btn-secondary">Become a member</button>
|
||||||
|
<button class="btn btn-primary">Donate</button>
|
||||||
|
<div class="language-selector">
|
||||||
|
<div class="current-lang">
|
||||||
|
<i class="fas fa-globe"></i>
|
||||||
|
<span id="current-lang-code">EN</span>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lang-dropdown">
|
||||||
|
<a href="#" data-lang="si">Slovenščina (SI)</a>
|
||||||
|
<a href="#" data-lang="en">English (EN)</a>
|
||||||
|
<a href="#" data-lang="mk">Македонски (MK)</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-menu-icon">
|
||||||
|
<i class="fas fa-bars"></i>
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<!-- Desktop Buttons -->
|
<div class="mobile-nav-panel">
|
||||||
|
<nav>
|
||||||
|
<ul class="navigation mobile-nav">
|
||||||
|
<li class="menu-item menu-item-has-children">
|
||||||
|
<a href="#">Who We Are</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">Timeline & Milestones</a></li>
|
||||||
|
<li><a href="#">Our team, mission, vision & core values</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item menu-item-has-children">
|
||||||
|
<a href="#">What We Do</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="../../en/projects/">Event & Projects</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
<li><a href="#">Gallery</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item menu-item-has-children">
|
||||||
|
<a href="#">Get Involved</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">Become a member</a></li>
|
||||||
|
<li><a href="#">Support MSOS</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item menu-item-has-children">
|
||||||
|
<a href="#">For Students</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">Student Welcome Guide</a></li>
|
||||||
|
<li><a href="#">Mentorship Programme</a></li>
|
||||||
|
<li><a href="#">FAQs</a></li>
|
||||||
|
<li><a href="#">Get to know Slovenia</a></li>
|
||||||
|
<li><a href="#">Get to know North Macedonia</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item menu-item-has-children">
|
||||||
|
<a href="#">News</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">Announcements</a></li>
|
||||||
|
<li><a href="#">Open calls</a></li>
|
||||||
|
<li><a href="#">Press releases</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
<div class="navigation-actions">
|
<div class="navigation-actions">
|
||||||
<button class="btn btn-secondary">Become a member</button>
|
<button class="btn btn-secondary">Become a member</button>
|
||||||
<button class="btn btn-primary">Donate</button>
|
<button class="btn btn-primary">Donate</button>
|
||||||
<!-- Language Switcher (Desktop Dropdown) -->
|
|
||||||
<div class="language-selector">
|
<div class="language-selector">
|
||||||
<div class="current-lang">
|
<button class="current-lang" id="mobile-lang-trigger">
|
||||||
<i class="fas fa-globe"></i>
|
<i class="fas fa-globe"></i>
|
||||||
<span id="current-lang-code">EN</span>
|
<span>EN</span>
|
||||||
<i class="fas fa-chevron-down"></i>
|
<i class="fas fa-chevron-right"></i>
|
||||||
</div>
|
</button>
|
||||||
<div class="lang-dropdown">
|
|
||||||
<a href="#" data-lang="si">Slovenščina (SI)</a>
|
|
||||||
<a href="#" data-lang="en">English (EN)</a>
|
|
||||||
<a href="#" data-lang="mk">Македонски (MK)</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Menu Icon (Hamburger/X) -->
|
<div id="language-modal-overlay">
|
||||||
<div class="mobile-menu-icon">
|
<div class="language-modal-content">
|
||||||
<i class="fas fa-bars"></i>
|
<div class="language-modal-header">
|
||||||
<i class="fas fa-times"></i>
|
<h3>Select Language</h3>
|
||||||
|
<button id="language-modal-close" aria-label="Close language selection">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="language-modal-body">
|
||||||
|
<a href="#" data-lang="si">Slovenščina (SI)</a>
|
||||||
|
<a href="#" data-lang="en" class="active-lang">English (EN)</a>
|
||||||
|
<a href="#" data-lang="mk">Македонски (MK)</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
<!-- END_HEADER -->
|
||||||
|
|
||||||
<!-- Mobile Navigation Panel -->
|
|
||||||
<div class="mobile-nav-panel">
|
|
||||||
<nav>
|
|
||||||
<ul class="navigation mobile-nav">
|
|
||||||
<li class="menu-item menu-item-has-children">
|
|
||||||
<a href="#">Who We Are</a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a href="#">Timeline & Milestones</a></li>
|
|
||||||
<li><a href="#">Our team, mission, vision & core values</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="menu-item menu-item-has-children">
|
|
||||||
<a href="#">What We Do</a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a href="../../en/projects/">Event & Projects</a></li>
|
|
||||||
<li><a href="#">Blog</a></li>
|
|
||||||
<li><a href="#">Gallery</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="menu-item menu-item-has-children">
|
|
||||||
<a href="#">Get Involved</a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a href="#">Become a member</a></li>
|
|
||||||
<li><a href="#">Support MSOS</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="menu-item menu-item-has-children">
|
|
||||||
<a href="#">For Students</a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a href="#">Student Welcome Guide</a></li>
|
|
||||||
<li><a href="#">Mentorship Programme</a></li>
|
|
||||||
<li><a href="#">FAQs</a></li>
|
|
||||||
<li><a href="#">Get to know Slovenia</a></li>
|
|
||||||
<li><a href="#">Get to know North Macedonia</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="menu-item menu-item-has-children">
|
|
||||||
<a href="#">News</a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a href="#">Announcements</a></li>
|
|
||||||
<li><a href="#">Open calls</a></li>
|
|
||||||
<li><a href="#">Press releases</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<div class="navigation-actions">
|
|
||||||
<button class="btn btn-secondary">Become a member</button>
|
|
||||||
<button class="btn btn-primary">Donate</button>
|
|
||||||
<!-- Language Switcher (Mobile Button - Triggers Modal) -->
|
|
||||||
<div class="language-selector">
|
|
||||||
<button class="current-lang" id="mobile-lang-trigger">
|
|
||||||
<i class="fas fa-globe"></i>
|
|
||||||
<span>EN</span>
|
|
||||||
<i class="fas fa-chevron-right"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Language Selection Modal (for Mobile) -->
|
|
||||||
<div id="language-modal-overlay">
|
|
||||||
<div class="language-modal-content">
|
|
||||||
<div class="language-modal-header">
|
|
||||||
<h3>Select Language</h3>
|
|
||||||
<button id="language-modal-close" aria-label="Close language selection">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="language-modal-body">
|
|
||||||
<a href="#" data-lang="si">Slovenščina (SI)</a>
|
|
||||||
<a href="#" data-lang="en" class="active-lang">English (EN)</a>
|
|
||||||
<a href="#" data-lang="mk">Македонски (MK)</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- END_HEADER -->
|
|
||||||
|
|
||||||
<main class="page-content">
|
<main class="page-content">
|
||||||
<!-- About Us Header Section -->
|
<!-- About Us Header Section -->
|
||||||
<section class="page-header-section">
|
<section class="page-header-section">
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
<span class="page-subtitle">About us</span>
|
<span class="page-subtitle" style="text-transform: uppercase;">About us</span>
|
||||||
<h1>About MSOS</h1>
|
<h1>Our team, mission, vision & core values</h1>
|
||||||
<p class="page-description">Learn more about the company and the team behind it.</p>
|
<p class="page-description">MSOS is more than an organization - it is the energy of the team behind it. Our members are the heart and driving force that inspires us, writing this story and shaping student life in Slovenia.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- MSOS Foundation Section -->
|
<!-- Leadership Team Section -->
|
||||||
<section class="meet-the-team-section">
|
|
||||||
<div class="team-content">
|
|
||||||
<p class="article-publish-date" style="text-align: left;">3rd October 2023</p>
|
|
||||||
<h2>MSOS Foundation</h2>
|
|
||||||
<p style="text-align: left;">Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop. Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.</p>
|
|
||||||
<div class="navigation-arrows" style="display: flex; gap: 1rem; margin-top: 2rem;">
|
|
||||||
<button class="social-icon-btn"><i class="fas fa-arrow-left"></i></button>
|
|
||||||
<button class="social-icon-btn"><i class="fas fa-arrow-right"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="video-container">
|
|
||||||
<img src="../../images/msos_foundation.jpg" alt="MSOS Foundation members" class="video-thumbnail">
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Meet our team section -->
|
|
||||||
<section class="team-section">
|
<section class="team-section">
|
||||||
<div class="become-part-header">
|
<div class="page-header-section">
|
||||||
<h2>Meet our team</h2>
|
<h2>Leadership team</h2>
|
||||||
<p>Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="team-members-grid">
|
<div class="team-grid">
|
||||||
<!-- Team Member 1 -->
|
<!-- Kristijan Popovski -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-kristijan">
|
||||||
<img src="../../images/kristijan_popovski.jpg" alt="Kristijan Popovski">
|
<div class="member-content">
|
||||||
<h4>Kristijan Popovski</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Founder & CEO</p>
|
<a href="mailto:kristijan.popovski@msosorg.com" aria-label="Email Kristijan Popovski"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Former co-founder of Opendoor. Early staff at Spotify and Clearbit.</p>
|
<a href="https://www.linkedin.com/in/popovski-k?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Kristijan Popovski"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/popovski.k/" target="_blank" aria-label="Instagram profile of Kristijan Popovski"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Kristijan Popovski</h4>
|
||||||
|
<p class="role">Founder and President</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Team Member 2 -->
|
<!-- Lea Janachkovska -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-lea">
|
||||||
<img src="../../images/bisera_nikolovska.jpg" alt="Bisera Nikolovska">
|
<div class="member-content">
|
||||||
<h4>Bisera Nikolovska</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Former PM for Linear, Lambda School, and On Deck.</p>
|
<a href="mailto:lea.janackovska@msosorg.com" aria-label="Email Lea Janachkovska"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
|
<a href="https://www.linkedin.com/in/lea-janachkovska-9833b9246?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Lea Janachkovska"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/lea_janackovska?igsh=djl0M2hjMXc0cWF2" target="_blank" aria-label="Instagram profile of Lea Janachkovska"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Lea Janachkovska</h4>
|
||||||
|
<p class="role">Board Member</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Team Member 3 -->
|
<!-- Marko Arsov -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-marko">
|
||||||
<img src="../../images/kiara_lazic.jpg" alt="Kiara Lazic">
|
<div class="member-content">
|
||||||
<h4>Kiara Lazic</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Media and public relations</p>
|
<a href="mailto:marko.arsov@msosorg.com" aria-label="Email Marko Arsov"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
|
<a href="https://www.linkedin.com/in/marko-arsov-3313202b9?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Marko Arsov"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/marko.arsov?igsh=OXh6dnRkNGNuZmpw" target="_blank" aria-label="Instagram profile of Marko Arsov"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Marko Arsov</h4>
|
||||||
|
<p class="role">Board Member</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Team Member 4 -->
|
<!-- Marija Koshtrevska -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-marija">
|
||||||
<img src="../../images/leon_shumanski.jpg" alt="Leon Shumanski">
|
<div class="member-content">
|
||||||
<h4>Leon Shumanski</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Former frontend dev for Linear, Coinbase, and Postscript.</p>
|
<a href="mailto:marija.koshtrevska@msosorg.com" aria-label="Email Marija Koshtrevska"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
|
<a href="https://www.linkedin.com/in/marija-koshtrevska?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Marija Koshtrevska"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/koshtrevska_10?igsh=eng3a2RlNHA5NGRn" target="_blank" aria-label="Instagram profile of Marija Koshtrevska"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Marija Koshtrevska</h4>
|
||||||
|
<p class="role">Board Member</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Team Member 5 -->
|
<!-- Monika Velinova -->
|
||||||
<div class="team-member-card">
|
<div class="member-card" id="member-monika">
|
||||||
<img src="../../images/leon_shumanski.jpg" alt="Leon Shumanski">
|
<div class="member-content">
|
||||||
<h4>Leon Shumanski</h4>
|
<div class="member-socials">
|
||||||
<p class="role">Former frontend dev for Linear, Coinbase, and Postscript.</p>
|
<a href="mailto:monika.velinova@msosorg.com" aria-label="Email Monika Velinova"><i class="fas fa-envelope"></i></a>
|
||||||
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
|
<a href="https://www.linkedin.com/in/monika-velinova-21632517a?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" aria-label="LinkedIn profile of Monika Velinova"><i class="fab fa-linkedin-in"></i></a>
|
||||||
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
|
<a href="https://www.instagram.com/monivelinova?igsh=MTUxOGRmNjNkeXdiaA==" target="_blank" aria-label="Instagram profile of Monika Velinova"><i class="fab fa-instagram"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="member-info">
|
||||||
|
<h4>Monika Velinova</h4>
|
||||||
|
<p class="role">Board Member</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Our values section -->
|
<!-- Our Core Values Section -->
|
||||||
<section class="faq-section values-section">
|
<section class="core-values-section">
|
||||||
<div class="faq-header">
|
<div class="page-header-section">
|
||||||
<h2>Our values</h2>
|
<h2>Our core values</h2>
|
||||||
<p>Our shared values keep us connected and guide us as one team.</p>
|
<p class="page-description">Our shared values keep us connected and guide us as one team.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="faq-grid" style="max-width: 1024px;">
|
<div class="values-container">
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-users"></i></div><h3>Care about our team</h3><p>Understand what matters to our employees. Give them what they need to do their best work.</p></div>
|
<div class="value-row">
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-heart"></i></div><h3>Be excellent to each other</h3><p>No games. No bullshit. We rely on our peers to improve. Be open, honest and kind.</p></div>
|
<div class="value-content">
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-chart-line"></i></div><h3>Pride in what we do</h3><p>Value quality and integrity in everything we do. At all times. No exceptions.</p></div>
|
<h3>Volunteer spirit</h3>
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-smile"></i></div><h3>Don't f*#& the customer</h3><p>Understand customers' stated and unstated needs. Make them wildly successful.</p></div>
|
<p>The strength of MSOS comes from giving our time and energy selflessly. Every project, event, and idea in MSOS is built on the hard work of our amazing volunteers. Our volunteer spirit is a testament to the dedication, passion, and collaborative energy of our community and the reason why we grow stronger together.</p>
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-rocket"></i></div><h3>Do the impossible</h3><p>Be energized by difficult problems. Revel in unknowns. Ask “Why?”, but always question, “Why not?”</p></div>
|
</div>
|
||||||
<div class="faq-item"><div class="faq-icon-container"><i class="fas fa-bolt"></i></div><h3>Sweat the small stuff</h3><p>We believe the best products come from the best attention to detail. Sweat the small stuff.</p></div>
|
<div class="value-image">
|
||||||
</div>
|
<img src="../../images/about_volunteer_spirit.jpg" alt="A group of volunteers working together with positive energy.">
|
||||||
<div class="mission-vision">
|
</div>
|
||||||
<div>
|
|
||||||
<h4><i class="fas fa-flag"></i> Mission</h4>
|
|
||||||
<p>Understand customers' stated and unstated needs. Make them wildly successful.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="value-row">
|
||||||
<h4><i class="fas fa-eye"></i> Vision</h4>
|
<div class="value-image">
|
||||||
<p>Be energized by difficult problems. Revel in unknowns. Ask “Why?”, but always question, “Why not?”</p>
|
<img src="../../images/about_solidarity_and_care_for_each_other.jpg" alt="Students supporting each other in a friendly and caring manner.">
|
||||||
|
</div>
|
||||||
|
<div class="value-content">
|
||||||
|
<h3>Solidarity & care for each other</h3>
|
||||||
|
<p>We are more than a group of students, but a family. We look after one another and support each other not just with studies, but also with everyday challenges. We are here to listen, help, and celebrate successes together. It's about giving without expecting anything in return and creating a safe, warm, and uplifting environment where everyone feels they belong.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="value-row">
|
||||||
|
<div class="value-content">
|
||||||
|
<h3>Love for our roots & ambition for the future</h3>
|
||||||
|
<p>We are proud of where we come from and carry our Macedonian heritage with us, while striving for a brighter future. Our roots give us strength, and our ambition pushes us forward. Our ambition drives us to be professional, innovative, and influential leaders and role models in our host country.</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-image">
|
||||||
|
<img src="../../images/about_love_for_our_roots_ambition_for_the_future.jpg" alt="A blend of traditional Macedonian culture and modern ambitious students.">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Become Part Section -->
|
<!-- Mission and Vision Section -->
|
||||||
<section class="become-part-section" style="background-color: #FFFFFF;">
|
<section class="mission-vision-section">
|
||||||
<div class="become-part-header">
|
<div class="page-header-section">
|
||||||
<h2>Become part of our amazing team</h2>
|
<h2>Mission and Vision</h2>
|
||||||
<p>We're a 100% remote team spread all across the world. Join us!</p>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="../../images/amazing_team.png" alt="Our amazing team in a classroom setting" class="team-photo">
|
<div class="mission-vision-grid" id="mission-vision-interactive">
|
||||||
|
<!-- Mission Box -->
|
||||||
|
<div class="mission-box">
|
||||||
|
<div class="box-content mission-text-content">
|
||||||
|
<p>The mission of MSOS is to represent the interests, improve the lives, and ease the studies of Macedonian students in the Republic of Slovenia.</p>
|
||||||
|
</div>
|
||||||
|
<div class="box-content mission-icon-content">
|
||||||
|
<img src="../../images/about_mission.png" alt="Mission Icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Vision Box -->
|
||||||
|
<div class="vision-box">
|
||||||
|
<div class="box-content vision-text-content">
|
||||||
|
<p>The vision of the MSOS is to provide a voice, a home, and support for Macedonian students in the Republic of Slovenia, while encouraging their active involvement in projects of common interest.</p>
|
||||||
|
</div>
|
||||||
|
<div class="box-content vision-icon-content">
|
||||||
|
<img src="../../images/about_vision.png" alt="Vision Icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="contact-form-container">
|
<!-- FAQ Call to Action Section -->
|
||||||
<form class="contact-form">
|
<section class="faq-cta-section">
|
||||||
<div class="form-row">
|
<div class="faq-cta-container">
|
||||||
<div class="form-group">
|
<div class="avatar-group">
|
||||||
<label for="first-name">First name</label>
|
<img src="../../images/about_marija_min.jpg" alt="Avatar of Marija" class="avatar">
|
||||||
<input type="text" id="first-name" placeholder="First name">
|
<img src="../../images/about_kristijan_min.jpg" alt="Avatar of Kristijan" class="avatar large">
|
||||||
</div>
|
<img src="../../images/about_lea_min.jpg" alt="Avatar of Lea" class="avatar">
|
||||||
<div class="form-group">
|
</div>
|
||||||
<label for="last-name">Last name</label>
|
<h3>Have any questions?</h3>
|
||||||
<input type="text" id="last-name" placeholder="Last name">
|
<p class="page-description" style="margin: 0;">Can't find the answer you're looking for? Please chat to our friendly team.</p>
|
||||||
</div>
|
<a href="#" class="btn btn-primary-orange">See all FAQs</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">Email</label>
|
|
||||||
<input type="email" id="email" placeholder="student@email.com">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="phone-number">Phone number</label>
|
|
||||||
<div class="phone-input">
|
|
||||||
<select id="country-code" aria-label="Country code">
|
|
||||||
<option>SL</option>
|
|
||||||
<option>US</option>
|
|
||||||
<option>MK</option>
|
|
||||||
</select>
|
|
||||||
<input type="tel" id="phone-number" placeholder="+386 (00) 000-000">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="message">Message</label>
|
|
||||||
<textarea id="message" rows="5"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<input type="checkbox" id="privacy-policy">
|
|
||||||
<label for="privacy-policy">You agree to our friendly <a href="#">privacy policy</a>.</label>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Send message</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- START_FOOTER -->
|
<!-- START_FOOTER -->
|
||||||
<footer>
|
<footer>
|
||||||
<div class="footer-container">
|
<div class="footer-container">
|
||||||
<div class="footer-main">
|
<div class="footer-main">
|
||||||
<div class="footer-info">
|
<div class="footer-info">
|
||||||
<div class="footer-logo">
|
<div class="footer-logo">
|
||||||
<img src="../../images/13-whitelogo.png" alt="Macedonian Student Organisation in Slovenia Logo">
|
<img src="../../images/13-whitelogo.png" alt="Macedonian Student Organisation in Slovenia Logo">
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Masarykova cesta 24<br>
|
||||||
|
1000 Ljubljana, Slovenia<br>
|
||||||
|
+389 02 123 4567<br>
|
||||||
|
info.msosorg@gmail.com
|
||||||
|
</p>
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||||
|
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<div class="footer-links">
|
||||||
Masarykova cesta 24<br>
|
<div class="links-column">
|
||||||
1000 Ljubljana, Slovenia<br>
|
<h4>For students</h4>
|
||||||
+389 02 123 4567<br>
|
<a href="#">Blog</a>
|
||||||
info.msosorg@gmail.com
|
<a href="#">Gallery</a>
|
||||||
</p>
|
<a href="#">FAQs</a>
|
||||||
<div class="social-icons">
|
<a href="#">Brochure</a>
|
||||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
</div>
|
||||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
<div class="links-column">
|
||||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
<h4>Projects</h4>
|
||||||
|
<a href="#">Upcoming</a>
|
||||||
|
<a href="#">Previous</a>
|
||||||
|
</div>
|
||||||
|
<div class="links-column">
|
||||||
|
<h4>Organisation</h4>
|
||||||
|
<a href="#">About us</a>
|
||||||
|
<a href="#">Contact</a>
|
||||||
|
<a href="#">Documentation</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-links">
|
<hr>
|
||||||
<div class="links-column">
|
<div class="footer-bottom">
|
||||||
<h4>For students</h4>
|
<p>© MSOS org 2023 All rights reserved.</p>
|
||||||
<a href="#">Blog</a>
|
<div class="legal-links">
|
||||||
<a href="#">Gallery</a>
|
<a href="#">Privacy policy</a>
|
||||||
<a href="#">FAQs</a>
|
<a href="#">Cookie Policy</a>
|
||||||
<a href="#">Brochure</a>
|
<a href="#">Legal Terms</a>
|
||||||
</div>
|
|
||||||
<div class="links-column">
|
|
||||||
<h4>Projects</h4>
|
|
||||||
<a href="#">Upcoming</a>
|
|
||||||
<a href="#">Previous</a>
|
|
||||||
</div>
|
|
||||||
<div class="links-column">
|
|
||||||
<h4>Organisation</h4>
|
|
||||||
<a href="#">About us</a>
|
|
||||||
<a href="#">Contact</a>
|
|
||||||
<a href="#">Documentation</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<script src="../../main.js"></script>
|
||||||
<div class="footer-bottom">
|
</footer>
|
||||||
<p>© MSOS org 2023 All rights reserved.</p>
|
<!-- END_FOOTER -->
|
||||||
<div class="legal-links">
|
|
||||||
<a href="#">Privacy policy</a>
|
|
||||||
<a href="#">Cookie Policy</a>
|
|
||||||
<a href="#">Legal Terms</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="../../main.js"></script>
|
|
||||||
</footer>
|
|
||||||
<!-- END_FOOTER -->
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 611 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 743 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 MiB |
26
main.js
26
main.js
|
|
@ -242,7 +242,31 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ===================================================================
|
* ===================================================================
|
||||||
* 4. ZAGON FUNKCIJ PO NALOŽITVI STRANI
|
* 4. INTERAKTIVNA SEKCIJA "MISSION & VISION"
|
||||||
|
* ===================================================================
|
||||||
|
*/
|
||||||
|
try {
|
||||||
|
const missionVisionContainer = document.getElementById('mission-vision-interactive');
|
||||||
|
|
||||||
|
if (missionVisionContainer) {
|
||||||
|
const missionBox = missionVisionContainer.querySelector('.mission-box');
|
||||||
|
const visionBox = missionVisionContainer.querySelector('.vision-box');
|
||||||
|
|
||||||
|
missionBox.addEventListener('mouseenter', () => {
|
||||||
|
missionVisionContainer.classList.remove('show-vision');
|
||||||
|
});
|
||||||
|
|
||||||
|
visionBox.addEventListener('mouseenter', () => {
|
||||||
|
missionVisionContainer.classList.add('show-vision');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch(error) {
|
||||||
|
console.error('Error in Mission/Vision interaction setup:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ===================================================================
|
||||||
|
* 5. ZAGON FUNKCIJ PO NALOŽITVI STRANI
|
||||||
* ===================================================================
|
* ===================================================================
|
||||||
*/
|
*/
|
||||||
highlightActiveLink();
|
highlightActiveLink();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue