| Column |
|---|
| | Panel |
|---|
| borderColor | #3A5673 |
|---|
| titleColor | white |
|---|
| borderWidth | 0 |
|---|
| titleBGColor | #a3c1ad |
|---|
| | HTML |
|---|
<!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 GovernanceExcellence eAcademy</title>
<!-- Poppins font <style>-->
<link /* Global */href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
*body {
box-sizingmargin: border-box0;
}
background: #ffffff;
body color: #2C3E50;
}
.hero-intro-container {
font-family: 'Poppins', sans-serif;
}
margin: 0;
/* Hero Section */
padding: 0;.hero {
background: #f4f7fb linear-gradient(135deg, #5c9ded, #7cd3a3);
color: #2C3E50#000000;
}
text-align: center;
h2, h3 { padding: 40px 20px 100px 20px;
marginborder-radius: 0 0 15px 050px 50px;
position: relative;
}
a {.hero h3 {
font-size: clamp(28px, 3vw, 38px);
textfont-decorationweight: none700;
colormargin: inherit0;
}
/* HeroIntro Section */
– isti okvir kao .herooriginal {*/
background: linear-gradient(135deg, #5c9ded, #7cd3a3);.intro-section {
colorbackground: #000000#ffffff; /* tekstista crnbela i upečatljivpozadina */
textborder-alignradius: center20px;
/* isti zaobljeni padding: 60px 20px;uglovi */
borderbox-radiusshadow: 0 8px 20px rgba(0, 50px 50px;
}
0, 0, 0.08); /* ista senka */
.hero h3 { max-width: 1400px;
font-size: clamp(26px, 3vw, 34px)margin: -80px auto 40px auto;
font-weightpadding: 70050px;
margintext-bottomalign: 25pxleft;
}
.hero p {position: relative;
fontz-sizeindex: 16px10;
}
max-width: 1000px; /* širi tekst */ .intro-section h4 {
marginfont-size: 0 auto 15px auto22px;
font-weight: 500600;
linemargin-heightbottom: 1.625px;
}
.hero-list {color: #34495e;
listtext-stylealign: nonecenter;
/* uklonjene tačkice */}
.intro-section p padding: 0;{
marginfont-size: 20px auto18px;
displayfont-weight: flex400;
flexline-wrapheight: wrap1.8;
justifymargin-contentbottom: center20px;
gapcolor: 15px#2C3E50;
}
/* Islands / Cards */
.hero-list li {
backgrounddisplay: rgba(255,255,255,0.2)grid;
padding: 10px 18pxgrid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
border-radiusgap: 20px;
font-weightmargin: 40px 6000;
font-sizepadding: 16px0;
}
/* Sections */
.section.hero-list .island {
paddinglist-style: 50px 5%none;
background: #ffffff#f9f9f9;
border-radius: 2px solid 20px#5c9ded;
box-shadowpadding: 014px;
8px 20px rgba(0, 0, 0, 0.05);
margin: 40px auto border-radius: 14px;
maxfont-widthweight: 1300px600;
}
.courses-title, .section-title {font-size: 16px;
text-align: center;
font-sizetransition: 20.2em3s;
font-weightcolor: 700#0B1F33;
margin-bottomdisplay: 40pxflex;
coloralign-items: #003366center;
}
/* Courses Grid */
.courses-grid {justify-content: center;
displaymin-height: grid20px;
gridbox-template-columns: repeat(4, 1frshadow: 0 4px 10px rgba(0,0,0,0.05);
gap: 20px;}
.hero-list padding-top.governance:hover { background: 20px#cce0f5;
border-color: #cce0f5; }
.coursehero-card {
list .quality:hover { positionbackground: #e0d1eb; border-color: relative#e0d1eb; }
.hero-list .licencing:hover { background: #f9f9f9#ffe0cc;
border-color: #ffe0cc; }
border: 2px solid transparent;
.hero-list .devops:hover { background: #d6f5e3; border-radiuscolor: 14px#d6f5e3; }
@media padding: 20px;(max-width: 768px) {
text-align.intro-section { padding: center30px; }
transition: 0.3s;
min-height: 180px;.intro-section p { font-size: 16px; }
}
</style>
</head>
<body>
.course-card:hover {<div class="hero-intro-container">
<!-- Hero transform: translateY(-6px);-->
border-color: #5c9ded;
<div class="hero">
<h3>Welcome box-shadow: 0 8px 18px rgba(0,0,0,0.12);to the Software Excellence eAcademy!</h3>
}</div>
.course<!--card .emojiIntro {
Section (isti okvir, bez slike) font-size: 38px;-->
margin-bottom: 10px;<div class="intro-section">
}
<h4>Explore the .course-card a {Archipelago of Knowledge</h4>
text-decoration: none;<p>
font-size: 1em;
The Software Excellence eAcademy font-weight: 700;
color: #2c3e50;
transition: color 0.3s;
display: inline-block;
}
.course-card a:hover {
color: #ff6600;
}
/* Info Cards */
.three-grid {(SEA) courses provide a journey designed to empower software teams with the knowledge and tools needed to implement effective software development processes. You will be able to learn more about software governance, secure code development, software best practice adoption, and software licence management tools. We have created four separate islands corresponding to learning spaces for you to explore freely:
display: grid;
</p>
<ul grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
class="hero-list">
<li class="island gap: 20px;governance">🌍 Software Governance in GÉANT</li>
margin-top: 30px;
}
<li class="island quality">✅ Software Quality</li>
.info-card {
<li class="island licencing">📜 background: #f4f7fb;Software Licencing</li>
border-radius: 14px;
<li class="island devops">⚙️ DevOps Practices</li>
padding: 25px;
</ul>
text-align: center;
<p>— all while transition: 0.3s;
}following an engaging, game-inspired learning journey.</p>
.info-card .emoji {
<p>The SEA is dedicated to font-size: 34px;
margin-bottom: 10px;Software Developers, Software Development Managers, and Task and Work Package Managers.</p>
}
<p>The Software Excellence .info-card h3Archipelago is a {
place where every learner begins their 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;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>
</div>
</body>
</html>
|
| HTML |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Courses Section</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
.courses-section {
font-family: 'Poppins', sans-serif;
}
.courses-section .section {
grid-template-columnspadding: repeat(auto-fit, minmax(280px, 1fr))40px 5%;
gapbackground: 20px#ffffff;
marginborder-topradius: 40px20px;
}
.testimonial-card {
background: #f9f9f9box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
paddingmargin: 25px40px auto;
bordermax-radiuswidth: 14px1300px;
}
box-shadow: 0 6px 16px rgba(0,0,0,0.08);.courses-section .courses-title {
displaytext-align: flexcenter;
flexfont-directionsize: column;
height: 100%;
}
.testimonial-card p {2.4em;
font-sizeweight: 15px700;
fontmargin-stylebottom: italic35px;
color: #444#003366;
}
.testimonialcourses-card h4section .courses-grid {
margin-topdisplay: autogrid;
fontgrid-template-sizecolumns: 14px;repeat(4, 1fr);
font-weightgap: 70018px;
colorpadding-top: #00336615px;
}
/* Responsive */
@media (max-width: 1024px) {
.courses-section .courses-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.courses-section .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;"> .courses-section .course-card {
background: #f9f9f9;
border: 2px solid transparent;
border-radius: 14px;
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 --padding: 16px;
text-align: center;
transition: 0.3s;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.courses-section .course-card:hover {
transform: translateY(-4px);
border-color: #5c9ded;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.courses-section .course-card .emoji {
font-size: 34px;
margin-bottom: 8px;
}
.courses-section .course-card a {
text-decoration: none;
font-size: 1.2em;
font-weight: 700;
color: #2c3e50;
transition: color 0.3s;
display: inline-block;
line-height: 1.4;
}
.courses-section .course-card a:hover {
color: #ff6600;
}
.courses-section .coming-soon {
position: absolute;
top: 8px;
right: 8px;
background: #ff6600;
color: #fff;
font-size: 0.7em;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
}
.courses-section .course-card.coming a {
pointer-events: none;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="courses-section">
<div class="section">
<h2 class="courses-title">🎓 <b>Available Courses</b></h2>
<div class="courses-grid">
<div class="course-card"><div>
<div class="emoji">🚀</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=631" target="_blank"><b>Onboarding>
<b>Onboarding Guide for Software Development Teams</b></a><b>
</a>
</div>
<div class="course-card"><div>
<div class="emoji">💡</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=571" target="_blank"><b>Introduction>
<b>Introduction to Common Best Practices (CBPs)</b></a></div>b>
<div class="course-card"><div class </a>
</div>
<div class="course-card">
<div class="emoji">🛡️</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=628" target="_blank"><b>Security>
<b>Security Testing and Quality Assurance</b></a></div>b>
<div class= </a>
</div>
<div class="course-card"><div>
<div class="emoji">📜</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=571" target="_blank"><b>Introduction>
<b>Introduction to Open Source Licensing and Compliance</b></a></div>b>
<div class="course-card"><div </a>
</div>
<div class="course-card">
<div class="emoji">🔍</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=214" target="_blank"><b>Open Source Licensing and Compliance</b></a></div> >
<b>Open Source Licensing and Compliance</b>
<div </a>
</div>
<div class="course-card"><div>
<div class="emoji">⚙️</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=665" target="_blank"><b>OSS>
<b>OSS: From Fundamentals to Compliance</b></a></div>b>
<div class="course-card"><div </a>
</div>
<div class="course-card">
<div class="emoji">🏅</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=682" target="_blank"><b>Essential>
<b>Essential Aspects of Software Licensing in GÉANT</b></a></div>b>
<div class= </a>
</div>
<div class="course-card"><div>
<div class="emoji">📘</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=684" target="_blank"><b>Open>
<b>Open Source Licences Used in GÉANT</b></a></div>b>
<div class="course-card"><div </a>
</div>
<div class="course-card">
<div class="emoji">🖋️</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=687" target="_blank"><b>Licensing>
<b>Licensing and Artefacts Creation Process</b></a></div>b>
<div class= </a>
</div>
<div class="course-card"><div>
<div class="emoji">✅</div><adiv>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=688" target="_blank"><b>Compliance>
<b>Compliance and Required Artefacts</b></a></div>b>
</div>a>
</div>
<!-- Knowledge Base / Inspiration / Checklist -->
<div class="section">
<h2 class="section-title">📖 <b>Support for Course Creators</b></h2>course-card">
<div class="three-grid">
<div class="info-card">emoji">📊</div>
<div<a classhref="emoji">📚</div>
<h3><a href="https://wikihttps://e-academy.geant.org/spacesmoodle/GSD/pages/940147168/eAcademy+Knowledge+Basecourse/view.php?id=750" target="_blank"><b>Knowledge Base</b></a></h3>
>
<p>Learn how<b>Software toCatalogue design,- structure,How andto publishBuild coursesa in eAcademy.</p>Unified Project View</b>
</a>
</div>
<div class="infocourse-card coming">
<div class="emoji">💡<coming-soon">Coming Soon</div>
<h3><a<div hrefclass="https://wiki.geant.org/spaces/GSD/pages/1190199455/Inspiration" target="_blank"><b>Inspiration</b></a></h3>emoji">⚡</div>
<p>Guidance and examples to boost your creativity and confidence.</p>
</div><a href="#">
<b>Scripts and Tools to Accelerate Your Software Project</b>
<div class="info-card"> </a>
<div class="emoji">✅<</div>
</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>
</div>
</body>
</html>
|
| HTML |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Support Section</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
/* Poppins samo za support sekciju */
.support-section {
font-family: 'Poppins', sans-serif;
}
.support-section .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;
color: #2C3E50;
}
.support-section .section-title {
text-align: center;
font-size: 2.4em; /* veliki naslov (~38px) */
font-weight: 700;
margin-bottom: 40px;
color: #003366;
}
.support-section .three-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 30px;
}
.support-section .info-card {
background: #f4f7fb;
border-radius: 14px;
padding: 25px;
text-align: center;
}
.support-section .info-card .emoji {
font-size: 34px;
margin-bottom: 10px;
}
.support-section .info-card h3 a {
color: #0B1F33;
font-weight: 700;
font-size: 1.1em;
text-decoration: none;
}
.support-section .info-card h3 a:hover {
color: #ff6600;
}
</style>
</head>
<body>
<!-- Support Section -->
<div class="support-section">
<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>
</div>
</body>
</html>
|
| HTML |
|---|
<!-- Testimonials Section -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testimonials Section</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
/* Poppins samo za testimonials sekciju */
.testimonials-section {
font-family: 'Poppins', sans-serif;
}
.testimonials-section .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;
color: #2C3E50;
}
.testimonials-section .section-title {
text-align: center;
font-size: 2.4em; /* veliki naslov (~38px) */
font-weight: 700;
margin-bottom: 40px;
color: #003366;
}
.testimonials-section .testimonials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 40px;
}
.testimonials-section .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;
}
.testimonials-section .testimonial-card p {
font-size: 15px;
font-style: italic;
color: #444;
}
.testimonials-section .testimonial-card h4 {
margin-top: auto;
font-size: 14px;
font-weight: 700;
color: #003366;
}
</style>
</head>
<body>
<!-- Testimonials Section -->
<div class="testimonials-section">
<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>
|
|
|
|
