From f800e45526a99817bbe71a14b79099a780f236ed Mon Sep 17 00:00:00 2001 From: Biielik <163162516+Biielik@users.noreply.github.com> Date: Fri, 19 Apr 2024 15:12:42 +0200 Subject: [PATCH] Create style.css --- style.css | 122 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..d8610da --- /dev/null +++ b/style.css @@ -0,0 +1,122 @@ +* { + margin: 0; + justify-content: center; + text-align: center; + user-select: none; +} + +body { + background-image: radial-gradient( + circle, + rgba(0, 60, 255, 0.5), + rgba(0, 217, 255, 0.4), + rgba(68, 0, 255, 0.5), + rgba(217, 0, 255, 0.5) + ); + background-size: 400%; + animation: gradient 300s infinite; + /* height: 1000vh; */ +} + +h1,h2 { + width: 100%; +} + +h2 { + text-align: left; +} + +nawigacja { + position: absolute; + top: -4px; + border-radius: 10px; + border-top-left-radius: 0px; + border-top-right-radius: 0px; + column-gap: 10px; + border: 3px rgba(255, 255, 255, 0.3) solid; + padding: 10px; + backdrop-filter: sepia(40%); + box-shadow: 19px 8px 10px rgba(0, 0, 0, 0.3); +} + +nawigacja a { + font-weight: 650; + text-decoration: none; + color: white; +} + +nazwa { + position: absolute; + left: 5px; + font-size: 40px; + font-weight: 700; + background-image: linear-gradient(45deg, #f3ea43, #af4261); + background-clip: text; + color: transparent; +} + +pomoc { + position: absolute; + right: 10px; + top: 10px; +} + +bloki { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + margin-left: 200px; + margin-right: 200px; + margin-top: 60px; +} + +div { + border: 5px rgba(0, 0, 0, 0.1) outset; + box-shadow: 19px 8px 10px rgba(0, 0, 0, 0.3); + border-radius: 10px; + margin: 5px; + padding: 3px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + row-gap: 10px; + column-gap: 30px; + box-sizing: border-box; +} + +#S:hover + #silnik { + display: block; +} + +#Plugins:hover + #pluginy { + display: block; +} + +hover { + display: none; + background-color: gray; + z-index: 1; + position: absolute; +} + +footer { + border-top: #af4261 1px solid; + width: 100%; + padding: 1em; + bottom: 0px; + left: 0px; + position: fixed; + z-index: 100; + backdrop-filter: blur(5px); +} + +@keyframes gradient { + 0% { + background-position: 0% 0%; + } + 50% { + background-position: 100% 100%; + } + 100% { + background-position: 0% 0%; + } +}