diff --git a/lab3/zad11/style.css b/lab3/zad11/style.css index 7b946a7..7d75f16 100644 --- a/lab3/zad11/style.css +++ b/lab3/zad11/style.css @@ -1,177 +1,180 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); :root { - --darkBlue: hsl(233, 26%, 24%); + --darkBlue: hsl(233, 26%, 24%); } -*, *::before, *::after { - box-sizing: border-box; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-kerning: auto; - margin: 0; - padding:0; +*, +*::before, +*::after { + box-sizing: border-box; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-kerning: auto; + margin: 0; + padding: 0; } html { - font-family: 'Inter', sans-serif; - -} - -body{ - width:100%; - height:100%; - background-image: url(images/board-bg.jpg); - overflow:hidden; -} -#score-container, #name-container, #health-container{ - width:100%; - position:absolute; - top:0; - left:0; -} -p#score, p#name, p#health{ - color:white; - font-weight: bold; - font-size:72px; - user-select: none; + font-family: "Inter", sans-serif; +} + +body { + width: 100%; + height: 100%; + background-image: url(images/board-bg.jpg); + overflow: hidden; +} +#score-container, +#name-container, +#health-container { + width: 100%; + position: absolute; + top: 0; + left: 0; +} +p#score, +p#name, +p#health { + color: white; + font-weight: bold; + font-size: 72px; + user-select: none; } -p#score{ - text-align:right; +p#score { + text-align: right; +} + +p#name { + text-align: center; +} + +p#health { + text-align: left; +} + +#board { + position: relative; + display: flex; + height: 100vh; + min-height: 800px; + overflow: hidden; } -p#name{ - text-align:center; +.zombie { + position: absolute; + width: 200px; + height: 312px; + background: url(images/walkingdead.png) 0px 0px; } -p#health{ - text-align:left; +#customcursor { + position: absolute; + top: 0; + width: 5rem; + height: 5rem; + border: 4px solid rgba(255, 255, 255, 0.8); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transform: translate(-50%, -50%); + pointer-events: none; + top: -150%; } -#board{ - position:relative; - display:flex; - height:100vh; - min-height:800px; - overflow:hidden; +#dot { + position: absolute; + width: 1rem; + height: 1rem; + border-radius: 50%; + background-color: red; + pointer-events: none; } -.zombie{ - position:absolute; - width:200px; - height:312px; - background: url(images/walkingdead.png) 0px 0px; +.containerpurple { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + transform: translateY(-200%); + transition: 500ms ease all; + z-index: 2; } - -#customcursor{ - position:absolute; - top:0; - width:5rem; - height:5rem; - border:4px solid rgba(255, 255, 255, 0.8); - border-radius:50%; - display:flex; - align-items: center; - justify-content: center; - transform: translate(-50%,-50%); - pointer-events: none; - top:-150%; +.inner { + position: absolute; + width: 70vw; + background-color: rgba(105, 67, 150, 0.9); + border-radius: 10px; + border: 2px solid black; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } - -#dot{ - position:absolute; - width:1rem; - height:1rem; - border-radius:50%; - background-color:red; - pointer-events: none; - + +h1 { + font-size: 4rem; + text-align: center; + margin: 1rem; } -.containerpurple{ - width:100%; - height:100%; - position:absolute; - top:0; - left:0; - display:flex; - justify-content: center; - align-items:center; - transform:translateY(-200%); - transition:500ms ease all; - z-index:2; +h2 { + font-size: 3rem; + text-align: center; + margin: 1rem; + border-bottom: 2px solid black; } - -.inner{ - position:absolute; - width:70vw; - background-color: rgba(105, 67, 150, 0.9); - border-radius: 10px; - border: 2px solid black; - display:flex; - flex-direction: column; - justify-content: center; - align-items: center; +input#username { + font-size: 3rem; + text-align: center; } -h1{ - font-size:4rem; - text-align: center; - margin:1rem; +button#startgame2 { + font-size: 2rem; } -h2{ - font-size:3rem; - text-align: center; - margin:1rem; - border-bottom:2px solid black; +button { + font-size: 3rem; + background-color: rgb(0, 204, 102); + padding: 2rem; + border-radius: 40px; + border: 0px; + margin: 1rem; + transition: 300ms ease all; } -input#username{ +button:hover { + cursor: pointer; + background-color: rgb(0, 255, 128); + transition: 300ms ease all; +} + +button:active { + outline: 5px solid green; + background-color: rgb(98, 253, 175); +} + +@media screen and (max-width: 700px) { + h1 { font-size: 3rem; - text-align:center; + } + + h2 { + font-size: 2rem; + } + p#score, + p#name, + p#health { + font-size: 32px; + } + input#username { + font-size: 1rem; + } } - -button#startgame2{ - font-size:2rem; -} - -button{ - font-size:3rem; - background-color:rgb(0, 204, 102); - padding:2rem; - border-radius: 40px; - border: 0px; - margin:1rem; - transition:300ms ease all; - -} -button:hover{ - cursor:pointer; - background-color:rgb(0, 255, 128); - transition:300ms ease all; -} - -button:active{ - outline:5px solid green; - background-color:rgb(98, 253, 175); -} - - -@media screen and (max-width: 700px){ - h1{ - font-size:3rem; - } - - h2{ - font-size:2rem; - } - p#score, p#name, p#health{ - font-size:32px; - } - input#username{ - font-size: 1rem; - } -} \ No newline at end of file