About Us "Through the years": retitle, redesign names, thank-you note

- Renamed the section from "Our members & friends" to "Through the years"
  (Низ годините / Skozi leta) — a retrospective framing that honours everyone
  who has been part of MSOS without labelling anyone a current member or friend.
  Updated title, marquee aria-label, image alt text and the dev comment.
- Removed dashes from the hero intro, section intro and closing note.
- Replaced the placeholder names with the full list of 74 contributors, kept
  the original five, sorted alphabetically per language (Latin for EN/SI,
  Macedonian Cyrillic with native collation for MK).
- New design for the names: a clean multi-column credits wall (accent dot,
  hairline rows, hover) instead of pill chips (css/pages/_about.css).
- Added a thank-you note to members past, present and future, and to everyone
  who has volunteered, contributed or supported MSOS. EN/MK/SI.

MK/SI copy is AI-drafted and pending a native proofread.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskik 2026-08-08 00:57:53 +02:00
parent a15e9f20f1
commit 91d29121c0
4 changed files with 319 additions and 100 deletions

View File

@ -546,17 +546,29 @@
.appr-intro { margin-bottom: 40px; } .appr-intro { margin-bottom: 40px; }
.appreciation-names { .appreciation-names {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 940px; margin: 0 auto;
max-width: 900px; margin: 0 auto; column-count: 4; column-gap: 44px;
}
@media (prefers-reduced-motion: reduce) {
.appr-track { animation: none; }
/* no movement => show all cards evenly, no focal zoom/dim */
.appr-card { transform: scale(0.92); filter: none; }
} }
.appr-name { .appr-name {
display: inline-block; padding: 8px 16px; border-radius: 999px; display: flex; align-items: baseline; gap: 10px;
background: #F2F7F9; border: 1px solid #E1ECF0; color: #2D5F72; break-inside: avoid; padding: 10px 2px;
font-size: 15px; font-weight: 600; font-size: 15px; font-weight: 500; color: #475467;
border-bottom: 1px solid #EEF1F4;
transition: color 0.15s ease;
} }
.appr-name::before {
content: ""; flex: 0 0 auto;
width: 5px; height: 5px; border-radius: 50%;
background: #2D738C; opacity: 0.5; transform: translateY(-2px);
}
.appr-name:hover { color: #101828; }
.appr-name:hover::before { opacity: 1; }
@media (max-width: 900px) { .appreciation-names { column-count: 3; column-gap: 32px; } }
@media (max-width: 600px) { .appreciation-names { column-count: 2; column-gap: 24px; } }
.appr-thanks {
max-width: 720px; margin: 48px auto 0; text-align: center;
font-size: 17px; line-height: 29px; color: #475467;
}
.appr-thanks strong { display: block; margin-top: 10px; color: #101828; font-weight: 600; }
.appreciation-note { font-size: 13px; color: #98A2B3; margin: 26px auto 0; font-style: italic; } .appreciation-note { font-size: 13px; color: #98A2B3; margin: 26px auto 0; font-style: italic; }

View File

@ -214,7 +214,7 @@
<div class="about-hero-content"> <div class="about-hero-content">
<span class="about-hero-eyebrow">About us</span> <span class="about-hero-eyebrow">About us</span>
<h1>Our team, mission, vision & core values</h1> <h1>Our team, mission, vision & core values</h1>
<p class="about-hero-lead">MSOS is more than an organization - it is the energy of the team behind it. Our members are the heart and driving force that inspires us, writing this story and shaping student life in Slovenia.</p> <p class="about-hero-lead">MSOS is more than an organization, it is the energy of the team behind it. Our members are the heart and driving force that inspires us, writing this story and shaping student life in Slovenia.</p>
</div> </div>
</section> </section>
@ -362,37 +362,37 @@
</section> </section>
<!-- FAQ Call to Action Section --> <!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (names pending full list) --> <!-- MSOS through the years (names pending full list) -->
<section class="appreciation-section"> <section class="appreciation-section">
<div class="appr-intro"> <div class="appr-intro">
<h2>Our members & friends</h2> <h2>Through the years</h2>
<p class="appr-lead">MSOS is its people. With gratitude to everyone who has been part of our story and everyone still writing it with us.</p> <p class="appr-lead">MSOS is its people. With gratitude to everyone who has been part of our story, and everyone still writing it with us.</p>
</div> </div>
<!-- Scrolling photo carousel (Apple-style focal zoom) --> <!-- Scrolling photo carousel (Apple-style focal zoom) -->
<div class="appr-marquee" aria-label="MSOS members and friends"> <div class="appr-marquee" aria-label="MSOS through the years">
<div class="appr-track"> <div class="appr-track">
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-01.webp" width="900" height="675" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-01.webp" width="900" height="675" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-02.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-02.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-05.webp" width="690" height="900" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-05.webp" width="690" height="900" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-06.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-06.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-07.webp" width="675" height="900" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-07.webp" width="675" height="900" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-08.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-08.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-09.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-09.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-03.webp" width="675" height="900" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-03.webp" width="675" height="900" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-10.webp" width="600" height="900" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-10.webp" width="600" height="900" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-11.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-11.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-12.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-12.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-13.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-13.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-04.webp" width="900" height="675" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-04.webp" width="900" height="675" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-14.webp" width="900" height="675" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-14.webp" width="900" height="675" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-15.webp" width="675" height="900" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-15.webp" width="675" height="900" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-16.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-16.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-17.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-17.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-18.webp" width="675" height="900" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-18.webp" width="675" height="900" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-19.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-19.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-20.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-20.webp" width="900" height="600" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-21.webp" width="675" height="900" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-21.webp" width="675" height="900" alt="MSOS through the years"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-22.webp" width="900" height="600" alt="MSOS members and friends"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-22.webp" width="900" height="600" alt="MSOS through the years"></div>
<!-- duplicate set for a seamless infinite loop (aria-hidden) --> <!-- duplicate set for a seamless infinite loop (aria-hidden) -->
<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-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-02.webp" width="900" height="600" alt=""></div>
@ -421,13 +421,82 @@
</div> </div>
</div> </div>
<div class="appreciation-names"> <div class="appreciation-names">
<span class="appr-name">Aleksandar B.</span>
<span class="appr-name">Ana Gj.</span>
<span class="appr-name">Ana V.</span>
<span class="appr-name">Anastasija S.</span>
<span class="appr-name">Anastasija T.</span>
<span class="appr-name">Andrej D.</span>
<span class="appr-name">Angela P.</span>
<span class="appr-name">Angelina S.</span>
<span class="appr-name">Anja K.</span>
<span class="appr-name">Anja T.</span>
<span class="appr-name">Atanas Č.</span>
<span class="appr-name">Bisera N.</span>
<span class="appr-name">Blagica E.</span>
<span class="appr-name">Borjan J.</span>
<span class="appr-name">Božidar J.</span>
<span class="appr-name">Damjan B.</span>
<span class="appr-name">Dijana D.</span>
<span class="appr-name">Dimitar Đ.</span>
<span class="appr-name">Elena A.</span>
<span class="appr-name">Elma M.</span>
<span class="appr-name">Emilija P.</span>
<span class="appr-name">Eva N.</span>
<span class="appr-name">Evgenija A.</span>
<span class="appr-name">Evgenija G.</span>
<span class="appr-name">Evgenija K.</span>
<span class="appr-name">Filimena N.</span>
<span class="appr-name">Gorjan V.</span>
<span class="appr-name">Hristijan A.</span>
<span class="appr-name">Hristijan B.</span>
<span class="appr-name">Hristijan J.</span>
<span class="appr-name">Hristijan K.</span>
<span class="appr-name">Hristijan M.</span>
<span class="appr-name">Igor A.</span>
<span class="appr-name">Ilija Č.</span>
<span class="appr-name">Ina M.</span>
<span class="appr-name">Jovana A. N.</span>
<span class="appr-name">Katerina S.</span>
<span class="appr-name">Kiara L.</span>
<span class="appr-name">Kiril T.</span>
<span class="appr-name">Kliment K.</span>
<span class="appr-name">Klimentina Č.</span>
<span class="appr-name">Kristijan P.</span> <span class="appr-name">Kristijan P.</span>
<span class="appr-name">Kristijan T.</span>
<span class="appr-name">Lea J.</span> <span class="appr-name">Lea J.</span>
<span class="appr-name">Marko A.</span> <span class="appr-name">Luka G.</span>
<span class="appr-name">Luka R.</span>
<span class="appr-name">Marija A.</span>
<span class="appr-name">Marija K.</span> <span class="appr-name">Marija K.</span>
<span class="appr-name">Marko A.</span>
<span class="appr-name">Marko Gj.</span>
<span class="appr-name">Marko I.</span>
<span class="appr-name">Matea A.</span>
<span class="appr-name">Mia C.</span>
<span class="appr-name">Mia K.</span>
<span class="appr-name">Miahela M.</span>
<span class="appr-name">Mihael T.</span>
<span class="appr-name">Mihaela N.</span>
<span class="appr-name">Mihaela T.</span>
<span class="appr-name">Mila D.</span>
<span class="appr-name">Monika J.</span>
<span class="appr-name">Monika V.</span> <span class="appr-name">Monika V.</span>
<span class="appr-name">Renata G.</span>
<span class="appr-name">Ria D.</span>
<span class="appr-name">Simona R.</span>
<span class="appr-name">Sofija M.</span>
<span class="appr-name">Stefan Gj.</span>
<span class="appr-name">Stefanija A.</span>
<span class="appr-name">Stojan B.</span>
<span class="appr-name">Teodor V.</span>
<span class="appr-name">Tijana A.</span>
<span class="appr-name">Tina M.</span>
<span class="appr-name">Vasil H.</span>
<span class="appr-name">Viktorija P.</span>
<span class="appr-name">Vladimir J.</span>
</div> </div>
<p class="appreciation-note">Placeholder — the full list of members and friends is being compiled.</p> <p class="appr-thanks">To every member, past and present, to those yet to come, and to everyone who has volunteered, contributed or supported MSOS in any way: thank you. You are the heart of this organisation. <strong>This is our story, and we are writing it together.</strong></p>
</section> </section>
</main> </main>

View File

@ -362,37 +362,37 @@
</section> </section>
<!-- FAQ Call to Action Section --> <!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (names pending full list) --> <!-- MSOS through the years (names pending full list) -->
<section class="appreciation-section"> <section class="appreciation-section">
<div class="appr-intro"> <div class="appr-intro">
<h2>Нашите членови и пријатели</h2> <h2>Низ годините</h2>
<p class="appr-lead">МСОС се неговите луѓе. Со благодарност до сите што биле дел од нашата приказна и до сите што сè уште ја пишуваат со нас.</p> <p class="appr-lead">МСОС се неговите луѓе. Со благодарност до сите што биле дел од нашата приказна, и до сите што сè уште ја пишуваат со нас.</p>
</div> </div>
<!-- Scrolling photo carousel (Apple-style focal zoom) --> <!-- Scrolling photo carousel (Apple-style focal zoom) -->
<div class="appr-marquee" aria-label="Членови и пријатели на МСОС"> <div class="appr-marquee" aria-label="МСОС низ годините">
<div class="appr-track"> <div class="appr-track">
<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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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> <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) --> <!-- duplicate set for a seamless infinite loop (aria-hidden) -->
<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-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-02.webp" width="900" height="600" alt=""></div>
@ -421,13 +421,82 @@
</div> </div>
</div> </div>
<div class="appreciation-names"> <div class="appreciation-names">
<span class="appr-name">Kristijan P.</span> <span class="appr-name">Александар Б.</span>
<span class="appr-name">Lea J.</span> <span class="appr-name">Ана В.</span>
<span class="appr-name">Marko A.</span> <span class="appr-name">Ана Ѓ.</span>
<span class="appr-name">Marija K.</span> <span class="appr-name">Анастасија С.</span>
<span class="appr-name">Monika V.</span> <span class="appr-name">Анастасија Т.</span>
<span class="appr-name">Ангела П.</span>
<span class="appr-name">Ангелина С.</span>
<span class="appr-name">Андреј Д.</span>
<span class="appr-name">Ања К.</span>
<span class="appr-name">Ања Т.</span>
<span class="appr-name">Атанас Ч.</span>
<span class="appr-name">Бисера Н.</span>
<span class="appr-name">Благица Е.</span>
<span class="appr-name">Божидар Ј.</span>
<span class="appr-name">Борјан Ј.</span>
<span class="appr-name">Васил Х.</span>
<span class="appr-name">Викторија П.</span>
<span class="appr-name">Владимир Ј.</span>
<span class="appr-name">Горјан В.</span>
<span class="appr-name">Дамјан Б.</span>
<span class="appr-name">Дијана Д.</span>
<span class="appr-name">Димитар Ѓ.</span>
<span class="appr-name">Ева Н.</span>
<span class="appr-name">Евгенија А.</span>
<span class="appr-name">Евгенија Г.</span>
<span class="appr-name">Евгенија К.</span>
<span class="appr-name">Елена А.</span>
<span class="appr-name">Елма М.</span>
<span class="appr-name">Емилија П.</span>
<span class="appr-name">Игор А.</span>
<span class="appr-name">Илија Ч.</span>
<span class="appr-name">Ина М.</span>
<span class="appr-name">Јована А. Н.</span>
<span class="appr-name">Катерина С.</span>
<span class="appr-name">Киара Л.</span>
<span class="appr-name">Кирил Т.</span>
<span class="appr-name">Климент К.</span>
<span class="appr-name">Климентина Ч.</span>
<span class="appr-name">Кристијан П.</span>
<span class="appr-name">Кристијан Т.</span>
<span class="appr-name">Леа Ј.</span>
<span class="appr-name">Лука Г.</span>
<span class="appr-name">Лука Р.</span>
<span class="appr-name">Марија А.</span>
<span class="appr-name">Марија К.</span>
<span class="appr-name">Марко А.</span>
<span class="appr-name">Марко Ѓ.</span>
<span class="appr-name">Марко И.</span>
<span class="appr-name">Матеа А.</span>
<span class="appr-name">Миа К.</span>
<span class="appr-name">Миа Ц.</span>
<span class="appr-name">Миахела М.</span>
<span class="appr-name">Мила Д.</span>
<span class="appr-name">Михаел Т.</span>
<span class="appr-name">Михаела Н.</span>
<span class="appr-name">Михаела Т.</span>
<span class="appr-name">Моника В.</span>
<span class="appr-name">Моника Ј.</span>
<span class="appr-name">Рената Г.</span>
<span class="appr-name">Риа Д.</span>
<span class="appr-name">Симона Р.</span>
<span class="appr-name">Софија М.</span>
<span class="appr-name">Стефан Ѓ.</span>
<span class="appr-name">Стефанија А.</span>
<span class="appr-name">Стојан Б.</span>
<span class="appr-name">Теодор В.</span>
<span class="appr-name">Тијана А.</span>
<span class="appr-name">Тина М.</span>
<span class="appr-name">Филимена Н.</span>
<span class="appr-name">Христијан А.</span>
<span class="appr-name">Христијан Б.</span>
<span class="appr-name">Христијан Ј.</span>
<span class="appr-name">Христијан К.</span>
<span class="appr-name">Христијан М.</span>
</div> </div>
<p class="appreciation-note">Привремено — целосниот список на членови и пријатели е во подготовка.</p> <p class="appr-thanks">До секој член, поранешен и сегашен, до сите што допрва доаѓаат, и до секој што волонтирал, придонел или ја поддржал МСОС на кој било начин: ви благодариме. Вие сте срцето на оваа организација. <strong>Ова е нашата приказна и ја пишуваме заедно.</strong></p>
</section> </section>
</main> </main>

View File

@ -214,7 +214,7 @@
<div class="about-hero-content"> <div class="about-hero-content">
<span class="about-hero-eyebrow">O nas</span> <span class="about-hero-eyebrow">O nas</span>
<h1>Naša ekipa, poslanstvo, vizija in temeljne vrednote</h1> <h1>Naša ekipa, poslanstvo, vizija in temeljne vrednote</h1>
<p class="about-hero-lead">MSOS je več kot le organizacija - je energija ekipe, ki stoji za njo. Naši člani so srce in gonilna sila, ki nas navdihuje, piše to zgodbo in oblikuje študentsko življenje v Sloveniji.</p> <p class="about-hero-lead">MSOS je več kot le organizacija, je energija ekipe, ki stoji za njo. Naši člani so srce in gonilna sila, ki nas navdihuje, piše to zgodbo in oblikuje študentsko življenje v Sloveniji.</p>
</div> </div>
</section> </section>
@ -362,37 +362,37 @@
</section> </section>
<!-- FAQ Call to Action Section --> <!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (names pending full list) --> <!-- MSOS through the years (names pending full list) -->
<section class="appreciation-section"> <section class="appreciation-section">
<div class="appr-intro"> <div class="appr-intro">
<h2>Naši člani in prijatelji</h2> <h2>Skozi leta</h2>
<p class="appr-lead">MSOS so njegovi ljudje. S hvaležnostjo vsem, ki so bili del naše zgodbe in vsem, ki jo še pišejo z nami.</p> <p class="appr-lead">MSOS so njegovi ljudje. S hvaležnostjo vsem, ki so bili del naše zgodbe, in vsem, ki jo še pišejo z nami.</p>
</div> </div>
<!-- Scrolling photo carousel (Apple-style focal zoom) --> <!-- Scrolling photo carousel (Apple-style focal zoom) -->
<div class="appr-marquee" aria-label="Člani in prijatelji MSOS"> <div class="appr-marquee" aria-label="MSOS skozi leta">
<div class="appr-track"> <div class="appr-track">
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-01.webp" width="900" height="675" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-01.webp" width="900" height="675" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-02.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-02.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-05.webp" width="690" height="900" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-05.webp" width="690" height="900" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-06.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-06.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-07.webp" width="675" height="900" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-07.webp" width="675" height="900" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-08.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-08.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-09.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-09.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-03.webp" width="675" height="900" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-03.webp" width="675" height="900" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-10.webp" width="600" height="900" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-10.webp" width="600" height="900" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-11.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-11.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-12.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-12.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-13.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-13.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-04.webp" width="900" height="675" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-04.webp" width="900" height="675" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-14.webp" width="900" height="675" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-14.webp" width="900" height="675" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-15.webp" width="675" height="900" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-15.webp" width="675" height="900" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-16.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-16.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-17.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-17.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-18.webp" width="675" height="900" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-18.webp" width="675" height="900" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-19.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-19.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-20.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-20.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-21.webp" width="675" height="900" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-21.webp" width="675" height="900" alt="MSOS skozi leta"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-22.webp" width="900" height="600" alt="Člani in prijatelji MSOS"></div> <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/members-22.webp" width="900" height="600" alt="MSOS skozi leta"></div>
<!-- duplicate set for a seamless infinite loop (aria-hidden) --> <!-- duplicate set for a seamless infinite loop (aria-hidden) -->
<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-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-02.webp" width="900" height="600" alt=""></div>
@ -421,13 +421,82 @@
</div> </div>
</div> </div>
<div class="appreciation-names"> <div class="appreciation-names">
<span class="appr-name">Aleksandar B.</span>
<span class="appr-name">Ana Gj.</span>
<span class="appr-name">Ana V.</span>
<span class="appr-name">Anastasija S.</span>
<span class="appr-name">Anastasija T.</span>
<span class="appr-name">Andrej D.</span>
<span class="appr-name">Angela P.</span>
<span class="appr-name">Angelina S.</span>
<span class="appr-name">Anja K.</span>
<span class="appr-name">Anja T.</span>
<span class="appr-name">Atanas Č.</span>
<span class="appr-name">Bisera N.</span>
<span class="appr-name">Blagica E.</span>
<span class="appr-name">Borjan J.</span>
<span class="appr-name">Božidar J.</span>
<span class="appr-name">Damjan B.</span>
<span class="appr-name">Dijana D.</span>
<span class="appr-name">Dimitar Đ.</span>
<span class="appr-name">Elena A.</span>
<span class="appr-name">Elma M.</span>
<span class="appr-name">Emilija P.</span>
<span class="appr-name">Eva N.</span>
<span class="appr-name">Evgenija A.</span>
<span class="appr-name">Evgenija G.</span>
<span class="appr-name">Evgenija K.</span>
<span class="appr-name">Filimena N.</span>
<span class="appr-name">Gorjan V.</span>
<span class="appr-name">Hristijan A.</span>
<span class="appr-name">Hristijan B.</span>
<span class="appr-name">Hristijan J.</span>
<span class="appr-name">Hristijan K.</span>
<span class="appr-name">Hristijan M.</span>
<span class="appr-name">Igor A.</span>
<span class="appr-name">Ilija Č.</span>
<span class="appr-name">Ina M.</span>
<span class="appr-name">Jovana A. N.</span>
<span class="appr-name">Katerina S.</span>
<span class="appr-name">Kiara L.</span>
<span class="appr-name">Kiril T.</span>
<span class="appr-name">Kliment K.</span>
<span class="appr-name">Klimentina Č.</span>
<span class="appr-name">Kristijan P.</span> <span class="appr-name">Kristijan P.</span>
<span class="appr-name">Kristijan T.</span>
<span class="appr-name">Lea J.</span> <span class="appr-name">Lea J.</span>
<span class="appr-name">Marko A.</span> <span class="appr-name">Luka G.</span>
<span class="appr-name">Luka R.</span>
<span class="appr-name">Marija A.</span>
<span class="appr-name">Marija K.</span> <span class="appr-name">Marija K.</span>
<span class="appr-name">Marko A.</span>
<span class="appr-name">Marko Gj.</span>
<span class="appr-name">Marko I.</span>
<span class="appr-name">Matea A.</span>
<span class="appr-name">Mia C.</span>
<span class="appr-name">Mia K.</span>
<span class="appr-name">Miahela M.</span>
<span class="appr-name">Mihael T.</span>
<span class="appr-name">Mihaela N.</span>
<span class="appr-name">Mihaela T.</span>
<span class="appr-name">Mila D.</span>
<span class="appr-name">Monika J.</span>
<span class="appr-name">Monika V.</span> <span class="appr-name">Monika V.</span>
<span class="appr-name">Renata G.</span>
<span class="appr-name">Ria D.</span>
<span class="appr-name">Simona R.</span>
<span class="appr-name">Sofija M.</span>
<span class="appr-name">Stefan Gj.</span>
<span class="appr-name">Stefanija A.</span>
<span class="appr-name">Stojan B.</span>
<span class="appr-name">Teodor V.</span>
<span class="appr-name">Tijana A.</span>
<span class="appr-name">Tina M.</span>
<span class="appr-name">Vasil H.</span>
<span class="appr-name">Viktorija P.</span>
<span class="appr-name">Vladimir J.</span>
</div> </div>
<p class="appreciation-note">Začasno — celoten seznam članov in prijateljev je v pripravi.</p> <p class="appr-thanks">Vsakemu članu, nekdanjemu in sedanjemu, vsem, ki šele prihajajo, in vsem, ki so kadar koli prostovoljili, prispevali ali podprli MSOS na kakršen koli način: hvala. Vi ste srce te organizacije. <strong>To je naša zgodba in pišemo jo skupaj.</strong></p>
</section> </section>
</main> </main>