👾 Pure CSS Gameboy

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:

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:

🧟‍♀️ Pure CSS Zombie 🧟‍♂️

Jorge Baumann for One Beyond ・ Oct 31 '19 ・ 1 min read

#html #css #vue #dog

🦄 Thanks for reading, see you soon! 🥳
Say Hello! Twitter | Github | Youtube