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-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; } .mm-numbers-section .mm-note { color: rgba(255,255,255,0.6); margin-top: 24px; }
/* ---- ways ---- */ /* ---- ways (hub-style auto-scrolling slider) ---- */
.mm-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } /* Mechanics (.hub-carousel/.hub-uses/.hub-track/.hub-group) and the marquee
.mm-way { border: 1px solid #EAECF0; border-radius: 16px; padding: 24px; background: #FFFFFF; transition: border-color 0.18s ease, box-shadow 0.18s ease; } animation are reused from _hub.css; the JS clone step (setupHubCarousel) runs
.mm-way:hover { border-color: #F6C9A8; box-shadow: 0 10px 22px rgba(242,118,46,0.10); } on every page and picks up the .hub-track here. These rules only restyle the
.mm-way-ico { font-size: 22px; color: var(--mm-teal); margin-bottom: 12px; } card body for icon-based cards (no photo). */
.mm-way h3 { font-size: 17px; margin: 0 0 6px; } .mm-ways-carousel { margin-top: 4px; }
.mm-way p { font-size: 14px; line-height: 22px; color: #667085; margin: 0; } .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 ---- */ /* ---- membership in real life ---- */
.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; } .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"> <section class="mm-section">
<h2 class="mm-h2">There is more than one way to be part of MSOS</h2> <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> <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"> <div class="hub-carousel mm-ways-carousel">
<article class="mm-way"> <div class="hub-uses">
<div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div> <div class="hub-track">
<h3>Stay connected</h3><p>Receive updates and know what is happening.</p> <div class="hub-group">
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div> <div class="hub-use-body"><h3>Stay connected</h3><p>Receive updates and know what is happening.</p></div>
<h3>Join the community</h3><p>Come to events, meet people and take part when it suits you.</p> </article>
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-hands-helping" 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>
<h3>Volunteer sometimes</h3><p>Help with selected activities without a long-term commitment.</p> </article>
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-diagram-project" 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>
<h3>Join projects</h3><p>Contribute to specific initiatives, campaigns, guides or collaborations.</p> </article>
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-calendar-check" 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>
<h3>Organise events</h3><p>Help plan, coordinate, promote and deliver activities.</p> </article>
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div> <div class="hub-use-body"><h3>Organise events</h3><p>Help plan, coordinate, promote and deliver activities.</p></div>
<h3>Take responsibility</h3><p>Explore leadership, governance, representation or local team roles.</p> </article>
</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> </div>
</section> </section>

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

@ -231,44 +231,43 @@
<div class="hub-uses"> <div class="hub-uses">
<div class="hub-track"> <div class="hub-track">
<div class="hub-group"> <div class="hub-group">
<!-- NOTE: hub-use-img src values are temporary placeholders. Replace with the final photos. -->
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Cultural &amp; niche events</h3> <h3>Cultural &amp; niche events</h3>
<p>Small cultural evenings, talks, exhibitions and community happenings.</p> <p>Small cultural evenings, talks, exhibitions and community happenings.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Birthdays &amp; celebrations</h3> <h3>Birthdays &amp; celebrations</h3>
<p>Host a birthday, a name day or any celebration with your friends.</p> <p>Host a birthday, a name day or any celebration with your friends.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Sports watching</h3> <h3>Sports watching</h3>
<p>Gather to cheer on the game together on the projector screen.</p> <p>Gather to cheer on the game together on the projector screen.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Singing &amp; dancing</h3> <h3>Singing &amp; dancing</h3>
<p>An evening of music, singing and dancing, with the piano right there.</p> <p>An evening of music, singing and dancing, with the piano right there.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Meetings</h3> <h3>Meetings</h3>
<p>A quiet, equipped room for club, society or team meetings.</p> <p>A quiet, equipped room for club, society or team meetings.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Project work</h3> <h3>Project work</h3>
<p>Space to focus, brainstorm on the whiteboard and get things done together.</p> <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> <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> <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> </div>
<!-- NOTE: hub-shot images are temporary placeholders. Replace with the final Hub photos. -->
<div class="hub-gallery"> <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="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="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="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="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="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="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="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-4.webp" alt="A moment from an event at the Hub"></figure>
</div> </div>
</section> </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"> <section class="mm-section">
<h2 class="mm-h2">Има повеќе начини да бидеш дел од МСОС</h2> <h2 class="mm-h2">Има повеќе начини да бидеш дел од МСОС</h2>
<p class="mm-lead">Не мора да организираш настани или да водиш за да припаѓаш. Приклучи се на начин што ти одговара.</p> <p class="mm-lead">Не мора да организираш настани или да водиш за да припаѓаш. Приклучи се на начин што ти одговара.</p>
<div class="mm-ways"> <div class="hub-carousel mm-ways-carousel">
<article class="mm-way"> <div class="hub-uses">
<div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div> <div class="hub-track">
<h3>Остани поврзан</h3><p>Примај новости и знај што се случува.</p> <div class="hub-group">
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div> <div class="hub-use-body"><h3>Остани поврзан</h3><p>Примај новости и знај што се случува.</p></div>
<h3>Приклучи се на заедницата</h3><p>Доаѓај на настани, запознавај луѓе и учествувај кога ти одговара.</p> </article>
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div> <div class="hub-use-body"><h3>Приклучи се на заедницата</h3><p>Доаѓај на настани, запознавај луѓе и учествувај кога ти одговара.</p></div>
<h3>Волонтирај повремено</h3><p>Помагај на избрани активности без долгорочна обврска.</p> </article>
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div> <div class="hub-use-body"><h3>Волонтирај повремено</h3><p>Помагај на избрани активности без долгорочна обврска.</p></div>
<h3>Приклучи се на проекти</h3><p>Придонеси на конкретни иницијативи, кампањи, водичи или соработки.</p> </article>
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div> <div class="hub-use-body"><h3>Приклучи се на проекти</h3><p>Придонеси на конкретни иницијативи, кампањи, водичи или соработки.</p></div>
<h3>Организирај настани</h3><p>Помагај да се планираат, координираат, промовираат и реализираат активности.</p> </article>
</article> <article class="hub-use mm-use">
<article class="mm-way"> <div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
<div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div> <div class="hub-use-body"><h3>Организирај настани</h3><p>Помагај да се планираат, координираат, промовираат и реализираат активности.</p></div>
<h3>Преземи одговорност</h3><p>Истражи лидерство, управување, застапување или улоги во локален тим.</p> </article>
</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> </div>
</section> </section>

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

@ -231,44 +231,43 @@
<div class="hub-uses"> <div class="hub-uses">
<div class="hub-track"> <div class="hub-track">
<div class="hub-group"> <div class="hub-group">
<!-- NOTE: hub-use-img src values are temporary placeholders. Replace with the final photos. -->
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Културни и специфични настани</h3> <h3>Културни и специфични настани</h3>
<p>Мали културни вечери, предавања, изложби и настани на заедницата.</p> <p>Мали културни вечери, предавања, изложби и настани на заедницата.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Родендени и прослави</h3> <h3>Родендени и прослави</h3>
<p>Организирај роденден, имен ден или каква било прослава со твоите пријатели.</p> <p>Организирај роденден, имен ден или каква било прослава со твоите пријатели.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Гледање спорт</h3> <h3>Гледање спорт</h3>
<p>Соберете се да навивате за натпреварот заедно на платното на проекторот.</p> <p>Соберете се да навивате за натпреварот заедно на платното на проекторот.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Пеење и танцување</h3> <h3>Пеење и танцување</h3>
<p>Вечер на музика, пеење и танцување, а пијаното е токму тука.</p> <p>Вечер на музика, пеење и танцување, а пијаното е токму тука.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Состаноци</h3> <h3>Состаноци</h3>
<p>Тивка, опремена просторија за состаноци на клубови, друштва или тимови.</p> <p>Тивка, опремена просторија за состаноци на клубови, друштва или тимови.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Проектна работа</h3> <h3>Проектна работа</h3>
<p>Простор за фокусирање, размислување на белата табла и заедничко завршување на работите.</p> <p>Простор за фокусирање, размислување на белата табла и заедничко завршување на работите.</p>
@ -306,12 +305,11 @@
<h2 class="hub-h2">Како изгледа просторот</h2> <h2 class="hub-h2">Како изгледа просторот</h2>
<p class="hub-sub">Фотографиите од завршениот Хаб пристигнуваат. Засега, еве што можеме да ви покажеме.</p> <p class="hub-sub">Фотографиите од завршениот Хаб пристигнуваат. Засега, еве што можеме да ви покажеме.</p>
</div> </div>
<!-- NOTE: hub-shot images are temporary placeholders. Replace with the final Hub photos. -->
<div class="hub-gallery"> <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="900" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-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="900" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-2.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="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-3.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="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-4.webp" alt="Момент од настан во Хабот"></figure>
</div> </div>
</section> </section>

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

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

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

@ -231,44 +231,43 @@
<div class="hub-uses"> <div class="hub-uses">
<div class="hub-track"> <div class="hub-track">
<div class="hub-group"> <div class="hub-group">
<!-- NOTE: hub-use-img src values are temporary placeholders. Replace with the final photos. -->
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Kulturni &amp; posebni dogodki</h3> <h3>Kulturni &amp; posebni dogodki</h3>
<p>Manjši kulturni večeri, predavanja, razstave in dogodki skupnosti.</p> <p>Manjši kulturni večeri, predavanja, razstave in dogodki skupnosti.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Rojstni dnevi &amp; praznovanja</h3> <h3>Rojstni dnevi &amp; praznovanja</h3>
<p>Priredi rojstni dan, god ali katero koli praznovanje s prijatelji.</p> <p>Priredi rojstni dan, god ali katero koli praznovanje s prijatelji.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Ogled športa</h3> <h3>Ogled športa</h3>
<p>Zberite se in skupaj navijajte za tekmo na velikem platnu.</p> <p>Zberite se in skupaj navijajte za tekmo na velikem platnu.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Petje &amp; ples</h3> <h3>Petje &amp; ples</h3>
<p>Večer glasbe, petja in plesa, klavir pa je kar tukaj.</p> <p>Večer glasbe, petja in plesa, klavir pa je kar tukaj.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Sestanki</h3> <h3>Sestanki</h3>
<p>Miren, opremljen prostor za sestanke klubov, društev ali ekip.</p> <p>Miren, opremljen prostor za sestanke klubov, društev ali ekip.</p>
</div> </div>
</div> </div>
<div class="hub-use"> <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"> <div class="hub-use-body">
<h3>Projektno delo</h3> <h3>Projektno delo</h3>
<p>Prostor za zbranost, razmišljanje na tabli in skupno opravljanje nalog.</p> <p>Prostor za zbranost, razmišljanje na tabli in skupno opravljanje nalog.</p>
@ -306,12 +305,11 @@
<h2 class="hub-h2">Utrinek prostora</h2> <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> <p class="hub-sub">Fotografije dokončanega Huba so na poti. Za zdaj pa je tukaj, kaj bomo prikazali.</p>
</div> </div>
<!-- NOTE: hub-shot images are temporary placeholders. Replace with the final Hub photos. -->
<div class="hub-gallery"> <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="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="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="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="1425" height="950" loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Ljudje skupaj v Hubu"></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="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="1200" height="1600" loading="lazy" decoding="async" src="../../images/hub-shot-4.webp" alt="Trenutek z dogodka v Hubu"></figure>
</div> </div>
</section> </section>