👾 Pure CSS Gameboy
Tags: css, html, javascript, dog
Published: 2019-11-18 13:03:52

Hi again!

I'm [Jorge Baumann](https://twitter.com/baumannzone) 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/
![Gameboy](https://raw.githubusercontent.com/baumannzone/gameboy-css/master/docs/img.png)

## 👉 Source Code: 
{%github baumannzone/gameboy-css no-readme %}


## Video:
{% youtube Drj78FhXz5U %}

## Let's get started!

HTML it's written in [Pug](https://github.com/pugjs/pug) (formerly known as _jade_) and CSS with [Stylus CSS](http://stylus-lang.com/).

This is the only HTML (Pug) used:
```css
  .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](https://github.com/baumannzone/gameboy-css/blob/master/docs/index.pug). 
 Also, here it is the CSS file (stylus): [main.styl](https://github.com/baumannzone/gameboy-css/blob/master/docs/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](https://baumannzone.github.io/gameboy-css/sound/gameboy-sound.mp3)" 🔊 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](https://www.deviantart.com/jackster3000/art/Pretendo-Version-2-7242224), a mimic nintendo-like font. The real Nintendo font is not well known.

![Animation](https://miro.medium.com/max/2560/1*ZNnv7o7URoFuhHSBUfgUGw.gif)

---

🐷 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](https://twitter.com/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](https://www.youtube.com/channel/UCTTj5ztXnGeDRPFVsBp7VMA).

[![RambitoJS](https://thepracticaldev.s3.amazonaws.com/i/we78jp2ozy8iv8i7di95.png)](https://www.youtube.com/channel/UCTTj5ztXnGeDRPFVsBp7VMA)

Also, if you are into #vuejs, #css #javascript, #testing or some other topic related to web development, you may follow me on [Github](https://github.com/baumannzone), since I'm creating open source content frequently.

---

If you liked this article, you should check "Pure CSS Zombie", from `css-art` series: 
{% post baumannzone/pure-css-zombie-5fea %}

---


🦄 Thanks for reading, see you soon! 🥳
Say Hello! [Twitter](https://twitter.com/baumannzone) | [Github](https://github.com/baumannzone) | [Youtube](https://www.youtube.com/channel/UCTTj5ztXnGeDRPFVsBp7VMA)