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,68 +1,71 @@
#highScore{ #highScore {
text-align: center; text-align: center;
} }
header{ header {
margin: auto; margin: auto;
text-align: center; text-align: center;
} }
#diceBoard{ html {
width: 85%; height: 100%;
height: 150px;
background-color: blueviolet;
border: 2px solid black;
margin: auto;
display: flex;
justify-content: space-evenly;
padding: .5rem;
flex-wrap: nowrap;
border-radius: 10px;
} }
#scoreBoard{ #diceBoard {
width: 85%; width: 85%;
height: 300px; height: 150px;
background-color: rgb(226, 192, 43); background-color: blueviolet;
border: 3px dotted black; border: 2px solid black;
margin: auto; margin: auto;
display: flex;
justify-content: space-evenly;
padding: 0.5rem;
flex-wrap: nowrap;
border-radius: 10px;
} }
#diceBoard img{ #scoreBoard {
height: 3rem; width: 85%;
height: 300px;
background-color: rgb(226, 192, 43);
border: 3px dotted black;
margin: auto;
} }
.dice_pic_hold{ #diceBoard img {
align-self: flex-end; height: 3rem;
order: -1;
} }
#game{ .dice_pic_hold {
display: flex; align-self: flex-end;
align-items: center; order: -1;
flex-direction: column;
justify-content: center;
gap: 1rem;
} }
#roll{ #game {
padding: 2rem; display: flex;
color: white; align-items: center;
background-color: rgb(50, 68, 83); flex-direction: column;
border-radius: 25%; justify-content: center;
box-shadow: 2px 2px gray; gap: 1rem;
}
#roll {
padding: 2rem;
color: white;
background-color: rgb(50, 68, 83);
border-radius: 25%;
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%; */
} }