Wasongo's Gallery: Treasure Cards

Treasure Cards

collect them all!

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:

11

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!

Join the Fun!

Templates and codes

If you'd like to make your own cards to hide on your site, you can use the template and assets below.
You can save the card below 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: fade 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: fade 2s ease-in 4s 1 normal forwards;	
}

@keyframes fade {
	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

Sites

Got cards? Get listed here!

If you've made and hidden some cards on your site let me know and I'll add your link here.
You can email me or leave a message in my guestbook!