Files
msos/mk/get-to-know-macedonia/index.html
T
popovskikandClaude Opus 4.8 7502e5db27 Add the remaining Get to Know stories with sourced images
Complete the two country sections with the place, food, culture, and
heritage stories, so every hub card now leads to a full article instead
of a pending page.

Articles (EN/SI/MK each):
- Slovenia: Lake Bled Beyond the Famous View, A First Taste of Slovenian
  Food, Slovenian Habits That May Surprise You, and Slovenia's Stories in
  Stone and Tradition.
- Macedonia: Ohrid, More Than a Postcard, plus the earlier Skopje and
  Ljubljana stories that were still untracked.
- Table, Music and Dance, and History articles for Macedonia are in place
  and still use image placeholders until their photos are sourced.

Images:
- Real, sourced photos wired into every finished article, each with an
  attribution caption (place, photographer where known, source link).
  Images are center-cropped to a uniform 3:2 and downscaled; webp and
  jfif sources converted to jpg.
- Each article's hero image is reused on its hub card.
- Welcome to Macedonia now opens with Macedonia Square in Skopje; the
  Church of St. John at Kaneo photo moves to the Ohrid story.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-29 11:04:06 +02:00

353 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Запознај ја Македонија - MSOS</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome (for icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Поврзување до главната CSS-датотека -->
<link rel="stylesheet" href="../../css/main.css">
</head>
<body>
<!-- START_HEADER -->
<header class="dropdown-header-navigation">
<div class="container">
<!-- Logotip je zdaj samostojen element na levi strani -->
<a href="../../mk/" class="logo-link">
<img src="../../images/1-logo.png" alt="Лого на Македонска студентска организација во Словенија" class="logo-img">
</a>
<!-- Nov ovoj za vse elemente na desni strani -->
<div class="header-right-wrapper">
<nav>
<ul class="navigation desktop-nav">
<li class="menu-item menu-item-has-children">
<a href="#">За нас</a>
<ul class="dropdown-menu">
<li><a href="#">Времеплов и достигнувања</a></li>
<li><a href="#">Нашиот тим, мисија, визија и вредности</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Што работиме</a>
<ul class="dropdown-menu">
<li><a href="../../mk/projects/">Настани и проекти</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Галерија</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Вклучи се</a>
<ul class="dropdown-menu">
<li><a href="#">Стани член</a></li>
<li><a href="#">Поддржи ја МСОС</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">За студенти</a>
<ul class="dropdown-menu">
<li><a href="#">Водич за добредојде</a></li>
<li><a href="#">Менторска програма</a></li>
<li><a href="#">Често поставувани прашања</a></li>
<li><a href="../../mk/get-to-know-slovenia/">Запознај ја Словенија</a></li>
<li><a href="../../mk/get-to-know-macedonia/">Запознај ја Македонија</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Новости</a>
<ul class="dropdown-menu">
<li><a href="#">Соопштенија</a></li>
<li><a href="#">Отворени повици</a></li>
<li><a href="#">Соопштенија за медиуми</a></li>
</ul>
</li>
</ul>
</nav>
<div class="navigation-actions">
<button class="btn btn-secondary">Стани член</button>
<button class="btn btn-primary">Донирај</button>
<div class="language-selector">
<div class="current-lang">
<i class="fas fa-globe"></i>
<span id="current-lang-code">МК</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="lang-dropdown">
<a href="#" data-lang="si">Slovenščina (SI)</a>
<a href="#" data-lang="en">English (EN)</a>
<a href="#" data-lang="mk">Македонски (МК)</a>
</div>
</div>
</div>
</div>
<!-- Ikona za mobilni meni ostaja ločena za lažje upravljanje -->
<div class="mobile-menu-icon">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
</div>
</header>
<!-- Panel za mobilno navigacijo -->
<div class="mobile-nav-panel">
<nav>
<ul class="navigation mobile-nav">
<li class="menu-item menu-item-has-children">
<a href="#">За нас</a>
<ul class="dropdown-menu">
<li><a href="#">Времеплов и достигнувања</a></li>
<li><a href="#">Нашиот тим, мисија, визија и вредности</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Што работиме</a>
<ul class="dropdown-menu">
<li><a href="../../mk/projects/">Настани и проекти</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Галерија</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Вклучи се</a>
<ul class="dropdown-menu">
<li><a href="#">Стани член</a></li>
<li><a href="#">Поддржи ја МСОС</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">За студенти</a>
<ul class="dropdown-menu">
<li><a href="#">Водич за добредојде</a></li>
<li><a href="#">Менторска програма</a></li>
<li><a href="#">Често поставувани прашања</a></li>
<li><a href="../../mk/get-to-know-slovenia/">Запознај ја Словенија</a></li>
<li><a href="../../mk/get-to-know-macedonia/">Запознај ја Македонија</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Новости</a>
<ul class="dropdown-menu">
<li><a href="#">Соопштенија</a></li>
<li><a href="#">Отворени повици</a></li>
<li><a href="#">Соопштенија за медиуми</a></li>
</ul>
</li>
</ul>
</nav>
<div class="navigation-actions">
<button class="btn btn-secondary">Стани член</button>
<button class="btn btn-primary">Донирај</button>
<div class="language-selector">
<button class="current-lang" id="mobile-lang-trigger">
<i class="fas fa-globe"></i>
<span>МК</span>
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</div>
<!-- Modalno okno za izbiro na jazik (za mobilni) -->
<div id="language-modal-overlay">
<div class="language-modal-content">
<div class="language-modal-header">
<h3>Избери јазик</h3>
<button id="language-modal-close" aria-label="Затвори избор на јазик">&times;</button>
</div>
<div class="language-modal-body">
<a href="#" data-lang="si">Slovenščina (SI)</a>
<a href="#" data-lang="en">English (EN)</a>
<a href="#" data-lang="mk" class="active-lang">Македонски (МК)</a>
</div>
</div>
</div>
<!-- END_HEADER -->
<main class="page-content">
<section class="page-header-section">
<div class="container text-center">
<span class="page-subtitle">Приказни од дома</span>
<h1>Запознај ја Македонија</h1>
<p class="page-description">Македонија не е само место на картата. Таа е трпеза на која секогаш има место за уште еден човек, музика што нè зближува, планини на хоризонтот и разговори што продолжуваат долго по последното кафе. Ова се местата, традициите, вкусовите и приказните што ги носиме со себе и сакаме да ги споделиме со вас.</p>
<form class="subscribe-form">
<input type="email" placeholder="Внесете ја вашата е-пошта">
<button type="submit" class="btn btn-primary-orange">Претплати се</button>
</form>
<p class="privacy-note">Ние се грижиме за вашите податоци во нашата <a href="#">политика за приватност</a></p>
</div>
</section>
<section class="filter-section">
<nav class="filter-nav" aria-label="Категории на приказни">
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">Сите приказни</button>
<button type="button" class="filter-pill" data-filter="places" aria-pressed="false">Места и природа</button>
<button type="button" class="filter-pill" data-filter="culture" aria-pressed="false">Култура и традиции</button>
<button type="button" class="filter-pill" data-filter="food" aria-pressed="false">Храна и вкусови</button>
<button type="button" class="filter-pill" data-filter="heritage" aria-pressed="false">Историја и наследство</button>
<button type="button" class="filter-pill" data-filter="identity" aria-pressed="false">Луѓе и идентитет</button>
</nav>
</section>
<section class="all-posts-section">
<div class="container column-layout">
<h2>Сите приказни</h2>
<div class="posts-grid">
<!-- Story: Добредојдовте во Македонија -->
<article class="post-card" data-category="identity">
<a href="welcome-to-macedonia/" class="post-link">
<img src="../../images/macedonia-welcome-skopje-square-hero.jpg" alt="Macedonia Square in central Skopje" class="post-image">
<div class="post-content">
<p class="post-meta">Тим на МСОС • Луѓе и идентитет</p>
<h3 class="post-title">Добредојдовте во Македонија</h3>
<p class="post-excerpt">Личен вовед во топлината, контрастите, природата и секојдневните моменти поради кои Македонија е дом.</p>
</div>
</a>
</article>
<!-- Story: Охрид, повеќе од разгледница -->
<article class="post-card" data-category="places">
<a href="ohrid-more-than-a-postcard/" class="post-link">
<img src="../../images/macedonia-ohrid-kaneo-hero.jpg" alt="The Church of St. John at Kaneo above Lake Ohrid" class="post-image">
<div class="post-content">
<p class="post-meta">Тим на МСОС • Места и природа</p>
<h3 class="post-title">Охрид, повеќе од разгледница</h3>
<p class="post-excerpt">Езерото, старите улици, маалата, звуците и спомените поради кои Охрид е многу повеќе од убава глетка.</p>
</div>
</a>
</article>
<!-- Story: Скопје, град со многу слоеви -->
<article class="post-card" data-category="places">
<a href="skopje-a-city-of-many-layers/" class="post-link">
<img src="../../images/macedonia-skopje-stone-bridge-hero.jpg" alt="The Stone Bridge over the Vardar in Skopje" class="post-image">
<div class="post-content">
<p class="post-meta">Тим на МСОС • Места и природа</p>
<h3 class="post-title">Скопје, град со многу слоеви</h3>
<p class="post-excerpt">Град обликуван од различни периоди, маала, заедници и контрасти што живеат едни покрај други.</p>
</div>
</a>
</article>
<!-- Story: Македонија на полна трпеза -->
<article class="post-card" data-category="food">
<a href="a-table-full-of-macedonia/" class="post-link">
<div class="post-image post-image-placeholder">
<i class="fas fa-image" aria-hidden="true"></i>
<span>Слика ќе се додаде</span>
</div>
<div class="post-content">
<p class="post-meta">Тим на МСОС • Храна и вкусови</p>
<h3 class="post-title">Македонија на полна трпеза</h3>
<p class="post-excerpt">Јадењата, вкусовите, разговорите и гостопримството поради кои заедничкиот оброк станува нешто многу поголемо.</p>
</div>
</a>
</article>
<!-- Story: Музика, оро и моментите што нè спојуваат -->
<article class="post-card" data-category="culture">
<a href="music-dance-and-the-moments-that-bring-us-together/" class="post-link">
<div class="post-image post-image-placeholder">
<i class="fas fa-image" aria-hidden="true"></i>
<span>Слика ќе се додаде</span>
</div>
<div class="post-content">
<p class="post-meta">Тим на МСОС • Култура и традиции</p>
<h3 class="post-title">Музика, оро и моментите што нè спојуваат</h3>
<p class="post-excerpt">Како песните, орото, прославите и познатите ритми создаваат чувство на припадност низ генерациите.</p>
</div>
</a>
</article>
<!-- Story: Историја низ која сè уште можеме да чекориме -->
<article class="post-card" data-category="heritage">
<a href="history-you-can-still-walk-through/" class="post-link">
<div class="post-image post-image-placeholder">
<i class="fas fa-image" aria-hidden="true"></i>
<span>Слика ќе се додаде</span>
</div>
<div class="post-content">
<p class="post-meta">Тим на МСОС • Историја и наследство</p>
<h3 class="post-title">Историја низ која сè уште можеме да чекориме</h3>
<p class="post-excerpt">Антички локалитети, стари чаршии, цркви, манастири и градови во кои македонската историја сè уште се чувствува блиску.</p>
</div>
</a>
</article>
</div>
<p class="filter-empty" hidden>Ниту една приказна сè уште не одговара на овој филтер.</p>
<nav class="pagination">
<a href="#" class="pagination-arrow"><i class="fas fa-arrow-left"></i> Претходна</a>
<div class="pagination-numbers">
<a href="#" class="page-number active">1</a>
</div>
<a href="#" class="pagination-arrow">Следна <i class="fas fa-arrow-right"></i></a>
</nav>
</div>
</section>
</main>
<!-- START_FOOTER -->
<footer>
<div class="footer-container">
<div class="footer-main">
<div class="footer-info">
<div class="footer-logo">
<img src="../../images/13-whitelogo.png" alt="Лого на Македонска студентска организација во Словенија">
</div>
<p>
Masarykova cesta 24<br>
1000 Ljubljana, Slovenia<br>
+389 02 123 4567<br>
info.msosorg@gmail.com
</p>
<div class="social-icons">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-links">
<div class="links-column">
<h4>За студенти</h4>
<a href="#">Блог</a>
<a href="#">Галерија</a>
<a href="#">ЧПП</a>
<a href="#">Брошура</a>
</div>
<div class="links-column">
<h4>Проекти</h4>
<a href="#">Претстојни</a>
<a href="#">Претходни</a>
</div>
<div class="links-column">
<h4>Организација</h4>
<a href="#">За нас</a>
<a href="#">Контакт</a>
<a href="#">Документација</a>
</div>
</div>
</div>
<hr>
<div class="footer-bottom">
<p>© МСОС орг 2023 Сите права се задржани.</p>
<div class="legal-links">
<a href="#">Политика за приватност</a>
<a href="#">Политика за колачиња</a>
<a href="#">Правни услови</a>
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>