<!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>
/* Global */
* {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background: #f4f7fb;
color: #2C3E50;
}
h2, h3 {
margin: 0 0 15px 0;
}
a {
text-decoration: none;
color: inherit;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #5c9ded, #7cd3a3);
color: #000000; /* tekst crn i upečatljiv */
text-align: center;
padding: 60px 20px;
border-radius: 0 0 50px 50px;
}
.hero h3 {
font-size: clamp(26px, 3vw, 34px);
font-weight: 700;
margin-bottom: 25px;
}
.hero p {
font-size: 16px;
max-width: 1000px; /* širi tekst */
margin: 0 auto 15px auto;
font-weight: 500;
line-height: 1.6;
}
.hero-list {
list-style: none; /* uklonjene tačkice */
padding: 0;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.hero-list li {
background: rgba(255,255,255,0.2);
padding: 10px 18px;
border-radius: 20px;
font-weight: 600;
font-size: 16px;
}
/* Sections */
.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;
}
.courses-title, .section-title {
text-align: center;
font-size: 2.2em;
font-weight: 700;
margin-bottom: 40px;
color: #003366;
}
/* Courses Grid */
.courses-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding-top: 20px;
}
.course-card {
position: relative;
background: #f9f9f9;
border: 2px solid transparent;
border-radius: 14px;
padding: 20px;
text-align: center;
transition: 0.3s;
min-height: 180px;
}
.course-card:hover {
transform: translateY(-6px);
border-color: #5c9ded;
box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.course-card .emoji {
font-size: 38px;
margin-bottom: 10px;
}
.course-card a {
text-decoration: none;
font-size: 1em;
font-weight: 700;
color: #2c3e50;
transition: color 0.3s;
display: inline-block;
}
.course-card a:hover {
color: #ff6600;
}
/* Info Cards */
.three-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 30px;
}
.info-card {
background: #f4f7fb;
border-radius: 14px;
padding: 25px;
text-align: center;
transition: 0.3s;
}
.info-card .emoji {
font-size: 34px;
margin-bottom: 10px;
}
.info-card h3 a {
text-decoration: none;
color: #003366;
font-weight: 700;
font-size: 1.1em;
transition: color 0.3s;
}
.info-card h3 a:hover {
color: #ff6600;
}
/* Testimonials */
.testimonials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 40px;
}
.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%;
}
.testimonial-card p {
font-size: 15px;
font-style: italic;
color: #444;
}
.testimonial-card h4 {
margin-top: auto;
font-size: 14px;
font-weight: 700;
color: #003366;
}
/* Responsive */
@media (max-width: 1024px) {
.courses-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.courses-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="geant-eademy-page">
<!-- Hero -->
<div class="hero">
<h3>Welcome to the Software Governance eAcademy!</h3>
<p style="max-width: 100%; font-weight: 700; font-size: 18px; line-height: 1.7; margin-bottom: 30px;">
The Software Governance eAcademy (SGA) courses provide a journey designed to empower software teams with the knowledge and tools needed to implement effective software development processes. There you will be able to learn more about software governance, secure code development, software best practice adoption and software licence management tools.
</p>
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px;">
<div style="background: rgba(255,255,255,0.25); padding: 12px 20px; border-radius: 16px; font-weight: 700; flex: 1 1 200px; min-width: 200px;">
Software Governance in GÉANT
</div>
<div style="background: rgba(255,255,255,0.25); padding: 12px 20px; border-radius: 16px; font-weight: 700; flex: 1 1 200px; min-width: 200px;">
Software Quality
</div>
<div style="background: rgba(255,255,255,0.25); padding: 12px 20px; border-radius: 16px; font-weight: 700; flex: 1 1 200px; min-width: 200px;">
Software Licencing
</div>
<div style="background: rgba(255,255,255,0.25); padding: 12px 20px; border-radius: 16px; font-weight: 700; flex: 1 1 200px; min-width: 200px;">
DevOps Practices
</div>
</div>
<p style="max-width: 100%; font-weight: 700; font-size: 18px; line-height: 1.7; margin-bottom: 20px;">
The SGA is dedicated to Software Developers, Software Developers Managers, and Task and Work Package Managers.
</p>
<p style="max-width: 100%; font-weight: 700; font-size: 18px; line-height: 1.7;">
The Software Governance Archipelago is a place where every learner begins their journey differently. There are no fixed rules and no mandatory starting points. Each island offers its own knowledge, and every student is free to drop an anchor wherever their curiosity or their challenges are.
</p>
</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>
<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>
<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>
<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>
</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> |