<!DOCTYPE html>
 
<html lang="el">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Άσκηση CSS - Α' Λυκείου</title>
 
      <!-- Σύνδεση με το εξωτερικό αρχείο CSS -->
      <link rel="stylesheet" href="styles.css">
   </head>
 
   <body>
 
      <header id="main-header">
      <!-- 1η Επικεφαλίδα -->
      <h1>Ο Κόσμος της Διαστημικής Εξερεύνησης</h1>
      <p class="subtitle">Μια μικρή εισαγωγή στο άπειρο σύμπαν</p>
      </header>
 
      <main class="container">
 
      <section class="card">
         <!-- 2η Επικεφαλίδα -->
         <h2>1. Τι είναι το Σύμπαν;</h2>
         <p>Το σύμπαν περιλαμβάνει <strong>όλη τη ύλη</strong> και τον χώρο που υπάρχει. Μελέτησε την επιστήμη της <em class="highlight">Αστρονομίας</em> για να μάθεις περισσότερα.
         </p>
      </section>
 
      <section class="card">
         <!-- 3η Επικεφαλίδα -->
         <h2>2. Βασικά Ουράνια Σώματα</h2>
         <p>Στο σύμπαν συναντάμε διάφορα είδη σωμάτων:</p>
         <ul class="space-list">
            <li>Αστέρες (όπως ο Ήλιος)</li>
            <li>Πλανήτες <span class="badge">Γη</span></li>
            <li>Γαλαξίες</li>
         </ul>
      </section>
 
      <section class="card highlight-box">
         <!-- 4η Επικεφαλίδα -->
         <h2>3. Γίνε Αστροναύτης</h2>
         <p>Θέλεις να μάθεις πώς εκπαιδεύονται οι αστροναύτες της NASA;</p>
         <a href="#" class="btn">Μάθε περισσότερα</a>
      </section>
 
      </main>
 
      <footer>
         <p>© 2026 Μάθημα Πληροφορικής Α' Λυκείου</p>
      </footer>
 
   </body>
</html>