483 lines
25 KiB
HTML
483 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Macedonian Student Organisation in Slovenia</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" />
|
||
|
||
<!-- Link to the main CSS file (corrected path) -->
|
||
<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="../en/" class="logo-link">
|
||
<img src="../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" 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="#">Who We Are</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="../en/timeline-and-milestones/">Timeline & Milestones</a></li>
|
||
<li><a href="../en/about-us/">Our team, mission, vision & core values</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">What We Do</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="../en/projects/">Event & Projects</a></li>
|
||
<li><a href="#">Blog</a></li>
|
||
<li><a href="#">Gallery</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Get Involved</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Become a member</a></li>
|
||
<li><a href="#">Support MSOS</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">For Students</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Student Welcome Guide</a></li>
|
||
<li><a href="#">Mentorship Programme</a></li>
|
||
<li><a href="#">FAQs</a></li>
|
||
<li><a href="#">Get to know Slovenia</a></li>
|
||
<li><a href="#">Get to know North Macedonia</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">News</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Announcements</a></li>
|
||
<li><a href="#">Open calls</a></li>
|
||
<li><a href="#">Press releases</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<div class="navigation-actions">
|
||
<button class="btn btn-secondary">Become a member</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">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>
|
||
</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 (struktura ostaja enaka) -->
|
||
<div class="mobile-nav-panel">
|
||
<nav>
|
||
<ul class="navigation mobile-nav">
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Who We Are</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="../en/timeline-and-milestones/">Timeline & Milestones</a></li>
|
||
<li><a href="../en/about-us/">Our team, mission, vision & core values</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">What We Do</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="../en/projects/">Event & Projects</a></li>
|
||
<li><a href="#">Blog</a></li>
|
||
<li><a href="#">Gallery</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Get Involved</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Become a member</a></li>
|
||
<li><a href="#">Support MSOS</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">For Students</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Student Welcome Guide</a></li>
|
||
<li><a href="#">Mentorship Programme</a></li>
|
||
<li><a href="#">FAQs</a></li>
|
||
<li><a href="#">Get to know Slovenia</a></li>
|
||
<li><a href="#">Get to know North Macedonia</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">News</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Announcements</a></li>
|
||
<li><a href="#">Open calls</a></li>
|
||
<li><a href="#">Press releases</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<div class="navigation-actions">
|
||
<button class="btn btn-secondary">Become a member</button>
|
||
<button class="btn btn-primary">Donate</button>
|
||
<div class="language-selector">
|
||
<button class="current-lang" id="mobile-lang-trigger">
|
||
<i class="fas fa-globe"></i>
|
||
<span>EN</span>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modalno okno za izbiro jezika (ostaja enako) -->
|
||
<div id="language-modal-overlay">
|
||
<div class="language-modal-content">
|
||
<div class="language-modal-header">
|
||
<h3>Select Language</h3>
|
||
<button id="language-modal-close" aria-label="Close language selection">×</button>
|
||
</div>
|
||
<div class="language-modal-body">
|
||
<a href="#" data-lang="si">Slovenščina (SI)</a>
|
||
<a href="#" data-lang="en" class="active-lang">English (EN)</a>
|
||
<a href="#" data-lang="mk">Македонски (MK)</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END_HEADER -->
|
||
|
||
<main>
|
||
<section class="hero-section">
|
||
<div class="hero-background"></div>
|
||
<div class="hero-overlay"></div>
|
||
<div class="hero-content">
|
||
<div class="heading-and-supporting-text">
|
||
<div class="badge-group">
|
||
<div class="badge-content">
|
||
<span class="message">First official Macedonian Student Organisation in Slovenia</span>
|
||
</div>
|
||
</div>
|
||
<h1>Empowering young people with skills to change the world</h1>
|
||
<p>Be part of our exciting journey; Become a part of our student organization today!</p>
|
||
</div>
|
||
<button class="btn btn-primary-orange">Become a member</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="partners-section">
|
||
<div class="partners-container">
|
||
<img src="../images/2.%20Slo%20embassy%20in%20Skopje_mcd-1.png" alt="Slovenian Embassy in Skopje logo">
|
||
<img src="../images/5.%20UL_EF-logoENG-HOR-CMYK_color-1.png" alt="University of Ljubljana School of Economics and Business logo">
|
||
<img src="../images/3.%20Logo_NLB_Banka_CMYK_MAC-1.png" alt="NLB Banka logo">
|
||
<img src="../images/1.%20mkd%20embassy%20in%20slovenia.png" alt="Embassy of North Macedonia in Slovenia logo">
|
||
</div>
|
||
</section>
|
||
|
||
<section class="meet-the-team-section">
|
||
<div class="video-container">
|
||
<img src="../images/3.activites.webp" alt="Team members collaborating" class="video-thumbnail">
|
||
<div class="video-overlay"></div>
|
||
<button class="play-button" aria-label="Play video"></button>
|
||
</div>
|
||
<div class="team-content">
|
||
<h2>Every Student Has a Story – Here’s Ours</h2>
|
||
<p>Curious about what MSOS is all about? This video tells our story—fast, fun, and from the heart. See what makes MSOS special in our video—and hit “Learn more” to be part of the story.</p>
|
||
<a href="../en/about-us/" class="btn btn-secondary">Learn more</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="activities-section">
|
||
<div class="activities-header">
|
||
<h2>Activities</h2>
|
||
<p>Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
|
||
</div>
|
||
<div class="activities-content">
|
||
<div class="activities-nav">
|
||
<ul>
|
||
<li class="active">Student Support</li>
|
||
<li>Fun & Social Life</li>
|
||
<li>Education & Culture</li>
|
||
<li>Student Representation</li>
|
||
</ul>
|
||
<button class="btn btn-primary-orange">Become a member</button>
|
||
</div>
|
||
<div class="activity-details">
|
||
<p>We know moving to a new country can feel overwhelming, so we’re here to make it easier. From helping you with university applications to finding your way around student life in Slovenia, you can always count on us. We offer free consultations, answer your questions on Instagram and Facebook (yes, even late at night), and host events where you can meet others and hear real experiences first-hand. With mentorship, info sessions, and a friendly community by your side, you’ll never have to go through the journey alone.</p>
|
||
<img src="../images/img1-08.09.2025.webp" alt="Students receiving support and guidance">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="latest-news-section">
|
||
<div class="news-header">
|
||
<h2>Latest news</h2>
|
||
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharet.</p>
|
||
</div>
|
||
<div class="news-articles">
|
||
<article class="news-card">
|
||
<img src="../images/4-billwalsh.webp" alt="Pink and blue tinted image of a snowy mountain peak">
|
||
<div class="card-content">
|
||
<p class="author">Alec Whitten • 17 Jan 2022</p>
|
||
<h3>Bill Walsh leadership lessons</h3>
|
||
<p>Like to know the secrets of transforming a 2-14 team into a 3x Super Bowl...</p>
|
||
</div>
|
||
</article>
|
||
<article class="news-card">
|
||
<img src="../images/5-pmmentals.webp" alt="A woman presenting in front of a whiteboard with sticky notes to a team">
|
||
<div class="card-content">
|
||
<p class="author">Demi Wilkinson • 16 Jan 2022</p>
|
||
<h3>PM mental models</h3>
|
||
<p>Mental models are simple expressions of complex processes or relationships.</p>
|
||
</div>
|
||
</article>
|
||
<article class="news-card">
|
||
<img src="../images/6-whatiswireframing.webp" alt="A modern computer desk setup with a large monitor, keyboard, and headphones">
|
||
<div class="card-content">
|
||
<p class="author">Candice Wu • 15 Jan 2022</p>
|
||
<h3>What is Wireframing?</h3>
|
||
<p>Introduction to Wireframing and its Principles. Learn from the best in the industry.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<a href="../en/projects/" class="btn btn-secondary">See all</a>
|
||
</section>
|
||
|
||
<section class="testimonials-section">
|
||
<div class="testimonials-intro">
|
||
<h2>See what our partners say about us</h2>
|
||
<p>Everything you need to know about the product and billing.</p>
|
||
</div>
|
||
<div class="testimonials-columns">
|
||
<div class="testimonial-column">
|
||
<div class="testimonial-card">
|
||
<h3>How collaboration makes us better</h3>
|
||
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
|
||
<div class="author-info">
|
||
<img src="../images/7-graphicdesigner.webp" alt="Aleksandar Popovski">
|
||
<div>
|
||
<h4>Aleksandar Popovski</h4>
|
||
<p>Graphic designer at MSOS</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card">
|
||
<h3>Consectetur vitae ac parturient massa</h3>
|
||
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra.</p>
|
||
<div class="author-info">
|
||
<img src="../images/11-boy.webp" alt="Another team member">
|
||
<div>
|
||
<h4>Aleksandar Popovski</h4>
|
||
<p>Graphic designer at MSOS</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-column column-offset">
|
||
<div class="testimonial-card">
|
||
<h3>Proud partners</h3>
|
||
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
|
||
<div class="author-info">
|
||
<img src="../images/12-girl2.webp" alt="Another partner">
|
||
<div>
|
||
<h4>Aleksandar Popovski</h4>
|
||
<p>Graphic designer at MSOS</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card">
|
||
<h3>Our collaboration experience</h3>
|
||
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
|
||
<div class="author-info">
|
||
<img src="../images/10-girl1.webp" alt="Another team member">
|
||
<div>
|
||
<h4>Aleksandar Popovski</h4>
|
||
<p>Graphic designer at MSOS</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="become-part-section">
|
||
<div class="become-part-header">
|
||
<h2>Become part of our amazing team</h2>
|
||
<p>We're a 100% remote team spread all across the world. Join us!</p>
|
||
</div>
|
||
<img src="../images/9-becomepart.webp" alt="Our amazing team in a classroom setting" class="team-photo">
|
||
|
||
<div class="contact-form-container">
|
||
<form class="contact-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="first-name">First name</label>
|
||
<input type="text" id="first-name" placeholder="First name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="last-name">Last name</label>
|
||
<input type="text" id="last-name" placeholder="Last name">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">Email</label>
|
||
<input type="email" id="email" placeholder="student@email.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone-number">Phone number</label>
|
||
<div class="phone-input">
|
||
<select id="country-code" aria-label="Country code">
|
||
<option>US</option>
|
||
<option>SI</option>
|
||
<option>MK</option>
|
||
</select>
|
||
<input type="tel" id="phone-number" placeholder="+1 (555) 000-0000">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Message</label>
|
||
<textarea id="message" rows="5"></textarea>
|
||
</div>
|
||
<div class="form-group checkbox-group">
|
||
<input type="checkbox" id="privacy-policy">
|
||
<label for="privacy-policy">You agree to our friendly <a href="#">privacy policy</a>.</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Send message</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="faq-section">
|
||
<div class="faq-header">
|
||
<h2>Frequently asked questions</h2>
|
||
<p>Everything you wanted to know about studying and living in Slovenia — in one place.</p>
|
||
</div>
|
||
<div class="faq-grid">
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-heart"></i></div>
|
||
<h3>How can I get a student visa or residence permit?</h3>
|
||
<p>Quick guide on what documents you need and how long it takes.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-sync-alt"></i></div>
|
||
<h3>What is the cost of living & housing in Slovenia?</h3>
|
||
<p>See average monthly expenses and where to find affordable housing.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-ban"></i></div>
|
||
<h3>Can I study in English, or do I need Slovene language?</h3>
|
||
<p>Find out which programs are in English—and when learning Slovene helps.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-plus-circle"></i></div>
|
||
<h3>Are there part-time jobs available? Can I work while studying?</h3>
|
||
<p>Learn about the student work possibilities and how to manage it while studying.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-credit-card"></i></div>
|
||
<h3>What student benefits and discounts are available?</h3>
|
||
<p>Ever heard of ‘Boni’? Student meal coupons that make eating out more affordable and planty more.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-envelope"></i></div>
|
||
<h3>What are tuition fees and are there scholarships?</h3>
|
||
<p>Info on tuition ranges and where to look for funding or fee waivers.</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-footer">
|
||
<div class="avatar-group">
|
||
<img src="../images/11-boy.webp" alt="Avatar 1" class="avatar">
|
||
<img src="../images/10-girl1.webp" alt="Avatar 2" class="avatar large">
|
||
<img src="../images/12-girl2.webp" alt="Avatar 3" class="avatar">
|
||
</div>
|
||
<h3>Still have questions?</h3>
|
||
<p>Can’t find the answer you’re looking for? Please chat to our friendly team.</p>
|
||
<button class="btn btn-primary-orange">See all FAQs</button>
|
||
</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="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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
<script src="../main.js"></script>
|
||
</footer>
|
||
<!-- END_FOOTER -->
|
||
|
||
</body>
|
||
</html> |