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

Compare commits

base: mark:30bc83e064c3bccb4b5075f57bde1853b729222b
Branches Tags
mark:master
mark:develop
mark:kristijan-dev
...
compare: mark:a7782eb28fff7e684404d4452da268b01a3f1673
Branches Tags
mark:master
mark:develop
mark:kristijan-dev

2 Commits
30bc83e064 ... a7782eb28f

Author SHA1 Message Date
popovskik a7782eb28f Turn membership "ways to join" grid into Hub-style slider 
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>
 2026-08-05 12:50:39 +02:00
popovskik 764cf1ee66 Add real Hub photos to msos-hub sections 
Replace the temporary placeholder images in the "What you can do here"
and "A glimpse of the space" sections with the final Hub photos
(converted to WebP) across EN/MK/SI, and drop the placeholder notes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-08-05 12:50:28 +02:00
17 changed files with 147 additions and 118 deletions
Show Stats Expand all files Collapse all files

31
css/pages/_member.css
View File

@ -76,13 +76,30 @@
.mm-num-label { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,0.85); }
.mm-numbers-section .mm-note { color: rgba(255,255,255,0.6); margin-top: 24px; }
/* ---- ways ---- */
.mm-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mm-way { border: 1px solid #EAECF0; border-radius: 16px; padding: 24px; background: #FFFFFF; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.mm-way:hover { border-color: #F6C9A8; box-shadow: 0 10px 22px rgba(242,118,46,0.10); }
.mm-way-ico { font-size: 22px; color: var(--mm-teal); margin-bottom: 12px; }
.mm-way h3 { font-size: 17px; margin: 0 0 6px; }
.mm-way p { font-size: 14px; line-height: 22px; color: #667085; margin: 0; }
/* ---- ways (hub-style auto-scrolling slider) ---- */
/* Mechanics (.hub-carousel/.hub-uses/.hub-track/.hub-group) and the marquee
animation are reused from _hub.css; the JS clone step (setupHubCarousel) runs
on every page and picks up the .hub-track here. These rules only restyle the
card body for icon-based cards (no photo). */
.mm-ways-carousel { margin-top: 4px; }
.mm-use {
display: flex; flex-direction: column; justify-content: space-between;
gap: 18px; padding: 24px 22px;
width: clamp(240px, 24vw, 300px);
aspect-ratio: 5 / 6;
}
/* No photo here, so drop the hub image-legibility overlay. */
.mm-use::after { display: none; }
.mm-use-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 14px;
background: rgba(255, 255, 255, 0.18);
color: #fff; font-size: 23px; flex: 0 0 auto;
}
/* Body is absolute-positioned for photo cards in _hub.css; here it flows normally. */
.mm-use .hub-use-body { position: static; padding: 0; gap: 6px; }
.mm-use .hub-use-body h3 { font-size: 19px; line-height: 1.25; }
.mm-use .hub-use-body p { font-size: 14px; line-height: 21px; }
/* ---- membership in real life ---- */
.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }

56
en/become-a-member/index.html
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>

22
en/msos-hub/index.html
View File

@ -231,44 +231,43 @@
<div class="hub-uses">
<div class="hub-track">
<div class="hub-group">
<!-- NOTE: hub-use-img src values are temporary placeholders. Replace with the final photos. -->
<div class="hub-use">
<img width="1920" height="1317" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-2.webp" alt="Cultural evening at the Hub">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-cultural.webp" alt="Cultural evening at the Hub">
<div class="hub-use-body">
<h3>Cultural &amp; niche events</h3>
<p>Small cultural evenings, talks, exhibitions and community happenings.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1280" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image1.webp" alt="A celebration at the Hub">
<img width="461" height="827" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-birthdays.webp" alt="A celebration at the Hub">
<div class="hub-use-body">
<h3>Birthdays &amp; celebrations</h3>
<p>Host a birthday, a name day or any celebration with your friends.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1337" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Watching sports together at the Hub">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-sports.webp" alt="Watching sports together at the Hub">
<div class="hub-use-body">
<h3>Sports watching</h3>
<p>Gather to cheer on the game together on the projector screen.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1341" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Music and dancing at the Hub">
<img width="1600" height="1200" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-singing.webp" alt="Music and dancing at the Hub">
<div class="hub-use-body">
<h3>Singing &amp; dancing</h3>
<p>An evening of music, singing and dancing, with the piano right there.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1280" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image3.webp" alt="A meeting at the Hub">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-meetings.webp" alt="A meeting at the Hub">
<div class="hub-use-body">
<h3>Meetings</h3>
<p>A quiet, equipped room for club, society or team meetings.</p>
</div>
</div>
<div class="hub-use">
<img width="1317" height="877" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image5.webp" alt="Project work at the Hub">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-project.webp" alt="Project work at the Hub">
<div class="hub-use-body">
<h3>Project work</h3>
<p>Space to focus, brainstorm on the whiteboard and get things done together.</p>
@ -306,12 +305,11 @@
<h2 class="hub-h2">A glimpse of the space</h2>
<p class="hub-sub">Photos of the finished Hub are on the way. For now, here is what we&rsquo;ll be showing.</p>
</div>
<!-- NOTE: hub-shot images are temporary placeholders. Replace with the final Hub photos. -->
<div class="hub-gallery">
<figure class="hub-shot"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="A gathering at the Hub"></figure>
<figure class="hub-shot"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../images/event3-photo-3.webp" alt="An event in the Hub space"></figure>
<figure class="hub-shot"><img width="1425" height="950" loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="People together at the Hub"></figure>
<figure class="hub-shot"><img width="960" height="540" loading="lazy" decoding="async" src="../../images/event3-photo-9.webp" alt="A moment from an event at the Hub"></figure>
<figure class="hub-shot"><img width="900" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-1.webp" alt="A gathering at the Hub"></figure>
<figure class="hub-shot"><img width="900" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-2.webp" alt="An event in the Hub space"></figure>
<figure class="hub-shot"><img width="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-3.webp" alt="People together at the Hub"></figure>
<figure class="hub-shot"><img width="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-4.webp" alt="A moment from an event at the Hub"></figure>
</div>
</section>

BIN
images/hub-shot-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
images/hub-shot-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
images/hub-shot-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
images/hub-shot-4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
images/hub-use-birthdays.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
images/hub-use-cultural.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
images/hub-use-meetings.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
images/hub-use-project.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
images/hub-use-singing.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
images/hub-use-sports.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

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

@ -260,31 +260,37 @@
<section class="mm-section">
<h2 class="mm-h2">Има повеќе начини да бидеш дел од МСОС</h2>
<p class="mm-lead">Не мора да организираш настани или да водиш за да припаѓаш. Приклучи се на начин што ти одговара.</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>Остани поврзан</h3><p>Примај новости и знај што се случува.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
<h3>Приклучи се на заедницата</h3><p>Доаѓај на настани, запознавај луѓе и учествувај кога ти одговара.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
<h3>Волонтирај повремено</h3><p>Помагај на избрани активности без долгорочна обврска.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
<h3>Приклучи се на проекти</h3><p>Придонеси на конкретни иницијативи, кампањи, водичи или соработки.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
<h3>Организирај настани</h3><p>Помагај да се планираат, координираат, промовираат и реализираат активности.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
<h3>Преземи одговорност</h3><p>Истражи лидерство, управување, застапување или улоги во локален тим.</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>Остани поврзан</h3><p>Примај новости и знај што се случува.</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>Приклучи се на заедницата</h3><p>Доаѓај на настани, запознавај луѓе и учествувај кога ти одговара.</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>Волонтирај повремено</h3><p>Помагај на избрани активности без долгорочна обврска.</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>Приклучи се на проекти</h3><p>Придонеси на конкретни иницијативи, кампањи, водичи или соработки.</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>Организирај настани</h3><p>Помагај да се планираат, координираат, промовираат и реализираат активности.</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>Преземи одговорност</h3><p>Истражи лидерство, управување, застапување или улоги во локален тим.</p></div>
</article>
</div>
</div>
</div>
</div>
</section>

22
mk/msos-hub/index.html
View File

@ -231,44 +231,43 @@
<div class="hub-uses">
<div class="hub-track">
<div class="hub-group">
<!-- NOTE: hub-use-img src values are temporary placeholders. Replace with the final photos. -->
<div class="hub-use">
<img width="1920" height="1317" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-2.webp" alt="Културна вечер во Hub">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-cultural.webp" alt="Културна вечер во Hub">
<div class="hub-use-body">
<h3>Културни и специфични настани</h3>
<p>Мали културни вечери, предавања, изложби и настани на заедницата.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1280" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image1.webp" alt="Прослава во Hub">
<img width="461" height="827" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-birthdays.webp" alt="Прослава во Hub">
<div class="hub-use-body">
<h3>Родендени и прослави</h3>
<p>Организирај роденден, имен ден или каква било прослава со твоите пријатели.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1337" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Заедничко гледање спорт во Hub">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-sports.webp" alt="Заедничко гледање спорт во Hub">
<div class="hub-use-body">
<h3>Гледање спорт</h3>
<p>Соберете се да навивате за натпреварот заедно на платното на проекторот.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1341" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Музика и танцување во Hub">
<img width="1600" height="1200" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-singing.webp" alt="Музика и танцување во Hub">
<div class="hub-use-body">
<h3>Пеење и танцување</h3>
<p>Вечер на музика, пеење и танцување, а пијаното е токму тука.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1280" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image3.webp" alt="Состанок во Hub">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-meetings.webp" alt="Состанок во Hub">
<div class="hub-use-body">
<h3>Состаноци</h3>
<p>Тивка, опремена просторија за состаноци на клубови, друштва или тимови.</p>
</div>
</div>
<div class="hub-use">
<img width="1317" height="877" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image5.webp" alt="Проектна работа во Hub">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-project.webp" alt="Проектна работа во Hub">
<div class="hub-use-body">
<h3>Проектна работа</h3>
<p>Простор за фокусирање, размислување на белата табла и заедничко завршување на работите.</p>
@ -306,12 +305,11 @@
<h2 class="hub-h2">Како изгледа просторот</h2>
<p class="hub-sub">Фотографиите од завршениот Хаб пристигнуваат. Засега, еве што можеме да ви покажеме.</p>
</div>
<!-- NOTE: hub-shot images are temporary placeholders. Replace with the final Hub photos. -->
<div class="hub-gallery">
<figure class="hub-shot"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Собир во Хабот"></figure>
<figure class="hub-shot"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../images/event3-photo-3.webp" alt="Настан во просторот на Хабот"></figure>
<figure class="hub-shot"><img width="1425" height="950" loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Луѓе заедно во Хабот"></figure>
<figure class="hub-shot"><img width="960" height="540" loading="lazy" decoding="async" src="../../images/event3-photo-9.webp" alt="Момент од настан во Хабот"></figure>
<figure class="hub-shot"><img width="900" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-1.webp" alt="Собир во Хабот"></figure>
<figure class="hub-shot"><img width="900" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-2.webp" alt="Настан во просторот на Хабот"></figure>
<figure class="hub-shot"><img width="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-3.webp" alt="Луѓе заедно во Хабот"></figure>
<figure class="hub-shot"><img width="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-4.webp" alt="Момент од настан во Хабот"></figure>
</div>
</section>

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

@ -261,31 +261,37 @@
<section class="mm-section">
<h2 class="mm-h2">Obstaja več načinov, da si del MSOS</h2>
<p class="mm-lead">Ni ti treba organizirati dogodkov ali voditi, da pripadaš. Pridruži se na način, ki ti ustreza.</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>Ostani povezan</h3><p>Prejemaj novice in vedi, kaj se dogaja.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
<h3>Pridruži se skupnosti</h3><p>Obišči dogodke, spoznaj ljudi in sodeluj, ko ti ustreza.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
<h3>Občasno prostovoljči</h3><p>Pomagaj pri izbranih dejavnostih brez dolgoročne zaveze.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
<h3>Pridruži se projektom</h3><p>Prispevaj k pobudam, kampanjam, vodnikom ali sodelovanjem.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
<h3>Organiziraj dogodke</h3><p>Pomagaj načrtovati, usklajevati, promovirati in izvesti dejavnosti.</p>
</article>
<article class="mm-way">
<div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
<h3>Prevzemi odgovornost</h3><p>Razišči vodenje, upravljanje, zastopanje ali vloge v lokalni ekipi.</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>Ostani povezan</h3><p>Prejemaj novice in vedi, kaj se dogaja.</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>Pridruži se skupnosti</h3><p>Obišči dogodke, spoznaj ljudi in sodeluj, ko ti ustreza.</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>Občasno prostovoljči</h3><p>Pomagaj pri izbranih dejavnostih brez dolgoročne zaveze.</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>Pridruži se projektom</h3><p>Prispevaj k pobudam, kampanjam, vodnikom ali sodelovanjem.</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>Organiziraj dogodke</h3><p>Pomagaj načrtovati, usklajevati, promovirati in izvesti dejavnosti.</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>Prevzemi odgovornost</h3><p>Razišči vodenje, upravljanje, zastopanje ali vloge v lokalni ekipi.</p></div>
</article>
</div>
</div>
</div>
</div>
</section>

22
si/msos-hub/index.html
View File

@ -231,44 +231,43 @@
<div class="hub-uses">
<div class="hub-track">
<div class="hub-group">
<!-- NOTE: hub-use-img src values are temporary placeholders. Replace with the final photos. -->
<div class="hub-use">
<img width="1920" height="1317" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-2.webp" alt="Kulturni večer v Hubu">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-cultural.webp" alt="Kulturni večer v Hubu">
<div class="hub-use-body">
<h3>Kulturni &amp; posebni dogodki</h3>
<p>Manjši kulturni večeri, predavanja, razstave in dogodki skupnosti.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1280" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image1.webp" alt="Praznovanje v Hubu">
<img width="461" height="827" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-birthdays.webp" alt="Praznovanje v Hubu">
<div class="hub-use-body">
<h3>Rojstni dnevi &amp; praznovanja</h3>
<p>Priredi rojstni dan, god ali katero koli praznovanje s prijatelji.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1337" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Skupni ogled športa v Hubu">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-sports.webp" alt="Skupni ogled športa v Hubu">
<div class="hub-use-body">
<h3>Ogled športa</h3>
<p>Zberite se in skupaj navijajte za tekmo na velikem platnu.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1341" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Glasba in ples v Hubu">
<img width="1600" height="1200" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-singing.webp" alt="Glasba in ples v Hubu">
<div class="hub-use-body">
<h3>Petje &amp; ples</h3>
<p>Večer glasbe, petja in plesa, klavir pa je kar tukaj.</p>
</div>
</div>
<div class="hub-use">
<img width="1920" height="1280" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image3.webp" alt="Sestanek v Hubu">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-meetings.webp" alt="Sestanek v Hubu">
<div class="hub-use-body">
<h3>Sestanki</h3>
<p>Miren, opremljen prostor za sestanke klubov, društev ali ekip.</p>
</div>
</div>
<div class="hub-use">
<img width="1317" height="877" class="hub-use-img" loading="lazy" decoding="async" src="../../images/event4-image5.webp" alt="Projektno delo v Hubu">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/hub-use-project.webp" alt="Projektno delo v Hubu">
<div class="hub-use-body">
<h3>Projektno delo</h3>
<p>Prostor za zbranost, razmišljanje na tabli in skupno opravljanje nalog.</p>
@ -306,12 +305,11 @@
<h2 class="hub-h2">Utrinek prostora</h2>
<p class="hub-sub">Fotografije dokončanega Huba so na poti. Za zdaj pa je tukaj, kaj bomo prikazali.</p>
</div>
<!-- NOTE: hub-shot images are temporary placeholders. Replace with the final Hub photos. -->
<div class="hub-gallery">
<figure class="hub-shot"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Druženje v Hubu"></figure>
<figure class="hub-shot"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../images/event3-photo-3.webp" alt="Dogodek v prostoru Huba"></figure>
<figure class="hub-shot"><img width="1425" height="950" loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Ljudje skupaj v Hubu"></figure>
<figure class="hub-shot"><img width="960" height="540" loading="lazy" decoding="async" src="../../images/event3-photo-9.webp" alt="Trenutek z dogodka v Hubu"></figure>
<figure class="hub-shot"><img width="900" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-1.webp" alt="Druženje v Hubu"></figure>
<figure class="hub-shot"><img width="900" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-2.webp" alt="Dogodek v prostoru Huba"></figure>
<figure class="hub-shot"><img width="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-3.webp" alt="Ljudje skupaj v Hubu"></figure>
<figure class="hub-shot"><img width="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-4.webp" alt="Trenutek z dogodka v Hubu"></figure>
</div>
</section>