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 new Settings tab + centered the animal chossing

Browse Source
This commit is contained in:
MrEidam
2024-09-25 08:59:57 +02:00
parent 7e60ee0145
commit 645d763015
4 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/shiba/chose.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

BIN
img/tiger/chose.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 410 KiB

14
index.html
View File

@@ -13,10 +13,10 @@
<h1>Welcome to PetPet!</h1> <h1>Welcome to PetPet!</h1>
<h2>Please choose an Animal:</h2> <h2>Please choose an Animal:</h2>
<div> <div>
<img src="./img/tiger/baby.png" style="--clr: #ff4500a9" onclick="option(0)" title="tiger" alt="tiger" class="animalChoose"> <img src="./img/tiger/chose.png" style="--clr: #ff4500a9" onclick="option(0)" title="tiger" alt="tiger" class="animalChoose">
<img src="./img/shiba/baby.png" style="--clr: " onclick="option(1)" title="shiba" alt="shiba" class="animalChoose"> <img src="./img/shiba/chose.png" style="--clr: #f08d40a9" onclick="option(1)" title="shiba" alt="shiba" class="animalChoose">
</div> </div>
<p>Made by <a href="https://www.mreidam.com">MrEidam</a> & <a>Tufsie</a></p> <p>Made by <a target="_blank" href="https://www.mreidam.com">MrEidam</a> & <a target="_blank" href="">Tufsie</a></p>
</dialog> </dialog>
<div id="blurs"></div> <div id="blurs"></div>
<article class="cash"> <article class="cash">
@@ -47,7 +47,7 @@
<button class="actBTN" onclick="healBoy()">Heal</button> <button class="actBTN" onclick="healBoy()">Heal</button>
</article> </article>
</div> </div>
<div class="games"> <div class="moverSpace">
<img class="gamesPromo" src="./img/promorighth.png" alt="Promo for Games"> <img class="gamesPromo" src="./img/promorighth.png" alt="Promo for Games">
<div class="gamesText"> <div class="gamesText">
<h2>Games</h2> <h2>Games</h2>
@@ -55,6 +55,12 @@
</div> </div>
<img class="gamesPromo" src="./img/promoleflt.png" alt="Promo for Games"> <img class="gamesPromo" src="./img/promoleflt.png" alt="Promo for Games">
</div> </div>
<div class="moverSpace">
<div class="settingsText">
<h2>Settings</h2>
<a href="./">Let's change some settings!</a>
</div>
</div>
</main> </main>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>

19
style.css
View File

@@ -24,6 +24,10 @@ img{
object-fit: contain; object-fit: contain;
} }
a{
color: #69f;
}
main{ main{
/*clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);*/ /*clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);*/
background: #333333aa; background: #333333aa;
@@ -68,16 +72,17 @@ span p{
filter: drop-shadow(1.5px 1.5px 6px #aaa); filter: drop-shadow(1.5px 1.5px 6px #aaa);
} }
.games{ .moverSpace{
border-radius: .5rem; border-radius: .5rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
padding: 1rem; padding: 1rem;
margin: .5rem; margin: 1rem .5rem .5rem .5rem;
background: #222222cc; background: #222222cc;
height: 80px; height: 80px;
} }
.gamesPromo{ .gamesPromo{
width: 69px; /* Mobile */ width: 69px; /* Mobile */
height: 48px; height: 48px;
@@ -87,8 +92,11 @@ span p{
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
.gamesText a{
color: red; .moverSpace .settingsText{
display: flex;
flex-direction: column;
justify-content: space-around;
} }
@@ -184,9 +192,10 @@ span p{
#chui h2{ #chui h2{
} }
/*
#chui a{ #chui a{
color: #69f; color: #69f;
} }*/
.animalChoose{ .animalChoose{
border: none; border: none;