-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (143 loc) · 6.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Boy Color CSS</title>
<meta name="description" content="Game Boy created only with CSS and JavaScipt - by Lucas BENESTON">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- CONTENT SECTION -->
<section id="main-content-section">
<header id="main-header-section">
<h1>Game Boy Color <span>in pure CSS</span></h1>
<p>Created by Lucas BENESTON.</p>
</header>
<main id="main-section">
<section id="gameboy-change-color">
<h2>Choose your Game Boy color ...</h2>
<div class="color-button-containers">
<button class="color-button" id="button-yellow"></button>
<h3>Yellow edition (1998)</h3>
</div>
<div class="color-button-containers">
<button class="color-button" id="button-red"></button>
<h3>Red edition (1998)</h3>
</div>
<div class="color-button-containers">
<button class="color-button" id="button-green"></button>
<h3>Green edition (1998)</h3>
</div>
<div class="color-button-containers">
<button class="color-button" id="button-purple"></button>
<h3>Purple edition (1998)</h3>
</div>
<div class="color-button-containers">
<button class="color-button" id="button-blue"></button>
<h3>Blue edition (1998)</h3>
</div>
<div class="color-button-containers">
<button class="color-button" id="button-pokemon">
<img id="pokeball-button" src="images/Pokeball.png" alt="">
</button>
<h3>Pokemon edition (1999)</h3>
</div>
</section>
<section id="on-off-section">
<h2>... and press</h2>
<button id="on-off-button">
<p>ON</p>
</button>
</section>
</main>
</section>
<!-- GAME BOY COLOR SECTION -->
<section id="game-boy">
<section id="yellow-case">
<div id="case-relief-top"></div>
<div id="comm-section">
<div id="triangle-top-comm-section"></div>
<p>comm.</p>
</div>
<section id="screen-section">
<div id="border-screen">
<img class="images-pokemon" id="pikachu-image" src="images/pikachu.png" alt="Une photo de Pikachu">
<img class="images-pokemon" id="togepi-image" src="images/togepi.png" alt="Une photo de Togepi">
<img class="images-pokemon" id="rondoudou-image" src="images/rondoudou.png" alt="Une photo de Rondoudou">
<img class="images-pokemon" id="pokeball-border" src="images/Pokeball-border.png" alt="Une photo d'une Pokeball">
<canvas id="screen"></canvas>
<div id="title-gameboy">
<h1>game boy</h1>
<img src="images/Game_Boy_Color_logo.png" alt="La partie Color du logo de la Game Boy Color">
</div>
<div id="power-container">
<div id="red-led"></div>
<h4 id="power">power</h4>
<audio id="start-audio" src="audio/start-audio.mp3"></audio>
</div>
<div class="demi-cercle rond-3">
<div class="rond-visible"></div>
<div class="rond-invisible"></div>
</div>
<div class="demi-cercle rond-2">
<div class="rond-visible"></div>
<div class="rond-invisible"></div>
</div>
<div class="demi-cercle rond-1">
<div class="rond-visible"></div>
<div class="rond-invisible"></div>
</div>
<div id="border-bottom-screen"></div>
</div>
</section>
<section id="button-section">
<div id="case-relief-bottom"></div>
<div id="case-relief"></div>
<div id="nintendo">
<h2>Nintendo</h2>
</div>
<div id="button-container">
<div id="button-arrows">
<div data-key="38" id="arrows-top" class="arrows">
<div id="triangle-top" class="triangle-arrows"></div>
</div>
<div data-key="37" id="arrows-left" class="arrows">
<div id="triangle-left" class="triangle-arrows"></div>
</div>
<div id="arrow-center" class="arrows">
<div id="circle-center" class="triangle-arrows"></div>
</div>
<div data-key="39" id="arrows-right" class="arrows">
<div id="triangle-right" class="triangle-arrows"></div>
</div>
<div data-key="40" id="arrows-bottom" class="arrows">
<div id="triangle-bottom" class="triangle-arrows"></div>
</div>
</div>
<div id="button-A-B-container">
<div data-key="66" class="button-B">B</div>
<div data-key="65" class="button-A">A</div>
</div>
</div>
<div id="button-select-start-section">
<div class="button-select-start-container">
<div data-key="83" class="button-select-start"></div>
<h3>select</h3>
</div>
<div class="button-select-start-container">
<div data-key="67" class="button-select-start"></div>
<h3>start</h3>
</div>
</div>
<img class="images-pokemon" id="pokemon-logo" src="images/pokemon-logo.png" alt="Le logo de Pokemon">
</section>
<div id="speaker-holes"></div>
<div id="speaker-holes-2"></div>
<div id="border-bottom-case"></div>
</section>
</section>
<script type="text/javascript" src="animation.js"></script>
<script type="text/javascript" src="secretCode.js"></script>
</body>
</html>