index.php

@@ -20,20 +20,20 @@ if ($tab == "") {$tab = "home";}
               Mellys Weihnachts Kalender
         </h1>
     </header>
-   <!--  <nav id="nav">
+  <!--  <nav>
-			<ul class="navUl">
+		<ul>
 			<li><a href="?tab=home" <?php if ($tab == "home")?>>Home</a></li>
 			<li><a href="?tab=bilder" <?php if ($tab == "bilder")?>>Galerie</a></li>
 			<li><a href="?tab=gästebuch" <?php if ($tab == "gästebuch")?>>Gästebuch</a></li>
-				<li class="mainMenu"><a href="#">Über</a>
+			<!--	<li class="mainMenu"><a href="#">Über</a>
 					<ul class="submenu">
 						<li><a href="?tab=impressum">Impressum</a></li>	
 						<li><a href="?tab=datenschutz" <?php if ($tab == "datenschutz")?>>Datenschutz</a></li>
 						<li><a href="mailto:illg@illg.xyz?subject=HochzeitWeb" target="_blank">Kontak</a></li>
-					</ul>
+					</ul> -->
 				</li>
 		     </ul>
-		</nav> -->
+		</nav>
    
 		<script type="text/javascript">
 			$(".mainMenu > a").mouseover(function(){

sass/_home.sass

@@ -31,9 +31,3 @@ $timerPosition: -10px
 .smalltext
     font-size: 10px
     margin-left: $timerPosition
-
-
-.KalenderTest
-    h3
-        text-decoration: underline
-        border: 3px solid red

sass/_kalender.sass

@@ -0,0 +1,85 @@
+$backgroundSize: 516px // Größe Bild im Kalender
+$bgPosition: -13px // Position Bg und Türen
+$kalenderWidth: 460px // breite des kalenders
+$marginLeftRight: 5px  // abstand linker und rechter rand
+$marginTop: 5px      
+$marginBetween: 5px     // abstand zwischen den Tueren
+$doorBorderSize: 1px    
+$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
+
+/* ********************************
+
+.kalender
+  display: inline-block
+  position: relative
+  text-align: center
+  width: $kalenderWidth
+  height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
+  border: 1px solid black 
+  background: #fff url("../inc/bg/baum2.jpg") no-repeat
+  /*background-size: $backgroundWidth
+  background-size: $backgroundSize
+  background-position: $bgPosition 
+
+  div
+    position: absolute
+    border: $doorBorderSize solid darkred
+    width: $doorWidth
+    height: $doorWidth
+    overflow: hidden
+    background: #fff
+
+  h3
+    padding-top: 1.5rem
+    font-weight: bold
+    padding: 1rem
+
+  span
+    position: absolute
+    display: inline-block
+    top: 1rem
+    left: 1rem
+    font-size: 1rem
+    width: 1.2rem
+    height: 1.2rem
+    color: #FFF
+    background: #CD0000
+
+  .left
+    position: absolute
+    left: 0
+    top: 0
+    width: #{$doorWidth+50}
+    height: $doorWidth
+    display: block 
+    border: none
+    background: #fff url("../inc/bg/baum2.jpg") no-repeat
+    /*background-size: $backgroundWidth
+    background-size: $backgroundSize
+    margin-left: $bgPosition
+  a
+    &:hover .left, &:focus .left
+      left: #{-($doorWidth+60)}
+
+    .left
+      display: block
+      position: absolute 
+      transition: left 0.5s
+      
+  .inactive a
+    pointer-events: none
+    cursor: default
+
+  @for $row from 0 through 5
+    @for $col from 0 through 3
+      $leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
+      $topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
+      #ak#{$row*4+$col+1}
+        left: #{$leftCalc}
+        top: #{$topCalc}
+        .left
+          background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
+  
+#hiddenTuer
+  margin: 1rem
+  max-height: auto

sass/_nav.sass

@@ -1,43 +1,37 @@
-ul
+$navInPadding: 0.5rem
-  list-style-type: none
-  margin: -2px auto
-  padding: 0
 
-  /*overflow: hidden;
+/* ******************
+
+nav
+  ul
+    list-style-type: none
+    margin: -0.13rem auto
+    padding: 0
     background-color: hsla(0, 0%, 100%, 0.8)
     border: 2px solid darkred
     display: inline-block
     transition: all 60ms
     box-shadow: inset -2px -2px 10px lightblue, inset 2px 2px 10px lightblue
+    height: 2rem
 
-  &.navUl
+  li
-    height: 33px
-
-li
     float: left
     width: auto
-
-  /*height: 33px;
     margin: 0px 0px
     
-  /*border: 1px solid lightgrey;
+    &:first-child
-  border-radius: 0px
+      padding-left: $navInPadding
 
     a
       display: block
       color: darkred
       text-align: center
-    padding: 7px 16px
+      padding: 0.4rem $navInPadding $navInPadding 0
       text-decoration: none
-    margin: 1px 0 4px
       font-weight: bold
       
-nav > ul > li
-  width: 100px
-
-li a
       &:active, &:hover, &:focus, &.active
-    background: none
+        /*background: none;
         color: red
         text-decoration: underline
 
@@ -45,9 +39,12 @@ li a
         transition: 1s
         transform: scale(1.1)
 
-ul li ul li
+  ul li ul li
     display: inline-block
 
+  > ul > li > ul > li
+    margin: middle
+
 .submenu
   visibility: hidden
   position: relative
@@ -55,13 +52,7 @@ ul li ul li
   margin-left: -10px
   background-color: rgb(255, 255, 255)
 
-  li
+  li, a
-    a
-      display: block
-      float: none
-      border-bottom: 1px solid goldenrod
-      margin: 0 0 0 0
-
     display: block
     float: none
     border-bottom: 1px solid goldenrod
@@ -69,6 +60,3 @@ ul li ul li
 
 .submenuActive
   visibility: visible
-
-nav > ul > li > ul > li
-  margin: middle

sass/_tueren.sass

@@ -0,0 +1,6 @@
+.tueren
+  margin-top: $navtop
+    
+  h3
+    color: red
+    text-decoration: underline

sass/main.sass

@@ -1,6 +1,6 @@
 $navtop: 20px
 $txttop: 5px
-@import 'nav', 'home'
+@import 'nav', 'home', 'kalender', 'tueren'
 
 /* **************************************
 

tab/datenschutz.php

@@ -27,7 +27,7 @@
 <p>Diese Seite wird von mir als Einzelperson betrieben - ohne Gewinnerzielungsabsicht.</p>
 
 <p><span>Verantwortlich für die Datenerfassung</span><br><br>
-Jason Illg <br>
+Jason Lüthje <br>
 Bärlauchstraße 7 <br>
 22850 Norderstedt <br><br>
 

tab/home.php

@@ -160,8 +160,22 @@
     }, 1000);
     </script>
 
-<div class="KalenderTest">
+<div style="
-
+display:inline-block;
-    <h3> Kalender Test Bereich zum Testen </h3>
+font-weight:bold;
-
+color:darkred;
+margin-top:-3rem;
+padding: 0 1.5rem 0 1.5rem;
+text-decoration:underline;
+background-color:#fff;
+background: linear-gradient(to bottom, #fefffd, #e7e9ea 50%, #e1e1e1);
+border: 2px solid #C21514;
+">
+<h2>Bis der Kalender Startet !!!</h2>
 </div>
+
+<div class="">
+<h3></h3>
+</div>
+
+<?php include ("kalender.php") ?>

tab/impressum.php

@@ -24,7 +24,7 @@
 
 <div id="teet">
 
-<p>Jason Illg</p> <p>Bärlauchstraße 7<br> 
+<p>Jason Lüthje</p> <p>Bärlauchstraße 7<br>
 D-22850 Norderstedt</p> <p>E-Mail: <a href="mailto:illg@illg.xyz?subject=HochzeitWeb" target="_blank">illg@illg.xyz</a></p>
 <h2>Disclaimer – rechtliche Hinweise</h2>
 

tab/kalender.php

@@ -0,0 +1,151 @@
+<div class="kalender">
+
+	<div class="inactive" id="ak1">
+		<a href="?tab=tür01" <?php if ($tab == "tür01")?>>
+		<h3 id="hiddenTuer">Tür 01</h3>
+    <div class="left"><span>1</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak2">
+		<a href="?tab=tür02" <?php if ($tab == "tür02")?>>
+		<h3 id="hiddenTuer">Tür 02</h3>
+    <div class="left"><span>2</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak3">
+		<a href="?tab=tür03" <?php if ($tab == "tür03")?>>
+		<h3 id="hiddenTuer">Tür 03</h3>
+    <div class="left"><span>3</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak4">
+		<a href="?tab=tür04" <?php if ($tab == "tür04")?>>
+		<h3 id="hiddenTuer">Tür 04</h3>
+    <div class="left"><span>4</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak5">
+		<a href="?tab=tür05" <?php if ($tab == "tür05")?>>
+		<h3 id="hiddenTuer">Tür 05</h3>
+    <div class="left"><span>5</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak6">
+		<a href="?tab=tür06" <?php if ($tab == "tür06")?>>
+		<h3 id="hiddenTuer">Tür 06</h3>
+    <div class="left"><span>6</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak7">
+		<a href="?tab=tür07" <?php if ($tab == "tür07")?>>
+		<h3 id="hiddenTuer">Tür 07</h3>
+    <div class="left"><span>7</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak8">
+		<a href="?tab=tür08" <?php if ($tab == "tür08")?>>
+		<h3 id="hiddenTuer">Tür 08</h3>
+    <div class="left"><span>8</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak9">
+		<a href="?tab=tür09" <?php if ($tab == "tür09")?>>
+		<h3 id="hiddenTuer">Tür 09</h3>
+    <div class="left"><span>9</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak10">
+		<a href="?tab=tür10" <?php if ($tab == "tür10")?>>
+		<h3 id="hiddenTuer">Tür 10</h3>
+    <div class="left"><span>10</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak11">
+		<a href="?tab=tür11" <?php if ($tab == "tür11")?>>
+		<h3 id="hiddenTuer">Tür 11</h3>
+    <div class="left"><span>11</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak12">
+		<a href="?tab=tür12" <?php if ($tab == "tür12")?>>
+		<h3 id="hiddenTuer">Tür 12</h3>
+    <div class="left"><span>12</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak13">
+		<a href="?tab=tür13" <?php if ($tab == "tür13")?>>
+		<h3 id="hiddenTuer">Tür 13</h3>
+    <div class="left"><span>13</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak14">
+		<a href="?tab=tür14" <?php if ($tab == "tür14")?>>
+		<h3 id="hiddenTuer">Tür 14</h3>
+    <div class="left"><span>14</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak15">
+		<a href="?tab=tür15" <?php if ($tab == "tür15")?>>
+		<h3 id="hiddenTuer">Tür 15</h3>
+    <div class="left"><span>15</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak16">
+		<a href="?tab=tür16" <?php if ($tab == "tür16")?>>
+		<h3 id="hiddenTuer">Tür 16</h3>
+    <div class="left"><span>16</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak17">
+		<a href="?tab=tür17" <?php if ($tab == "tür17")?>>
+		<h3 id="hiddenTuer">Tür 17</h3>
+    <div class="left"><span>17</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak18">
+		<a href="?tab=tür18" <?php if ($tab == "tür18")?>>
+		<h3 id="hiddenTuer">Tür 18</h3>
+    <div class="left"><span>18</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak19">
+		<a href="?tab=tür19" <?php if ($tab == "tür19")?>>
+		<h3 id="hiddenTuer">Tür 19</h3>
+    <div class="left"><span>19</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak20">
+		<a href="?tab=tür20" <?php if ($tab == "tür20")?>>
+		<h3 id="hiddenTuer">Tür 20</h3>
+    <div class="left"><span>20</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak21">
+		<a href="?tab=tür21" <?php if ($tab == "tür21")?>>
+		<h3 id="hiddenTuer">Tür 21</h3>
+    <div class="left"><span>21</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak22">
+		<a href="?tab=tür22" <?php if ($tab == "tür22")?>>
+		<h3 id="hiddenTuer">Tür 22</h3>
+    <div class="left"><span>22</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak23">
+		<a href="?tab=tür23" <?php if ($tab == "tür23")?>>
+		<h3 id="hiddenTuer">Tür 23</h3>
+    <div class="left"><span>23</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak24">
+		<a href="?tab=tür24" <?php if ($tab == "tür24")?>>
+		<h3 id="hiddenTuer">Tür 24</h3>
+    <div class="left"><span>24</span></div>
+		</a>
+	</div>
+
+
+
+
+</div>

tab/tür01.php

@@ -0,0 +1,15 @@
+<div class="tueren">
+    
+    <h3>Tür 1</h3>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+</div>

tab/tür02.php

@@ -0,0 +1,15 @@
+<div class="tueren">
+
+    <h3>Tür 2</h3>
+
+
+
+
+
+
+
+
+
+
+
+</div>