diff --git a/css/general.css b/css/general.css index 40c6a92..9811fdb 100644 --- a/css/general.css +++ b/css/general.css @@ -144,22 +144,28 @@ nav li a:focus::after{ transition: 0.5s; } -#banner-text { +#banner { height: 100%; - width: 70%; - margin: auto; + /* width: 50%; */ + width: 500px; + margin: 0 10px; font-size: 20px; display: inline-flex; - position: absolute; + position: relative; justify-content: center; + overflow: hidden; align-items: center; } -#banner-moving-text { +#banner-text { + text-align: center; animation: headline 20s infinite; + animation-timing-function: linear; } -.sub-text { + +#timer-text { color: gray; + animation: blinking 2s infinite; } @keyframes blinking { @@ -167,7 +173,7 @@ nav li a:focus::after{ opacity: 1; } 50% { - opacity: 0; + opacity: 0.5; } 100% { opacity: 1; @@ -175,22 +181,13 @@ nav li a:focus::after{ } @keyframes headline { 0% { - transform: translateX(10vw); - opacity: 0; - } - 15% { - opacity: 1; + transform: translateX(600px); } 50% { - opacity: 1;; - transform: translateX(-20vw); - } - 60% { - opacity: 0; + transform: translateX(-600px); } 100% { - opacity: 0; - transform: translateX(-20vw); + transform: translateX(-600px); } } diff --git a/index.html b/index.html index 7a1fb5a..3f97c64 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@ - +