msos/en/become-a-member/index.html

575 lines
44 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>Become a member - MSOS</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">
<!-- 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 class="member-page">
<a class="mm-sticky-cta" href="#join-form" hidden><i class="fas fa-user-plus" aria-hidden="true"></i> Become a member</a>
<section class="mm-hero">
<div class="mm-hero-text">
<span class="mm-eyebrow">Become a member</span>
<h1>Find your people in Slovenia</h1>
<p class="mm-hero-lead">Meet people, join events, get support, create projects and become part of the Macedonian student community across Slovenia.</p>
<div class="mm-hero-cta">
<a class="btn btn-primary-orange" href="#join-form">Become a member</a>
<a class="btn btn-secondary" href="#showcase">See what we do</a>
</div>
</div>
<div class="mm-hero-collage"><div class="mm-hero-photo mm-hero-photo--1"><img src="../../images/event4-img-1.webp" alt="Meet Student Slovenia 2024" loading="eager"></div><div class="mm-hero-photo mm-hero-photo--2"><img src="../../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana" loading="eager"></div><div class="mm-hero-photo mm-hero-photo--3"><img src="../../images/handball-2025-1.png" alt="Cheering for Macedonia, Watching Handball Together in Slovenia" loading="eager"></div></div>
</section>
<section class="mm-section">
<h2 class="mm-h2">Why become a member?</h2>
<div class="mm-benefits">
<figure class="mm-benefit-photo">
<img src="../../images/event4-image2.webp" alt="Macedonian students gathered together in Ljubljana" loading="lazy">
<figcaption>Real events, real friendships</figcaption>
</figure>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-people-group" aria-hidden="true"></i></div>
<h3>Find your people</h3><p>Meet Macedonian students across Slovenia and build friendships outside the classroom.</p>
</article>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-hand-holding-heart" aria-hidden="true"></i></div>
<h3>Feel supported</h3><p>Get practical help, local knowledge and a community that understands studying abroad.</p>
</article>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-champagne-glasses" aria-hidden="true"></i></div>
<h3>Join memorable events</h3><p>Social evenings, cultural events, sports, trips, workshops and student gatherings.</p>
</article>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-screwdriver-wrench" aria-hidden="true"></i></div>
<h3>Build experience</h3><p>Develop skills through volunteering, communication, project work and event organisation.</p>
</article>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-lightbulb" aria-hidden="true"></i></div>
<h3>Create something meaningful</h3><p>Bring ideas, join projects and help shape activities for the community.</p>
</article>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
<h3>Grow your network</h3><p>Meet students, alumni, professionals, institutions and partners.</p>
</article>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-house-user" aria-hidden="true"></i></div>
<h3>Feel at home away from home</h3><p>Belong to a community where you never have to explain where you come from.</p>
</article>
<figure class="mm-benefit-photo">
<img src="../../images/msnl-3.webp" alt="Students writing their names in Cyrillic at Macedonian Student Night" loading="lazy">
<figcaption>A piece of home in Slovenia</figcaption>
</figure>
</div>
</section>
<section class="mm-numbers-section">
<h2 class="mm-h2 mm-h2--light">MSOS in numbers</h2>
<div class="mm-numbers">
<div class="mm-num"><span class="mm-num-value" data-count="120" data-suffix="+">0</span><span class="mm-num-label">active members</span></div>
<div class="mm-num"><span class="mm-num-value" data-count="50" data-suffix="+">0</span><span class="mm-num-label">events and activities</span></div>
<div class="mm-num"><span class="mm-num-value" data-count="2500" data-suffix="+">0</span><span class="mm-num-label">participants</span></div>
<div class="mm-num"><span class="mm-num-value" data-count="20" data-suffix="+">0</span><span class="mm-num-label">partners</span></div>
</div>
<p class="mm-note">Figures to confirm before launch.</p>
</section>
<section class="mm-section">
<h2 class="mm-h2">There is more than one way to be part of MSOS</h2>
<p class="mm-lead">You do not need to organise events or lead to belong. Join in the way that fits you.</p>
<div class="mm-ways">
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
<h3>Stay connected</h3><p>Receive updates and know what is happening.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
<h3>Join the community</h3><p>Come to events, meet people and take part when it suits you.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
<h3>Volunteer sometimes</h3><p>Help with selected activities without a long-term commitment.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
<h3>Join projects</h3><p>Contribute to specific initiatives, campaigns, guides or collaborations.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
<h3>Organise events</h3><p>Help plan, coordinate, promote and deliver activities.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
<h3>Take responsibility</h3><p>Explore leadership, governance, representation or local team roles.</p>
</article>
</div>
</section>
<section class="mm-section">
<h2 class="mm-h2">What being part of MSOS actually looks like</h2>
<div class="mm-reals">
<a class="mm-real" href="../projects/meet-student-slovenia-2024/">
<div class="mm-real-media"><img src="../../images/event4-img-1.webp" alt="Start at a welcome event" loading="lazy"></div>
<div class="mm-real-body"><h3>Start at a welcome event</h3><p>Meet the community from your very first weeks in Slovenia.</p><span class="mm-real-link">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></span></div>
</a>
<a class="mm-real" href="../projects/macedonian-student-night-in-ljubljana/">
<div class="mm-real-media"><img src="../../images/msnl-1.webp" alt="Enjoy a student night" loading="lazy"></div>
<div class="mm-real-body"><h3>Enjoy a student night</h3><p>Music, friends and a night that feels like home.</p><span class="mm-real-link">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></span></div>
</a>
<a class="mm-real" href="../projects/humanitarian-tournament-in-maribor/">
<div class="mm-real-media"><img src="../../images/maribor-tournament-1.png" alt="Give back together" loading="lazy"></div>
<div class="mm-real-body"><h3>Give back together</h3><p>Take part in humanitarian activities that help others.</p><span class="mm-real-link">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></span></div>
</a>
<a class="mm-real" href="../projects/watching-handball-together-in-slovenia/">
<div class="mm-real-media"><img src="../../images/handball-2025-1.png" alt="Cheer side by side" loading="lazy"></div>
<div class="mm-real-body"><h3>Cheer side by side</h3><p>Sports, energy and belonging, wherever you study.</p><span class="mm-real-link">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></span></div>
</a>
</div>
</section>
<section class="mm-section mm-section--soft">
<h2 class="mm-h2">Why students joined, and why they stayed</h2>
<div class="mm-tests">
<figure class="mm-test">
<blockquote>I joined because I wanted to meet people. I stayed because MSOS became part of my life in Slovenia.</blockquote>
<figcaption><strong>Ana</strong><span>Student, Maribor</span></figcaption>
</figure>
<figure class="mm-test">
<blockquote>When I moved to Slovenia, I did not know where to begin. Through MSOS I found support, friends and opportunities.</blockquote>
<figcaption><strong>Marko</strong><span>Student, Ljubljana</span></figcaption>
</figure>
<figure class="mm-test">
<blockquote>Being part of the team taught me more than any classroom. I organised events, met partners and grew a lot.</blockquote>
<figcaption><strong>Katerina</strong><span>Volunteer, Koper</span></figcaption>
</figure>
</div>
</section>
<section class="mm-section" id="showcase">
<h2 class="mm-h2">See MSOS in action</h2>
<div class="mm-shows">
<a class="mm-show" href="../projects/meet-student-slovenia-2024/">
<div class="mm-show-media"><img src="../../images/event4-img-1.webp" alt="Meet Student Slovenia 2024" loading="lazy"></div>
<h3>Meet Student Slovenia 2024</h3>
</a>
<a class="mm-show" href="../projects/macedonian-student-night-in-ljubljana/">
<div class="mm-show-media"><img src="../../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana" loading="lazy"></div>
<h3>Macedonian Student Night in Ljubljana</h3>
</a>
<a class="mm-show" href="../projects/humanitarian-tournament-in-maribor/">
<div class="mm-show-media"><img src="../../images/maribor-tournament-1.png" alt="Humanitarian Sports Tournament: Playing with Heart, Together for Kočani" loading="lazy"></div>
<h3>Humanitarian Sports Tournament: Playing with Heart, Together for Kočani</h3>
</a>
<a class="mm-show" href="../projects/paint-and-wine-at-sunset/">
<div class="mm-show-media"><img src="../../images/paint-wine-1.jpg" alt="Paint &amp; Wine at Sunset, Celebrating Womens Day with Art &amp; Music" loading="lazy"></div>
<h3>Paint &amp; Wine at Sunset, Celebrating Womens Day with Art &amp; Music</h3>
</a>
<a class="mm-show" href="../projects/morning-coffee-in-front-of-ctk/">
<div class="mm-show-media"><img src="../../images/event4-image1.webp" alt="Morning Coffee in front of CTK, 2024: Coffee, burek, and lots of smiles" loading="lazy"></div>
<h3>Morning Coffee in front of CTK, 2024: Coffee, burek, and lots of smiles</h3>
</a>
<a class="mm-show" href="../projects/watching-handball-together-in-slovenia/">
<div class="mm-show-media"><img src="../../images/handball-2025-1.png" alt="Cheering for Macedonia, Watching Handball Together in Slovenia" loading="lazy"></div>
<h3>Cheering for Macedonia, Watching Handball Together in Slovenia</h3>
</a>
</div>
<div class="mm-center"><a class="btn btn-secondary" href="../news/">See all events and projects</a></div>
</section>
<section class="ms-section" id="join-form">
<div class="ms-head">
<span class="ms-eyebrow">Join us</span>
<h2>There is a place for you here</h2>
<p>Choose how you would like to join. It takes a couple of minutes, and you can decide later how active you want to be.</p>
</div>
<form class="ms-form" novalidate>
<div class="ms-hp" aria-hidden="true"><label>Do not fill this in<input type="text" name="company" tabindex="-1" autocomplete="off"></label></div>
<div class="ms-progress" data-step="Step" data-of="of" hidden><div class="ms-progress-track"><div class="ms-progress-bar"></div></div><span class="ms-progress-text"></span></div>
<div class="ms-alert" hidden data-required-msg="Please fill in the required fields." data-cooldown-msg="It looks like you have just sent a request. Please give us a moment before sending another.">Please fill in the required fields.</div>
<div class="ms-step ms-step--path" data-step="path" data-flow="both">
<h3 class="ms-path-prompt">Which one sounds like you?</h3>
<div class="ms-paths">
<button type="button" class="ms-path ms-path--student" data-path="student">
<span class="ms-path-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span>
<strong>I am a student</strong>
<span class="ms-path-desc">Current students, future students, bachelor and master students, in every Slovenian study city.</span>
<span class="ms-path-go">Choose this <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</button>
<button type="button" class="ms-path ms-path--supporter" data-path="supporter">
<span class="ms-path-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></span>
<strong>I want to support MSOS</strong>
<span class="ms-path-desc">You do not need to be a student to support the community. Contribute through knowledge, partnerships, mentorship, volunteering, sponsorships, media or useful connections.</span>
<span class="ms-path-go">Choose this <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</button>
</div>
</div>
<div class="ms-step" data-step="s-basic" data-flow="student">
<h3>Tell us who you are</h3>
<div class="ms-grid"><label class="ms-field"><span>First name *</span><input type="text" data-name="firstName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Last name *</span><input type="text" data-name="lastName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Email *</span><input type="email" data-name="email" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Phone (optional)</span><input type="tel" data-name="phone" autocomplete="off"></label><label class="ms-field"><span>Current city</span><input type="text" data-name="cityNow" autocomplete="off"></label><label class="ms-field"><span>Preferred contact</span><select data-name="contactPref"><option value="">Select...</option><option value="email">Email</option><option value="whatsapp">WhatsApp</option><option value="phone">Phone</option></select></label></div>
</div>
<div class="ms-step" data-step="s-status" data-flow="student">
<h3>Where are you in your student journey?</h3>
<div class="ms-radios" data-name="status" data-required="1">
<button type="button" class="ms-radio" data-value="studying">I already study in Slovenia</button>
<button type="button" class="ms-radio" data-value="moving">I am preparing to move to Slovenia</button>
<button type="button" class="ms-radio" data-value="exploring">I am still exploring my options</button>
<button type="button" class="ms-radio" data-value="graduated">I recently graduated</button>
</div>
<div class="ms-cond" data-when="studying">
<div class="ms-grid"><label class="ms-field"><span>University</span><input type="text" data-name="university" autocomplete="off"></label><label class="ms-field"><span>Faculty</span><input type="text" data-name="faculty" autocomplete="off"></label><label class="ms-field"><span>Study programme</span><input type="text" data-name="programme" autocomplete="off"></label><label class="ms-field"><span>Study level</span><select data-name="level"><option value="">Select...</option><option value="bachelor">Bachelor</option><option value="master">Master</option></select></label><label class="ms-field"><span>Year of study</span><input type="text" data-name="year" autocomplete="off"></label><label class="ms-field"><span>City of study</span><select data-name="studyCity"><option value="">Select...</option><option value="ljubljana">Ljubljana</option><option value="maribor">Maribor</option><option value="koper">Koper and Primorska</option><option value="nova-gorica">Nova Gorica and Gorizia</option><option value="celje">Celje</option><option value="other">Other</option><option value="unsure">I am not sure yet</option></select></label></div>
</div>
<div class="ms-cond" data-when="moving">
<div class="ms-grid"><label class="ms-field"><span>University</span><input type="text" data-name="university" autocomplete="off"></label><label class="ms-field"><span>Faculty or field of interest</span><input type="text" data-name="field" autocomplete="off"></label><label class="ms-field"><span>Study level</span><select data-name="level"><option value="">Select...</option><option value="bachelor">Bachelor</option><option value="master">Master</option></select></label><label class="ms-field"><span>Intended city</span><select data-name="intendedCity"><option value="">Select...</option><option value="ljubljana">Ljubljana</option><option value="maribor">Maribor</option><option value="koper">Koper and Primorska</option><option value="nova-gorica">Nova Gorica and Gorizia</option><option value="celje">Celje</option><option value="other">Other</option><option value="unsure">I am not sure yet</option></select></label><label class="ms-field"><span>Expected academic year</span><input type="text" data-name="academicYear" autocomplete="off"></label></div>
</div>
<div class="ms-cond" data-when="exploring">
<div class="ms-grid"><label class="ms-field"><span>Areas of interest</span><input type="text" data-name="areas" autocomplete="off"></label><label class="ms-field"><span>Study level</span><select data-name="level"><option value="">Select...</option><option value="bachelor">Bachelor</option><option value="master">Master</option></select></label></div>
</div>
</div>
<div class="ms-step" data-step="s-intention" data-flow="student">
<h3>What sounds most like you?</h3>
<p class="ms-hint">Choose as many as you like.</p>
<div class="ms-multi" data-name="intention">
<button type="button" class="ms-chip" data-value="meet">I want to meet people</button>
<button type="button" class="ms-chip" data-value="events">I want to join events</button>
<button type="button" class="ms-chip" data-value="informed">I want to stay informed</button>
<button type="button" class="ms-chip" data-value="support">I am looking for support</button>
<button type="button" class="ms-chip" data-value="volunteer">I want to volunteer</button>
<button type="button" class="ms-chip" data-value="organise">I want to help organise events</button>
<button type="button" class="ms-chip" data-value="projects">I want to join projects</button>
<button type="button" class="ms-chip" data-value="experience">I want to build experience</button>
<button type="button" class="ms-chip" data-value="leadership">I am interested in leadership</button>
<button type="button" class="ms-chip" data-value="figuring">I am still figuring it out</button>
</div>
<p class="ms-msg" data-when="leadership" hidden>We would love to learn about your experience and the kind of responsibility you are interested in.</p>
<p class="ms-msg" data-when="events" hidden>Perfect. You can join the community without taking on any formal responsibility.</p>
<p class="ms-msg" data-when="figuring" hidden>No pressure. Start by staying connected and decide later how involved you want to be.</p>
</div>
<div class="ms-step" data-step="s-interests" data-flow="student">
<h3>What would you like to be part of?</h3>
<p class="ms-hint">Choose as many as you like.</p>
<div class="ms-multi" data-name="interests">
<button type="button" class="ms-chip" data-value="social">Social events</button>
<button type="button" class="ms-chip" data-value="cultural">Cultural events</button>
<button type="button" class="ms-chip" data-value="sports">Sports</button>
<button type="button" class="ms-chip" data-value="support">Student support</button>
<button type="button" class="ms-chip" data-value="creative">Creative projects</button>
<button type="button" class="ms-chip" data-value="humanitarian">Humanitarian activities</button>
<button type="button" class="ms-chip" data-value="professional">Professional development</button>
<button type="button" class="ms-chip" data-value="networking">Networking</button>
<button type="button" class="ms-chip" data-value="media">Media and communication</button>
<button type="button" class="ms-chip" data-value="design">Design and content</button>
<button type="button" class="ms-chip" data-value="partnerships">Partnerships</button>
<button type="button" class="ms-chip" data-value="volunteering">Volunteering</button>
</div>
</div>
<div class="ms-step" data-step="s-city" data-flow="student">
<h3>Where should we connect you?</h3>
<div class="ms-radios" data-name="connectCity">
<button type="button" class="ms-radio" data-value="ljubljana">Ljubljana</button>
<button type="button" class="ms-radio" data-value="maribor">Maribor</button>
<button type="button" class="ms-radio" data-value="koper">Koper and Primorska</button>
<button type="button" class="ms-radio" data-value="nova-gorica">Nova Gorica and Gorizia</button>
<button type="button" class="ms-radio" data-value="celje">Celje</button>
<button type="button" class="ms-radio" data-value="other">Other</button>
<button type="button" class="ms-radio" data-value="unsure">I am not sure yet</button>
</div>
<p class="ms-msg" data-when="*any" hidden>We will connect you with the MSOS community closest to you.</p>
</div>
<div class="ms-step" data-step="s-personal" data-flow="student">
<h3>What would make MSOS valuable to you? (optional)</h3>
<textarea data-name="personal" rows="4" placeholder="Share anything you hope to find, learn or experience."></textarea>
</div>
<div class="ms-step" data-step="s-consent" data-flow="student">
<label class="ms-check"><input type="checkbox" data-name="consentContact" data-required="1"> <span>I agree that MSOS may contact me about my request.</span></label>
<label class="ms-check"><input type="checkbox" data-name="consentPrivacy" data-required="1"> <span>I have read the privacy notice. (<a href="../privacy-policy/">privacy notice</a>)</span></label>
<label class="ms-check"><input type="checkbox" data-name="consentUpdates"> <span>I would like to receive event and community updates.</span></label>
</div>
<div class="ms-step" data-step="p-basic" data-flow="supporter">
<h3>Tell us who you are</h3>
<div class="ms-grid"><label class="ms-field"><span>First name *</span><input type="text" data-name="firstName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Last name *</span><input type="text" data-name="lastName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Email *</span><input type="email" data-name="email" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Phone (optional)</span><input type="tel" data-name="phone" autocomplete="off"></label><label class="ms-field"><span>Current city</span><input type="text" data-name="cityNow" autocomplete="off"></label><label class="ms-field"><span>Organisation or company (optional)</span><input type="text" data-name="org" autocomplete="off"></label><label class="ms-field"><span>Role or profession (optional)</span><input type="text" data-name="role" autocomplete="off"></label></div>
</div>
<div class="ms-step" data-step="p-support" data-flow="supporter">
<h3>How would you like to support MSOS?</h3>
<p class="ms-hint">Choose as many as you like.</p>
<div class="ms-multi" data-name="support">
<button type="button" class="ms-chip" data-value="partnerships">Partnerships</button>
<button type="button" class="ms-chip" data-value="sponsorships">Sponsorships</button>
<button type="button" class="ms-chip" data-value="mentorship">Mentorship</button>
<button type="button" class="ms-chip" data-value="volunteering">Volunteering</button>
<button type="button" class="ms-chip" data-value="expertise">Professional expertise</button>
<button type="button" class="ms-chip" data-value="media">Media support</button>
<button type="button" class="ms-chip" data-value="events">Event support</button>
<button type="button" class="ms-chip" data-value="careers">Career opportunities</button>
<button type="button" class="ms-chip" data-value="connections">Community connections</button>
<button type="button" class="ms-chip" data-value="venue">Venue or logistics</button>
</div>
</div>
<div class="ms-step" data-step="p-message" data-flow="supporter">
<h3>Tell us how you would like to contribute (optional)</h3>
<textarea data-name="contribution" rows="4" placeholder="A short note about what you can offer or a project you care about."></textarea>
</div>
<div class="ms-step" data-step="p-consent" data-flow="supporter">
<label class="ms-check"><input type="checkbox" data-name="consentContact" data-required="1"> <span>I agree that MSOS may contact me about my request.</span></label>
<label class="ms-check"><input type="checkbox" data-name="consentPrivacy" data-required="1"> <span>I have read the privacy notice. (<a href="../privacy-policy/">privacy notice</a>)</span></label>
</div>
<div class="ms-nav">
<button type="button" class="btn btn-secondary ms-back" hidden>Back</button>
<button type="button" class="btn btn-primary-orange ms-next" hidden>Continue</button>
<button type="button" class="btn btn-primary-orange ms-submit" data-student="Join MSOS" data-supporter="Support MSOS" hidden>Join MSOS</button>
</div>
</form>
<div class="ms-success" hidden>
<div class="ms-success-icon"><i class="fas fa-circle-check" aria-hidden="true"></i></div>
<h3 class="ms-success-title"
data-student-title="Welcome to the community" data-supporter-title="Thank you for supporting MSOS"></h3>
<p class="ms-success-text"
data-student-text="Thank you for reaching out. We are excited to get to know you. A member of the MSOS team will contact you soon." data-supporter-text="We appreciate your interest in the Macedonian student community in Slovenia. Our team will review your message and contact you soon."></p>
<p class="ms-success-next">While you wait</p>
<div class="ms-success-links">
<a class="btn btn-secondary" href="../news/">Explore upcoming events</a>
<a class="btn btn-secondary" href="../student-welcome-guide/">Read the Student Welcome Guide</a>
<a class="btn btn-secondary" href="../projects/">Discover recent projects</a>
</div>
</div>
</section>
<section class="mm-section mm-section--soft">
<h2 class="mm-h2">Good to know</h2>
<div class="mm-faqs">
<details class="mm-faq"><summary>Is membership only for students in Ljubljana?</summary><div class="mm-faq-a"><p>No. MSOS is for Macedonian students across Slovenia, including Maribor, Koper, Nova Gorica, Celje and other study cities.</p></div></details>
<details class="mm-faq"><summary>Can I join before moving to Slovenia?</summary><div class="mm-faq-a"><p>Yes. Future students can join, receive updates and connect with people before arriving.</p></div></details>
<details class="mm-faq"><summary>Do I need to be highly active?</summary><div class="mm-faq-a"><p>No. You can join events, stay informed, volunteer occasionally, or take on a larger role later.</p></div></details>
<details class="mm-faq"><summary>Is there a membership fee?</summary><div class="mm-faq-a"><p>Yes, membership is €10 per year, which helps us organise events and support students across Slovenia.</p></div></details>
<details class="mm-faq"><summary>Can non-students support MSOS?</summary><div class="mm-faq-a"><p>Yes. Parents, alumni, professionals, companies and other supporters can contribute through mentorship, partnerships, sponsorships, expertise, volunteering or useful connections.</p></div></details>
<details class="mm-faq"><summary>What happens after I submit the form?</summary><div class="mm-faq-a"><p>The MSOS team reviews your information and contacts you with the next step.</p></div></details>
<details class="mm-faq"><summary>Can I change how involved I am later?</summary><div class="mm-faq-a"><p>Yes. Members can become more or less active depending on their interests and availability.</p></div></details>
</div>
</section>
<section class="mm-final">
<h2>Your student story in Slovenia can start here</h2>
<p>Whether you are looking for support, friendship, opportunities or a place to belong, MSOS is ready to welcome you.</p>
<a class="btn btn-primary-orange" href="#join-form">Become a member</a>
</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>
<script src="../../member-form.js"></script>
</body>
</html>