391 lines
20 KiB
HTML
391 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Makedonska Študentska Organizacija v Sloveniji</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 (popravljena pot) -->
|
|
<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="../si/" class="logo-link">
|
|
<img src="../images/1-logo.png" alt="Logotip Makedonske študentske organizacije v Sloveniji" class="logo-img">
|
|
</a>
|
|
<!-- Navigacija za namizje -->
|
|
<nav class="navigation desktop-nav">
|
|
<a href="#">O nas</a>
|
|
<a href="#">Za študente</a>
|
|
<a href="../si/projects/">Projekti</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Gumbi za namizje -->
|
|
<div class="navigation-actions">
|
|
<button class="btn btn-secondary">Postanite partner</button>
|
|
<button class="btn btn-primary">Donirajte</button>
|
|
<!-- Zamenjan preklopnik jezika -->
|
|
<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">Македонски (MK)</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel za mobilno navigacijo -->
|
|
<div class="mobile-nav-panel">
|
|
<nav class="navigation mobile-nav">
|
|
<a href="#">O nas</a>
|
|
<a href="#">Za študente</a>
|
|
<a href="../si/projects/">Projekti</a>
|
|
</nav>
|
|
<div class="navigation-actions">
|
|
<button class="btn btn-secondary">Postanite partner</button>
|
|
<button class="btn btn-primary">Donirajte</button>
|
|
<!-- Zamenjan preklopnik jezika (tudi za mobilni meni) -->
|
|
<div class="language-selector">
|
|
<div class="current-lang">
|
|
<i class="fas fa-globe"></i>
|
|
<span id="current-lang-code-mobile">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">Македонски (MK)</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ikona za mobilni meni (Hamburger/X) -->
|
|
<div class="mobile-menu-icon">
|
|
<i class="fas fa-bars"></i>
|
|
<i class="fas fa-times"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- 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">Prva uradna MSOS</span>
|
|
</div>
|
|
</div>
|
|
<h1>Opolnomočimo mlade z veščinami za spreminjanje sveta</h1>
|
|
<p>Ne glede na to, ali imate ekipo 2 ali 200 ljudi, naši skupni timski nabiralniki ohranjajo vse na isti strani in v koraku z dogajanjem.</p>
|
|
</div>
|
|
<button class="btn btn-primary-orange">Postani član</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="meet-the-team-section">
|
|
<div class="video-container">
|
|
<img src="../images/3.activites.webp" alt="Člani ekipe pri sodelovanju" class="video-thumbnail">
|
|
<div class="video-overlay"></div>
|
|
<button class="play-button" aria-label="Predvajaj video"></button>
|
|
</div>
|
|
<div class="team-content">
|
|
<h2>Spoznajte našo izjemno ekipo!</h2>
|
|
<p>Naša filozofija je preprosta — zaposliti ekipo raznolikih, strastnih ljudi in gojiti kulturo, ki vas opolnomoči, da opravite svoje najboljše delo.</p>
|
|
<button class="btn btn-secondary">Več o tem</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="activities-section">
|
|
<div class="activities-header">
|
|
<h2>Aktivnosti</h2>
|
|
<p>Naša filozofija je preprosta — zaposliti ekipo raznolikih, strastnih ljudi in gojiti kulturo, ki vas opolnomoči, da opravite svoje najboljše delo.</p>
|
|
</div>
|
|
<div class="activities-content">
|
|
<div class="activities-nav">
|
|
<ul>
|
|
<li class="active">Študentsko predstavništvo</li>
|
|
<li>Izobraževanje in kultura</li>
|
|
<li>Zabava in druženje</li>
|
|
<li>Študentska podpora</li>
|
|
</ul>
|
|
<button class="btn btn-primary-orange">Postani član</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="Skupina nasmejanih študentov pri sodelovanju">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="latest-news-section">
|
|
<div class="news-header">
|
|
<h2>Zadnje novice</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="Roza in modro obarvana podoba zasneženega vrha gore">
|
|
<div class="card-content">
|
|
<p class="author">Alec Whitten • 17 Jan 2022</p>
|
|
<h3>Lekcije vodenja Billa Walsha</h3>
|
|
<p>Bi radi izvedeli skrivnosti preoblikovanja ekipe z rezultatom 2-14 v trikratne zmagovalce Super Bowla...</p>
|
|
</div>
|
|
</article>
|
|
<article class="news-card">
|
|
<img src="../images/5-pmmentals.webp" alt="Ženska predstavlja pred belo tablo z listki ekipi">
|
|
<div class="card-content">
|
|
<p class="author">Demi Wilkinson • 16 Jan 2022</p>
|
|
<h3>Mentalni modeli za PM</h3>
|
|
<p>Mentalni modeli so preprosti izrazi kompleksnih procesov ali odnosov.</p>
|
|
</div>
|
|
</article>
|
|
<article class="news-card">
|
|
<img src="../images/6-whatiswireframing.webp" alt="Moderna računalniška miza z velikim monitorjem, tipkovnico in slušalkami">
|
|
<div class="card-content">
|
|
<p class="author">Candice Wu • 15 Jan 2022</p>
|
|
<h3>Kaj je žični model (Wireframing)?</h3>
|
|
<p>Uvod v žično modeliranje in njegova načela. Učite se od najboljših v industriji.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<button class="btn btn-secondary">Poglej vse</button>
|
|
</section>
|
|
|
|
<section class="testimonials-section">
|
|
<div class="testimonials-intro">
|
|
<h2>Poglejte, kaj o nas pravijo naši partnerji</h2>
|
|
<p>Vse, kar morate vedeti o produktu in zaračunavanju.</p>
|
|
</div>
|
|
<div class="testimonials-columns">
|
|
<div class="testimonial-column">
|
|
<div class="testimonial-card">
|
|
<h3>Kako nas sodelovanje izboljša</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>Grafični oblikovalec pri 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="Drug član ekipe">
|
|
<div>
|
|
<h4>Aleksandar Popovski</h4>
|
|
<p>Grafični oblikovalec pri MSOS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testimonial-column column-offset">
|
|
<div class="testimonial-card">
|
|
<h3>Ponosni partnerji</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="Drug partner">
|
|
<div>
|
|
<h4>Aleksandar Popovski</h4>
|
|
<p>Grafični oblikovalec pri MSOS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testimonial-card">
|
|
<h3>Naša izkušnja sodelovanja</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="Druga članica ekipe">
|
|
<div>
|
|
<h4>Aleksandar Popovski</h4>
|
|
<p>Grafični oblikovalec pri MSOS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="become-part-section">
|
|
<div class="become-part-header">
|
|
<h2>Postanite del naše izjemne ekipe</h2>
|
|
<p>Smo 100% oddaljena ekipa, razpršena po vsem svetu. Pridružite se nam!</p>
|
|
</div>
|
|
<img src="../images/9-becomepart.png" alt="Naša izjemna ekipa v učilnici" class="team-photo">
|
|
|
|
<div class="contact-form-container">
|
|
<form class="contact-form">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="first-name">Ime</label>
|
|
<input type="text" id="first-name" placeholder="Ime">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="last-name">Priimek</label>
|
|
<input type="text" id="last-name" placeholder="Priimek">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">E-pošta</label>
|
|
<input type="email" id="email" placeholder="student@email.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone-number">Telefonska številka</label>
|
|
<div class="phone-input">
|
|
<select id="country-code" aria-label="Klicna koda države">
|
|
<option>SI</option>
|
|
<option>MK</option>
|
|
<option>US</option>
|
|
</select>
|
|
<input type="tel" id="phone-number" placeholder="+386 (00) 000-000">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Sporočilo</label>
|
|
<textarea id="message" rows="5"></textarea>
|
|
</div>
|
|
<div class="form-group checkbox-group">
|
|
<input type="checkbox" id="privacy-policy">
|
|
<label for="privacy-policy">Strinjate se z našo prijazno <a href="#">politiko zasebnosti</a>.</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Pošlji sporočilo</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="faq-section">
|
|
<div class="faq-header">
|
|
<h2>Pogosto zastavljena vprašanja</h2>
|
|
<p>Vse, kar morate vedeti o produktu in zaračunavanju.</p>
|
|
</div>
|
|
<div class="faq-grid">
|
|
<div class="faq-item">
|
|
<div class="faq-icon-container"><i class="fas fa-heart"></i></div>
|
|
<h3>Ali je na voljo brezplačen preizkus?</h3>
|
|
<p>Da, lahko nas brezplačno preizkušate 30 dni. Naša prijazna ekipa bo sodelovala z vami, da boste čim prej začeli.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-icon-container"><i class="fas fa-sync-alt"></i></div>
|
|
<h3>Ali lahko kasneje zamenjam svoj načrt?</h3>
|
|
<p>Seveda. Naše cene se prilagajajo vašemu podjetju. Poklepetajte z našo prijazno ekipo in poiščite rešitev, ki vam ustreza.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-icon-container"><i class="fas fa-ban"></i></div>
|
|
<h3>Kakšna je vaša politika odpovedi?</h3>
|
|
<p>Razumemo, da se stvari spreminjajo. Svoj načrt lahko kadar koli prekličete in povrnili vam bomo že plačano razliko.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-icon-container"><i class="fas fa-plus-circle"></i></div>
|
|
<h3>Ali se lahko na račun dodajo druge informacije?</h3>
|
|
<p>Da, lahko nas brezplačno preizkušate 30 dni. Naša prijazna ekipa bo sodelovala z vami, da boste čim prej začeli.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-icon-container"><i class="fas fa-credit-card"></i></div>
|
|
<h3>Kako poteka zaračunavanje?</h3>
|
|
<p>Seveda. Naše cene se prilagajajo vašemu podjetju. Poklepetajte z našo prijazno ekipo in poiščite rešitev, ki vam ustreza.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-icon-container"><i class="fas fa-envelope"></i></div>
|
|
<h3>Kako spremenim e-pošto svojega računa?</h3>
|
|
<p>Razumemo, da se stvari spreminjajo. Svoj načrt lahko kadar koli prekličete in povrnili vam bomo razliko.</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>Imate še vprašanja?</h3>
|
|
<p>Ne najdete odgovora, ki ga iščete? Prosimo, poklepetajte z našo prijazno ekipo.</p>
|
|
<button class="btn btn-primary-orange">Poglej vsa vprašanja</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="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> |