Wasongo's Gallery: Treasure Cards

Treasure Cards

Do you enjoy looking around nooks and crannies and finding small treasures? I do, which is why I have hidden some cards around my website for you to collect and put in your toybox if you want. If you display any cards you've found here please be sure to link back!

I will likely be adding more cards into places as I update my site. So keep a look out for new ones!

tips

You won't find any cards in any of my art gallery pages.

Keep an eye on your mouse, it will change if you hover over something suspicious!

CURRENT CARDS ON SITE:

12

As a thank you for making your way here, here is your first treasure. I hope you enjoy it!
(Make sure your sound is on for optimal enjoyment)

NICE!

A FREEBIE!

Templates and codes

If you'd like to use any of the assets for my hidden cards you can download them here.
You can save the card below directly as a PNG or you can download the CLIP/PSD files which have more guides and layers. I'd appreciate a link back if you decide to use them.

The Card

.CLIP FILE | .PSD FILE

The Chest

The Light

The Codes

CSS

@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=East+Sea+Dokdo&family=Patrick+Hand&family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap');

body {
	background-color: #0F1A20;
}

.text {
	display: none;
	top:-80px; left:-60px; transform: rotate(-10deg); font-size: 4.5em;
	opacity: 0;
	position: absolute;
	font-family: 'Silkscreen', 'Press Start 2P', 'Patrick Hand', 'Covered By Your Grace', 'East Sea Dokdo', cursive;
	color: white;
	animation: fadecard 2s ease-in 4s 1 normal forwards;
}

.text2 {
	display: none;
	top:35px; right:-90px; transform: rotate(5deg); font-size: 3em;
	opacity: 0;
	position: absolute;
	font-family: 'Silkscreen', 'Press Start 2P', 'Patrick Hand', 'Covered By Your Grace', 'East Sea Dokdo', cursive;
	color: white;
	animation: fadecard 2s ease-in 4s 1 normal forwards;	
}

@keyframes fadecard {
	from {opacity: 0;}
	to {opacity: 1;}
}

.light {
	position: relative;
	width: 300px;
	height: 455px;
	background-image: url("light.png");
	margin: 100px auto 0 auto;
}

.cardcontainer {
	position: relative;
	width: 200px;
	height: 455px;
	margin: 0 auto;
	padding: 0;	
}

.card {
	display: none;
	position: absolute;
	bottom: 8%;
	left: 25%;
	transform: scale(0.1,0.1);
	animation: rotate 5s ease-out 0s 1 normal forwards;
}

#playButton {
	position: absolute;
	bottom: 8%;
	left: 25%;
	width: 100px;
	cursor: pointer;
}

.treasure {
	animation: hover 1s ease-in-out 0s infinite alternate;
	filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.5));
}

@keyframes rotate {
	
	0% 	 { transform: rotateY(0deg) scale(0.1,0.1) translateY(0px);} 
	70%  { transform: rotateY(2160deg) scale(1.05,1.05) translateY(-20px); filter: drop-shadow(0 0 0 gray);}
  100% { transform: rotateY(2160deg) scale(1,1) translateY(-20px); filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.5));}
}

@keyframes hover {
	from {transform: translateY(-6px);}
	to {transform: translateY(0px);}
}

@media screen and (max-width: 690px) {
	
	.text {
		font-size: 3.5em;
		top: -15px;
		left: 60px;
	}
	
	.text2 {
		font-size: 2.5em;
		top: 85px;
		right: 0;
	}	
}

HTML

JAVASCRIPT

Apologies if the code is a mess, I'm a noob lmao.
Feel free to adjust the code to your liking!

The Additional Assets

Made by others

Fanfare Sound Effect from Pixabay

Transparent Brick Texture from Transparent Textures

Toggle Audio JS based on This Codepen by David Chan

Font used on my cards is Silkscreen