<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GΓANT eAcademy β Software Governance eAcademy</title>
<style>
/* LOKALNI STILOVI SAMO ZA OVU STRANU */
.geant-eademy-page * {
box-sizing: border-box;
}
.geant-eademy-page {
font-family: 'Poppins', sans-serif;
background: #f4f7fb;
color: #2C3E50;
padding: 0;
margin: 0;
}
.geant-eademy-page h2 {
font-size: clamp(26px, 4vw, 34px);
font-weight: 700;
margin-bottom: 25px;
}
.geant-eademy-page p {
font-size: 16px;
line-height: 1.5;
color: #555;
}
.geant-eademy-page .hero {
background: linear-gradient(135deg, #5c9ded, #7cd3a3);
color: white;
text-align: center;
padding: 60px 20px;
border-radius: 0 0 50px 50px;
}
.geant-eademy-page .hero h1 {
font-size: clamp(24px, 5vw, 38px);
font-weight: 700;
margin-bottom: 20px;
}
.geant-eademy-page .hero p {
font-size: 16px;
max-width: 800px;
margin: 0 auto;
color: #f0f0f0;
font-weight: 600;
}
.geant-eademy-page .section {
padding: 50px 5%;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
margin: 40px auto;
max-width: 1300px;
}
.geant-eademy-page .courses-title {
text-align: center;
font-size: 2.2em;
font-weight: 700;
margin-bottom: 40px;
color: #003366;
}
/* GRID ZA KURSEVE β UVEK 4 KOLONE */
.geant-eademy-page .courses-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding-top: 20px;
}
@media (max-width: 1024px) {
.geant-eademy-page .courses-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.geant-eademy-page .courses-grid {
grid-template-columns: 1fr;
}
}
.geant-eademy-page .course-card {
position: relative; /* da pozicioniramo "coming soon" apsolutno */
background: #f9f9f9;
border: 2px solid transparent;
border-radius: 14px;
padding: 20px;
text-align: center;
transition: 0.3s;
min-height: 180px; /* fiksna visina za sve kartice */
}
.geant-eademy-page .course-card:hover {
transform: translateY(-6px);
border-color: #5c9ded;
box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.geant-eademy-page .course-card .emoji {
font-size: 38px;
margin-bottom: 10px;
}
.geant-eademy-page .course-card a {
text-decoration: none;
font-size: 1em;
font-weight: 700;
color: #2c3e50;
transition: color 0.3s;
display: inline-block;
}
.geant-eademy-page .course-card a:hover {
color: #ff6600;
}
/* Coming soon tekst */
.geant-eademy-page .course-card .coming-soon {
position: absolute;
bottom: 15px; /* fiksirano uz donju ivicu kartice */
left: 0;
width: 100%;
font-size: 0.9em;
font-weight: 500;
color: #ff6600;
line-height: 1.2;
}
.geant-eademy-page .three-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 30px;
}
.geant-eademy-page .info-card {
background: #f4f7fb;
border-radius: 14px;
padding: 25px;
text-align: center;
transition: 0.3s;
}
.geant-eademy-page .info-card .emoji {
font-size: 34px;
margin-bottom: 10px;
}
.geant-eademy-page .info-card h3 a {
text-decoration: none;
color: #003366;
font-weight: 700;
font-size: 1.1em;
transition: color 0.3s;
}
.geant-eademy-page .info-card h3 a:hover {
color: #ff6600;
}
.geant-eademy-page .testimonials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 40px;
}
.geant-eademy-page .testimonial-card {
background: #f9f9f9;
padding: 25px;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
height: 100%; /* sve iste visine */
}
.geant-eademy-page .testimonial-card p {
font-size: 15px;
font-style: italic;
color: #444;
}
.geant-eademy-page .testimonial-card h4 {
margin-top: auto; /* zalepi uz donju ivicu */
font-size: 14px;
font-weight: 700;
color: #003366;
}
.geant-eademy-page .section-title {
text-align: center;
font-size: 2em;
font-weight: 700;
margin-bottom: 35px;
color: #003366;
}
</style>
</head>
<body>
<div class="geant-eademy-page">
<!-- Hero -->
<div class="hero">
<h3>Learn, share, and create knowledge on software development, open source licensing, compliance, and quality assurance. <BR>Explore our courses or contribute by creating new ones to support the GΓANT community.</h3>
</div>
<!-- Courses -->
<div class="section">
<h2 class="courses-title">π <b>Available Courses</b></h2>
<div class="courses-grid">
<div class="course-card"><div class="emoji">π</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=631" target="_blank"><b>Onboarding Guide for Software Development Teams</b></a></div>
<div class="course-card"><div class="emoji">π‘</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=571" target="_blank"><b>Introduction to Common Best Practices (CBPs)</b></a></div>
<div class="course-card"><div class="emoji">π‘οΈ</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=628" target="_blank"><b>Security Testing and Quality Assurance</b></a></div>
<div class="course-card"><div class="emoji">π</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=571" target="_blank"><b>Introduction to Open Source Licensing and Compliance</b></a></div>
<div class="course-card"><div class="emoji">π</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=214" target="_blank"><b>Open Source Licensing and Compliance</b></a></div>
<div class="course-card"><div class="emoji">βοΈ</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=665" target="_blank"><b>OSS: From Fundamentals to Compliance</b></a></div>
<!-- Poslednja Δetiri kursa sa "coming soon" -->
<div class="course-card"><div class="emoji">π
</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=682" target="_blank"><b>Essential Aspects of Software Licensing in GΓANT</b></a><div class="coming-soon">In preparation β coming soon!</div></div>
<div class="course-card"><div class="emoji">π</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=684" target="_blank"><b>Open Source Licences Used in GΓANT</b></a><div class="coming-soon">In preparation β coming soon!</div></div>
<div class="course-card"><div class="emoji">ποΈ</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=687" target="_blank"><b>Licensing and Artefacts Creation Process</b></a><div class="coming-soon">In preparation β coming soon!</div></div>
<div class="course-card"><div class="emoji">β
</div><a href="https://e-academy.geant.org/moodle/course/view.php?id=688" target="_blank"><b>Compliance and Required Artefacts</b></a><div class="coming-soon">In preparation β coming soon!</div></div>
</div>
</div>
<!-- Knowledge Base / Inspiration / Checklist -->
<div class="section">
<h2 class="section-title">π <b>Support for Course Creators</b></h2>
<div class="three-grid">
<div class="info-card">
<div class="emoji">π</div>
<h3><a href="https://wiki.geant.org/spaces/G52W9T2/pages/940147168/eAcademy+Knowledge+Base" target="_blank"><b>Knowledge Base</b></a></h3>
<p>Learn how to design, structure, and publish courses in eAcademy.</p>
</div>
<div class="info-card">
<div class="emoji">π‘</div>
<h3><a href="https://wiki.geant.org/spaces/G52W9T2/pages/1186201686/Copy+od+inspiration" target="_blank"><b>Inspiration</b></a></h3>
<p>Guidance and examples to boost your creativity and confidence.</p>
</div>
<div class="info-card">
<div class="emoji">β
</div>
<h3><a href="https://wiki.geant.org/spaces/G52W9T2/pages/1183580309/G%C3%89ANT+eAcademy+Course+Developer+Checklist" target="_blank"><b>Checklist</b></a></h3>
<p>Step-by-step guide to finalize and publish your course.</p>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="section">
<h2 class="section-title">π¬ <b>Course Feedback</b></h2>
<div class="testimonials">
<div class="testimonial-card">
<p>"The courses gave me practical knowledge I could apply immediately in my projects. Easy to follow and very well structured!"</p>
<h4>β X, X</h4>
</div>
<div class="testimonial-card">
<p>"I never thought open source licensing could be explained so clearly. These lessons boosted my confidence to handle compliance at work."</p>
<h4>β X, X</h4>
</div>
<div class="testimonial-card">
<p>"The eAcademy is not only a place to learn, but also a community where knowledge is shared and new ideas are born."</p>
<h4>β X, X</h4>
</div>
</div>
</div>
</div>
</body>
</html> |