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

Turn membership "ways to join" grid into Hub-style slider

Browse Source 
Convert the fixed 6-card grid in the "There is more than one way to be
part of MSOS" section into the Hub's auto-scrolling marquee, reusing the
existing .hub-carousel mechanics with icon-based gradient cards. Applied
across EN/MK/SI.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-05 12:50:39 +02:00
1 parent 764cf1ee66
commit a7782eb28f
4 files changed
+117 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

en/become-a-member/index.html
+31 -25
View File
@@ -261,31 +261,37 @@
<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 class="hub-carousel mm-ways-carousel">
<div class="hub-uses">
<div class="hub-track">
<div class="hub-group">
<article class="hub-use mm-use">
<div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Stay connected</h3><p>Receive updates and know what is happening.</p></div>
</article>
<article class="hub-use mm-use">
<div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Join the community</h3><p>Come to events, meet people and take part when it suits you.</p></div>
</article>
<article class="hub-use mm-use">
<div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Volunteer sometimes</h3><p>Help with selected activities without a long-term commitment.</p></div>
</article>
<article class="hub-use mm-use">
<div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Join projects</h3><p>Contribute to specific initiatives, campaigns, guides or collaborations.</p></div>
</article>
<article class="hub-use mm-use">
<div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Organise events</h3><p>Help plan, coordinate, promote and deliver activities.</p></div>
</article>
<article class="hub-use mm-use">
<div class="mm-use-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Take responsibility</h3><p>Explore leadership, governance, representation or local team roles.</p></div>
</article>
</div>
</div>
</div>
</div>
</section>