msos/en/index.html

505 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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 (corrected path) -->
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<!-- START_HEADER -->
<header class="dropdown-header-navigation">
<div class="container">
<!-- Logotip je zdaj samostojen element na levi strani -->
<a href="../en/" class="logo-link">
<img src="../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
</a>
<!-- Nov ovoj za vse elemente na desni strani -->
<div class="header-right-wrapper">
<nav>
<ul class="navigation desktop-nav">
<li class="menu-item menu-item-has-children">
<a href="#">Who We Are</a>
<ul class="dropdown-menu">
<li><a href="../en/timeline-and-milestones/">Timeline & Milestones</a></li>
<li><a href="../en/about-us/">Our team</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/">Events & Projects</a></li>
<li><a href="../en/blog/">Blog</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">For Students</a>
<ul class="dropdown-menu">
<li><a href="../en/student-welcome-guide/">Student Welcome Guide</a></li>
<li><a href="../en/faq/">FAQs</a></li>
<li><a href="../en/get-to-know-slovenia/">Get to know Slovenia</a></li>
<li><a href="../en/get-to-know-macedonia/">Get to know Macedonia</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">News</a>
<ul class="dropdown-menu">
<li><a href="../en/news/">News and Announcements</a></li>
<li><a href="#">Press releases</a></li>
</ul>
</li>
</ul>
</nav>
<div class="navigation-actions">
<a href="../en/become-a-member/" class="btn btn-secondary">Become a member</a>
<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="en"><span class="lang-flag lang-flag-gb" aria-hidden="true"></span><span class="lang-name">English</span></a>
<a href="#" data-lang="si"><span class="lang-flag lang-flag-si" aria-hidden="true"></span><span class="lang-name">Slovenščina</span></a>
<a href="#" data-lang="mk"><span class="lang-flag lang-flag-mk" aria-hidden="true"></span><span class="lang-name">Македонски</span></a>
</div>
</div>
</div>
</div>
<!-- Ikona za mobilni meni ostaja ločena za lažje upravljanje -->
<div class="mobile-menu-icon">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
</div>
</header>
<!-- Panel za mobilno navigacijo (struktura ostaja enaka) -->
<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="../en/timeline-and-milestones/">Timeline & Milestones</a></li>
<li><a href="../en/about-us/">Our team</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/">Events & Projects</a></li>
<li><a href="../en/blog/">Blog</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">For Students</a>
<ul class="dropdown-menu">
<li><a href="../en/student-welcome-guide/">Student Welcome Guide</a></li>
<li><a href="../en/faq/">FAQs</a></li>
<li><a href="../en/get-to-know-slovenia/">Get to know Slovenia</a></li>
<li><a href="../en/get-to-know-macedonia/">Get to know Macedonia</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">News</a>
<ul class="dropdown-menu">
<li><a href="../en/news/">News and Announcements</a></li>
<li><a href="#">Press releases</a></li>
</ul>
</li>
</ul>
</nav>
<div class="navigation-actions">
<a href="../en/become-a-member/" class="btn btn-secondary">Become a member</a>
<button class="btn btn-primary">Donate</button>
<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>
<!-- Modalno okno za izbiro jezika (ostaja enako) -->
<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">&times;</button>
</div>
<div class="language-modal-body">
<a href="#" data-lang="en"><span class="lang-flag lang-flag-gb" aria-hidden="true"></span><span class="lang-name">English</span></a>
<a href="#" data-lang="si"><span class="lang-flag lang-flag-si" aria-hidden="true"></span><span class="lang-name">Slovenščina</span></a>
<a href="#" data-lang="mk"><span class="lang-flag lang-flag-mk" aria-hidden="true"></span><span class="lang-name">Македонски</span></a>
</div>
</div>
</div>
<!-- END_HEADER -->
<main>
<section class="hero-section">
<div class="hero-background"></div>
<div class="hero-overlay"></div>
<div class="hero-content">
<div class="heading-and-supporting-text">
<div class="badge-group">
<div class="badge-content">
<span class="message">First official Macedonian Student Organisation in Slovenia</span>
</div>
</div>
<h1>Empowering young people with skills to change the world</h1>
<p>Be part of our exciting journey; Become a part of our student organization today!</p>
</div>
<a href="../en/become-a-member/" class="btn btn-primary-orange">Become a member</a>
</div>
</section>
<section class="partners-section">
<p class="partners-title">Our partners and supporters</p>
<div class="marquee" aria-label="Our partners and supporters">
<div class="marquee-track">
<div class="marquee-group">
<img src="../images/partners/ambasada-slo.png" alt="Embassy of the Republic of Slovenia in Skopje" loading="lazy">
<img src="../images/partners/nlb.png" alt="NLB Banka" loading="lazy">
<img src="../images/partners/ctk.png" alt="Central Technological Library (CTK), University of Ljubljana" loading="lazy">
<img src="../images/partners/dsmp.png" alt="Association of Slovenian and Macedonian Entrepreneurs (DSMP)" loading="lazy">
<img src="../images/partners/kampus.png" alt="Kampus" loading="lazy">
<img src="../images/partners/povezani.png" alt="Povezani" loading="lazy">
<img src="../images/partners/ambasada-slo.png" alt="" loading="lazy">
<img src="../images/partners/nlb.png" alt="" loading="lazy">
<img src="../images/partners/ctk.png" alt="" loading="lazy">
<img src="../images/partners/dsmp.png" alt="" loading="lazy">
<img src="../images/partners/kampus.png" alt="" loading="lazy">
<img src="../images/partners/povezani.png" alt="" loading="lazy">
</div>
<div class="marquee-group" aria-hidden="true">
<img src="../images/partners/ambasada-slo.png" alt="" loading="lazy">
<img src="../images/partners/nlb.png" alt="" loading="lazy">
<img src="../images/partners/ctk.png" alt="" loading="lazy">
<img src="../images/partners/dsmp.png" alt="" loading="lazy">
<img src="../images/partners/kampus.png" alt="" loading="lazy">
<img src="../images/partners/povezani.png" alt="" loading="lazy">
<img src="../images/partners/ambasada-slo.png" alt="" loading="lazy">
<img src="../images/partners/nlb.png" alt="" loading="lazy">
<img src="../images/partners/ctk.png" alt="" loading="lazy">
<img src="../images/partners/dsmp.png" alt="" loading="lazy">
<img src="../images/partners/kampus.png" alt="" loading="lazy">
<img src="../images/partners/povezani.png" alt="" loading="lazy">
</div>
</div>
</div>
</section>
<section class="meet-the-team-section">
<div class="video-container">
<img src="../images/3.activites.webp" alt="Team members collaborating" class="video-thumbnail">
<div class="video-overlay"></div>
<button class="play-button" aria-label="Play video"></button>
</div>
<div class="team-content">
<h2>Every Student Has a Story, Heres Ours</h2>
<p>Curious about what MSOS is all about? This video tells our story, fast, fun, and from the heart. See what makes MSOS special in our video, and hit “Learn more” to be part of the story.</p>
<a href="../en/about-us/" class="btn btn-secondary">Learn more</a>
</div>
</section>
<section class="activities-section">
<div class="activities-header">
<h2>Activities</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="activities-content">
<div class="activities-nav">
<ul>
<li class="active">Student Support</li>
<li>Fun & Social Life</li>
<li>Education & Culture</li>
<li>Student Representation</li>
</ul>
<a href="../en/become-a-member/" class="btn btn-primary-orange">Become a member</a>
</div>
<div class="activity-details">
<p>We know moving to a new country can feel overwhelming, so were here to make it easier. From helping you with university applications to finding your way around student life in Slovenia, you can always count on us. We offer free consultations, answer your questions on Instagram and Facebook (yes, even late at night), and host events where you can meet others and hear real experiences first-hand. With mentorship, info sessions, and a friendly community by your side, youll never have to go through the journey alone.</p>
<img src="../images/img1-08.09.2025.webp" alt="Students receiving support and guidance">
</div>
</div>
</section>
<section class="latest-news-section">
<div class="news-header">
<h2>Latest news</h2>
<p>What is new at MSOS, from events and projects to blog stories and announcements.</p>
</div>
<div class="news-articles">
<article class="news-card" data-type="news">
<a class="news-card-media" href="../en/news/proof-of-means-updated-2026/">
<img src="../images/news-proof-of-means.jpg" alt="Proof-of-means amount updated to €507,43 per month" loading="lazy">
<span class="news-badge news-badge--news"><i class="fas fa-bullhorn" aria-hidden="true"></i> News</span>
</a>
<div class="card-content">
<p class="author">1 August 2026</p>
<h3><a href="../en/news/proof-of-means-updated-2026/">Proof-of-means amount updated to €507,43 per month</a></h3>
</div>
</article>
<article class="news-card" data-type="news">
<a class="news-card-media" href="../en/news/">
<div class="news-ph"><i class="fas fa-bullhorn" aria-hidden="true"></i></div>
<span class="news-badge news-badge--news"><i class="fas fa-bullhorn" aria-hidden="true"></i> News</span>
</a>
<div class="card-content">
<p class="author">15 July 2026</p>
<h3><a href="../en/news/">Applications for the 2026/2027 academic year are open</a></h3>
</div>
</article>
<article class="news-card" data-type="news">
<a class="news-card-media" href="../en/news/">
<div class="news-ph"><i class="fas fa-bullhorn" aria-hidden="true"></i></div>
<span class="news-badge news-badge--news"><i class="fas fa-bullhorn" aria-hidden="true"></i> News</span>
</a>
<div class="card-content">
<p class="author">5 July 2026</p>
<h3><a href="../en/news/">Join our welcome week for new students</a></h3>
</div>
</article>
</div>
<a href="../en/news/" class="btn btn-secondary">See all</a>
</section>
<section class="testimonials-section">
<div class="testimonials-intro">
<h2>See what our partners say about us</h2>
<p>Everything you need to know about the product and billing.</p>
</div>
<div class="testimonials-columns">
<div class="testimonial-column">
<div class="testimonial-card">
<h3>How collaboration makes us better</h3>
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
<div class="author-info">
<img src="../images/7-graphicdesigner.webp" alt="Aleksandar Popovski">
<div>
<h4>Aleksandar Popovski</h4>
<p>Graphic designer at MSOS</p>
</div>
</div>
</div>
<div class="testimonial-card">
<h3>Consectetur vitae ac parturient massa</h3>
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra.</p>
<div class="author-info">
<img src="../images/11-boy.webp" alt="Another team member">
<div>
<h4>Aleksandar Popovski</h4>
<p>Graphic designer at MSOS</p>
</div>
</div>
</div>
</div>
<div class="testimonial-column column-offset">
<div class="testimonial-card">
<h3>Proud partners</h3>
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
<div class="author-info">
<img src="../images/12-girl2.webp" alt="Another partner">
<div>
<h4>Aleksandar Popovski</h4>
<p>Graphic designer at MSOS</p>
</div>
</div>
</div>
<div class="testimonial-card">
<h3>Our collaboration experience</h3>
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
<div class="author-info">
<img src="../images/10-girl1.webp" alt="Another team member">
<div>
<h4>Aleksandar Popovski</h4>
<p>Graphic designer at MSOS</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="become-part-section">
<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/9-becomepart.webp" 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>US</option>
<option>SI</option>
<option>MK</option>
</select>
<input type="tel" id="phone-number" placeholder="+1 (555) 000-0000">
</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="../en/privacy-policy/">privacy policy</a>.</label>
</div>
<button type="submit" class="btn btn-primary">Send message</button>
</form>
</div>
</section>
<section class="faq-section">
<div class="faq-header">
<h2>Frequently asked questions</h2>
<p>Everything you wanted to know about studying and living in Slovenia, in one place.</p>
</div>
<div class="faq-grid">
<div class="faq-item">
<div class="faq-icon-container"><i class="fas fa-heart"></i></div>
<h3>How can I get a student visa or residence permit?</h3>
<p>Quick guide on what documents you need and how long it takes.</p>
</div>
<div class="faq-item">
<div class="faq-icon-container"><i class="fas fa-sync-alt"></i></div>
<h3>What is the cost of living & housing in Slovenia?</h3>
<p>See average monthly expenses and where to find affordable housing.</p>
</div>
<div class="faq-item">
<div class="faq-icon-container"><i class="fas fa-ban"></i></div>
<h3>Can I study in English, or do I need Slovene language?</h3>
<p>Find out which programs are in English, and when learning Slovene helps.</p>
</div>
<div class="faq-item">
<div class="faq-icon-container"><i class="fas fa-plus-circle"></i></div>
<h3>Are there part-time jobs available? Can I work while studying?</h3>
<p>Learn about the student work possibilities and how to manage it while studying.</p>
</div>
<div class="faq-item">
<div class="faq-icon-container"><i class="fas fa-credit-card"></i></div>
<h3>What student benefits and discounts are available?</h3>
<p>Ever heard of Boni? Student meal coupons that make eating out more affordable and planty more.</p>
</div>
<div class="faq-item">
<div class="faq-icon-container"><i class="fas fa-envelope"></i></div>
<h3>What are tuition fees and are there scholarships?</h3>
<p>Info on tuition ranges and where to look for funding or fee waivers.</p>
</div>
</div>
<div class="faq-footer">
<div class="avatar-group">
<img src="../images/11-boy.webp" alt="Avatar 1" class="avatar">
<img src="../images/10-girl1.webp" alt="Avatar 2" class="avatar large">
<img src="../images/12-girl2.webp" alt="Avatar 3" class="avatar">
</div>
<h3>Still have questions?</h3>
<p>Cant find the answer youre looking for? Please chat to our friendly team.</p>
<a href="../en/faq/" class="btn btn-primary-orange">See all FAQs</a>
</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 class="footer-legal-name">Društvo Makedonska Študentska Organizacija v Sloveniji za študentsko podporo in kulturno sodelovanje</p>
<p>
Masarykova cesta 24<br>
1000 Ljubljana, Slovenia<br>
<a href="mailto:info@msosorg.com">info@msosorg.com</a>
</p>
<div class="social-icons">
<a href="https://www.facebook.com/msos.org" aria-label="Facebook" target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.instagram.com/msosorg_com" aria-label="Instagram" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/company/msos-org" aria-label="LinkedIn" target="_blank" rel="noopener"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@msosorg" aria-label="YouTube" target="_blank" rel="noopener"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-links">
<div class="links-column">
<h4>Student guide</h4>
<a href="../en/student-welcome-guide/">Student welcome guide</a>
<a href="../en/student-welcome-guide/complete-student-journey/">The whole journey</a>
<a href="../en/student-welcome-guide/application-deadlines/">Application deadlines</a>
<a href="../en/student-welcome-guide/evs-application-guide/">Apply through eVŠ</a>
<a href="../en/student-welcome-guide/student-residence-permit/">Residence permit</a>
<a href="../en/student-welcome-guide/student-accommodation/">Accommodation</a>
</div>
<div class="links-column">
<h4>Explore</h4>
<a href="../en/get-to-know-slovenia/">Get to know Slovenia</a>
<a href="../en/get-to-know-macedonia/">Get to know Macedonia</a>
<a href="../en/projects/">Projects and events</a>
</div>
<div class="links-column">
<h4>Organisation</h4>
<a href="../en/about-us/">About us</a>
<a href="../en/timeline-and-milestones/">Timeline and milestones</a>
<a href="mailto:info@msosorg.com">Contact us</a>
<a href="../en/privacy-policy/">Privacy policy</a>
<a href="../en/cookie-policy/">Cookie policy</a>
</div>
</div>
</div>
<hr>
<div class="footer-bottom">
<p>© 2026 MSOS. All rights reserved.</p>
<div class="legal-links">
<a href="../en/privacy-policy/">Privacy policy</a>
<a href="../en/cookie-policy/">Cookie policy</a>
</div>
</div>
</div>
</footer>
<!-- END_FOOTER -->
<script src="../main.js"></script>
</body>
</html>