yatzee css html 100%

This commit is contained in:
chris 2024-06-10 10:42:07 -04:00
parent 603f31bb19
commit 3fd3f7c280

View File

@ -1,11 +1,14 @@
#highScore{ #highScore {
text-align: center; text-align: center;
} }
header{ header {
margin: auto; margin: auto;
text-align: center; text-align: center;
} }
#diceBoard{ html {
height: 100%;
}
#diceBoard {
width: 85%; width: 85%;
height: 150px; height: 150px;
background-color: blueviolet; background-color: blueviolet;
@ -13,32 +16,32 @@ header{
margin: auto; margin: auto;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
padding: .5rem; padding: 0.5rem;
flex-wrap: nowrap; flex-wrap: nowrap;
border-radius: 10px; border-radius: 10px;
} }
#scoreBoard{ #scoreBoard {
width: 85%; width: 85%;
height: 300px; height: 300px;
background-color: rgb(226, 192, 43); background-color: rgb(226, 192, 43);
border: 3px dotted black; border: 3px dotted black;
margin: auto; margin: auto;
} }
#diceBoard img{ #diceBoard img {
height: 3rem; height: 3rem;
} }
.dice_pic_hold{ .dice_pic_hold {
align-self: flex-end; align-self: flex-end;
order: -1; order: -1;
} }
#game{ #game {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
} }
#roll{ #roll {
padding: 2rem; padding: 2rem;
color: white; color: white;
background-color: rgb(50, 68, 83); background-color: rgb(50, 68, 83);
@ -46,23 +49,23 @@ order: -1;
box-shadow: 2px 2px gray; box-shadow: 2px 2px gray;
} }
#upper{ #upper {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items:center; align-items: center;
width: 100%; width: 100%;
border: 1px solid black; border: 1px solid black;
flex-wrap: wrap; flex-wrap: wrap;
} }
.upperScore{ .upperScore {
height: 30px; height: 30px;
background-color: brown; background-color: brown;
/* border: 2px solid black; */ /* border: 2px solid black; */
width: 16.66px; width: 16.66px;
/* display: none; */ /* display: none; */
} }
.upperLable{ .upperLable {
flex-wrap: wrap; flex-wrap: wrap;
/* width: 100%; */ /* width: 100%; */
} }