posodobitve headerjev in optimizacija slik

en/projects/testproject/index.html

@@ -18,54 +18,73 @@
 </head>
 <body>
 
-    <header class="dropdown-header-navigation">
-        <div class="container">
-            <div class="header-content">
-                <a href="../../" class="logo-link">
-                    <img src="../../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
-                </a>
-                <!-- Navigacija za namizje -->
-                <nav class="navigation desktop-nav">
-                    <a href="#">About us</a>
-                    <a href="#">For Students</a>
-                    <a href="../../projects/">Projects</a>
-                </nav>
-            </div>
+    <!-- START_HEADER -->
+<header class="dropdown-header-navigation">
+    <div class="container">
+        <div class="header-content">
+            <a href="../../../en/" class="logo-link">
+                <img src="../../../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
+            </a>
+            <!-- Desktop Navigation -->
+            <nav class="navigation desktop-nav">
+                <a href="#">About us</a>
+                <a href="#">For Students</a>
+                <a href="../../../en/projects/">Projects</a>
+            </nav>
+        </div>
 
-            <!-- Gumbi za namizje -->
+        <!-- Desktop Buttons -->
+        <div class="navigation-actions">
+            <button class="btn btn-secondary">Become a partner</button>
+            <button class="btn btn-primary">Donate</button>
+            <!-- Language Switcher -->
+            <div class="language-selector">
+                <div class="current-lang">
+                    <i class="fas fa-globe"></i>
+                    <span id="current-lang-code">EN</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">Македонски (MK)</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mobile Navigation Panel -->
+        <div class="mobile-nav-panel">
+            <nav class="navigation mobile-nav">
+                <a href="#">About us</a>
+                <a href="#">For Students</a>
+                <a href="../../../en/projects/">Projects</a>
+            </nav>
             <div class="navigation-actions">
                 <button class="btn btn-secondary">Become a partner</button>
                 <button class="btn btn-primary">Donate</button>
+                <!-- Language Switcher (for mobile) -->
                 <div class="language-selector">
-                    <i class="fas fa-globe"></i>
-                    <i class="fas fa-chevron-down"></i>
-                </div>
-            </div>
-
-            <!-- Panel za mobilno navigacijo (združuje povezave in gumbe) -->
-            <div class="mobile-nav-panel">
-                <nav class="navigation mobile-nav">
-                    <a href="#">About us</a>
-                    <a href="#">For Students</a>
-                    <a href="../../projects/">Projects</a>
-                </nav>
-                <div class="navigation-actions">
-                    <button class="btn btn-secondary">Become a partner</button>
-                    <button class="btn btn-primary">Donate</button>
-                    <div class="language-selector">
+                    <div class="current-lang">
                         <i class="fas fa-globe"></i>
+                        <span id="current-lang-code-mobile">EN</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">Македонски (MK)</a>
+                    </div>
                 </div>
             </div>
 
-             <!-- Ikona za mobilni meni (Hamburger/X) -->
+             <!-- Mobile Menu Icon (Hamburger/X) -->
             <div class="mobile-menu-icon">
                 <i class="fas fa-bars"></i>
                 <i class="fas fa-times"></i>
             </div>
         </div>
-    </header>
+</header>
+<!-- END_HEADER -->
 
     <main class="article-page">
         <article class="article-container">
@@ -76,7 +95,7 @@
             </header>
 
             <figure class="article-main-image">
-                <img src="../../images/msnl-1.jpg" alt="Atmosphere from the Macedonian Student Night in Ljubljana">
+                <img src="../../images/msnl-1.webp" alt="Atmosphere from the Macedonian Student Night in Ljubljana">
             </figure>
 
             <div class="article-body">
@@ -86,7 +105,7 @@
                 <p>It all began with a simple wish – to gather, get to know each other, and feel Macedonia, even though we were far from it. Kristijan Popovski, then a student at the School of Economics and Business in Ljubljana, shared his idea with a few colleagues, and the response was incredible. In less than two weeks, over 40 students joined the organizing team. Everyone contributed their enthusiasm and time, and the shared spirit and desire to connect turned this spontaneous initiative into an event we would remember for a long time.</p>
                 
                 <figure class="article-inline-image">
-                    <img src="../../images/msnl-2.png" alt="Preparations and meetings for the Macedonian Student Night">
+                    <img src="../../images/msnl-2.webp" alt="Preparations and meetings for the Macedonian Student Night">
                     <figcaption>Photos from the preparations and meetings for organizing the Macedonian Student Night.</figcaption>
                 </figure>
                 
@@ -94,7 +113,7 @@
                 <p>A week before the event, we posted interesting facts about Macedonia every day – its national treasures, music, and culture. Slowly but surely, we built the atmosphere and excitement, not only among Macedonian students but also among many others who wanted to feel our energy.</p>
 
                 <figure class="article-inline-image">
-                    <img src="../../images/msnl-3.jpg" alt="Poster where Slovenians learn the Macedonian alphabet">
+                    <img src="../../images/msnl-3.webp" alt="Poster where Slovenians learn the Macedonian alphabet">
                     <figcaption>Poster with Cyrillic and Latin letters. Slovenians are learning the Macedonian alphabet, while Macedonians are teaching them.</figcaption>
                 </figure>
 
@@ -107,14 +126,14 @@
                 <p>The party started at 8:00 PM and was designed in two parts. The first part was a real gastronomic and cultural journey through Macedonia. Students could try bread with ajvar and white cheese, Macedonian wine, tasty snacks, and traditional drinks. The tables were also filled with other authentic products that reminded everyone of home. All these flavors and aromas were made possible thanks to the support of the Macedonian products store <strong>“Makedonija Trade,”</strong> which selflessly contributed to making this part of the evening truly enjoyable.</p>
 
                 <figure class="article-inline-image">
-                    <img src="../../images/msnl-4.png" alt="Stands with Macedonian symbols, food, and drinks">
+                    <img src="../../images/msnl-4.webp" alt="Stands with Macedonian symbols, food, and drinks">
                     <figcaption>Photos of the stands with Macedonian symbols, traditional food, and drinks.</figcaption>
                 </figure>
 
                 <p>In addition to the food, visitors could explore interesting facts about the country, photos of famous Macedonian figures and cultural landmarks, and see traditional costumes and a <strong>gaida</strong> up close. The atmosphere was warm and full of curiosity – like a small exhibition within a large student party.</p>
                 
                 <figure class="article-inline-image">
-                    <img src="../../images/msnl-5.jpg" alt="Mini quiz about Macedonia">
+                    <img src="../../images/msnl-5.webp" alt="Mini quiz about Macedonia">
                     <figcaption>Mini quiz with questions about Macedonia, where students in one part of the club are competing.</figcaption>
                 </figure>
 
@@ -122,7 +141,7 @@
                 <p>The evening was enriched by the presence of important guests from the Macedonian community in Slovenia. <strong>The President of the Union of Macedonian Cultural Associations in Slovenia, Mr. Blagoja Nasteski</strong>, joined the event, confirming the importance of such initiatives for preserving the Macedonian spirit and tradition in the diaspora.</p>
 
                 <figure class="article-inline-image">
-                    <img src="../../images/msnl-6.jpg" alt="Kristijan and Bisera with Ambassador Zelenkovska and Mr. Nasteski">
+                    <img src="../../images/msnl-6.webp" alt="Kristijan and Bisera with Ambassador Zelenkovska and Mr. Nasteski">
                     <figcaption>Kristijan and Bisera together with Ambassador Zelenkovska and the President of the Union of Macedonian Associations, Mr. Nasteski</figcaption>
                 </figure>
 
@@ -139,7 +158,7 @@
                 <p>This night laid the foundation for the Macedonian Student Organization in Slovenia and showed us that with enthusiasm, unity, and a bit of courage, it's possible to create something that brings people together and gives them a sense of home – even when they are far away from it.</p>
 
                 <figure class="article-inline-image">
-                    <img src="../../images/msnl-7.jpg" alt="The dedicated team of volunteers after cleaning up the venue">
+                    <img src="../../images/msnl-7.webp" alt="The dedicated team of volunteers after cleaning up the venue">
                     <figcaption>Photo taken at 4:00 a.m., after finishing and cleaning up the venue together with the dedicated team of volunteers</figcaption>
                 </figure>
             </div>
@@ -148,7 +167,7 @@
                 <hr>
                 <div class="author-share-section">
                     <div class="author-details">
-                        <img src="../../images/11-boy.jpg" alt="Avatar of Kristijan Popovski">
+                        <img src="../../images/11-boy.webp" alt="Avatar of Kristijan Popovski">
                         <div class="author-text">
                             <p class="author-name">Kristijan Popovski</p>
                             <p class="author-title">President and Founder</p>
@@ -181,58 +200,60 @@
         </section>
     </main>
 
-   <!-- Footer je enak kot na domači strani -->
-    <footer>
-        <div class="footer-container">
-            <div class="footer-main">
-                <div class="footer-info">
-                    <div class="footer-logo">
-                        <img src="../images/13-whitelogo.png" alt="Macedonian Student Organisation in Slovenia Logo">
-                    </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>
+   <!-- 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="Macedonian Student Organisation in Slovenia Logo">
                 </div>
-                <div class="footer-links">
-                    <div class="links-column">
-                        <h4>For students</h4>
-                        <a href="#">Blog</a>
-                        <a href="#">Gallery</a>
-                        <a href="#">FAQs</a>
-                        <a href="#">Brochure</a>
-                    </div>
-                    <div class="links-column">
-                        <h4>Projects</h4>
-                        <a href="#">Upcoming</a>
-                        <a href="#">Previous</a>
-                    </div>
-                    <div class="links-column">
-                        <h4>Organisation</h4>
-                        <a href="#">About us</a>
-                        <a href="#">Contact</a>
-                        <a href="#">Documentation</a>
-                    </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>
-            <hr>
-            <div class="footer-bottom">
-                 <p>© MSOS org 2023 All rights reserved.</p>
-                <div class="legal-links">
-                    <a href="#">Privacy policy</a>
-                    <a href="#">Cookie Policy</a>
-                    <a href="#">Legal Terms</a>
+            <div class="footer-links">
+                <div class="links-column">
+                    <h4>For students</h4>
+                    <a href="#">Blog</a>
+                    <a href="#">Gallery</a>
+                    <a href="#">FAQs</a>
+                    <a href="#">Brochure</a>
+                </div>
+                <div class="links-column">
+                    <h4>Projects</h4>
+                    <a href="#">Upcoming</a>
+                    <a href="#">Previous</a>
+                </div>
+                <div class="links-column">
+                    <h4>Organisation</h4>
+                    <a href="#">About us</a>
+                    <a href="#">Contact</a>
+                    <a href="#">Documentation</a>
                 </div>
             </div>
         </div>
-    </footer>
+        <hr>
+        <div class="footer-bottom">
+             <p>© MSOS org 2023 All rights reserved.</p>
+            <div class="legal-links">
+                <a href="#">Privacy policy</a>
+                <a href="#">Cookie Policy</a>
+                <a href="#">Legal Terms</a>
+            </div>
+        </div>
+    </div>
+    <script src="../../../main.js"></script>
+</footer>
+<!-- END_FOOTER -->
 
     <script src="../../main.js"></script>
 </body>