msos/si/get-to-know-slovenia/index.html

359 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="sl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spoznaj Slovenijo - 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" />
<!-- Povezava na glavno CSS datoteko -->
<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="../../si/" class="logo-link">
<img src="../../images/1-logo.png" alt="Logotip Makedonske študentske organizacije v Sloveniji" 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="#">O nas</a>
<ul class="dropdown-menu">
<li><a href="#">Časovnica in dosežki</a></li>
<li><a href="#">Naša ekipa, poslanstvo, vizija in vrednote</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Kaj delamo</a>
<ul class="dropdown-menu">
<li><a href="../../si/projects/">Dogodki in projekti</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Galerija</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Vključi se</a>
<ul class="dropdown-menu">
<li><a href="#">Postani član</a></li>
<li><a href="#">Podpri MŠOS</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Za študente</a>
<ul class="dropdown-menu">
<li><a href="#">Vodič za bruce</a></li>
<li><a href="#">Mentorski program</a></li>
<li><a href="#">Pogosta vprašanja</a></li>
<li><a href="../../si/get-to-know-slovenia/">Spoznaj Slovenijo</a></li>
<li><a href="../../si/get-to-know-macedonia/">Spoznaj Makedonijo</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Novice</a>
<ul class="dropdown-menu">
<li><a href="#">Obvestila</a></li>
<li><a href="#">Odprti pozivi</a></li>
<li><a href="#">Sporočila za javnost</a></li>
</ul>
</li>
</ul>
</nav>
<div class="navigation-actions">
<button class="btn btn-secondary">Postani član</button>
<button class="btn btn-primary">Doniraj</button>
<div class="language-selector">
<div class="current-lang">
<i class="fas fa-globe"></i>
<span id="current-lang-code">SI</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="#">O nas</a>
<ul class="dropdown-menu">
<li><a href="#">Časovnica in dosežki</a></li>
<li><a href="#">Naša ekipa, poslanstvo, vizija in vrednote</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Kaj delamo</a>
<ul class="dropdown-menu">
<li><a href="../../si/projects/">Dogodki in projekti</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Galerija</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Vključi se</a>
<ul class="dropdown-menu">
<li><a href="#">Postani član</a></li>
<li><a href="#">Podpri MŠOS</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Za študente</a>
<ul class="dropdown-menu">
<li><a href="#">Vodič za bruce</a></li>
<li><a href="#">Mentorski program</a></li>
<li><a href="#">Pogosta vprašanja</a></li>
<li><a href="../../si/get-to-know-slovenia/">Spoznaj Slovenijo</a></li>
<li><a href="../../si/get-to-know-macedonia/">Spoznaj Makedonijo</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Novice</a>
<ul class="dropdown-menu">
<li><a href="#">Obvestila</a></li>
<li><a href="#">Odprti pozivi</a></li>
<li><a href="#">Sporočila za javnost</a></li>
</ul>
</li>
</ul>
</nav>
<div class="navigation-actions">
<button class="btn btn-secondary">Postani član</button>
<button class="btn btn-primary">Doniraj</button>
<div class="language-selector">
<button class="current-lang" id="mobile-lang-trigger">
<i class="fas fa-globe"></i>
<span>SI</span>
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</div>
<!-- Modalno okno za izbiro jezika (za mobilni) -->
<div id="language-modal-overlay">
<div class="language-modal-content">
<div class="language-modal-header">
<h3>Izberi jezik</h3>
<button id="language-modal-close" aria-label="Zapri izbiro jezika">&times;</button>
</div>
<div class="language-modal-body">
<a href="#" data-lang="si" class="active-lang">Slovenščina (SI)</a>
<a href="#" data-lang="en">English (EN)</a>
<a href="#" data-lang="mk">Македонски (МК)</a>
</div>
</div>
</div>
<!-- END_HEADER -->
<main class="page-content">
<section class="page-header-section">
<div class="container text-center">
<span class="page-subtitle">Dežela, vredna odkrivanja</span>
<h1>Spoznaj Slovenijo</h1>
<p class="page-description">Slovenija je na zemljevidu morda majhna, vendar se med Alpami, Jadransko obalo, zelenimi rekami, starimi mesti in mirnimi kotički skriva veliko. V teh zgodbah delimo kraje, okuse, tradicije in vsakdanje podrobnosti, skozi katere smo tudi sami spoznavali državo, ki ji danes pravimo tudi dom.</p>
<form class="subscribe-form">
<input type="email" placeholder="Vnesite svoj e-mail">
<button type="submit" class="btn btn-primary-orange">Naroči se</button>
</form>
<p class="privacy-note">Skrbimo za vaše podatke v naši <a href="#">politiki zasebnosti</a>.</p>
</div>
</section>
<section class="filter-section">
<nav class="filter-nav" aria-label="Kategorije zgodb">
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">Vse zgodbe</button>
<button type="button" class="filter-pill" data-filter="places" aria-pressed="false">Kraji in narava</button>
<button type="button" class="filter-pill" data-filter="culture" aria-pressed="false">Kultura in tradicije</button>
<button type="button" class="filter-pill" data-filter="food" aria-pressed="false">Hrana in okusi</button>
<button type="button" class="filter-pill" data-filter="heritage" aria-pressed="false">Zgodovina in dediščina</button>
<button type="button" class="filter-pill" data-filter="identity" aria-pressed="false">Ljudje in identiteta</button>
</nav>
</section>
<section class="all-posts-section">
<div class="container column-layout">
<h2>Vse zgodbe</h2>
<div class="posts-grid">
<!-- Story: Dobrodošli v Sloveniji -->
<article class="post-card" data-category="identity">
<a href="welcome-to-slovenia/" class="post-link">
<img src="../../images/slovenia-welcome-hero.jpg" alt="Lake Jasna near Kranjska Gora, with mountain peaks reflected in the water" class="post-image">
<div class="post-content">
<p class="post-meta">MSOS Ekipa • Ljudje in identiteta</p>
<h3 class="post-title">Dobrodošli v Sloveniji</h3>
<p class="post-excerpt">Osebna predstavitev pokrajin, ritma in drobnih vsakdanjih podrobnosti, zaradi katerih Slovenija hitro postane domača.</p>
</div>
</a>
</article>
<!-- Story: Ljubljana skozi naše oči -->
<article class="post-card" data-category="places">
<a href="ljubljana-through-our-eyes/" class="post-link">
<div class="post-image post-image-placeholder">
<i class="fas fa-image" aria-hidden="true"></i>
<span>Slika bo dodana</span>
</div>
<div class="post-content">
<p class="post-meta">MSOS Ekipa • Kraji in narava</p>
<h3 class="post-title">Ljubljana skozi naše oči</h3>
<p class="post-excerpt">Ulice, soseske, navade in mirni kotički, skozi katere je Ljubljana postala del našega vsakdana.</p>
</div>
</a>
</article>
<!-- Story: Bled, več kot znameniti razgled -->
<article class="post-card" data-category="places">
<a href="lake-bled-beyond-the-famous-view/" class="post-link">
<div class="post-image post-image-placeholder">
<i class="fas fa-image" aria-hidden="true"></i>
<span>Slika bo dodana</span>
</div>
<div class="post-content">
<p class="post-meta">MSOS Ekipa • Kraji in narava</p>
<h3 class="post-title">Bled, več kot znameniti razgled</h3>
<p class="post-excerpt">Sprehod, vzdušje, bližnja narava in osebni trenutki, ki se skrivajo za najbolj znano podobo Bleda.</p>
</div>
</a>
</article>
<!-- Story: Prvi okus slovenske kuhinje -->
<article class="post-card" data-category="food">
<a href="a-first-taste-of-slovenian-food/" class="post-link">
<div class="post-image post-image-placeholder">
<i class="fas fa-image" aria-hidden="true"></i>
<span>Slika bo dodana</span>
</div>
<div class="post-content">
<p class="post-meta">MSOS Ekipa • Hrana in okusi</p>
<h3 class="post-title">Prvi okus slovenske kuhinje</h3>
<p class="post-excerpt">Topel uvod v jedi, regionalne okuse in kulinarična doživetja, ki pogosto ostanejo v spominu.</p>
</div>
</a>
</article>
<!-- Story: Slovenske navade, ki vas lahko presenetijo -->
<article class="post-card" data-category="culture">
<a href="slovenian-habits-that-may-surprise-you/" class="post-link">
<div class="post-image post-image-placeholder">
<i class="fas fa-image" aria-hidden="true"></i>
<span>Slika bo dodana</span>
</div>
<div class="post-content">
<p class="post-meta">MSOS Ekipa • Kultura in tradicije</p>
<h3 class="post-title">Slovenske navade, ki vas lahko presenetijo</h3>
<p class="post-excerpt">Vsakdanje navade in družbeni običaji, ki jih številni prišleki začnejo opažati po prihodu v Slovenijo.</p>
</div>
</a>
</article>
<!-- Story: Zgodbe Slovenije v kamnu in tradiciji -->
<article class="post-card" data-category="heritage">
<a href="slovenias-stories-in-stone-and-tradition/" class="post-link">
<div class="post-image post-image-placeholder">
<i class="fas fa-image" aria-hidden="true"></i>
<span>Slika bo dodana</span>
</div>
<div class="post-content">
<p class="post-meta">MSOS Ekipa • Zgodovina in dediščina</p>
<h3 class="post-title">Zgodbe Slovenije v kamnu in tradiciji</h3>
<p class="post-excerpt">Gradovi, stara mesta, obrti in tradicije, skozi katere slovenska preteklost ostaja prisotna v vsakdanjem življenju.</p>
</div>
</a>
</article>
</div>
<p class="filter-empty" hidden>Nobena zgodba še ne ustreza temu filtru.</p>
<nav class="pagination">
<a href="#" class="pagination-arrow"><i class="fas fa-arrow-left"></i> Prejšnja</a>
<div class="pagination-numbers">
<a href="#" class="page-number active">1</a>
</div>
<a href="#" class="pagination-arrow">Naslednja <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="Logotip Makedonske študentske organizacije v Sloveniji">
</div>
<p>
Masarykova cesta 24<br>
1000 Ljubljana, Slovenija<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>Za študente</h4>
<a href="#">Blog</a>
<a href="#">Galerija</a>
<a href="#">Pogosta vprašanja</a>
<a href="#">Brošura</a>
</div>
<div class="links-column">
<h4>Projekti</h4>
<a href="#">Prihajajoči</a>
<a href="#">Pretekli</a>
</div>
<div class="links-column">
<h4>Organizacija</h4>
<a href="#">O nas</a>
<a href="#">Kontakt</a>
<a href="#">Dokumentacija</a>
</div>
</div>
</div>
<hr>
<div class="footer-bottom">
<p>© MŠOS org 2023 Vse pravice pridržane.</p>
<div class="legal-links">
<a href="#">Politika zasebnosti</a>
<a href="#">Politika piškotkov</a>
<a href="#">Pravni pogoji</a>
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>