2
Hello, I’m starting in CSS, and I decided to create this layout, but after setting my flexbox my central image (given) this occupying all the space of the div, as if there was another image behind , at first thought it was by ::after but even removing it the problem persists. (The correct layout (Hyperlink) should be only 1 given)
:root {
font-size: 30px;
}
body {
background-image: url(img/waves.svg);
background-color: #0c794f;
background-size: cover;
}
/* Modal Styles */
#game-modal {
background: rgb(214,214,214);
background: linear-gradient(0deg, rgba(214,214,214,1) 0%, rgba(255,255,255,1) 100%);
width: 750px;
height: 450px;
border: 1px solid transparent;
border-radius: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 1px 1px rgba(0,0,0,0.2),
0 2px 2px rgba(0,0,0,0.2),
0 4px 4px rgba(0,0,0,0.2),
0 16px 16px rgba(0,0,0,0.2);
}
.player-name, .action-btn, #dice-title {
font-family: 'Junar', sans-serif;
text-transform: uppercase;
}
.points,.current-score,#sub-title {
font-family: 'Poetsen One', sans-serif;
}
.fa-arrow-alt-circle-right {color: red;}
/* Game Title */
#dice-title {
font-size: 50px;
color: red;
margin: 15px auto;
}
#sub-title {
font-size: 1rem ;
color: #0c794f;
display: block;
text-align: center;
line-height: 0.7;
}
.points {
font-size: 100px;
color: #0c794f;
}
.current-score {
font-size: 20px;
color: #919191;
background-color: white;
border: 1px solid transparent;
border-radius: 40px;
text-align: center;
width: 200px;
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12);
}
/* Buttons */
.action-btn {
background-color: red;
font-size: 15px;
color: white;
border-radius: 30px;
border: none;
text-decoration: none;
cursor: pointer;
}
#btn-roll:hover {
background-color: #0c794f;
}
#btn-roll:hover i{
animation: spin 1s infinite;
}
#btn-roll:focus {
background-color: #bd0000;
}
#btn-hold:hover {
background-color: #0c794f;
}
#btn-hold:hover i {
font-size: 20px;
}
#btn-hold:focus {
background-color: #bd0000;
}
i {transition: font-size 0.3s;}
@keyframes spin {
to { transform: rotate(360deg); }
}
#dice {
background-image: url("https://i.imgur.com/wXCVpeI.png");
position: relative;
width: 150px;
height: 150px ;
background-size:150px 150px;
border-radius: 20px;
box-shadow: -1px 15px 15px rgba(0, 0, 0, 0.2),
inset 1px -10px 15px rgba(0, 0, 0, 0.3);
}
/* Shadown Effect - Dice */
#dice::after {
content: "";
background-color: black;
border-radius: 20px;
width: 150px;
height: 150px;
filter: blur(15px);
opacity: 0.5;
height: 40%;
position: absolute;
transform: rotateX(-100deg);
bottom: -20%;
z-index: -1;
}
/* Postions */
#board {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.fa-plus-circle {font-size: 15px;}
.player-name {
font-size:25px;
}
#player-1 {
flex: 1 6 30%;
order: 1;
}
#dice {
flex: 3 1 40%;
order: 2;
}
#player-2 {
flex: 1 6 30%;
order: 3;
}
#btn-hold {
display: block;
margin: 20px auto;
padding: 5px 60px;
}
#btn-roll {
display: block;
margin: 20px auto;
padding: 5px 36px;
}
#titulo , #control-buttons {
display: block;
text-align: center;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' type="text/css" href='CSS/dice-game.css' >
<link rel='stylesheet' type="text/css" href='CSS/fontawesome-free-5.11.2-web/css/all.css'>
<title>Dice - The Game</title>
</head>
<body>
<main id='game-modal'>
<header id="titulo">
<h1 id='dice-title'><i class="fa fa-dice"></i> Dice
<span id='sub-title'>The Game</span>
</h1>
</header>
<section id='board'>
<!-- TOPO (Titulo do jogo)-->
<!-- JOGADOR 1 -->
<div class='player' id="player-1">
<span class='player-name'><i class="fa fa-arrow-alt-circle-right"></i> Player 1 </span>
<span class="points">200</span>
<!-- TOTAL DE PONTOS ATUAIS -->
<div class='current-score'>Total: <span class='score' id='score-player-1'>20 Points </span></div>
</div>
<!-- DADO -->
<div id='dice'></div>
<!-- JOGADOR 2 -->
<div class='player'id="player-2">
<span class='player-name'><i class="fa fa-arrow-alt-circle-right"></i> Player 2 </span>
<span class="points">100</span>
<!-- TOTAL DE PONTOS ATUAIS -->
<div class='current-score'>Total: <span class='score' id='score-player-2'>50 Points</span></div>
</div>
</section>
<!-- BOTÕES DE AÇÃO (Rolar ou segurar)-->
<div id='control-buttons'>
<button class='action-btn' id='btn-roll'><i class="fa fa-sync-alt"></i> Roll dice </button>
<button class='action-btn' id='btn-hold'><i class="fa fa-plus-circle"></i> Save </button>
</div>
</main>
<script src='Js/the-pig-game.js'></script>
</body>
</html>
I didn’t understand what the problem, I ran the code and it looks normal. I could point out where the problem is?
– Augusto Vasques
This seeing that appears 2 dice ? because it is to appear only a kkk
– user77295
Now I understand... voting to reopen the question.
– Augusto Vasques
I find it more practical to ask that question even, unfortunately
– user77295