| 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>
<style>
/* LOKALNI STILOVI SAMO ZA OVU STRANU */<!-- Poppins font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
.geant-eademy-page * body {
box-sizing: border-boxmargin: 0;
background: #ffffff;
color: #2C3E50;
}
.geanthero-eademyintro-pagecontainer {
font-family: 'Poppins', sans-serif;
}
background: #f4f7fb;
/* Hero Section */
color: #2C3E50; .hero {
padding: 0background: linear-gradient(135deg, #5c9ded, #7cd3a3);
margincolor: 0#000000;
}
.geant-eademy-page h2 {text-align: center;
font-sizepadding: clamp(26px, 4vw, 34px) 40px 20px 100px 20px;
fontborder-weight: 700radius: 0 0 50px 50px;
margin-bottomposition: 25pxrelative;
}
.geant-eademy-page phero h3 {
font-size: 16px clamp(28px, 3vw, 38px);
linefont-heightweight: 1.5700;
colormargin: #5550;
}
/* .geant-eademy-page .hero {
Intro Section – isti okvir kao original */
background: linear-gradient(135deg, #5c9ded, #7cd3a3);.intro-section {
colorbackground: white#ffffff;
/* ista bela text-align: center;pozadina */
paddingborder-radius: 60px 20px;
/* isti zaobljeni uglovi border-radius: 0 0 50px 50px;
}
.geant-eademy-page .hero h1 {*/
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* ista senka */
fontmax-sizewidth: clamp(24px, 5vw, 38px)1400px;
font-weightmargin: 700-80px auto 40px auto;
margin-bottompadding: 20px50px;
}
.geant-eademy-page .hero p {text-align: left;
font-sizeposition: 16pxrelative;
maxz-widthindex: 800px10;
}
margin: 0 auto; .intro-section h4 {
colorfont-size: #f0f0f022px;
font-weight: 600;
}
.geant-eademy-page .section {margin-bottom: 25px;
paddingcolor: 50px 5%#34495e;
backgroundtext-align: #ffffffcenter;
}
border-radius: 20px; .intro-section p {
boxfont-shadowsize: 0 8px 20px rgba(0, 0, 0, 0.05)18px;
marginfont-weight: 40px auto400;
maxline-widthheight: 1300px1.8;
}
.geant-eademy-page .courses-title {margin-bottom: 20px;
text-aligncolor: center#2C3E50;
}
font-size: 2.2em;
/* Islands / font-weight: 700;Cards */
margin-bottom: 40px;.hero-list {
colordisplay: #003366grid;
}
/* GRID ZA KURSEVE → UVEK 4 KOLONE */
.geant-eademy-page .courses-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
displaygap: grid20px;
grid-template-columnsmargin: repeat(4, 1fr)40px 0;
gappadding: 20px0;
}
padding-top: 20px;
}
.hero-list .island {
@media (maxlist-widthstyle: 1024px) {none;
.geant-eademy-page .courses-grid {background: #f9f9f9;
border: grid-template-columns: repeat(2, 1fr)2px solid #5c9ded;
}padding: 14px;
}
border-radius: @media (max-width: 600px) {14px;
font-weight: 600;
.geant-eademy-page .courses-grid {font-size: 16px;
grid-template-columnstext-align: 1frcenter;
}transition: 0.3s;
}
.geant-eademy-page .course-card {color: #0B1F33;
positiondisplay: relative; /* da pozicioniramo "coming soon" apsolutno */flex;
backgroundalign-items: #f9f9f9center;
borderjustify-content: 2px solid transparentcenter;
bordermin-radiusheight: 14px20px;
paddingbox-shadow: 20px;
0 4px 10px rgba(0,0,0,0.05);
text-align: center; }
.hero-list transition.governance:hover { background: 0.3s#cce0f5;
border-color: #cce0f5; }
min-height: 180px; /* fiksna visina za sve kartice */
}
.hero-list .quality:hover { background: #e0d1eb; border-color: #e0d1eb; }
.geanthero-eademy-pagelist .course-cardlicencing:hover {
background: transform: translateY(-6px);#ffe0cc; border-color: #ffe0cc; }
.hero-list border-color: #5c9ded;
.devops:hover { background: #d6f5e3; boxborder-shadowcolor: 0 8px 18px rgba(0,0,0,0.12);
#d6f5e3; }
.geant-eademy-page .course-card .emoji@media (max-width: 768px) {
font-size.intro-section { padding: 38px30px; }
.intro-section p margin{ font-bottomsize: 10px16px; }
}
</style>
</head>
<body>
.geant-eademy-page .course-card a {<div class="hero-intro-container">
<!-- Hero -->
text-decoration: none;<div class="hero">
font-size: 1em;
font-weight: 700;<h3>Welcome to the Software Excellence eAcademy!</h3>
</div>
color: #2c3e50;
transition: color 0.3s; <!-- Intro Section (isti okvir, bez slike) -->
display: inline-block;
}<div class="intro-section">
<h4>Explore the Archipelago of Knowledge</h4>
.geant-eademy-page .course-card a:hover { <p>
color: #ff6600;
The Software Excellence }
/* 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;eAcademy (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:
font-weight: 500;</p>
color: #ff6600;<ul class="hero-list">
line-height: 1.2;
<li class="island }
.geant-eademy-page .three-grid {
governance">🌍 Software Governance in GÉANT</li>
display: grid;
<li class="island quality">✅ Software Quality</li>
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
<li class="island licencing">📜 gap: 20px;Software Licencing</li>
margin-top: 30px;
<li class="island devops">⚙️ DevOps }Practices</li>
.geant-eademy-page .info-card { </ul>
background: #f4f7fb;
border-radius: 14px;<p>— all while following an engaging, game-inspired learning journey.</p>
padding: 25px;
text-align: center;
transition: 0.3s;<p>The SEA is dedicated to Software Developers, Software Development Managers, and Task and Work Package Managers.</p>
}
<p>The .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:hoverSoftware Excellence 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>
</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 {
colorfont-family: #ff6600'Poppins', sans-serif;
}
.geantcourses-eademy-pagesection .testimonialssection {
displaypadding: grid40px 5%;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))background: #ffffff;
gapborder-radius: 20px;
marginbox-topshadow: 40px;
0 8px 20px }
.geant-eademy-page .testimonial-card {rgba(0, 0, 0, 0.05);
backgroundmargin: #f9f9f940px auto;
paddingmax-width: 25px1300px;
}
border-radius: 14px; .courses-section .courses-title {
boxtext-shadowalign: 0 6px 16px rgba(0,0,0,0.08)center;
displayfont-size: flex2.4em;
flexfont-directionweight: column700;
heightmargin-bottom: 100%35px;
/* sve iste visine */color: #003366;
}
.geantcourses-eademy-pagesection .testimonial-card p {courses-grid {
display: grid;
fontgrid-template-sizecolumns: 15px repeat(4, 1fr);
font-stylegap: italic18px;
colorpadding-top: #44415px;
}
.geant-eademy-page .testimonial-card h4@media (max-width: 1024px) {
margin.courses-top: auto; /* zalepi uz donju ivicu */
section .courses-grid {
font-size: 14pxgrid-template-columns: repeat(2, 1fr);
font-weight: 700;}
}
color: #003366;
@media (max-width: 600px) }{
.geantcourses-eademy-pagesection .sectioncourses-titlegrid {
textgrid-template-aligncolumns: center1fr;
font-size: 2em;}
}
font-weight: 700;.courses-section .course-card {
margin-bottombackground: 35px#f9f9f9;
colorborder: #0033662px solid transparent;
}
</style>
</head>
<body>
<div class="geant-eademy-page">
<!-- Hero -->
<div class="hero"> border-radius: 14px;
padding: 16px;
<h1>Welcome to the GÉANT eAcademy – Software Governance eAcademy</h1>
<p>Learn, share, and create knowledge on software development, open source licensing, compliance, and quality assurance. Explore our courses or contribute by creating new ones to support the GÉANT community.</p>
</div>
<!-- Courses -->
<div class="section">
<h2 class="courses-title">🎓 <b>Available Courses</b></h2>
<div class="courses-grid">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);
<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>border-color: #5c9ded;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
<div class=" .courses-section .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>.emoji {
font-size: 34px;
margin-bottom: 8px;
}
<div class=" .courses-section .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> a {
text-decoration: none;
font-size: 1.2em;
font-weight: 700;
<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>color: #2c3e50;
transition: color 0.3s;
<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> display: inline-block;
line-height: 1.4;
}
<div class=".courses-section .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" --> a:hover {
color: #ff6600;
}
.courses-section .coming-soon {
position: absolute;
<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>top: 8px;
right: 8px;
background: #ff6600;
color: #fff;
<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>font-size: 0.7em;
font-weight: 700;
<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 -->
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 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 class="course-card">
<div class="emoji">📊</div>
<a href="https://e-academy.geant.org/moodle/course/view.php?id=750" target="_blank">
<b>Software Catalogue - How to Build a Unified Project View</b>
</a>
</div>
<div class="course-card coming">
<div class="coming-soon">Coming Soon</div>
<div class="emoji">⚡</div>
<a href="#">
<b>Scripts and Tools to Accelerate Your Software Project</b>
</a>
</div>
</div>
</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>
|
|
|
|
