mark
/
msos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dodajanje about us in timeline
Deploy to Production on Develop Push / deploy (push) Successful in 1m13s Details

This commit is contained in:
Mark Poljanšek 2025-09-02 15:54:18 +02:00
parent 0b5d53abb9
commit 544791f37e
32 changed files with 11254 additions and 1576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11456
code_export.txt
View File

File diff suppressed because it is too large Load Diff

4
css/main.css
View File

@ -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';

134
css/pages/_about.css Normal file
View File

@ -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;
}
}

196
css/pages/_timeline.css Normal file
View File

@ -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;
}
}

297
en/about-us/index.html Normal file
View File

@ -0,0 +1,297 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Macedonian Student Organisation in Slovenia</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome (for icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Link to the main CSS file -->
<link rel="stylesheet" href="../../css/main.css">
</head>
<body>
<!-- START_HEADER -->
<header class="dropdown-header-navigation">
<div class="container">
<div class="header-content">
<a href="../../en/" class="logo-link">
<img src="../../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../en/projects/">Projects</a>
</nav>
</div>
<!-- Desktop Buttons -->
<div class="navigation-actions">
<button class="btn btn-secondary">Become a partner</button>
<button class="btn btn-primary">Donate</button>
<!-- Language Switcher -->
<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>
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../en/projects/">Projects</a>
</nav>
<div class="navigation-actions">
<button class="btn btn-secondary">Become a partner</button>
<button class="btn btn-primary">Donate</button>
<!-- Language Switcher (for mobile) -->
<div class="language-selector">
<div class="current-lang">
<i class="fas fa-globe"></i>
<span id="current-lang-code-mobile">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>
<!-- Mobile Menu Icon (Hamburger/X) -->
<div class="mobile-menu-icon">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
</div>
</header>
<!-- END_HEADER -->
<main class="page-content">
<!-- About Us Header Section -->
<section class="page-header-section">
<div class="container text-center">
<span class="page-subtitle">About us</span>
<h1>About MSOS</h1>
<p class="page-description">Learn more about the company and the team behind it.</p>
</div>
</section>
<!-- MSOS Foundation 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">
<div class="become-part-header">
<h2>Meet our 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 class="team-members-grid">
<!-- Team Member 1 -->
<div class="team-member-card">
<img src="../../images/kristijan_popovski.jpg" alt="Kristijan Popovski">
<h4>Kristijan Popovski</h4>
<p class="role">Founder & CEO</p>
<p class="description">Former co-founder of Opendoor. Early staff at Spotify and Clearbit.</p>
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Team Member 2 -->
<div class="team-member-card">
<img src="../../images/bisera_nikolovska.jpg" alt="Bisera Nikolovska">
<h4>Bisera Nikolovska</h4>
<p class="role">Former PM for Linear, Lambda School, and On Deck.</p>
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Team Member 3 -->
<div class="team-member-card">
<img src="../../images/kiara_lazic.jpg" alt="Kiara Lazic">
<h4>Kiara Lazic</h4>
<p class="role">Media and public relations</p>
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Team Member 4 -->
<div class="team-member-card">
<img src="../../images/leon_shumanski.jpg" alt="Leon Shumanski">
<h4>Leon Shumanski</h4>
<p class="role">Former frontend dev for Linear, Coinbase, and Postscript.</p>
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Team Member 5 -->
<div class="team-member-card">
<img src="../../images/leon_shumanski.jpg" alt="Leon Shumanski">
<h4>Leon Shumanski</h4>
<p class="role">Former frontend dev for Linear, Coinbase, and Postscript.</p>
<p class="description">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
<a href="#" class="social-icon-btn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</section>
<!-- Our values section -->
<section class="faq-section values-section">
<div class="faq-header">
<h2>Our values</h2>
<p>Our shared values keep us connected and guide us as one team.</p>
</div>
<div class="faq-grid" style="max-width: 1024px;">
<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="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="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>
<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>
<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 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>
<div class="mission-vision">
<div>
<h4><i class="fas fa-flag"></i> Mission</h4>
<p>Understand customers' stated and unstated needs. Make them wildly successful.</p>
</div>
<div>
<h4><i class="fas fa-eye"></i> Vision</h4>
<p>Be energized by difficult problems. Revel in unknowns. Ask “Why?”, but always question, “Why not?”</p>
</div>
</div>
</section>
<!-- Become Part Section -->
<section class="become-part-section" style="background-color: #FFFFFF;">
<div class="become-part-header">
<h2>Become part of our amazing team</h2>
<p>We're a 100% remote team spread all across the world. Join us!</p>
</div>
<img src="../../images/amazing_team.png" alt="Our amazing team in a classroom setting" class="team-photo">
<div class="contact-form-container">
<form class="contact-form">
<div class="form-row">
<div class="form-group">
<label for="first-name">First name</label>
<input type="text" id="first-name" placeholder="First name">
</div>
<div class="form-group">
<label for="last-name">Last name</label>
<input type="text" id="last-name" placeholder="Last name">
</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>
</main>
<!-- START_FOOTER -->
<footer>
<div class="footer-container">
<div class="footer-main">
<div class="footer-info">
<div class="footer-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 class="footer-links">
<div class="links-column">
<h4>For students</h4>
<a href="#">Blog</a>
<a href="#">Gallery</a>
<a href="#">FAQs</a>
<a href="#">Brochure</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>
<hr>
<div class="footer-bottom">
<p>© MSOS org 2023 All rights reserved.</p>
<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 -->
<script src="../../main.js"></script>
</body>
</html>

297
en/about-us/index.html.bak Normal file
View File

@ -0,0 +1,297 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Macedonian Student Organisation in Slovenia</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome (for icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Link to the main CSS file -->
<link rel="stylesheet" href="../../../css/main.css">
</head>
<body>
<!-- START_HEADER -->
<header class="dropdown-header-navigation">
<div class="container">
<div class="header-content">
<a href="../../../en/" class="logo-link">
<img src="../../../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
</div>
<!-- Desktop Buttons -->
<div class="navigation-actions">
<button class="btn btn-secondary">Become a partner</button>
<button class="btn btn-primary">Donate</button>
<!-- Language Switcher -->
<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>
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
<div class="navigation-actions">
<button class="btn btn-secondary">Become a partner</button>
<button class="btn btn-primary">Donate</button>
<!-- Language Switcher (for mobile) -->
<div class="language-selector">
<div class="current-lang">
<i class="fas fa-globe"></i>
<span id="current-lang-code-mobile">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>
<!-- Mobile Menu Icon (Hamburger/X) -->
<div class="mobile-menu-icon">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
</div>
</header>
<!-- END_HEADER -->
<main class="page-content">
<!-- About Us Header Section -->
<section class="page-header-section">
<div class="container text-center">
<span class="page-subtitle">About us</span>
<h1>About MSOS</h1>
<p class="page-description">Learn more about the company and the team behind it.</p>
</div>
</section>
<!-- MSOS Foundation 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" style="padding: 96px 80px; text-align: center;">
<div class="become-part-header">
<h2>Meet our 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 class="team-members-grid" style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto;">
<!-- Team Member 1 -->
<div class="testimonial-card" style="flex: 1; min-width: 240px; max-width: 243px; background-color: #F9FAFB; text-align: center;">
<img src="../../../images/kristijan_popovski.jpg" alt="Kristijan Popovski" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 20px;">
<h4>Kristijan Popovski</h4>
<p style="color: #FA7850;">Founder & CEO</p>
<p style="font-size: 14px; color: #667085;">Former co-founder of Opendoor. Early staff at Spotify and Clearbit.</p>
<a href="#" class="social-icon-btn" style="margin: 16px auto 0;"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Team Member 2 -->
<div class="testimonial-card" style="flex: 1; min-width: 240px; max-width: 243px; background-color: #F9FAFB; text-align: center;">
<img src="../../../images/bisera_nikolovska.jpg" alt="Bisera Nikolovska" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 20px;">
<h4>Bisera Nikolovska</h4>
<p style="color: #FA7850;">Former PM for Linear, Lambda School, and On Deck.</p>
<p style="font-size: 14px; color: #667085;">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
<a href="#" class="social-icon-btn" style="margin: 16px auto 0;"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Team Member 3 -->
<div class="testimonial-card" style="flex: 1; min-width: 240px; max-width: 243px; background-color: #F9FAFB; text-align: center;">
<img src="../../../images/kiara_lazic.jpg" alt="Kiara Lazic" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 20px;">
<h4>Kiara Lazic</h4>
<p style="color: #FA7850;">Media and public relations</p>
<p style="font-size: 14px; color: #667085;">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
<a href="#" class="social-icon-btn" style="margin: 16px auto 0;"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Team Member 4 -->
<div class="testimonial-card" style="flex: 1; min-width: 240px; max-width: 243px; background-color: #F9FAFB; text-align: center;">
<img src="../../../images/leon_shumanski.jpg" alt="Leon Shumanski" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 20px;">
<h4>Leon Shumanski</h4>
<p style="color: #FA7850;">Former frontend dev for Linear, Coinbase, and Postscript.</p>
<p style="font-size: 14px; color: #667085;">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
<a href="#" class="social-icon-btn" style="margin: 16px auto 0;"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- Team Member 5 -->
<div class="testimonial-card" style="flex: 1; min-width: 240px; max-width: 243px; background-color: #F9FAFB; text-align: center;">
<img src="../../../images/leon_shumanski.jpg" alt="Leon Shumanski" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 20px;">
<h4>Leon Shumanski</h4>
<p style="color: #FA7850;">Former frontend dev for Linear, Coinbase, and Postscript.</p>
<p style="font-size: 14px; color: #667085;">Lead engineering teams at Figma, Pitch, and Protocol Labs.</p>
<a href="#" class="social-icon-btn" style="margin: 16px auto 0;"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</section>
<!-- Our values section -->
<section class="faq-section" style="background-color: #F9FAFB;">
<div class="faq-header">
<h2>Our values</h2>
<p>Our shared values keep us connected and guide us as one team.</p>
</div>
<div class="faq-grid" style="max-width: 1024px;">
<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="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="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>
<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>
<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 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>
<div class="mission-vision" style="display: flex; justify-content: center; gap: 32px; max-width: 768px; margin: 64px auto 0; text-align: left;">
<div style="flex: 1;">
<h4 style="display: flex; align-items: center; gap: 8px;"><i class="fas fa-flag"></i> Mission</h4>
<p>Understand customers' stated and unstated needs. Make them wildly successful.</p>
</div>
<div style="flex: 1;">
<h4 style="display: flex; align-items: center; gap: 8px;"><i class="fas fa-eye"></i> Vision</h4>
<p>Be energized by difficult problems. Revel in unknowns. Ask “Why?”, but always question, “Why not?”</p>
</div>
</div>
</section>
<!-- Become Part Section -->
<section class="become-part-section" style="background-color: #FFFFFF;">
<div class="become-part-header">
<h2>Become part of our amazing team</h2>
<p>We're a 100% remote team spread all across the world. Join us!</p>
</div>
<img src="../../../images/amazing_team.png" alt="Our amazing team in a classroom setting" class="team-photo">
<div class="contact-form-container">
<form class="contact-form">
<div class="form-row">
<div class="form-group">
<label for="first-name">First name</label>
<input type="text" id="first-name" placeholder="First name">
</div>
<div class="form-group">
<label for="last-name">Last name</label>
<input type="text" id="last-name" placeholder="Last name">
</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>
</main>
<!-- START_FOOTER -->
<footer>
<div class="footer-container">
<div class="footer-main">
<div class="footer-info">
<div class="footer-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 class="footer-links">
<div class="links-column">
<h4>For students</h4>
<a href="#">Blog</a>
<a href="#">Gallery</a>
<a href="#">FAQs</a>
<a href="#">Brochure</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>
<hr>
<div class="footer-bottom">
<p>© MSOS org 2023 All rights reserved.</p>
<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 -->
<script src="../../../main.js"></script>
</body>
</html>

394
en/about-us/timeline-and-milestones/index.html Normal file
View File

@ -0,0 +1,394 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timeline & Milestones - Macedonian Student Organisation in Slovenia</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome (for icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Link to the main CSS file -->
<link rel="stylesheet" href="../../../css/main.css">
</head>
<body>
<!-- START_HEADER -->
<header class="dropdown-header-navigation">
<div class="container">
<div class="header-content">
<a href="../../../en/" class="logo-link">
<img src="../../../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
</div>
<!-- Desktop Buttons -->
<div class="navigation-actions">
<button class="btn btn-secondary">Become a member</button>
<button class="btn btn-primary">Donate</button>
<!-- Language Switcher -->
<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>
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
<div class="navigation-actions">
<button class="btn btn-secondary">Become a member</button>
<button class="btn btn-primary">Donate</button>
<!-- Language Switcher (for mobile) -->
<div class="language-selector">
<div class="current-lang">
<i class="fas fa-globe"></i>
<span id="current-lang-code-mobile">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>
<!-- Mobile Menu Icon (Hamburger/X) -->
<div class="mobile-menu-icon">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
</div>
</header>
<!-- END_HEADER -->
<main class="page-content">
<!-- Timeline Header Section -->
<section class="page-header-section">
<div class="container text-center">
<span class="page-subtitle" style="text-transform: uppercase;">About us</span>
<h1>Timeline & Milestones</h1>
<p class="page-description">Learn more about the company and the team behind it.</p>
</div>
</section>
<!-- Timeline Banner -->
<div class="timeline-banner">
<img src="../../../images/about_us-timeline-milestones_img0.JPG" alt="MSOS Team Group Photo">
</div>
<!-- Timeline Section -->
<section class="timeline-section">
<div class="timeline-container">
<!-- Year 2022 -->
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-year">2022</p>
<h2>The Beginning of a Movement</h2>
<p>What started as a simple idea in the summer of 2022 quickly grew into something much bigger. From the spark at a wine tasting in Ljubljana, to the first Macedonian Student Party with over 500 attendees, and finally the creation of the founding team, 2022 was the year when MSOS was born. It was a year of enthusiasm, countless volunteer hours, and the first steps toward building a community that Macedonian students in Slovenia had long been waiting for.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">August 2022</p>
<h3>The Spark of an Idea</h3>
<p>It all started at a wine tasting event in the heart of Ljubljana. Among friends and good conversation, our founder Kristijan Popovski was encouraged by his Slovenian peers to organize something truly Macedonian. Inspired, he posted in a Facebook group of Macedonians living in Slovenia, calling for volunteers to help bring the idea to life.</p>
<p>Around 40 volunteers responded — a group of students who, without even realizing it, were laying the foundations of what would later become MSOS. Day after day, we worked side by side, sharing the same air, fueled by excitement and the desire to create something new. At that point, we weren't thinking about “founding an organization" — we were just a group of people trying to make one unforgettable event happen.</p>
<p>Two weeks later, the first Macedonian Student Party in Ljubljana came to life. Expectations were exceeded: sponsors and donors joined in, volunteers gave their all, and more than 500 people showed up.</p>
<p>That night made one thing very clear: Macedonian students in Slovenia needed a space to connect, celebrate, and support one another. And from that realization, MSOS was born.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">October 2022</p>
<h3>From One Event to a Bigger Vision</h3>
<p>After the success of the first Macedonian Student Party in Ljubljana, something changed. What began as a one-time event sparked a new energy among us. The group of volunteers who had worked side by side suddenly felt there was more to be done.</p>
<p>We started holding regular meetings and brainstorming sessions, often lasting late into the evening. In those small rooms, surrounded by notes and ideas scribbled on paper, we began to shape a bigger vision. We talked about what Macedonian students in Slovenia truly needed — not just parties, but support, connection, and a community they could rely on.</p>
<p>Those early sessions gave birth to our mission and vision. We didn't yet call ourselves an “organization," but we were slowly becoming one. What kept us going was the same spirit that created the first party — the belief that, together, we could make student life in Slovenia easier, warmer, and more meaningful.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">November 2022</p>
<h3>The Founding Team</h3>
<p>From the energy of the first events, a smaller circle of the most dedicated volunteers decided to take things further. They realized that for MSOS to grow, it needed structure, direction, and continuity. That was the moment when the first coordinating body was born — the group that would soon become the founding team of the organization.</p>
<p>This first team was made up of: Kristijan Popovski, Bisera Nikoloska, Marko Arsov, Ksenija Kraljevska, Aleksandar Balkoski, Kiara Lazić, Evgenija Kolovska, Dijana Dimkovska, Hristijan Bogdanovski, and Stefan Gjurovski. Each one brought something unique to the table — from leadership and creativity to organizational skills and dedication.</p>
<p>Together, they laid down the mission and vision, drafted the first structure, and set the foundations of what would grow into the official Macedonian Student Organization in Slovenia. At that time, no one could have imagined how quickly MSOS would evolve, but this team ensured that the idea would not remain just one successful party — it would become a movement.</p>
</div>
</div>
</div>
<!-- Year 2023 -->
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-year">2023</p>
<h2>From Idea to Tradition</h2>
<p>The year 2023 marked the transformation of MSOS from an emerging initiative into a recognizable student network. In March, we stepped into the public eye and immediately expanded beyond Ljubljana to Maribor and Koper. By September, we had already crossed borders with our first major panel event in Skopje, connecting future students with those already studying in Slovenia. 2023 was the year when MSOS stopped being just an idea and began building traditions that continue to grow today.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">March 2023</p>
<h3>Going Public</h3>
<p>On March 5, 2023, we officially introduced MSOS to the public as a student initiative. What had begun as an idea and a few events was now ready to be presented as something bigger — a movement with a clear mission and vision.</p>
<p>The launch was more than just an announcement. It was the moment when Macedonian students in Slovenia realized they had their own platform, their own voice, and a community they could call home. Through social media, word of mouth, and our first public activities, we reached students who until then felt scattered and disconnected.</p>
<p>For us as organizers, this was a defining step: MSOS was no longer just an idea among friends, but a name and a promise that other students could recognize and join. From that day on, everything became more serious — new projects, structured communication, and the understanding that we had a responsibility to represent and support our community.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">March 2023</p>
<h3>Growing Beyond Ljubljana</h3>
<p>The public launch of MSOS in March 2023 did more than just make us visible — it sparked a wave of interest across Slovenia. Very quickly, students from Maribor and Koper reached out, asking how they could get involved. What began as individual messages soon grew into local teams, ready to bring the MSOS spirit to their own cities.</p>
<p>This moment showed us that the need for community wasn't limited to Ljubljana. Macedonian students everywhere were looking for connection, support, and a network they could trust. With Maribor and Koper on board, MSOS transformed from a local initiative into a nationwide student presence, active across Slovenia's major university centers.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">September 2023</p>
<h3>"Meet Student Slovenia 2023"</h3>
<p>In September 2023, MSOS took a bold step — for the first time, we organized a panel event outside Slovenia, in Skopje. The idea was simple but powerful: bring together future students and their parents, and connect them directly with those already living and studying in Slovenia.</p>
<p>The turnout exceeded all expectations. More than 100 participants filled the NLB Gallery, eager to hear real stories; not from brochures or officials, but from students themselves. They spoke about everyday challenges, from housing and paperwork to making friends and building a new life far from home. The honesty of their experiences created an atmosphere that felt more like a family gathering than a formal event.</p>
<p>For many of the attendees, this was the first time they realized they were not alone in their worries. Questions that had been weighing on them for months found clear answers, and fears were replaced with excitement. For us as organizers, it was proof that MSOS was fulfilling its mission: to be the bridge between Macedonia and Slovenia, offering support even before students set foot in their new city.</p>
</div>
</div>
</div>
<!-- Year 2024 -->
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-year">2024</p>
<h2>From Recognition to Responsibility</h2>
<p>In 2024, MSOS grew into a fully recognized and nationwide student organization. We expanded to Nova Gorica, officially registered as an association on September 9, and organized our first international conference in Skopje. With Tour de Maribor on October 12, our local teams showed new energy and initiative, while on November 17 we signed a Memorandum of Cooperation with the Student Assembly of UKIM in Skopje. 2024 was the year MSOS gained legitimacy, broadened its reach, and strengthened its role as a bridge between students in Slovenia and Macedonia.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">May 2024</p>
<h3>Expanding to Nova Gorica</h3>
<p>By the spring of 2024, MSOS had already built a strong presence in Ljubljana, Maribor, and Koper. But one important piece was still missing: Nova Gorica. In May, we officially welcomed our first members from the University of Nova Gorica — students full of energy, motivation, and new perspectives.</p>
<p>For us, this expansion was more than just adding another city to the map. It symbolized the fact that MSOS was now present in all four major university centers in Slovenia. It meant that no matter where Macedonian students chose to study; from Ljubljana to the western border of the country, they could count on support, community, and a familiar face.</p>
<p>The arrival of the Nova Gorica team brought fresh energy and ideas into our organization, reminding us once again that MSOS is not only about structure, but about people who are ready to help each other and grow together.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">September 2024</p>
<h3>Official Registration</h3>
<p>On September 9, 2024, MSOS was officially registered in the Slovenian register of associations. This milestone marked a historic moment for us: from a student initiative built on enthusiasm and volunteer spirit, we became a legally recognized organization.</p>
<p>The registration gave us legitimacy to act as an institution, to run projects with legal backing, and to collaborate formally with universities, government bodies, and other organizations. For our team, it was more than a piece of paper — it was the confirmation that all the effort, countless volunteer hours, and shared vision had grown into something real and lasting.</p>
<p>That day we celebrated not just a legal status, but a sense of pride. MSOS was no longer just "our idea;" it became an organization that belongs to every Macedonian student in Slovenia.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<h3>First MSOS Conference</h3>
<p>Only a few weeks after our official registration, on September 25, 2024, MSOS took another bold step, organizing its first official conference in Skopje: "From Slovenia to North Macedonia: Synergy of Education and Business."</p>
<p>The event brought together three different worlds — students, government, and the business sector, around one shared question: How can young people educated abroad be motivated to return and contribute at home?</p>
<p>The program was divided into three panels:</p>
<ul>
<li><strong>Youth Panel</strong> – where students educated in Slovenia shared their hopes, challenges, and perspectives on returning to Macedonia.</li>
<li><strong>Government Panel</strong> – discussing policies for brain gain and the role of institutions in supporting young professionals.</li>
<li><strong>Business Panel</strong> – focusing on how companies can create opportunities and incentives for returning graduates.</li>
</ul>
<p>The discussions touched on education, career opportunities, fair pay, and quality of life, the very factors that shape whether young people see a future in their home country.</p>
<p>For MSOS, this conference was more than an event. It was proof that our organization can go beyond student parties and support groups, and become a credible voice in debates about youth, education, and the future of Macedonia. It was a moment when we showed that student initiatives can grow into platforms that connect countries, generations, and sectors.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">October 2024</p>
<h3>Tour de Maribor</h3>
<p>On October 12, 2024, our Maribor team organized its first event — Tour de Maribor. The idea was to welcome new students by turning the entire city into a playground. Teams of participants received maps with 10 checkpoints, each offering a fun challenge: solving quizzes, making TikToks, trading random items, or snapping creative photos with Maribor's landmarks.</p>
<p>The adventure lasted for more than five hours and ended with prizes, music, and new friendships. But what mattered most wasn't the competition — it was the atmosphere. Strangers became teammates, teammates became friends, and Maribor students felt the spirit of MSOS as their own.</p>
<p>That day, something bigger was born: the MSOS spirit in Maribor. A new strength and initiative emerged, showing once again that MSOS isn't just about one city — it's about students everywhere who want to build a community together.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">November 2024</p>
<h3>Memorandum of Cooperation</h3>
<p>On International Students' Day, November 17, 2024, MSOS and the University Student Assembly at Ss. Cyril and Methodius University in Skopje signed a Memorandum of Cooperation.</p>
<p>With this step, we confirmed our joint commitment to improving student standards, strengthening regional cooperation, and creating a bridge for sharing best practices between Macedonia and Slovenia.</p>
<p>The memorandum symbolized more than a formal agreement — it was a recognition that Macedonian students abroad and at home share the same challenges and hopes. By working together, we opened a path for stronger collaboration, exchange of experiences, and building a student voice that crosses borders.</p>
</div>
</div>
</div>
<!-- Year 2025 -->
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-year">2025</p>
<h2>A Year of Community and New Beginnings</h2>
<p>In 2025, MSOS strengthened its presence across Slovenia with the first independent events from our teams in Nova Gorica and Koper. We stood in solidarity with Macedonia through peaceful gatherings and humanitarian actions, proving that our community is about more than student life alone. And with the upcoming opening of our first Student Hub in Ljubljana, 2025 marks a year of both unity and exciting new beginnings.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">March 2025</p>
<h3>Paint & Wine in Nova Gorica</h3>
<p>On International Women's Day, March 8, 2025, our team in Nova Gorica organized its very first independent event — a creative and vibrant Paint & Wine evening. With canvases, brushes, and a glass of wine in hand, students painted while enjoying the sunset accompanied by a live DJ set.</p>
<p>The event was more than just art and music. It was a celebration of creativity, diversity, and the energy of young people coming together in a relaxed and inspiring setting. For MSOS, it was also a proud milestone: proof that our local teams are not only active, but able to design and carry out unique events that reflect their own spirit and community.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<h3>MSOS Koper's First Event – Handball Fan Zone</h3>
<p>On March 16, 2025, our MSOS Koper team organized its first event, a Fan Zone for the European Handball Championship qualification match between Macedonia and Slovenia. In cooperation with the Macedonian Handball Federation, we brought students together with face paints, red and yellow flags, Macedonian beer, and even arranged two buses from Ljubljana to Koper to cheer as one.</p>
<p>Sadly the event sadly stopped by the tragic news from Kochani. Despite this, the event showed the strength of our community and the passion of MSOS Koper in creating spaces where students unite and celebrate their identity.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">March-April 2025</p>
<h3>Solidarity for Kočani in difficult times</h3>
<p>In March and April 2025, MSOS stood together with the Macedonian community after the tragic events in Kočani. In Ljubljana, more than 700 people gathered in a peaceful vigil, filling the city square with candles and compassion. Soon after, our team in Maribor organized a charity basketball and football tournament, raising over €1,000 to support the families whose children were receiving treatment in Slovenia.</p>
<p>These moments reminded us that MSOS is not only about projects and events, but also about solidarity, empathy, and standing by our people in difficult times.</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker milestone"></div>
<div class="timeline-entry">
<div class="timeline-content">
<p class="timeline-date">October 2025</p>
<h3>Coming Soon – MSOS Student Hub in Ljubljana</h3>
<p>The next big step for MSOS is the opening of our first Student Hub in Ljubljana this October. It will be a space for students to meet, work on projects, socialize, and create new ideas together. The Hub is envisioned as the new heart of our organization — a symbol of the community we have built and continue to grow.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- START_FOOTER -->
<footer>
<div class="footer-container">
<div class="footer-main">
<div class="footer-info">
<div class="footer-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 class="footer-links">
<div class="links-column">
<h4>For students</h4>
<a href="#">Blog</a>
<a href="#">Gallery</a>
<a href="#">FAQs</a>
<a href="#">Brochure</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>
<hr>
<div class="footer-bottom">
<p>© MSOS org 2023 All rights reserved.</p>
<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>
</html>

4
en/index.html
View File

@ -27,7 +27,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../en/projects/">Projects</a>
</nav>
@ -55,7 +55,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../en/projects/">Projects</a>
</nav>

2
en/index.html.bak
View File

@ -238,7 +238,7 @@
<h2>Become part of our amazing team</h2>
<p>We're a 100% remote team spread all across the world. Join us!</p>
</div>
<img src="../images/9-becomepart.png" alt="Our amazing team in a classroom setting" class="team-photo">
<img src="../images/9-becomepart.webp" alt="Our amazing team in a classroom setting" class="team-photo">
<div class="contact-form-container">
<form class="contact-form">

4
en/projects/index.html
View File

@ -27,7 +27,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../en/projects/">Projects</a>
</nav>
@ -55,7 +55,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../en/projects/">Projects</a>
</nav>

2
en/projects/index.html.bak
View File

@ -164,7 +164,7 @@
<!-- Placeholder Project 2 -->
<article class="post-card">
<a href="testproject/" class="post-link">
<img src="../../images/5-pmmentals.jpg" alt="A woman presenting in front of a whiteboard with sticky notes to a team" class="post-image">
<img src="../../images/5-pmmentals.webp" alt="A woman presenting in front of a whiteboard with sticky notes to a team" class="post-image">
<div class="post-content">
<p class="post-meta">Demi Wilkinson • 16 Jan 2022 • Student life</p>
<h3 class="post-title">PM mental models</h3>

4
en/projects/macedonian-student-night-in-ljubljana/index.html
View File

@ -27,7 +27,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
@ -55,7 +55,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>

2
en/projects/macedonian-student-night-in-ljubljana/index.html.bak
View File

@ -105,7 +105,7 @@
<p>It all began with a simple wish – to gather, get to know each other, and feel Macedonia, even though we were far from it. Kristijan Popovski, then a student at the School of Economics and Business in Ljubljana, shared his idea with a few colleagues, and the response was incredible. In less than two weeks, over 40 students joined the organizing team. Everyone contributed their enthusiasm and time, and the shared spirit and desire to connect turned this spontaneous initiative into an event we would remember for a long time.</p>
<figure class="article-inline-image">
<img src="../../../images/msnl-2.png" alt="Preparations and meetings for the Macedonian Student Night">
<img src="../../../images/msnl-2.webp" alt="Preparations and meetings for the Macedonian Student Night">
<figcaption>Photos from the preparations and meetings for organizing the Macedonian Student Night.</figcaption>
</figure>

4
en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html
View File

@ -27,7 +27,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
@ -55,7 +55,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>

2
en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html.bak
View File

@ -105,7 +105,7 @@
<p>Сè започна со едноставна желба – да се собереме, да се запознаеме и да ја почувствуваме Македонија, иако сме далеку од неа. Кристијан Поповски, тогаш студент на Економскиот факултет во Љубљана, ја сподели својата идеја со неколку колеги, а одговорот беше неверојатен. За помалку од две недели, преку 40 студенти се пријавија во организацискиот тим. Секој понесе дел од својот ентузијазам и време, а заедничкиот дух и желбата за поврзување ја претворија оваа спонтана иницијатива во настан што долго ќе го паметиме.</p>
<figure class="article-inline-image">
<img src="../../images/msnl-2.png" alt="Подготовки и состаноци за македонската студентска вечер">
<img src="../../images/msnl-2.webp" alt="Подготовки и состаноци за македонската студентска вечер">
<figcaption>Фотографии од подготовките и состаноците за организирање на македонската студентска вечер</figcaption>
</figure>

4
en/projects/meet-student-slovenia-2023/index.html
View File

@ -27,7 +27,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
@ -55,7 +55,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>

2
en/projects/meet-student-slovenia-2023/index.html.bak
View File

@ -156,7 +156,7 @@
<p>A special moment of the event was the address by the Consul of the Embassy of the Republic of Slovenia in North Macedonia, Mr. Martin Glazar. He briefly presented the most important steps of the process for obtaining a temporary residence permit – one of the biggest concerns and challenges for all foreign students in Slovenia. In this way, future students gained a clearer picture of what awaits them and how to more easily deal with administrative procedures.</p>
<figure class="article-inline-image">
<img src="../../../images/event3-photo-9.png" alt="The Consul introducing students to the process of obtaining a temporary residence permit">
<img src="../../../images/event3-photo-9.webp" alt="The Consul introducing students to the process of obtaining a temporary residence permit">
<figcaption>Photograph of the consul introducing students in an interesting way to the process of obtaining a temporary residence permit!</figcaption>
</figure>

4
en/projects/meet-student-slovenia-2024/index.html
View File

@ -27,7 +27,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
@ -55,7 +55,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>

2
en/projects/meet-student-slovenia-2024/index.html.bak
View File

@ -152,7 +152,7 @@
<p>This time, the memories of the evening are thanks to Hristina Trakovska, who was the photographer and made sure all those moments were captured so we can relive them again through photographs.</p>
<figure class="article-inline-image">
<img src="../../../images/event4-img-10.png" alt="Welcome speech by H.E. Ambassador Mr. Gregor Presker.">
<img src="../../../images/event4-img-10.webp" alt="Welcome speech by H.E. Ambassador Mr. Gregor Presker.">
<figcaption>Photograph of the welcome speech by H.E. Ambassador Mr. Gregor Presker.</figcaption>
</figure>

4
en/projects/morning-coffee-in-front-of-ctk/index.html
View File

@ -27,7 +27,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
@ -55,7 +55,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>

2
en/projects/morning-coffee-in-front-of-ctk/index.html.bak
View File

@ -144,7 +144,7 @@
<p>See you again next year – even more relaxed and with even more coffee!</p>
<figure class="article-inline-image">
<img src="../../../images/event4-image7.png" alt="A collage of photos showing students, coffee cups, and burek.">
<img src="../../../images/event4-image7.webp" alt="A collage of photos showing students, coffee cups, and burek.">
<figcaption>Good company, lots of memories, and exam stress overcome together.</figcaption>
</figure>
</div>

4
en/projects/testproject/index.html
View File

@ -27,7 +27,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>
@ -55,7 +55,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="../../../en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="../../../en/projects/">Projects</a>
</nav>

2
en/projects/testproject/index.html.bak
View File

@ -105,7 +105,7 @@
<p>It all began with a simple wish – to gather, get to know each other, and feel Macedonia, even though we were far from it. Kristijan Popovski, then a student at the School of Economics and Business in Ljubljana, shared his idea with a few colleagues, and the response was incredible. In less than two weeks, over 40 students joined the organizing team. Everyone contributed their enthusiasm and time, and the shared spirit and desire to connect turned this spontaneous initiative into an event we would remember for a long time.</p>
<figure class="article-inline-image">
<img src="../../images/msnl-2.png" alt="Preparations and meetings for the Macedonian Student Night">
<img src="../../images/msnl-2.webp" alt="Preparations and meetings for the Macedonian Student Night">
<figcaption>Photos from the preparations and meetings for organizing the Macedonian Student Night.</figcaption>
</figure>

BIN
images/.DS_Store vendored
View File

Binary file not shown.

BIN
images/about_us-timeline-milestones_img0.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

BIN
images/amazing_team.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 MiB

BIN
images/bisera_nikolovska.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 MiB

BIN
images/kiara_lazic.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 MiB

BIN
images/kristijan_popovski.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 MiB

BIN
images/leon_shumanski.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 MiB

BIN
images/msos_foundation.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 MiB

4
templates/en/header.html
View File

@ -7,7 +7,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="navigation desktop-nav">
<a href="#">About us</a>
<a href="{{ROOT_PREFIX}}en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="{{ROOT_PREFIX}}en/projects/">Projects</a>
</nav>
@ -35,7 +35,7 @@
<!-- Mobile Navigation Panel -->
<div class="mobile-nav-panel">
<nav class="navigation mobile-nav">
<a href="#">About us</a>
<a href="{{ROOT_PREFIX}}en/about-us/">About us</a>
<a href="#">For Students</a>
<a href="{{ROOT_PREFIX}}en/projects/">Projects</a>
</nav>