Created
November 28, 2019 19:15
-
-
Save BlackScorp/9a1b50b704ac04e7bcdc4629045d8862 to your computer and use it in GitHub Desktop.
Code zum Video https://youtu.be/IJXfBqo3WOo ein BG.jpg kannst du hier heraussuchen https://pixabay.com/de/images/search/advent/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| error_reporting(); | |
| ini_set('display_errors', 'On'); | |
| $start = DateTime::createFromFormat('Y-m-d', '2019-12-01'); | |
| $end = clone $start; | |
| $end->modify('+24 days'); | |
| $interval = DateInterval::createFromDateString('1 day'); | |
| $period = new DatePeriod($start, $interval, $end); | |
| $today = new DateTime('2019-12-05'); | |
| $days = []; | |
| foreach ($period as $date) { | |
| $date->setTime(0, 0); | |
| $isOpen = $today > $date; | |
| $canOpen = $today == $date; | |
| $class = ''; | |
| if ($isOpen) { | |
| $class .= ' open'; | |
| } | |
| if ($canOpen) { | |
| $class .= ' canOpen'; | |
| } | |
| $days[] = [ | |
| 'class' => trim($class), | |
| 'number' => (int) $date->format('d'), | |
| ]; | |
| } | |
| $lastIndex = count($days) - 1; | |
| $days[$lastIndex]['class'] = trim($days[$lastIndex]['class'] . ' isLast'); | |
| mt_srand(2019); | |
| shuffle($days); | |
| ?> | |
| <!DOCTYPE html> | |
| <html lang="en" class="no-js"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Adventskalendar 2019</title> | |
| <link rel="stylesheet" type="text/css" href="style.css" /> | |
| </head> | |
| <body> | |
| <h1>Adventskalendar 2019</h1> | |
| <hr> | |
| <ul class="grid"> | |
| <?php foreach ($days as $day): ?> | |
| <li class="door"><span class="<?= $day['class'] ?>"><?= $day['number'] ?></span></li> | |
| <?php endforeach; ?> | |
| </ul> | |
| <div class="clear"></div> | |
| <hr> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| margin:0; | |
| padding:0; | |
| font-size: 14px; | |
| background: url(bg.jpg); | |
| } | |
| .grid{ | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| position: relative; | |
| width: 100%; | |
| } | |
| h1{ | |
| font-size: 5em; | |
| margin:0.1em 0; | |
| text-align: center; | |
| color:white; | |
| } | |
| .clear{ | |
| clear: both; | |
| } | |
| .grid li:nth-child(odd) span{ | |
| background: #e74d3c; | |
| } | |
| .grid li:nth-child(even) span{ | |
| background: #ee7f72; | |
| } | |
| .grid li{ | |
| position: relative; | |
| float: left; | |
| font-size: 12em; | |
| line-height: 1.5; | |
| max-height: 290px; | |
| text-align: center; | |
| width: 11.11%; | |
| width: -webkit-calc(100% / 9); | |
| width: calc(100% / 9); | |
| background: rgba(255,255,255,80%); | |
| cursor: pointer; | |
| perspective: 15em; | |
| } | |
| .grid li span{ | |
| display: block; | |
| margin:0.08em; | |
| transform-origin: left center; | |
| transition: transform .5s; | |
| color:white; | |
| transform-style: preserve-3d; | |
| box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); | |
| } | |
| .grid li:hover .canOpen{ | |
| transform: rotateY(-60deg); | |
| } | |
| .open:before,.canOpen:before{ | |
| content: ""; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| left:0; | |
| background: #17527E; | |
| top:0; | |
| transform-origin: left center; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.12) inset, 0 1px 2px rgba(0,0,0,0.24) inset; | |
| } | |
| .canOpen:before{ | |
| transform: rotateY(60deg); | |
| } | |
| .open:before{ | |
| transform: rotateY(70deg); | |
| } | |
| .open { | |
| transform: rotateY(-70deg); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment