<!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>
.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;
}
.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;
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;
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>Welcome to the Software Governance eAcademy! Here, you can learn, share, and build expertise in software development, open source licensing, compliance, and quality assurance. Explore our courses to grow your knowledge, or contribute by creating new content and supporting 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>
<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/GSD/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/GSD/pages/1190199455/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 (available to GN members only)</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> |