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

Become a Member polish: bento benefits, merged/redesigned join form, floating CTA, header + nav fixes #5

Merged
popovskik merged 1 commits from kristijan-dev into develop 2026-08-01 11:24:39 +00:00
Conversation 0 Commits 1 Files Changed 5 +166 -82
5 changed files with 166 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f492a8a547 - Show all commits

73
css/pages/_member.css
View File

@ -50,17 +50,27 @@
.mm-hero-photo--2 { }
.mm-hero-photo--3 { }
/* ---- benefits ---- */
.mm-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; }
/* ---- benefits (bento grid: 7 icon cards + 2 real photo tiles) ---- */
.mm-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.mm-benefit { background: #FFFFFF; border: 1px solid #EAECF0; border-radius: 16px; padding: 26px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.mm-benefit:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16,24,40,0.08); }
.mm-benefit-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--mm-orange); background: #FFF1E8; margin-bottom: 16px; }
.mm-benefit-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--mm-orange); background: #FFF1E8; margin-bottom: 16px; transition: transform 0.2s ease, background 0.2s ease; }
.mm-benefit:hover .mm-benefit-ico { transform: scale(1.08) rotate(-4deg); background: #FFE3D1; }
.mm-benefit h3 { font-size: 18px; margin: 0 0 8px; }
.mm-benefit p { font-size: 15px; line-height: 23px; color: #667085; margin: 0; }
/* photo tiles */
.mm-benefit-photo { position: relative; margin: 0; min-height: 240px; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 28px rgba(16,24,40,0.12); }
.mm-benefit-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.mm-benefit-photo:hover img { transform: scale(1.06); }
.mm-benefit-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; color: #FFFFFF; font-weight: 700; font-size: 16px; line-height: 22px; background: linear-gradient(to top, rgba(16,24,40,0.78), rgba(16,24,40,0.15) 70%, rgba(16,24,40,0)); }
@media (max-width: 900px) { .mm-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mm-benefits { grid-template-columns: 1fr; } }
/* ---- numbers ---- */
.mm-numbers-section { background: var(--mm-teal); padding: 64px 24px; text-align: center; }
.mm-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; max-width: 960px; margin: 28px auto 0; }
.mm-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; max-width: 960px; margin: 44px auto 0; }
.mm-num { color: #FFFFFF; }
.mm-num-value { display: block; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.mm-num-label { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,0.85); }
@ -75,7 +85,7 @@
.mm-way p { font-size: 14px; line-height: 22px; color: #667085; margin: 0; }
/* ---- membership in real life ---- */
.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.mm-real { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #EAECF0; background: #FFFFFF; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.mm-real:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); }
.mm-real-media { height: 170px; background: #F2F4F7; }
@ -86,7 +96,7 @@
.mm-real-link { font-size: 14px; font-weight: 600; color: var(--mm-orange); display: inline-flex; align-items: center; gap: 6px; }
/* ---- testimonials ---- */
.mm-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mm-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; }
.mm-test { margin: 0; background: #FFFFFF; border: 1px solid #EAECF0; border-radius: 16px; padding: 26px; box-shadow: 0 6px 16px rgba(16,24,40,0.04); }
.mm-test blockquote { margin: 0 0 18px; font-size: 17px; line-height: 27px; color: #101828; }
.mm-test blockquote::before { content: '\201C'; color: var(--mm-orange); font-size: 40px; line-height: 0; vertical-align: -18px; margin-right: 4px; }
@ -94,21 +104,28 @@
.mm-test figcaption span { font-size: 13px; color: #98A2B3; }
/* ---- projects showcase ---- */
.mm-shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.mm-shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }
.mm-show { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #EAECF0; text-decoration: none; color: inherit; background: #FFFFFF; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.mm-show:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); }
.mm-show-media { height: 180px; background: #F2F4F7; }
.mm-show-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-show h3 { font-size: 16px; margin: 0; padding: 16px 18px; line-height: 1.3; }
/* ---- who can join ---- */
.mm-who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mm-who-card { border: 1px solid #EAECF0; border-radius: 18px; padding: 30px; background: #FFFFFF; }
.mm-who-card:first-child { border-color: #F6C9A8; background: linear-gradient(180deg, #FFF7F1 0%, #FFFFFF 100%); }
.mm-who-ico { font-size: 26px; color: var(--mm-orange); margin-bottom: 14px; }
.mm-who-card h3 { font-size: 20px; margin: 0 0 8px; }
.mm-who-card p { font-size: 15px; line-height: 23px; color: #667085; margin: 0 0 16px; }
.mm-who-link { font-weight: 600; color: var(--mm-teal); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
/* ---- floating "Become a member" CTA (appears after the hero, hides near the form) ---- */
.mm-sticky-cta {
position: fixed; right: 24px; bottom: 24px; z-index: 900;
display: inline-flex; align-items: center; gap: 10px;
background: var(--mm-orange); color: #FFFFFF; font-weight: 700; font-size: 15px;
padding: 14px 22px; border-radius: 999px; text-decoration: none;
box-shadow: 0 10px 28px rgba(242,118,46,0.45);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease;
}
.mm-sticky-cta[hidden] { display: none; }
.mm-sticky-cta.is-hiding { opacity: 0; transform: translateY(14px); pointer-events: none; }
.mm-sticky-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(242,118,46,0.55); }
@media (max-width: 600px) {
.mm-sticky-cta { right: 16px; bottom: 16px; padding: 12px 18px; font-size: 14px; }
}
/* ---- multi-step form ---- */
.ms-section { max-width: 760px; margin: 0 auto; padding: 72px 24px; }
@ -130,12 +147,26 @@
.ms-step h3 { font-size: 20px; margin: 0 0 6px; }
.ms-hint { font-size: 14px; color: #98A2B3; margin: 0 0 16px; }
.ms-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.ms-path { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; border: 2px solid #EAECF0; border-radius: 16px; background: #FFFFFF; cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.ms-path i { font-size: 26px; color: var(--mm-orange); }
.ms-path strong { font-size: 16px; color: #101828; }
.ms-path:hover { border-color: #F6C9A8; transform: translateY(-2px); }
.ms-path.is-selected { border-color: var(--mm-orange); background: #FFF7F1; }
/* path choice: two rich, colour-accented cards (student = orange, supporter = teal) */
.ms-step--path { text-align: center; }
.ms-path-prompt { font-size: 18px; margin: 0 0 20px; }
.ms-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.ms-path { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 32px 22px; border: 2px solid #EAECF0; border-radius: 18px; background: #FFFFFF; cursor: pointer; font-family: inherit; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.ms-path-ico { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: transform 0.18s ease; }
.ms-path--student .ms-path-ico { color: var(--mm-orange); background: #FFF1E8; }
.ms-path--supporter .ms-path-ico { color: var(--mm-teal); background: #E7F1F4; }
.ms-path strong { font-size: 18px; color: #101828; }
.ms-path-desc { font-size: 14px; line-height: 21px; color: #667085; }
.ms-path-go { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; }
.ms-path--student .ms-path-go { color: var(--mm-orange); }
.ms-path--supporter .ms-path-go { color: var(--mm-teal); }
.ms-path:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); }
.ms-path:hover .ms-path-ico { transform: scale(1.06); }
.ms-path:hover .ms-path-go, .ms-path.is-selected .ms-path-go { opacity: 1; transform: translateY(0); }
.ms-path--student:hover, .ms-path--student.is-selected { border-color: var(--mm-orange); }
.ms-path--supporter:hover, .ms-path--supporter.is-selected { border-color: var(--mm-teal); }
.ms-path--student.is-selected { background: #FFF7F1; }
.ms-path--supporter.is-selected { background: #EFF5F7; }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.ms-field { display: flex; flex-direction: column; gap: 6px; }

50
en/become-a-member/index.html
View File

@ -158,6 +158,7 @@
<!-- 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>
@ -174,6 +175,10 @@
<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>
@ -199,9 +204,13 @@
<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-heart" aria-hidden="true"></i></div>
<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>
@ -274,18 +283,17 @@
<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, Ljubljana</span></figcaption>
<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, Maribor</span></figcaption>
<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>Elena</strong><span>Volunteer, Koper</span></figcaption>
<figcaption><strong>Katerina</strong><span>Volunteer, Koper</span></figcaption>
</figure>
</div>
<p class="mm-note mm-note--center">Sample quotes to replace with real testimonials.</p>
</section>
<section class="mm-section" id="showcase">
@ -319,30 +327,32 @@
<div class="mm-center"><a class="btn btn-secondary" href="../news/">See all events and projects</a></div>
</section>
<section class="mm-section">
<h2 class="mm-h2">There is a place for you here</h2>
<div class="mm-who">
<article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></div><h3>For students</h3><p>Current students, future students, bachelor and master students, in every Slovenian study city.</p><a class="mm-who-link" href="#join-form">I am a student <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
<article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></div><h3>For supporters</h3><p>You do not need to be a student to support the community. Contribute through knowledge, partnerships, mentorship, volunteering, sponsorships, media or useful connections.</p><a class="mm-who-link" href="#join-form">I want to support MSOS <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
</div>
</section>
<section class="ms-section" id="join-form">
<div class="ms-head">
<span class="ms-eyebrow">Membership form</span>
<h2>Join in a couple of minutes</h2>
<p>A few friendly questions. You do not need to decide now how active you want to be.</p>
<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" data-step="path" data-flow="both">
<h3>How would you like to connect with MSOS?</h3>
<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" data-path="student"><i class="fas fa-graduation-cap" aria-hidden="true"></i><strong>I am a student</strong></button>
<button type="button" class="ms-path" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>I want to support MSOS</strong></button>
<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>

25
member-form.js
View File

@ -25,6 +25,28 @@
nums.forEach(function (n) { io.observe(n); });
}
/* ---- floating "Become a member" CTA: show after the hero, hide near the form/footer ---- */
(function () {
var sticky = document.querySelector('.mm-sticky-cta');
if (!sticky) return;
var hero = document.querySelector('.mm-hero');
var joinForm = document.getElementById('join-form');
var finalCta = document.querySelector('.mm-final');
function update() {
var pastHero = hero ? (window.scrollY > hero.offsetHeight - 100) : (window.scrollY > 500);
var nearTarget = [joinForm, finalCta].some(function (el) {
if (!el) return false;
var r = el.getBoundingClientRect();
return r.top < window.innerHeight * 0.85 && r.bottom > 0;
});
if (pastHero && !nearTarget) { sticky.hidden = false; sticky.classList.remove('is-hiding'); }
else if (!sticky.hidden) { sticky.classList.add('is-hiding'); }
}
window.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
update();
})();
/* ---- multi-step form ---- */
var form = document.querySelector('.ms-form');
if (!form) return;
@ -99,7 +121,8 @@
var last = state.idx === total - 1;
var onPath = state.order[state.idx] === 'path';
next.hidden = last || onPath;
submit.hidden = !last;
// never show submit on the path step (you advance by picking a card)
submit.hidden = !last || onPath;
if (last) submit.textContent = state.path === 'student' ? submit.getAttribute('data-student') : submit.getAttribute('data-supporter');
alertBox.hidden = true;
}

50
mk/become-a-member/index.html
View File

@ -158,6 +158,7 @@
<!-- 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> Стани член</a>
<section class="mm-hero">
<div class="mm-hero-text">
<span class="mm-eyebrow">Стани член</span>
@ -174,6 +175,10 @@
<section class="mm-section">
<h2 class="mm-h2">Зошто да станеш член?</h2>
<div class="mm-benefits">
<figure class="mm-benefit-photo">
<img src="../../images/event4-image2.webp" alt="Македонски студенти собрани во Љубљана" loading="lazy">
<figcaption>Вистински настани, вистински пријателства</figcaption>
</figure>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-people-group" aria-hidden="true"></i></div>
<h3>Најди ги своите луѓе</h3><p>Запознај македонски студенти низ Словенија и создади пријателства надвор од предавалната.</p>
@ -199,9 +204,13 @@
<h3>Прошири ја својата мрежа</h3><p>Запознај студенти, алумни, професионалци, институции и партнери.</p>
</article>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-house-heart" aria-hidden="true"></i></div>
<div class="mm-benefit-ico"><i class="fas fa-house-user" aria-hidden="true"></i></div>
<h3>Почувствувај се како дома</h3><p>Припаѓај на заедница каде никогаш не мораш да објаснуваш од каде доаѓаш.</p>
</article>
<figure class="mm-benefit-photo">
<img src="../../images/msnl-3.webp" alt="Студенти ги пишуваат своите имиња на кирилица на македонската студентска вечер" loading="lazy">
<figcaption>Парче дома во Словенија</figcaption>
</figure>
</div>
</section>
@ -274,18 +283,17 @@
<div class="mm-tests">
<figure class="mm-test">
<blockquote>Се приклучив затоа што сакав да запознаам луѓе. Останав затоа што МСОС стана дел од мојот живот во Словенија.</blockquote>
<figcaption><strong>Ana</strong><span>Студентка, Љубљана</span></figcaption>
<figcaption><strong>Ana</strong><span>Студентка, Марибор</span></figcaption>
</figure>
<figure class="mm-test">
<blockquote>Кога се преселив во Словенија, не знаев од каде да почнам. Преку МСОС најдов поддршка, пријатели и можности.</blockquote>
<figcaption><strong>Marko</strong><span>Студент, Марибор</span></figcaption>
<figcaption><strong>Marko</strong><span>Студент, Љубљана</span></figcaption>
</figure>
<figure class="mm-test">
<blockquote>Тимската работа ме научи повеќе од која било предавална. Организирав настани, запознав партнери и многу пораснав.</blockquote>
<figcaption><strong>Elena</strong><span>Волонтерка, Копер</span></figcaption>
<figcaption><strong>Katerina</strong><span>Волонтерка, Копер</span></figcaption>
</figure>
</div>
<p class="mm-note mm-note--center">Примерни цитати за замена со вистински.</p>
</section>
<section class="mm-section" id="showcase">
@ -319,30 +327,32 @@
<div class="mm-center"><a class="btn btn-secondary" href="../news/">Сите настани и проекти</a></div>
</section>
<section class="mm-section">
<h2 class="mm-h2">Тука има место за тебе</h2>
<div class="mm-who">
<article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></div><h3>За студенти</h3><p>Сегашни и идни студенти, додипломски и магистерски, во секој словенечки студентски град.</p><a class="mm-who-link" href="#join-form">Јас сум студент <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
<article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></div><h3>За поддржувачи</h3><p>Не мора да си студент за да ја поддржиш заедницата. Придонеси со знаење, партнерства, менторство, волонтирање, спонзорства, медиуми или корисни врски.</p><a class="mm-who-link" href="#join-form">Сакам да го поддржам МСОС <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
</div>
</section>
<section class="ms-section" id="join-form">
<div class="ms-head">
<span class="ms-eyebrow">Формулар за членство</span>
<h2>Приклучи се за неколку минути</h2>
<p>Неколку пријателски прашања. Не мора сега да одлучиш колку активен сакаш да бидеш.</p>
<span class="ms-eyebrow">Приклучи се</span>
<h2>Тука има место за тебе</h2>
<p>Избери како сакаш да се приклучиш. Трае само неколку минути, а колку активен ќе бидеш можеш да одлучиш подоцна.</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="Чекор" data-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="Пополни ги задолжителните полиња." data-cooldown-msg="Изгледа дека штотуку испрати пријава. Почекај момент пред да испратиш нова.">Пополни ги задолжителните полиња.</div>
<div class="ms-step" data-step="path" data-flow="both">
<h3>Како сакаш да се поврзеш со МСОС?</h3>
<div class="ms-step ms-step--path" data-step="path" data-flow="both">
<h3 class="ms-path-prompt">Што те опишува подобро?</h3>
<div class="ms-paths">
<button type="button" class="ms-path" data-path="student"><i class="fas fa-graduation-cap" aria-hidden="true"></i><strong>Јас сум студент</strong></button>
<button type="button" class="ms-path" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>Сакам да го поддржам МСОС</strong></button>
<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>Јас сум студент</strong>
<span class="ms-path-desc">Сегашни и идни студенти, додипломски и магистерски, во секој словенечки студентски град.</span>
<span class="ms-path-go">Избери го ова <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>Сакам да го поддржам МСОС</strong>
<span class="ms-path-desc">Не мора да си студент за да ја поддржиш заедницата. Придонеси со знаење, партнерства, менторство, волонтирање, спонзорства, медиуми или корисни врски.</span>
<span class="ms-path-go">Избери го ова <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</button>
</div>
</div>

50
si/become-a-member/index.html
View File

@ -158,6 +158,7 @@
<!-- 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> Postani član</a>
<section class="mm-hero">
<div class="mm-hero-text">
<span class="mm-eyebrow">Postani član</span>
@ -174,6 +175,10 @@
<section class="mm-section">
<h2 class="mm-h2">Zakaj postati član?</h2>
<div class="mm-benefits">
<figure class="mm-benefit-photo">
<img src="../../images/event4-image2.webp" alt="Makedonski študenti zbrani v Ljubljani" loading="lazy">
<figcaption>Pravi dogodki, prava prijateljstva</figcaption>
</figure>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-people-group" aria-hidden="true"></i></div>
<h3>Najdi svoje ljudi</h3><p>Spoznaj makedonske študente po vsej Sloveniji in stkaj prijateljstva zunaj predavalnice.</p>
@ -199,9 +204,13 @@
<h3>Razširi svojo mrežo</h3><p>Spoznaj študente, alumne, strokovnjake, ustanove in partnerje.</p>
</article>
<article class="mm-benefit">
<div class="mm-benefit-ico"><i class="fas fa-house-heart" aria-hidden="true"></i></div>
<div class="mm-benefit-ico"><i class="fas fa-house-user" aria-hidden="true"></i></div>
<h3>Počuti se kot doma</h3><p>Pripadaj skupnosti, kjer ti nikoli ni treba pojasnjevati, od kod prihajaš.</p>
</article>
<figure class="mm-benefit-photo">
<img src="../../images/msnl-3.webp" alt="Študenti pišejo svoja imena v cirilici na makedonskem študentskem večeru" loading="lazy">
<figcaption>Košček doma v Sloveniji</figcaption>
</figure>
</div>
</section>
@ -274,18 +283,17 @@
<div class="mm-tests">
<figure class="mm-test">
<blockquote>Pridružil sem se, ker sem želel spoznati ljudi. Ostal sem, ker je MSOS postal del mojega življenja v Sloveniji.</blockquote>
<figcaption><strong>Ana</strong><span>Študentka, Ljubljana</span></figcaption>
<figcaption><strong>Ana</strong><span>Študentka, Maribor</span></figcaption>
</figure>
<figure class="mm-test">
<blockquote>Ko sem se preselil v Slovenijo, nisem vedel, kje začeti. Prek MSOS sem našel podporo, prijatelje in priložnosti.</blockquote>
<figcaption><strong>Marko</strong><span>Študent, Maribor</span></figcaption>
<figcaption><strong>Marko</strong><span>Študent, Ljubljana</span></figcaption>
</figure>
<figure class="mm-test">
<blockquote>Delo v ekipi me je naučilo več kot katera koli predavalnica. Organiziral sem dogodke, spoznal partnerje in veliko zrasel.</blockquote>
<figcaption><strong>Elena</strong><span>Prostovoljka, Koper</span></figcaption>
<figcaption><strong>Katerina</strong><span>Prostovoljka, Koper</span></figcaption>
</figure>
</div>
<p class="mm-note mm-note--center">Vzorčni citati za zamenjavo z resničnimi.</p>
</section>
<section class="mm-section" id="showcase">
@ -319,30 +327,32 @@
<div class="mm-center"><a class="btn btn-secondary" href="../news/">Vsi dogodki in projekti</a></div>
</section>
<section class="mm-section">
<h2 class="mm-h2">Tukaj je prostor zate</h2>
<div class="mm-who">
<article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></div><h3>Za študente</h3><p>Sedanji in bodoči študenti, dodiplomski in magistrski, v vsakem slovenskem študijskem mestu.</p><a class="mm-who-link" href="#join-form">Sem študent <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
<article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></div><h3>Za podpornike</h3><p>Ni ti treba biti študent, da podpiraš skupnost. Prispevaj z znanjem, partnerstvi, mentorstvom, prostovoljstvom, sponzorstvi, mediji ali povezavami.</p><a class="mm-who-link" href="#join-form">Želim podpreti MSOS <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
</div>
</section>
<section class="ms-section" id="join-form">
<div class="ms-head">
<span class="ms-eyebrow">Prijavni obrazec</span>
<h2>Pridruži se v nekaj minutah</h2>
<p>Nekaj prijaznih vprašanj. Ni ti treba zdaj odločiti, kako aktiven želiš biti.</p>
<span class="ms-eyebrow">Pridruži se</span>
<h2>Tukaj je prostor zate</h2>
<p>Izberi, kako se želiš pridružiti. Vzame le nekaj minut, kako aktiven boš, pa se lahko odločiš pozneje.</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="Korak" data-of="od" 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="Izpolni obvezna polja." data-cooldown-msg="Videti je, da si pravkar poslal prošnjo. Počakaj trenutek, preden pošlješ novo.">Izpolni obvezna polja.</div>
<div class="ms-step" data-step="path" data-flow="both">
<h3>Kako se želiš povezati z MSOS?</h3>
<div class="ms-step ms-step--path" data-step="path" data-flow="both">
<h3 class="ms-path-prompt">Kaj te bolje opiše?</h3>
<div class="ms-paths">
<button type="button" class="ms-path" data-path="student"><i class="fas fa-graduation-cap" aria-hidden="true"></i><strong>Sem študent</strong></button>
<button type="button" class="ms-path" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>Želim podpreti MSOS</strong></button>
<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>Sem študent</strong>
<span class="ms-path-desc">Sedanji in bodoči študenti, dodiplomski in magistrski, v vsakem slovenskem študijskem mestu.</span>
<span class="ms-path-go">Izberi to <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>Želim podpreti MSOS</strong>
<span class="ms-path-desc">Ni ti treba biti študent, da podpiraš skupnost. Prispevaj z znanjem, partnerstvi, mentorstvom, prostovoljstvom, sponzorstvi, mediji ali povezavami.</span>
<span class="ms-path-go">Izberi to <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</button>
</div>
</div>