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

About Us: real member photos in the carousel + richer hero

Browse Source 
- "Our members & friends" carousel now uses 22 curated, web-optimised photos
  (members-01..22.webp) from the members & friends library, chosen for warmth,
  smiles, hugs, events, team and community; applied to EN/MK/SI, with the
  seamless-loop duplicate set and per-language alt text. Old placeholder
  event photos removed.
- Hero slideshow enriched with 6 new candid 1920px slides (group hug, pizza,
  picnic, coffee, night group, arms-up cheer) interleaved among the existing
  crowd shots; the JS picks up all slides automatically (now 17).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-08 00:02:02 +02:00
1 parent 57a3ca187b
commit a15e9f20f1
31 files changed
+159 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

mk/about-us/index.html
+53 -17
View File
@@ -194,16 +194,22 @@
<!-- Auto-rotating team hero -->
<section class="about-hero" aria-label="Моменти од тимот на МСОС">
<div class="about-hero-slide is-active" style="background-image:url('../../images/about-hero-01.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-12.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-02.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-03.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-13.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-04.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-05.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-14.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-06.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-07.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-15.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-08.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-09.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-16.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-10.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-11.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-17.webp')"></div>
<div class="about-hero-overlay"></div>
<div class="about-hero-content">
<span class="about-hero-eyebrow">За нас</span>
@@ -356,7 +362,7 @@
</section>
<!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
<!-- Appreciation to members & friends (names pending full list) -->
<section class="appreciation-section">
<div class="appr-intro">
<h2>Нашите членови и пријатели</h2>
@@ -365,25 +371,55 @@
<!-- Scrolling photo carousel (Apple-style focal zoom) -->
<div class="appr-marquee" aria-label="Членови и пријатели на МСОС">
<div class="appr-track">
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Македонска студентска вечер во Љубљана"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Македонска студентска вечер во Љубљана"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-01.webp" width="900" height="675" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-02.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-05.webp" width="690" height="900" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-06.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-07.webp" width="675" height="900" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-08.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-09.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-03.webp" width="675" height="900" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-10.webp" width="600" height="900" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-11.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-12.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-13.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-04.webp" width="900" height="675" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-14.webp" width="900" height="675" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-15.webp" width="675" height="900" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-16.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-17.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-18.webp" width="675" height="900" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-19.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-20.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-21.webp" width="675" height="900" alt="Членови и пријатели на МСОС"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-22.webp" width="900" height="600" alt="Членови и пријатели на МСОС"></div>
<!-- duplicate set for a seamless infinite loop (aria-hidden) -->
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-01.webp" width="900" height="675" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-02.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-05.webp" width="690" height="900" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-06.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-07.webp" width="675" height="900" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-08.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-09.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-03.webp" width="675" height="900" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-10.webp" width="600" height="900" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-11.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-12.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-13.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-04.webp" width="900" height="675" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-14.webp" width="900" height="675" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-15.webp" width="675" height="900" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-16.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-17.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-18.webp" width="675" height="900" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-19.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-20.webp" width="900" height="600" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-21.webp" width="675" height="900" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/members-22.webp" width="900" height="600" alt=""></div>
</div>
</div>
</div>
</div>
<div class="appreciation-names">
<span class="appr-name">Kristijan P.</span>
<span class="appr-name">Lea J.</span>