2020-12-10 19:09:29 +01:00
19 changed files with 420 additions and 152 deletions
--- a/.sass-cache/ada65bb44dac65ec89302d098e8af6a8fb81592a/_home.sassc
+++ b/.sass-cache/ada65bb44dac65ec89302d098e8af6a8fb81592a/_home.sassc
--- a/.sass-cache/ada65bb44dac65ec89302d098e8af6a8fb81592a/_nav.sassc
+++ b/.sass-cache/ada65bb44dac65ec89302d098e8af6a8fb81592a/_nav.sassc
--- a/.sass-cache/ada65bb44dac65ec89302d098e8af6a8fb81592a/main.sassc
+++ b/.sass-cache/ada65bb44dac65ec89302d098e8af6a8fb81592a/main.sassc
--- a/css/main.css
+++ b/css/main.css
--- a/css/main.css.map
+++ b/css/main.css.map
--- a/inc/bg/baum.jpeg
+++ b/inc/bg/baum.jpeg
--- a/inc/bg/baum2.jpg
+++ b/inc/bg/baum2.jpg
--- a/index.php
+++ b/index.php
@@ -20,20 +20,20 @@ if ($tab == "") {$tab = "home";}
              Mellys Weihnachts Kalender
        </h1>
    </header>
-   <!--  <nav id="nav">
-			<ul class="navUl">
-				<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>
+  <!--  <nav>
+		<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>
 					<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(){
--- a/sass/_home.sass
+++ b/sass/_home.sass
@@ -2,10 +2,10 @@ $timerPosition: -10px

 .TimeContainer
    margin-top: $navtop
-    color: darkred 
+    color: darkred
    font-size: 20px
    font-weight: bold
-    text-shadow: 1px 1px 1px darkgray 
+    text-shadow: 1px 1px 1px darkgray

 #clockdiv

@@ -27,13 +27,7 @@ $timerPosition: -10px
            padding-top: 40px
            display: inline-block
            margin-left: $timerPosition
-            
+
 .smalltext
    font-size: 10px
    margin-left: $timerPosition
-
-
-.KalenderTest
-    h3
-        text-decoration: underline
-        border: 3px solid red
--- a/sass/_kalender.sass
+++ b/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
--- a/sass/_nav.sass
+++ b/sass/_nav.sass
@@ -1,52 +1,49 @@
-ul
-  list-style-type: none
-  margin: -2px auto
-  padding: 0
+$navInPadding: 0.5rem

-  /*overflow: hidden;
-  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
+/* ******************

-  &.navUl
-    height: 33px
+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

-li
-  float: left
-  width: auto
+  li
+    float: left
+    width: auto
+    margin: 0px 0px
+    
+    &:first-child
+      padding-left: $navInPadding

-  /*height: 33px;
-  margin: 0px 0px
+    a
+      display: block
+      color: darkred
+      text-align: center
+      padding: 0.4rem $navInPadding $navInPadding 0
+      text-decoration: none
+      font-weight: bold
+      
+      &:active, &:hover, &:focus, &.active
+        /*background: none;
+        color: red
+        text-decoration: underline

-  /*border: 1px solid lightgrey;
-  border-radius: 0px
+      &:active, &:hover, &:focus
+        transition: 1s
+        transform: scale(1.1)

-  a
-    display: block
-    color: darkred
-    text-align: center
-    padding: 7px 16px
-    text-decoration: none
-    margin: 1px 0 4px
-    font-weight: bold
+  ul li ul li
+    display: inline-block

-nav > ul > li
-  width: 100px
-
-li a
-  &:active, &:hover, &:focus, &.active
-    background: none
-    color: red
-    text-decoration: underline
-
-  &:active, &:hover, &:focus
-    transition: 1s
-    transform: scale(1.1)
-
-ul li ul li
-  display: inline-block
+  > ul > li > ul > li
+    margin: middle

 .submenu
  visibility: hidden
@@ -55,20 +52,11 @@ ul li ul li
  margin-left: -10px
  background-color: rgb(255, 255, 255)

-  li
-    a
-      display: block
-      float: none
-      border-bottom: 1px solid goldenrod
-      margin: 0 0 0 0
-
+  li, a
    display: block
    float: none
    border-bottom: 1px solid goldenrod
    margin: 0 0 0 0

 .submenuActive
-  visibility: visible
-
-nav > ul > li > ul > li
-  margin: middle
+  visibility: visible
--- a/sass/_tueren.sass
+++ b/sass/_tueren.sass
@@ -0,0 +1,6 @@
+.tueren
+  margin-top: $navtop
+    
+  h3
+    color: red
+    text-decoration: underline
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -1,6 +1,6 @@
 $navtop: 20px
 $txttop: 5px
-@import 'nav', 'home'
+@import 'nav', 'home', 'kalender', 'tueren'

 /* **************************************

--- a/tab/datenschutz.php
+++ b/tab/datenschutz.php
@@ -1,6 +1,6 @@
 <style>
   #teet {
-    display: inline-block; 
+    display: inline-block;
    color: black;
    font-size: 0.7rem;
    font-weight: normal;
@@ -8,7 +8,7 @@
    border: 0px solid red;
    max-width: 700px;
   }
-   
+
   span {
    text-decoration: underline;
    font-weight: bold;
@@ -17,17 +17,17 @@
    color: red;
    text-decoration: underline;
   }
-   
+
 </style>

 <h3 id="titel">Datenschutz Gesetzt</h3>

 <div id="teet">
-        
+
 <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>

@@ -78,4 +78,4 @@ In den erstellten Gästebüchern haben Sie die Möglichkeit einen Eintrag zu hin
 <p></p>
 <p> Stand: 28.09.20 </p>

-</div> 
+</div>
--- a/tab/home.php
+++ b/tab/home.php
@@ -160,8 +160,22 @@
    }, 1000);
    </script>

-<div class="KalenderTest">
-
-    <h3> Kalender Test Bereich zum Testen </h3>
-
+<div style="
+display:inline-block;
+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") ?>
--- a/tab/impressum.php
+++ b/tab/impressum.php
@@ -1,6 +1,6 @@
 <style>
   #teet {
-    display: inline-block; 
+    display: inline-block;
    color: black;
    font-size: 0.7rem;
    font-weight: normal;
@@ -8,7 +8,7 @@
    border: 0px solid red;
    max-width: 700px;
   }
-   
+
   span {
    text-decoration: underline;
    font-weight: bold;
@@ -17,83 +17,83 @@
    color: red;
    text-decoration: underline;
   }
-   
+
 </style>

 <h3 id="titel">Impressum</h3>

 <div id="teet">

-<p>Jason Illg</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> 
+<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>

 <p><span>§ 1 Warnhinweis zu Inhalten</span></p>

-<p>Die kostenlosen und frei zugänglichen Inhalte dieser Webseite wurden mit größtmöglicher 
-Sorgfalt erstellt. Der Anbieter dieser Webseite 
-übernimmt jedoch keine Gewähr für die 
-Richtigkeit und Aktualität der bereitgestellten 
-kostenlosen und frei zugänglichen 
-journalistischen Ratgeber und Nachrichten. 
-Namentlich gekennzeichnete Beiträge geben die 
-Meinung des jeweiligen Autors und nicht immer 
-die Meinung des Anbieters wieder. Allein durch 
-den Aufruf der kostenlosen und frei 
-zugänglichen Inhalte kommt keinerlei 
-Vertragsverhältnis zwischen dem Nutzer und dem 
-Anbieter zustande, insoweit fehlt es am 
-Rechtsbindungswillen des Anbieters.</p> <p><span>§ 2 
-Externe Links</span></p> <p>Diese Website enthält 
-Verknüpfungen zu Websites Dritter ("externe 
-Links"). Diese Websites unterliegen der Haftung 
-der jeweiligen Betreiber. Der Anbieter hat bei 
-der erstmaligen Verknüpfung der externen Links 
-die fremden Inhalte daraufhin überprüft, ob 
-etwaige Rechtsverstöße bestehen. Zu dem 
-Zeitpunkt waren keine Rechtsverstöße 
-ersichtlich. Der Anbieter hat keinerlei 
-Einfluss auf die aktuelle und zukünftige 
-Gestaltung und auf die Inhalte der verknüpften 
-Seiten. Das Setzen von externen Links bedeutet 
-nicht, dass sich der Anbieter die hinter dem 
-Verweis oder Link liegenden Inhalte zu Eigen 
-macht. Eine ständige Kontrolle der externen 
-Links ist für den Anbieter ohne konkrete 
-Hinweise auf Rechtsverstöße nicht zumutbar. Bei 
-Kenntnis von Rechtsverstößen werden jedoch 
-derartige externe Links unverzüglich 
-gelöscht.</p> <p><span>§ 3 Urheber- und 
-Leistungsschutzrechte</span></p> <p>Die auf dieser 
-Website veröffentlichten Inhalte unterliegen 
-dem deutschen Urheber- und 
-Leistungsschutzrecht. Jede vom deutschen 
-Urheber- und Leistungsschutzrecht nicht 
-zugelassene Verwertung bedarf der vorherigen 
-schriftlichen Zustimmung des Anbieters oder 
-jeweiligen Rechteinhabers. Dies gilt 
-insbesondere für Vervielfältigung, Bearbeitung, 
-Übersetzung, Einspeicherung, Verarbeitung bzw. 
-Wiedergabe von Inhalten in Datenbanken oder 
-anderen elektronischen Medien und Systemen. 
-Inhalte und Rechte Dritter sind dabei als 
-solche gekennzeichnet. Die unerlaubte 
-Vervielfältigung oder Weitergabe einzelner 
-Inhalte oder kompletter Seiten ist nicht 
-gestattet und strafbar. Lediglich die 
-Herstellung von Kopien und Downloads für den 
-persönlichen, privaten und nicht kommerziellen 
-Gebrauch ist erlaubt.</p> <p>Die Darstellung 
-dieser Website in fremden Frames ist nur mit 
-schriftlicher Erlaubnis zulässig.</p> <p><span>§ 4 
-Besondere Nutzungsbedingungen</span></p> <p>Soweit 
-besondere Bedingungen für einzelne Nutzungen 
-dieser Website von den vorgenannten Paragraphen 
-abweichen, wird an entsprechender Stelle 
-ausdrücklich darauf hingewiesen. In diesem 
-Falle gelten im jeweiligen Einzelfall die 
+<p>Die kostenlosen und frei zugänglichen Inhalte dieser Webseite wurden mit größtmöglicher
+Sorgfalt erstellt. Der Anbieter dieser Webseite
+übernimmt jedoch keine Gewähr für die
+Richtigkeit und Aktualität der bereitgestellten
+kostenlosen und frei zugänglichen
+journalistischen Ratgeber und Nachrichten.
+Namentlich gekennzeichnete Beiträge geben die
+Meinung des jeweiligen Autors und nicht immer
+die Meinung des Anbieters wieder. Allein durch
+den Aufruf der kostenlosen und frei
+zugänglichen Inhalte kommt keinerlei
+Vertragsverhältnis zwischen dem Nutzer und dem
+Anbieter zustande, insoweit fehlt es am
+Rechtsbindungswillen des Anbieters.</p> <p><span>§ 2
+Externe Links</span></p> <p>Diese Website enthält
+Verknüpfungen zu Websites Dritter ("externe
+Links"). Diese Websites unterliegen der Haftung
+der jeweiligen Betreiber. Der Anbieter hat bei
+der erstmaligen Verknüpfung der externen Links
+die fremden Inhalte daraufhin überprüft, ob
+etwaige Rechtsverstöße bestehen. Zu dem
+Zeitpunkt waren keine Rechtsverstöße
+ersichtlich. Der Anbieter hat keinerlei
+Einfluss auf die aktuelle und zukünftige
+Gestaltung und auf die Inhalte der verknüpften
+Seiten. Das Setzen von externen Links bedeutet
+nicht, dass sich der Anbieter die hinter dem
+Verweis oder Link liegenden Inhalte zu Eigen
+macht. Eine ständige Kontrolle der externen
+Links ist für den Anbieter ohne konkrete
+Hinweise auf Rechtsverstöße nicht zumutbar. Bei
+Kenntnis von Rechtsverstößen werden jedoch
+derartige externe Links unverzüglich
+gelöscht.</p> <p><span>§ 3 Urheber- und
+Leistungsschutzrechte</span></p> <p>Die auf dieser
+Website veröffentlichten Inhalte unterliegen
+dem deutschen Urheber- und
+Leistungsschutzrecht. Jede vom deutschen
+Urheber- und Leistungsschutzrecht nicht
+zugelassene Verwertung bedarf der vorherigen
+schriftlichen Zustimmung des Anbieters oder
+jeweiligen Rechteinhabers. Dies gilt
+insbesondere für Vervielfältigung, Bearbeitung,
+Übersetzung, Einspeicherung, Verarbeitung bzw.
+Wiedergabe von Inhalten in Datenbanken oder
+anderen elektronischen Medien und Systemen.
+Inhalte und Rechte Dritter sind dabei als
+solche gekennzeichnet. Die unerlaubte
+Vervielfältigung oder Weitergabe einzelner
+Inhalte oder kompletter Seiten ist nicht
+gestattet und strafbar. Lediglich die
+Herstellung von Kopien und Downloads für den
+persönlichen, privaten und nicht kommerziellen
+Gebrauch ist erlaubt.</p> <p>Die Darstellung
+dieser Website in fremden Frames ist nur mit
+schriftlicher Erlaubnis zulässig.</p> <p><span>§ 4
+Besondere Nutzungsbedingungen</span></p> <p>Soweit
+besondere Bedingungen für einzelne Nutzungen
+dieser Website von den vorgenannten Paragraphen
+abweichen, wird an entsprechender Stelle
+ausdrücklich darauf hingewiesen. In diesem
+Falle gelten im jeweiligen Einzelfall die
 besonderen Nutzungsbedingungen.</p>

 <p> Stand: 28.09.20 </p>

-</div> 
+</div>
--- a/tab/kalender.php
+++ b/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>
--- a/tab/tür01.php
+++ b/tab/tür01.php
@@ -0,0 +1,15 @@
+<div class="tueren">
+    
+    <h3>Tür 1</h3>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+</div>
--- a/tab/tür02.php
+++ b/tab/tür02.php
@@ -0,0 +1,15 @@
+<div class="tueren">
+
+    <h3>Tür 2</h3>
+
+
+
+
+
+
+
+
+
+
+
+</div>