PetPet all tigers images and new logo

This commit is contained in:
2024-08-16 20:50:42 +02:00
parent cee37b3d61
commit ff2f9ddc29
10 changed files with 45 additions and 24 deletions

View File

@@ -10,11 +10,13 @@
</head>
<body>
<h1 id="opponent-score">0</h1>
<article class="choiBACK">
<img src="Invis.png" class="choices" id="opponent-choice" draggable="false">
<img src="Invis.png" class="choices" id="your-choice" draggable="false">
</article>
<div id="choices" draggable="false"></div>
<section>
<article class="choiBACK">
<img src="Invis.png" class="choices" id="opponent-choice" draggable="false">
<img src="Invis.png" class="choices" id="your-choice" draggable="false">
</article>
<div id="choices" draggable="false"></div>
</section>
<h1 id="your-score">0</h1>
</body>
</html>

View File

@@ -11,6 +11,7 @@ window.onload = () => {
let choice = document.createElement("img");
choice.id = choices[i];
choice.src = `${choices[i]}.png`;
choice.setAttribute("draggable", "false");
choice.addEventListener("click", selectChoice);
document.getElementById("choices").append(choice);
}

View File

@@ -39,12 +39,22 @@ h1{
/*background: #4fdc5e;*/
margin-top: 20px;
}
section{
backdrop-filter: blur(5px);
border-radius: 50px;
box-shadow:
inset 10px 10px 20px #fff,
10px 10px 20px #333;
}
#choices{
width: 240px;
height: 80px;
width: 304px;
height: 90px;
/*background: #f4a478;*/
border-top: 2.5px #000000cc solid;
margin: 0 auto;
margin-top: 10px;
border-radius: 30px;
display: flex;
justify-content: space-around;
}
#choices img{
@@ -56,11 +66,6 @@ h1{
padding: 2rem;
display: flex;
flex-direction: column;
backdrop-filter: blur(5px);
border-radius: 50px;
box-shadow:
inset 10px 10px 20px #fff,
10px 10px 20px #333;
}
.choices{
@@ -69,6 +74,15 @@ h1{
border-radius: 25px;
}
@keyframes pop{
0%{
transform: scale(0.5);
}
100%{
transform: scale(1);
}
}
@media screen and (max-width: 500px){
body{
background-image: url("./mobile.jpg");
@@ -77,7 +91,4 @@ h1{
width: 180px;
height: 180px;
}
.choiBACK{
}
}