Почему моя стилизация css цвета фона, ширины и высоты не работает в моем последнем div> gameover?
эта первая часть - мой html код:
<head>
<title>Maths Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue">0</span></div>
<div id="correct">Correct</div>
<div id="wrong">Try Again</div>
<div id="question">7x7</div>
<div id="instructionBox">Click on the correct answer</div>
<div id="choices">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
</div>
<div id="startReset">start Game</div>
Я догадываюсь, что здесь, где это началось, запутались:
<div id="timeremaining">Time remaining:<span id="timeRemainingValue">
60</span> sec</div>
<div id="gameOver">
<p>Game Over!</p>
<p>Your score is __</p>
</div>
</div>
эта вторая часть - мой css код и только последний стиль "игра окончена" не работает;
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
#container {
height: 440px;
width: 550px;
background-color: #9DD2EA;
margin: 100px auto;
/* this line directly above centers the container top and bottom 100px and left and
right to auto so that margin keeps getting
bigger and bigger on both sides till the element is center */
padding: 10px;
border-radius: 20px;
/* above line curves corners of element */
box-shadow: 4px 4px 6px 6px purple;
-webkit-box-shadow: 4px 4px 6px 6px purple;
-moz-box-shadow: 4px 4px 6px 6px purple;
/* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]
*/
position: relative;
}
#score {
background-color: yellow;
padding: 10px;
position: absolute;
left: 475px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
}
#correct {
position: absolute;
left: 240px;
background-color: green;
color: white;
padding: 10px;
display: none;
}
#wrong {
/* line 45 makes it to where this element does not interact with other elements and
other elements behave as if it doesent exist*/
position: absolute;
left: 240px;
background-color: red;
color: white;
padding: 10px;
display: none;
}
#question {
margin: 55px auto 10px auto;
height: 150px;
width: 420px;
background-color: rgb(184, 53, 240);
box-shadow: 0px 4px purple;
font-size: 100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif, sans-serif;
line-height: 150px;
color: black;
border-radius: 5px;
position: relative;
}
#question:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px
}
#instructionBox {
height: 60px;
width: 420px;
background-color: blue;
margin: 1px auto 1px auto;
text-align: center;
line-height: 55px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
border-radius: 5px;
position: relative;
/* transition: all 0.2s; line 71 & 72 with line 77 make the transition happen on click
*/
}
#instructionBox:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px;
}
#choices {
/* background-color: sandybrown; */
height: 100px;
width: 420px;
margin: 10px auto;
color: black;
text-align: center;
line-height: -50px;
margin: 10px auto;
border-radius: 5px;
}
.box {
/*these boxes are within a choices div to help them size together*/
margin-right: 26px;
width: 85px;
height: 85px;
background-color: white;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 80px;
position: relative;
/* with position relative and .box:active { top: 4px; the box moves down 4px}*/
/* transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s; */
}
.box:hover,
#startReset:hover {
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
.box:active,
#startReset:active {
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
}
/* #box1{
margin: 10px 10px;
background-color: red;
width: 30px;
height: 30px;
}
#box2{
margin: 10px 10px;
background-color: white;
width: 30px;
height: 30px;
}
#box3{
margin: 10px 10px;
background-color: blue;
width: 30px;
height: 30px;
}*/
#box4 {
margin-right: 0;
}
#startReset {
/*these boxes are within a choices div to help them size together*/
margin-left: 230px;
width: 100px;
height: 45px;
background-color: rgb(255, 255, 255, 0.5);
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
/* instead of writing these same pargraphs of code just at the element id to the similar
code alrady made like above */
/* #startReset:hover{
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
#startReset:active{
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
} */
#timeremaining {
/*these boxes are within a choices div to help them size together*/
visibility: hidden;
/* display: none; */
margin-left: 10px;
width: 200px;
height: 45px;
background-color: greenyellow;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
ниже приведена разбитая часть со стилем> gameover style или gameOver div:
#gameOver {
height: 200px;
width: 500px;
background-color: linear-gradient(blue, green);
font-size: 1.0em;
}