├── README.md
├── index.html
├── LICENSE
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Game Boy CSS
2 |
3 | [](https://github.com/afonsopacifer/open-source-boilerplate/blob/master/LICENSE.md)
4 |
5 | It's a lovely Game Boy created just with HTML and CSS.
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Gameboy - CSS
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Mario Souto
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | background-image: linear-gradient(#8b9da9, #fff6e4);
3 | box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
4 | min-height: 100%;
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | }
9 | .gameboy {
10 | background: #bfbdb8;
11 | display: inline-block;
12 | width: 314px;
13 | height: 518px;
14 | border-radius: 6px 6px 49px 6px;
15 | position: relative;
16 | box-shadow:
17 | inset -4px -2px 11px 2px hsla(27,4%,46%,0.22),
18 | inset 0px -11px 16px -9px hsla(27,4%,46%,0.82),
19 | inset 1px 1px 1px hsla(27,4%,46%,0.23),
20 | inset 0 18px 10px -5px #D0CCC9;
21 | }
22 | .gameboy:after {
23 | content: "";
24 | position: absolute;
25 | background-color: #4b5d15;
26 | padding: 10px;
27 | top: 40px;
28 | left: 0;
29 | right: 0;
30 | margin: auto;
31 | width: 230px;
32 | height: 200px;
33 | display: block;
34 | border-radius: 6px 6px 37px 6px;
35 | box-shadow:
36 | inset 0 1px 2px 2px #3e3c48,
37 | inset 0 0px 0 35px #53535f,
38 | inset 0 0 5px 36px #000,
39 | 0 0 0 2px #706768,
40 | 0 0 1px 2px #545663,
41 | 0 0 50px hsla(0,0%,0%,.3);
42 | }
43 | .gameboy:before {
44 | content: "";
45 | position: absolute;
46 | bottom: 50px;
47 | right: 190px;
48 | width: 9px;
49 | height: 35px;
50 | transform: rotate(60deg);
51 | border-radius: 100px;
52 | background-color: #6e6d75;
53 | z-index: 5;
54 | display: inline-block;
55 | box-shadow: 23px -35px 0px #6e6d75;
56 | }
57 |
58 | .controls {
59 | display: block;
60 | position: relative;
61 | width: 100%;
62 | }
63 | .controls:before {
64 | content: "";
65 | display: inline-block;
66 | position: absolute;
67 | top: 320px;
68 | left: 60px;
69 | width: 30px;
70 | height: 30px;
71 | border-radius: 3px;
72 | background-color: #000;
73 | box-shadow:
74 | -30px 30px 0 #000,
75 | 0px 60px 0 #000,
76 | 30px 30px 0 #000,
77 | 0px 25px 0 #000,
78 | 10px 30px 0 #000,
79 | -10px 30px 0 #000,
80 | 0px 30px 0 #000,
81 | 0px 35px 0 #000;
82 | }
83 | .controls:after {
84 | content: "";
85 | width: 40px;
86 | height: 40px;
87 | border-radius: 50%;
88 | display: inline-block;
89 | position: absolute;
90 | top: 345px;
91 | right: 80px;
92 | transform: rotate(-30deg);
93 | background-color: #a92f60;
94 | box-shadow: 50px 0 0 #a92f60;
95 | }
--------------------------------------------------------------------------------