feat(event,support): refine event page + add supporter form to Support page
Event page (Meet Student Slovenia 2026): - Guide-style centred header with wide banner hero and caption - Key facts on a plain background: When/Where side by side, subtle live-stream line, centred Register CTA, full-width note - Partner logos (NLB patron, Embassy support) + sponsor Kapital Aset Menadžment DOOEL / Капитал асет менаџмент ДООЕЛ - Inline photos between sections; em-dash removed from the subtitle - "Support MSOS" call-out linking to the support page Support page: - Added the become-a-member supporter flow (supporter path only) via a new data-only-flow="supporter" mode in member-form.js; submits to the same combined Google Form tagged type=supporter - Hero "Become a partner" button now scrolls to the form - .ms-section carries its own brand vars so the form renders off the member page Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed
1 parent
270df5b2f8
commit
954dfb4d7d
12 files changed
+564
-17
No files matched your search
@@ -195,7 +195,7 @@
|
||||
<span class="newshub-eyebrow">News</span>
|
||||
<h1>Meet Student Slovenia 2026</h1>
|
||||
<p class="news-article-date">Published 20 August 2026</p>
|
||||
<p class="na-lead">Honest, first-hand answers from Macedonian students already living in Slovenia — for future students and their parents.</p>
|
||||
<p class="na-lead">Honest, first-hand answers from Macedonian students already living in Slovenia, for future students and their parents.</p>
|
||||
<figure class="news-article-hero">
|
||||
<img width="1920" height="1280" fetchpriority="high" src="../../../images/event4-img-1.webp" alt="Students and speakers at the Meet Student Slovenia event in Skopje">
|
||||
<figcaption>Meet Student Slovenia 2024. Photo: MSOS</figcaption>
|
||||
@@ -218,7 +218,7 @@
|
||||
<div class="event-partners">
|
||||
<figure class="event-partner event-partner--lead"><img src="../../../images/partners/nlb.png" alt="NLB Banka Skopje" loading="lazy"><figcaption class="event-partner-role">Under the patronage of</figcaption></figure>
|
||||
<figure class="event-partner event-partner--lead"><img src="../../../images/partners/ambasada-slo.png" alt="Embassy of the Republic of Slovenia in Skopje" loading="lazy"><figcaption class="event-partner-role">With the support of</figcaption></figure>
|
||||
<figure class="event-partner"><span class="event-partner-name">Capital Financial Center</span><figcaption class="event-partner-role">Sponsor</figcaption></figure>
|
||||
<figure class="event-partner"><span class="event-partner-name">Kapital Aset Menadžment DOOEL</span><figcaption class="event-partner-role">Sponsor</figcaption></figure>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Honest conversations about student life in Slovenia</h2>
|
||||
@@ -330,6 +330,12 @@
|
||||
<a class="btn btn-secondary" href="../../projects/meet-student-slovenia-2024/">See last year's event</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="event-support">
|
||||
<span class="event-support-eyebrow"><i class="fas fa-hand-holding-heart" aria-hidden="true"></i> Support MSOS</span>
|
||||
<h2>Support MSOS and this event</h2>
|
||||
<p>MSOS is built by students, for students. If you would like to help make Meet Student Slovenia possible, as a partner, a sponsor, or in any other way, we would love to hear from you.</p>
|
||||
<a class="btn btn-primary-orange" href="../../support/">Become a partner or supporter</a>
|
||||
</section>
|
||||
</article>
|
||||
<section class="newsletter-cta">
|
||||
@@ -412,7 +418,7 @@
|
||||
<a href="#" class="js-manage-cookies" onclick="if(window.msosOpenConsent){msosOpenConsent();}return false;">Manage cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-disclaimer"><p>The information on this website is shared by students for general guidance only. It may be incomplete or out of date and is not legal or professional advice — always verify important details with the relevant official institutions. MSOS accepts no liability for errors, omissions, or decisions made based on this content.</p></div>
|
||||
<div class="footer-disclaimer"><p>The information on this website is shared by students for general guidance only. It may be incomplete or out of date and is not legal or professional advice, always verify important details with the relevant official institutions. MSOS accepts no liability for errors, omissions, or decisions made based on this content.</p></div>
|
||||
<div class="footer-credit">
|
||||
<span>Built with the help of Mark and Domen from <a href="https://www.spletnimojster.si" target="_blank" rel="noopener">Spletni Mojster</a> and Kristijan from MSOS. Big thanks to them!</span>
|
||||
</div>
|
||||
|
||||
+165
-1
@@ -195,7 +195,7 @@
|
||||
<h1>We couldn’t have done this alone</h1>
|
||||
<p class="sup-lead">MSOS began as a handful of volunteers with an idea, and grew into a community that supports Macedonian students across Slovenia. Every event, every guide, every helping hand exists because partners, sponsors and people like you believed in it.</p>
|
||||
<div class="sup-hero-cta">
|
||||
<a href="mailto:info@msosorg.com?subject=Partnership%20with%20MSOS" class="btn btn-primary">Become a partner</a>
|
||||
<a href="#join-form" class="btn btn-primary">Become a partner</a>
|
||||
<a href="#donate" class="btn btn-secondary">Make a donation</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -252,6 +252,169 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Become a partner / supporter form (same flow as Become a member, supporter path only) -->
|
||||
<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" data-only-flow="supporter" 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>
|
||||
|
||||
<!-- Where your support goes -->
|
||||
<section class="sup-section sup-section--tint">
|
||||
<div class="sup-inner">
|
||||
@@ -432,6 +595,7 @@
|
||||
<!-- END_FOOTER -->
|
||||
|
||||
<script src="../../main.js"></script>
|
||||
<script src="../../member-form.js"></script>
|
||||
<link rel="stylesheet" href="/assistant.css">
|
||||
<script src="/assistant.js" defer></script>
|
||||
</body>
|
||||
|
||||
Reference in new issue
Block a user