diff --git a/css/clock.css b/css/clock.css index f247479..31eb2fd 100644 --- a/css/clock.css +++ b/css/clock.css @@ -10,18 +10,27 @@ font-style: normal; } -.container { - width: 960px; - margin: 0 auto; - overflow: hidden; +body, html { + height: 100vh; + width: 100vw; } .clock { width: 800px; margin: 0 auto; padding: 30px; - color: #fff; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; + z-index: 10; + opacity: 0; + animation-name: show; + animation-delay: 3s; + animation-duration: 3s; + animation-fill-mode: forwards; } #Date { @@ -29,7 +38,7 @@ font-size: 36px; text-align: center; text-shadow: 0 0 5px #00c6ff; - + } ul { @@ -50,42 +59,33 @@ ul li { #point { position: relative; - -moz-animation: mymove 1s ease infinite; - -webkit-animation: mymove 1s ease infinite; + animation: mymove 1s ease infinite; padding-left: 10px; padding-right: 10px; } /* Simple Animation */ -@-webkit-keyframes mymove { - 0% {opacity: 1.0; - text-shadow: 0 0 20px #00c6ff; -} - -50% { - opacity: 0; - text-shadow: none; -} - -100% { - opacity: 1.0; - text-shadow: 0 0 20px #00c6ff; -} -} - -@-moz-keyframes mymove { +@keyframes mymove { 0% { - opacity: 1.0; - text-shadow: 0 0 20px #00c6ff; + opacity: 1.0; + text-shadow: 0 0 20px #00c6ff; } - 50% { opacity: 0; text-shadow: none; } - 100% { opacity: 1.0; text-shadow: 0 0 20px #00c6ff; - }; + } +} + +@keyframes show { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } diff --git a/css/style.css b/css/style.css index cb3bafd..400667c 100644 --- a/css/style.css +++ b/css/style.css @@ -42,29 +42,14 @@ canvas{ /* ---- particles.js container ---- */ #particles-js{ - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; + position: absolute; + top: 0; + left: 0; background-color: #000000; background-image: url(''); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } - - -.cliff{ - position: absolute; - margin: auto; - top: 0; - right: 0; - bottom: 0; - left: 0; - - - height: 30%; - width: 50%; - - display:none - - -} diff --git a/index.php b/index.php index a893b7e..a9dacb5 100644 --- a/index.php +++ b/index.php @@ -9,38 +9,24 @@ - -
+
- -
- -
+
-
    -
  • -
  • :
    • -
  • -
  • :
    • -
  • -
-
- - -

- +
+ diff --git a/plugins/clock.js b/plugins/clock.js index c4d29cb..04bc8c0 100644 --- a/plugins/clock.js +++ b/plugins/clock.js @@ -2,7 +2,7 @@ $(document).ready(function() { // Create two variable with the names of the months and days in an array var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; -var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] +var dayNames= ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"] // Create a newDate() object var newDate = new Date();