Eidam/PetPet
1
0
Fork 0
mirror of https://github.com/MrEidam/PetPet.git synced 2026-04-17 15:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added dezigng to the dice quessing number game

Browse Source
This commit is contained in:
MrEidam
2024-08-09 17:12:41 +02:00
parent 3986c648e0
commit 1c203683de
4 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
Games/QuessNumber-1D6/index.html
View File

@@ -10,22 +10,23 @@
<title>Quess Number 1D6</title>
</head>
<body>
<h1>Guess The Number!</h1>
<h3>You are: <span id="answear"></span></h3>
<img src="./6.png" alt="" id="dice">
<div class="ques">
<p>Quess: </p>
<select id="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<button onclick="roll()">Roll<br>the<br>Dice!</button>
<article class="gameBack">
<h1>Guess The Number!</h1>
<h3>You are: <span id="answear"></span></h3>
<img src="./6.png" alt="" id="dice">
<div class="ques">
<p>Quess: </p>
<select id="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<button onclick="roll()">Roll<br>the<br>Dice!</button>
</article>
<script src="main.js"></script>
</body>
</html>

BIN
Games/QuessNumber-1D6/mobile.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
Games/QuessNumber-1D6/pc.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

25
Games/QuessNumber-1D6/style.css
View File

@@ -10,6 +10,10 @@ body{
flex-direction: column;
min-height: 100vh;
background-color: #333;
background-image: url("./pc.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #fff;
text-align: center;
}
@@ -48,4 +52,25 @@ button{
.lose{
color: red;/*
text-transform: uppercase;*/
}
.gameBack{
padding: 1rem;
height: 450px;
width: 300px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
backdrop-filter: blur(5px);
border-radius: 50px;
box-shadow:
inset 10px 10px 20px #fff,
10px 10px 20px #333;
}
@media screen and (max-width: 500px){
body{
background-image: url("./mobile.jpg");
}
}