JasTobi/WeihnachtsKalenderMelly
3
0
Fork 0
Code Issues 3 Pull Requests Releases 4 Activity

kalnder erneuert

Browse Source
This commit is contained in:
Jason
2020-12-10 18:30:51 +01:00
parent 6901b4231d
commit a7a0ba7c61
15 changed files with 342 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.sass-cache/ada65bb44dac65ec89302d098e8af6a8fb81592a/_nav.sassc
View File

Binary file not shown.

BIN
.sass-cache/ada65bb44dac65ec89302d098e8af6a8fb81592a/main.sassc
View File

Binary file not shown.

2
css/main.css
View File

File diff suppressed because one or more lines are too long

4
css/main.css.map
View File

File diff suppressed because one or more lines are too long

BIN
inc/bg/baum.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
inc/bg/baum2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

10
index.php
View File

@@ -20,20 +20,20 @@ if ($tab == "") {$tab = "home";}
Mellys Weihnachts Kalender
</h1>
</header>
<!-- <nav id="nav">
<ul class="navUl">
<!-- <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>
<!-- <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(){

85
sass/_kalender.sass Normal file
View File

@@ -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

50
sass/_nav.sass
View File

@@ -1,43 +1,37 @@
ul
list-style-type: none
margin: -2px auto
padding: 0
$navInPadding: 0.5rem
/*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
height: 33px
li
li
float: left
width: auto
/*height: 33px;
margin: 0px 0px
/*border: 1px solid lightgrey;
border-radius: 0px
&:first-child
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
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
@@ -69,6 +60,3 @@ ul li ul li
.submenuActive
visibility: visible
nav > ul > li > ul > li
margin: middle

6
sass/_tueren.sass Normal file
View File

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

2
sass/main.sass
View File

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

22
tab/home.php
View File

@@ -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="KalenderTest">
<h3> Kalender Test Bereich zum Testen </h3>
</div>
<?php include ("kalender.php") ?>

151
tab/kalender.php Normal file
View File

@@ -0,0 +1,151 @@
<div class="kalender">
<div class="active" 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="active" 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>

15
tab/tür01.php Normal file
View File

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

15
tab/tür02.php Normal file
View File

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