470 lines
24 KiB
HTML
470 lines
24 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">
|
||
<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>
|
||
<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="#">Timeline & Milestones</a></li>
|
||
<li><a href="#">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>
|
||
|
||
<!-- Desktop Buttons -->
|
||
<div class="navigation-actions">
|
||
<button class="btn btn-secondary">Become a member</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 Menu Icon (Hamburger/X) -->
|
||
<div class="mobile-menu-icon">
|
||
<i class="fas fa-bars"></i>
|
||
<i class="fas fa-times"></i>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Mobile Navigation Panel (ostane znotraj markerjev, a za <header>) -->
|
||
<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="#">Timeline & Milestones</a></li>
|
||
<li><a href="#">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>
|
||
<!-- Language Switcher (for mobile) -->
|
||
<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>
|
||
</div>
|
||
<!-- END_HEADER -->
|
||
|
||
<main>
|
||
<section class="hero-section">
|
||
<div class="hero-background">
|
||
<div class="hero-image-left" style="background-image: url('../images/2.hero.webp');"></div>
|
||
<div class="hero-image-right" style="background-image: url('../images/2.hero.webp');"></div>
|
||
</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 MSOS</span>
|
||
</div>
|
||
</div>
|
||
<h1>Empowering young people with skills to change the world</h1>
|
||
<p>Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.</p>
|
||
</div>
|
||
<button class="btn btn-primary-orange">Become a Member</button>
|
||
</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>Meet our incredible team!</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>
|
||
<button class="btn btn-secondary">Learn more</button>
|
||
</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 representation</li>
|
||
<li>Education and culture</li>
|
||
<li>Entertainment and socializing</li>
|
||
<li>Student support</li>
|
||
</ul>
|
||
<button class="btn btn-primary-orange">Become a member</button>
|
||
</div>
|
||
<div class="activity-details">
|
||
<p>Sed molestie penatibus sit bibendum pharetra purus faucibus fames aliquet. Morbi morbi ac sed tempor porta. Dui iaculis vitae fames sapien. Pellentesque urna eget habitasse arcu sed ornare. Dignissim lobortis ultrices maecenas magna ac habitant donec etiam at.</p>
|
||
<img src="../images/3.activites.webp" alt="A group of students smiling and collaborating">
|
||
</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>
|
||
<button class="btn btn-secondary">See all</button>
|
||
</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 need to know about the product and billing.</p>
|
||
</div>
|
||
<div class="faq-grid">
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-heart"></i></div>
|
||
<h3>Is there a free trial available?</h3>
|
||
<p>Yes, you can try us for free for 30 days. Our friendly team will work with you to get you up and running as soon as possible.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-sync-alt"></i></div>
|
||
<h3>Can I change my plan later?</h3>
|
||
<p>Of course. Our pricing scales with your company. Chat to our friendly team to find a solution that works for you.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-ban"></i></div>
|
||
<h3>What is your cancellation policy?</h3>
|
||
<p>We understand that things change. You can cancel your plan at any time and we’ll refund you the difference already paid.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-plus-circle"></i></div>
|
||
<h3>Can other info be added to an invoice?</h3>
|
||
<p>Yes, you can try us for free for 30 days. Our friendly team will work with you to get you up and running as soon as possible.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-credit-card"></i></div>
|
||
<h3>How does billing work?</h3>
|
||
<p>Of course. Our pricing scales with your company. Chat to our friendly team to find a solution that works for you.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-envelope"></i></div>
|
||
<h3>How do I change my account email?</h3>
|
||
<p>We understand that things change. You can cancel your plan at any time and we’ll refund you the difference.</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 -->
|
||
|
||
<script src="../main.js"></script>
|
||
</body>
|
||
</html> |