59 lines
3.1 KiB
HTML
59 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bratonien Adventskalender 2025</title>
|
|
|
|
<!-- === Styles === -->
|
|
<link rel="stylesheet" href="../shared/style.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
|
|
<!-- === Favicon (optional, falls du schon eines angelegt hast) === -->
|
|
<link rel="icon" type="image/png" href="favicon-2025.png">
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<h1>Bratonien Adventskalender 2025</h1>
|
|
|
|
<div class="kalenderbild">
|
|
<!-- Basisbild -->
|
|
<img src="assets/picture/Basisbild.png" alt="Bratonien Adventskalender 2025">
|
|
<!-- Adventskalender-Türchen -->
|
|
<!-- Reihe 1 -->
|
|
<div class="door" data-day="1" data-top="10" data-left="5" data-width="8.5">1</div>
|
|
<div class="door" data-day="2" data-top="10" data-left="20" data-width="8.5">2</div>
|
|
<div class="door" data-day="3" data-top="10" data-left="35" data-width="8.5">3</div>
|
|
<div class="door" data-day="4" data-top="10" data-left="50" data-width="8.5">4</div>
|
|
<div class="door" data-day="5" data-top="10" data-left="65" data-width="8.5">5</div>
|
|
<div class="door" data-day="6" data-top="10" data-left="80" data-width="10.0">6</div>
|
|
|
|
<!-- Reihe 2 (leicht nach rechts versetzt) -->
|
|
<div class="door" data-day="7" data-top="30" data-left="8" data-width="8.5">7</div>
|
|
<div class="door" data-day="8" data-top="30" data-left="23" data-width="8.5">8</div>
|
|
<div class="door" data-day="9" data-top="30" data-left="38" data-width="8.5">9</div>
|
|
<div class="door" data-day="10" data-top="30" data-left="53" data-width="8.5">10</div>
|
|
<div class="door" data-day="11" data-top="30" data-left="68" data-width="8.5">11</div>
|
|
<div class="door" data-day="12" data-top="30" data-left="83" data-width="8.5">12</div>
|
|
|
|
<!-- Reihe 3 (leicht nach links versetzt) -->
|
|
<div class="door" data-day="13" data-top="50" data-left="3" data-width="8.5">13</div>
|
|
<div class="door" data-day="14" data-top="50" data-left="18" data-width="8.5">14</div>
|
|
<div class="door" data-day="15" data-top="50" data-left="33" data-width="8.5">15</div>
|
|
<div class="door" data-day="16" data-top="50" data-left="48" data-width="8.5">16</div>
|
|
<div class="door" data-day="17" data-top="50" data-left="63" data-width="8.5">17</div>
|
|
<div class="door" data-day="18" data-top="50" data-left="78" data-width="8.5">18</div>
|
|
|
|
<!-- Reihe 4 (wieder leicht nach rechts) -->
|
|
<div class="door" data-day="19" data-top="70" data-left="7" data-width="8.5">19</div>
|
|
<div class="door" data-day="20" data-top="70" data-left="22" data-width="8.5">20</div>
|
|
<div class="door" data-day="21" data-top="70" data-left="37" data-width="8.5">21</div>
|
|
<div class="door" data-day="22" data-top="70" data-left="52" data-width="8.5">22</div>
|
|
<div class="door" data-day="23" data-top="70" data-left="67" data-width="8.5">23</div>
|
|
<div class="door" data-day="24" data-top="70" data-left="82" data-width="10.0">24</div>
|
|
</div>
|
|
</main>
|
|
<script src="../shared/js/position.js"></script>
|
|
</body>
|
|
</html> |