Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Koledar</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
</head>
<body>
  <center>
  <h1>
    Zasedenost prostora
  </h1>
    </center>
    <!-- Password Section -->
    <div class="password-section">
        <input type="password" id="password" placeholder="Vpiši geslo" />
        <button id="submit-password">Potrdi</button>
    </div>

    <!-- Main Container for Calendar -->
    <div class="container">
        <div class="calendar">
            <div class="month">
                <i class="fas fa-angle-left prev"></i>
                <div class="date">
                    <h1></h1>
                    <p></p>
                </div>
                <i class="fas fa-angle-right next"></i>
            </div>
            <div class="weekdays">
                <div>Ned</div>
                <div>Pon</div>
                <div>Tor</div>
                <div>Sre</div>
                <div>Čet</div>
                <div>Pet</div>
                <div>Sob</div>
            </div>
            <div class="days"></div>
        </div>

        <!-- Legend directly below the calendar -->
        <div class="legend">
            <div><span class="red-box"></span> zasedeno</div>
            <div><span class="green-box"></span> danes</div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>