477 lines
28 KiB
HTML
477 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="mk">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Македонска Студентска Организација во Словенија</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" />
|
||
|
||
<!-- Поврзување до главната CSS-датотека (поправена патека) -->
|
||
<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="../mk/" class="logo-link">
|
||
<img src="../images/1-logo.png" alt="Лого на Македонска студентска организација во Словенија" 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="#">За нас</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Времеплов и достигнувања</a></li>
|
||
<li><a href="#">Нашиот тим, мисија, визија и вредности</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Што работиме</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="../mk/projects/">Настани и проекти</a></li>
|
||
<li><a href="#">Блог</a></li>
|
||
<li><a href="#">Галерија</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Вклучи се</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Стани член</a></li>
|
||
<li><a href="#">Поддржи ја МСОС</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">За студенти</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Водич за добредојде</a></li>
|
||
<li><a href="#">Менторска програма</a></li>
|
||
<li><a href="#">Често поставувани прашања</a></li>
|
||
<li><a href="#">Запознај ја Словенија</a></li>
|
||
<li><a href="#">Запознај ја Северна Македонија</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Новости</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Соопштенија</a></li>
|
||
<li><a href="#">Отворени повици</a></li>
|
||
<li><a href="#">Соопштенија за медиуми</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<div class="navigation-actions">
|
||
<button class="btn btn-secondary">Стани член</button>
|
||
<button class="btn btn-primary">Донирај</button>
|
||
<div class="language-selector">
|
||
<div class="current-lang">
|
||
<i class="fas fa-globe"></i>
|
||
<span id="current-lang-code">МК</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="#">За нас</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Времеплов и достигнувања</a></li>
|
||
<li><a href="#">Нашиот тим, мисија, визија и вредности</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Што работиме</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="../mk/projects/">Настани и проекти</a></li>
|
||
<li><a href="#">Блог</a></li>
|
||
<li><a href="#">Галерија</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Вклучи се</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Стани член</a></li>
|
||
<li><a href="#">Поддржи ја МСОС</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">За студенти</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Водич за добредојде</a></li>
|
||
<li><a href="#">Менторска програма</a></li>
|
||
<li><a href="#">Често поставувани прашања</a></li>
|
||
<li><a href="#">Запознај ја Словенија</a></li>
|
||
<li><a href="#">Запознај ја Северна Македонија</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-item menu-item-has-children">
|
||
<a href="#">Новости</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Соопштенија</a></li>
|
||
<li><a href="#">Отворени повици</a></li>
|
||
<li><a href="#">Соопштенија за медиуми</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<div class="navigation-actions">
|
||
<button class="btn btn-secondary">Стани член</button>
|
||
<button class="btn btn-primary">Донирај</button>
|
||
<div class="language-selector">
|
||
<button class="current-lang" id="mobile-lang-trigger">
|
||
<i class="fas fa-globe"></i>
|
||
<span>МК</span>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modalno okno za izbiro na jazik (za mobilni) -->
|
||
<div id="language-modal-overlay">
|
||
<div class="language-modal-content">
|
||
<div class="language-modal-header">
|
||
<h3>Избери јазик</h3>
|
||
<button id="language-modal-close" aria-label="Затвори избор на јазик">×</button>
|
||
</div>
|
||
<div class="language-modal-body">
|
||
<a href="#" data-lang="si">Slovenščina (SI)</a>
|
||
<a href="#" data-lang="en">English (EN)</a>
|
||
<a href="#" data-lang="mk" class="active-lang">Македонски (МК)</a>
|
||
</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">Прва официјална МСОС</span>
|
||
</div>
|
||
</div>
|
||
<h1>Ги зајакнуваме младите со вештини за да го променат светот</h1>
|
||
<p>Без разлика дали имате тим од 2 или 200 луѓе, нашите заеднички тимски сандачиња ги одржуваат сите на иста страна и во тек со случувањата.</p>
|
||
</div>
|
||
<button class="btn btn-primary-orange">Стани член</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="meet-the-team-section">
|
||
<div class="video-container">
|
||
<img src="../images/3.activites.webp" alt="Членови на тимот соработуваат" class="video-thumbnail">
|
||
<div class="video-overlay"></div>
|
||
<button class="play-button" aria-label="Пушти видео"></button>
|
||
</div>
|
||
<div class="team-content">
|
||
<h2>Запознајте го нашиот неверојатен тим!</h2>
|
||
<p>Нашата филозофија е едноставна — да вработиме тим од разновидни, страсни луѓе и да поттикнеме култура која ве овластува да ја вршите својата најдобра работа.</p>
|
||
<button class="btn btn-secondary">Дознај повеќе</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="activities-section">
|
||
<div class="activities-header">
|
||
<h2>Активности</h2>
|
||
<p>Нашата филозофија е едноставна — да вработиме тим од разновидни, страсни луѓе и да поттикнеме култура која ве овластува да ја вршите својата најдобра работа.</p>
|
||
</div>
|
||
<div class="activities-content">
|
||
<div class="activities-nav">
|
||
<ul>
|
||
<li class="active">Студентско претставување</li>
|
||
<li>Образование и култура</li>
|
||
<li>Забава и дружење</li>
|
||
<li>Студентска поддршка</li>
|
||
</ul>
|
||
<button class="btn btn-primary-orange">Стани член</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="Група насмеани студенти соработуваат">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="latest-news-section">
|
||
<div class="news-header">
|
||
<h2>Најнови вести</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="Слика на снежен планински врв во розови и сини нијанси">
|
||
<div class="card-content">
|
||
<p class="author">Alec Whitten • 17 Јан 2022</p>
|
||
<h3>Лекции за лидерство од Бил Волш</h3>
|
||
<p>Сакате да ги дознаете тајните за трансформација на тим со резултат 2-14 во династија со 3x Супер Боул...</p>
|
||
</div>
|
||
</article>
|
||
<article class="news-card">
|
||
<img src="../images/5-pmmentals.webp" alt="Жена презентира пред табла со лепливи белешки на тим">
|
||
<div class="card-content">
|
||
<p class="author">Demi Wilkinson • 16 Јан 2022</p>
|
||
<h3>ПМ ментални модели</h3>
|
||
<p>Менталните модели се едноставни изрази на сложени процеси или односи.</p>
|
||
</div>
|
||
</article>
|
||
<article class="news-card">
|
||
<img src="../images/6-whatiswireframing.webp" alt="Модерно компјутерско биро со голем монитор, тастатура и слушалки">
|
||
<div class="card-content">
|
||
<p class="author">Candice Wu • 15 Јан 2022</p>
|
||
<h3>Што е Wireframing?</h3>
|
||
<p>Вовед во Wireframing и неговите принципи. Учете од најдобрите во индустријата.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<button class="btn btn-secondary">Види ги сите</button>
|
||
</section>
|
||
|
||
<section class="testimonials-section">
|
||
<div class="testimonials-intro">
|
||
<h2>Погледнете што велат нашите партнери за нас</h2>
|
||
<p>Сè што треба да знаете за производот и наплатата.</p>
|
||
</div>
|
||
<div class="testimonials-columns">
|
||
<div class="testimonial-column">
|
||
<div class="testimonial-card">
|
||
<h3>Како соработката нè прави подобри</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="Александар Поповски">
|
||
<div>
|
||
<h4>Александар Поповски</h4>
|
||
<p>Графички дизајнер во МСОС</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="Друг член на тимот">
|
||
<div>
|
||
<h4>Александар Поповски</h4>
|
||
<p>Графички дизајнер во МСОС</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-column column-offset">
|
||
<div class="testimonial-card">
|
||
<h3>Горди партнери</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="Друг партнер">
|
||
<div>
|
||
<h4>Александра Поповска</h4>
|
||
<p>Графички дизајнер во МСОС</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card">
|
||
<h3>Нашето искуство со соработката</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="Друг член на тимот">
|
||
<div>
|
||
<h4>Ана Поповска</h4>
|
||
<p>Графички дизајнер во МСОС</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="become-part-section">
|
||
<div class="become-part-header">
|
||
<h2>Станете дел од нашиот неверојатен тим</h2>
|
||
<p>Ние сме 100% тим на далечина, распространет низ целиот свет. Придружете ни се!</p>
|
||
</div>
|
||
<img src="../images/9-becomepart.webp" alt="Нашиот неверојатен тим во училница" class="team-photo">
|
||
|
||
<div class="contact-form-container">
|
||
<form class="contact-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="first-name">Име</label>
|
||
<input type="text" id="first-name" placeholder="Име">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="last-name">Презиме</label>
|
||
<input type="text" id="last-name" placeholder="Презиме">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">Е-пошта</label>
|
||
<input type="email" id="email" placeholder="student@email.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone-number">Телефонски број</label>
|
||
<div class="phone-input">
|
||
<select id="country-code" aria-label="Код на држава">
|
||
<option>MK</option>
|
||
<option>SI</option>
|
||
<option>US</option>
|
||
</select>
|
||
<input type="tel" id="phone-number" placeholder="+389 (00) 000-000">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="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">Се согласувате со нашата пријателска <a href="#">политика за приватност</a>.</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Испрати порака</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="faq-section">
|
||
<div class="faq-header">
|
||
<h2>Често поставувани прашања</h2>
|
||
<p>Сè што треба да знаете за производот и наплатата.</p>
|
||
</div>
|
||
<div class="faq-grid">
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-heart"></i></div>
|
||
<h3>Дали е достапен бесплатен пробен период?</h3>
|
||
<p>Да, можете да нè пробате бесплатно 30 дена. Нашиот пријателски тим ќе работи со вас за да ве подготви што е можно поскоро.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-sync-alt"></i></div>
|
||
<h3>Можам ли подоцна да го сменам мојот план?</h3>
|
||
<p>Секако. Нашите цени се прилагодуваат со вашата компанија. Разговарајте со нашиот пријателски тим за да најдете решение што ви одговара.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-ban"></i></div>
|
||
<h3>Каква е вашата политика за откажување?</h3>
|
||
<p>Разбираме дека работите се менуваат. Можете да го откажете вашиот план во секое време и ќе ви ја вратиме веќе платената разлика.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-plus-circle"></i></div>
|
||
<h3>Може ли да се додадат други информации на фактурата?</h3>
|
||
<p>Да, можете да нè пробате бесплатно 30 дена. Нашиот пријателски тим ќе работи со вас за да ве подготви што е можно поскоро.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-credit-card"></i></div>
|
||
<h3>Како функционира наплатата?</h3>
|
||
<p>Секако. Нашите цени се прилагодуваат со вашата компанија. Разговарајте со нашиот пријателски тим за да најдете решение што ви одговара.</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-icon-container"><i class="fas fa-envelope"></i></div>
|
||
<h3>Како да ја сменам е-поштата на мојата сметка?</h3>
|
||
<p>Разбираме дека работите се менуваат. Можете да го откажете вашиот план во секое време и ќе ви ја вратиме разликата.</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-footer">
|
||
<div class="avatar-group">
|
||
<img src="../images/11-boy.webp" alt="Аватар 1" class="avatar">
|
||
<img src="../images/10-girl1.webp" alt="Аватар 2" class="avatar large">
|
||
<img src="../images/12-girl2.webp" alt="Аватар 3" class="avatar">
|
||
</div>
|
||
<h3>Сè уште имате прашања?</h3>
|
||
<p>Не можете да го најдете одговорот што го барате? Ве молиме разговарајте со нашиот пријателски тим.</p>
|
||
<button class="btn btn-primary-orange">Види ги сите ЧПП</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="Лого на Македонска студентска организација во Словенија">
|
||
</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>За студенти</h4>
|
||
<a href="#">Блог</a>
|
||
<a href="#">Галерија</a>
|
||
<a href="#">ЧПП</a>
|
||
<a href="#">Брошура</a>
|
||
</div>
|
||
<div class="links-column">
|
||
<h4>Проекти</h4>
|
||
<a href="#">Претстојни</a>
|
||
<a href="#">Претходни</a>
|
||
</div>
|
||
<div class="links-column">
|
||
<h4>Организација</h4>
|
||
<a href="#">За нас</a>
|
||
<a href="#">Контакт</a>
|
||
<a href="#">Документација</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<div class="footer-bottom">
|
||
<p>© МСОС орг 2023 Сите права се задржани.</p>
|
||
<div class="legal-links">
|
||
<a href="#">Политика за приватност</a>
|
||
<a href="#">Политика за колачиња</a>
|
||
<a href="#">Правни услови</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="../main.js"></script>
|
||
</footer>
|
||
<!-- END_FOOTER -->
|
||
|
||
</body>
|
||
</html> |