Hi again!
I'm Jorge Baumann and I want to show you this handmade Nintendo Gameboy built from scratch with HTML & CSS. Animated (a little bit) by Javascript. It was my first game console. What beautiful memories! 😍
👉 Live DEMO: https://baumannzone.github.io/gameboy-css/
👉 Source Code:
baumannzone / gameboy-css
👾 Pure CSS GameBoy - Includes animations and the original sound 🔊
Video:
Let's get started!
HTML it's written in Pug (formerly known as jade) and CSS with Stylus CSS.
This is the only HTML (Pug) used:
.gameboy
.screen-cont
.power
.screen
.header DOT MATRIX WITH STEREO SOUND
.animated-text Nintendo
.copy ®
.controls-cont
.btn-direction
.vertical
.horizontal
.btn-AB
.btn-start-select
.speakers
.on-off < off-on >
.phones phones
Check the whole file here: index.pug.
Also, here it is the CSS file (stylus): main.styl
Although the Pure CSS Gameboy is done, I wanted to add a little bit of magic so, with a little Javascript and CSS, I added animations and effects 🔮.
- The first thing you see when you turn on the gameboy is the
Nintendo
word transition - After the transition is done, a "beep" 🔊 sound sounds (Recorded it and edited by myself with my own Gameboy) So, it's the original one 😄.
- Last detail, it simulates the power light comes on when you "turn on" the device.
- EXTRA ✏️: Font used is called "Pretendo" by jackster3000, a mimic nintendo-like font. The real Nintendo font is not well known.
🐷 That's all, folks!
Do you have any question? Let me know what do you think in the comments below or drop me a few words on twitter (@baumannzone).
I'm still thinking what will be my next "Pure CSS" idea, what would you like to see?
If you liked the content of this post, you should subscribe to my newly released Youtube channel: RambitoJS.
Also, if you are into #vuejs, #css #javascript, #testing or some other topic related to web development, you may follow me on Github, since I'm creating open source content frequently.
If you liked this article, you should check "Pure CSS Zombie", from css-art
series:
🦄 Thanks for reading, see you soon! 🥳
Say Hello! Twitter | Github | Youtube
Top comments (9)
This looks great Jorge!
Thank you, Nick 🦄
Awesome
Hey! Thank you, already saw your twitter message. 😍
That's Awesome ♥️
I wish I could play some games in it.. 😊😅
Well.. a lot of people wanted to make it interactive and load roms or something to play gameboy 😁
+1000 views. You guys are awesome <3
I just found this and think I might challenge myself to do something similar during this lockdown :) thanks for the inspiration!
I would love to see what you do. Don't forget to share it