From 2f151ef0e92468b73b86d24c0524f46006ea229e Mon Sep 17 00:00:00 2001 From: Vaclav Siml Date: Thu, 23 Feb 2023 22:01:55 +0100 Subject: [PATCH] Improved styles --- ui/index.html | 81 +++++++++--------- ui/style.css | 232 +++++++++++++++++++++++++++++--------------------- 2 files changed, 174 insertions(+), 139 deletions(-) diff --git a/ui/index.html b/ui/index.html index 021827a..c9b7482 100644 --- a/ui/index.html +++ b/ui/index.html @@ -5,43 +5,44 @@ - Document + UI -
+
+
- + - + - - - - +

SDVX5

+ + + + + +
- diff --git a/ui/style.css b/ui/style.css index c93aff8..f0ab6d2 100644 --- a/ui/style.css +++ b/ui/style.css @@ -1,126 +1,160 @@ -.container{ +.container { display: grid; - height: 85vw; - grid-template-columns: repeat(3,1fr); - grid-template-rows: repeat(2,1fr); - grid-gap: 15px; - margin-top: 10px; - -} -body{ - min-height: 100vh; - max-width: 90vw; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-gap: 15px; + margin-top: 10px; + height: 100vh; + width: 100vw; + padding: 2rem; margin: 0 auto; /*background-color: rgb(56, 55, 55, 1);*/ - background-image: url(BACKGROUND\ GOOD.png); - background-size: cover; + + } + +body { + + margin: 0; + overflow: hidden; + +} + * { - box-sizing: border-box; /* ulehci zivot */ - } -.move{ + box-sizing: border-box; + /* ulehci zivot */ +} + +.move { display: flex; - color:rgb(15, 12, 12, 0.88); + color: rgb(15, 12, 12, 0.88); border: 3px solid black; - font-family:Verdana, Geneva, Tahoma, sans-serif; + font-family: Verdana, Geneva, Tahoma, sans-serif; justify-content: flex-end; align-items: center; flex-direction: column; border-radius: 15px; - + } -.sex{ - +.sex { + opacity: 0; - margin-bottom: 110px; + bottom: 110px; z-index: 1; - transition: opacity 1s, margin-bottom 0.8s; + transition: opacity 1s, bottom 0.8s; + position: relative; + - } -#sdvx3-button{ - position: relative; - border-radius: 15px; - } - #sdvx3-button img { - content: ""; - object-fit: cover; - opacity: 0.8; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - z-index: 0; - border-radius: 10px; - } -#sdvx4-button{ +#sdvx3-button { position: relative; border-radius: 15px; - } - #sdvx4-button img{ - content: ""; - - object-fit: cover; - opacity: 0.8; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - z-index: 0; - border-radius: 15px; - - } -#sdvx5-button{ +} + +#sdvx3-button img { + content: ""; + object-fit: cover; + + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 0; + border-radius: 10px; +} + +#sdvx4-button { position: relative; border-radius: 15px; +} + +#sdvx4-button img { + content: ""; + + object-fit: cover; + + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 0; + border-radius: 15px; + +} + +#sdvx5-button { + position: relative; + border-radius: 15px; +} + +#sdvx5-button img { + content: ""; + + object-fit: cover; + + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 0; + border-radius: 15px; +} + +@keyframes blik { + 0% { + box-shadow: 0 0 0 3px rgba(255, 254, 254, 0); } - #sdvx5-button img{ - content: ""; - - object-fit: cover; - opacity: 0.8; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - z-index: 0; - border-radius: 15px; - } - @keyframes blik { - 0% { - box-shadow: 0 0 0 3px rgba(255, 254, 254,0); - } - 50% { - box-shadow: 0 0 0 3px rgba(255, 254, 254,1); - } - 100% { - box-shadow: 0 0 0 3px rgba(255, 254, 254,0); - } - } - .move:focus { - outline: none; - animation-iteration-count: infinite; - animation-name: blik; - animation-duration: 1.4s; - } - .move:focus h1{ - transition: opacity 1s, margin-bottom 0.8s; - z-index: 1; - opacity: 1; - margin-bottom: 80px; - } \ No newline at end of file + + 50% { + box-shadow: 0 0 0 3px rgba(255, 254, 254, 1); + } + + 100% { + box-shadow: 0 0 0 3px rgba(255, 254, 254, 0); + } +} + +.move:focus { + outline: none; + animation-iteration-count: infinite; + animation-name: blik; + animation-duration: 1.4s; +} + +.move:focus h1 { + transition: opacity 1s, bottom 0.8s; + z-index: 1; + opacity: 1; + bottom: 80px; + position: relative; +} + +.move:focus img { + transition: opacity 0.6s; + opacity: 0.7; +} + +.move img { + opacity: 1; +} + +.hlavnidiv { + aspect-ratio: 3/4; + background-image: url("JPGS/BACKGROUND GOOD.png"); + background-size: cover; +} \ No newline at end of file