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

Carousels: drag + position dots, and real Become-a-member photos

Browse Source 
Convert the Hub / Become-a-member carousels from a pure-CSS marquee to a
JS-driven scroller with click-and-drag, touch swipe, and progress dots
(setupHubCarousel). Turn the "ways to be part of MSOS" cards into hub-style
photo cards and add the final Become-a-member photos (WebP).

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 15:54:06 +02:00
1 parent a7782eb28f
commit 4c27ebb105
14 files changed
+238 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

en/become-a-member/index.html
+10 -4
View File
@@ -76,8 +76,8 @@
<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>
<li><a href="../../en/timeline-and-milestones/">Timeline & Milestones</a></li>
<li><a href="../../en/msos-hub/">MSOS Hub</a></li>
</ul>
</li>
@@ -135,8 +135,8 @@
<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>
<li><a href="../../en/timeline-and-milestones/">Timeline & Milestones</a></li>
<li><a href="../../en/msos-hub/">MSOS Hub</a></li>
</ul>
</li>
@@ -209,7 +209,7 @@
<h2 class="mm-h2">Why become a member?</h2>
<div class="mm-benefits">
<figure class="mm-benefit-photo">
<img width="1425" height="950" src="../../images/event4-image2.webp" alt="Macedonian students gathered together in Ljubljana" loading="lazy">
<img width="1200" height="1600" src="../../images/mm-benefit-real-events.webp" alt="Macedonian students gathered together in Ljubljana" loading="lazy">
<figcaption>Real events, real friendships</figcaption>
</figure>
<article class="mm-benefit">
@@ -241,7 +241,7 @@
<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 width="1087" height="586" src="../../images/msnl-3.webp" alt="Students writing their names in Cyrillic at Macedonian Student Night" loading="lazy">
<img width="1600" height="1067" src="../../images/mm-benefit-piece-of-home.webp" alt="Students writing their names in Cyrillic at Macedonian Student Night" loading="lazy">
<figcaption>A piece of home in Slovenia</figcaption>
</figure>
</div>
@@ -266,26 +266,32 @@
<div class="hub-track">
<div class="hub-group">
<article class="hub-use mm-use">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-stay-connected.webp" alt="Stay connected">
<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">
<img width="1600" height="1067" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-community.webp" alt="Join the community">
<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">
<img width="1600" height="1200" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-volunteer.webp" alt="Volunteer sometimes">
<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">
<img width="1600" height="1067" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-projects.webp" alt="Join projects">
<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">
<img width="1600" height="1067" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-events.webp" alt="Organise events">
<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">
<img width="1600" height="900" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-responsibility.webp" alt="Take responsibility">
<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>