diff --git a/assets/seiten/css/design.css b/assets/seiten/css/design.css index b942383..13b1f5f 100644 --- a/assets/seiten/css/design.css +++ b/assets/seiten/css/design.css @@ -121,6 +121,7 @@ body{ */ } /* GPU Freundlicher */ +/* Q: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/ */ .seite::before { content: ""; position: fixed; diff --git a/assets/seiten/css/index.css b/assets/seiten/css/index.css index 40d522c..f6c0b9d 100644 --- a/assets/seiten/css/index.css +++ b/assets/seiten/css/index.css @@ -12,8 +12,10 @@ color: #232323; padding: .5px; border-radius: 4px; + text-decoration: none; } +#down-btn:hover, #up-btn:hover { background-color: #232323; cursor: pointer; @@ -21,8 +23,21 @@ transition: all 0.75s; } -#down-button { +#down-btn { color: #121212; + background-color: #808080; + text-align: center; + position: absolute; + left: 50%; + top: 95%; + transform: translate(-50%, -50%); + max-width: 75px; + width: 100%; + font-size: 1.3rem; + padding: .5px; + border-radius: 4px; + text-decoration: none; + } #content { @@ -32,12 +47,13 @@ position: absolute; top: 100%; left: 0; - right: 0; - background-color: #121212; } -#down { - z-index: 1; - position: relative; +.headline { + text-align: center; + position: absolute; + left: 50%; + top: 8rem; + transform: translate(-50%, -50%); } \ No newline at end of file diff --git a/index.html b/index.html index ffc4593..64e2b27 100644 --- a/index.html +++ b/index.html @@ -36,14 +36,15 @@ - - - Nach Oben + - + Nach Unten
⬇️
+ + ⬆️
Nach Oben
+
-

- Überschrift -

+

- Überschrift -