Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section


Column
width100%
Panel
borderColor#3A5673
titleColorwhite
borderWidth0
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 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;
    }

    .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>
      <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>


© October 2025 Test and Analysis Team GÉANT