This repository has been archived by the owner on Mar 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
239 lines (220 loc) · 9.32 KB
/
about.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<!--Written by Zer Jun Eng-->
<meta charset="utf-8">
<meta name="author" content="Zer Jun Eng">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Puzzlity - About Us</title>
<!--Link Google Roboto font, a favicon and stylesheets-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="icon" href="./images/logo/logo_globe.png">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/about_us.css">
<script defer src="./javascript/menu.js"></script>
</head>
<body>
<!--This div element is the dark overlay when the menu is open-->
<div id="mobile_menu_overlay"></div>
<header>
<!--Logo to be shown on mobile platform-->
<div id="mobile_logo">
<a href="/com1008">
<img src="./images/logo/logo_globe.svg" alt="Main Logo of Puzzlity" height="120" width="120">
</a>
</div>
<button type="button" id="mobile_menu_button" onClick="openMenu()">
<img src="./images/menu_icon/menu.svg" alt="Hamburger menu icon" height="20" width="20">Menu
</button>
<!--Off-canvas menu on mobile display-->
<nav id="mobile_menu">
<a href="javascript:void(0)" id="close_button" onclick="closeMenu()">×</a>
<ul>
<!--Credit: all the menu icons are free licenses from flaticon.com. Edited using Adobe Illustrator.-->
<li>
<a href="/com1008">
<img class="menu_icon" src="./images/menu_icon/home.svg" alt="Home icon" height="25" width="25">Home
</a>
</li>
<li>
<a href="recommendations">
<img class="menu_icon" src="./images/menu_icon/star.svg" alt="Star icon" height="25" width="25">Recommendations
</a>
</li>
<li>
<a href="puzzles">
<img class="menu_icon" src="./images/menu_icon/puzzle.svg" alt="Puzzle icon" height="25" width="25">Puzzlity!
</a>
</li>
<li>
<a href="news">
<img class="menu_icon" src="./images/menu_icon/news.svg" alt="News icon" height="25" width="25">News
</a>
</li>
<li>
<a href="about">
<img class="menu_icon" src="./images/menu_icon/about.svg" alt="About icon" height="25" width="25">About Us
</a>
</li>
<li>
<a href="contact">
<img class="menu_icon" src="./images/menu_icon/contact.svg" alt="Contact icon" height="25" width="25">Contact Us
</a>
</li>
<li>
<a href="accessibility">
<img class="menu_icon" src="./images/menu_icon/accessibility.svg" alt="Accessibility icon" height="25" width="25">Accessibility
</a>
</li>
</ul>
</nav>
<!--Horizontal menu bar on desktop display-->
<nav id="desktop_menu">
<table>
<!--Credit: all the vector menu icons are free license from flaticon.com. Edited using Adobe Illustrator.-->
<tr>
<td class="logo_box">
<a id="desktop_logo" href="/com1008">
<img id="full" src="./images/logo/logo_full.svg" alt="Main Logo of Puzzlity" height="95" width="95">
<img id="globe" src="./images/logo/logo_globe.svg" alt="Main Logo of Puzzlity" height="50" width="50">
<img id="word" src="./images/logo/logo_word.svg" alt="Main Logo of Puzzlity" height="51" width="87">
</a>
</td>
<td>
<a href="/com1008">
<span class="vertical_align">
<img class="menu_icon" src="./images/menu_icon/home.svg" alt="Home icon" height="40" width="40">
<span class="desc"><br>Home</span>
</span>
</a>
</td>
<td class="longer">
<a href="recommendations">
<span class="vertical_align">
<img class="menu_icon" src="./images/menu_icon/star.svg" alt="Star icon" height="40" width="40">
<span class="desc"><br>Recommendations</span>
</span>
</a>
</td>
<td>
<a href="puzzles">
<span class="vertical_align">
<img class="menu_icon" src="./images/menu_icon/puzzle.svg" alt="Puzzle icon" height="40" width="40">
<span class="desc"><br>Puzzlity!</span>
</span>
</a>
</td>
<td>
<a href="news">
<span class="vertical_align">
<img class="menu_icon" src="./images/menu_icon/news.svg" alt="News icon" height="40" width="40">
<span class="desc"><br>News</span>
</span>
</a>
</td>
<td>
<a href="about">
<span class="vertical_align">
<img class="menu_icon" src="./images/menu_icon/about.svg" alt="About icon" height="40" width="40">
<span class="desc"><br>About Us</span>
</span>
</a>
</td>
<td>
<a href="contact">
<span class="vertical_align">
<img class="menu_icon" src="./images/menu_icon/contact.svg" alt="Contact icon" height="40" width="40">
<span class="desc"><br>Contact Us</span>
</span>
</a>
</td>
<td>
<a href="accessibility">
<span class="vertical_align">
<img class="menu_icon" src="./images/menu_icon/accessibility.svg" alt="Accessibility icon" height="40" width="40">
<span class="desc"><br>Accessibility</span>
</span>
</a>
</td>
</tr>
</table>
</nav>
</header>
<!--Push the main content down so it won't be blocked by the fixed horizontal desktop menu-->
<div id="space"></div>
<main>
<div class="top">
<p id="note">Note: the profile information below is fictitious.</p>
<h1>Our team</h1>
<p id="introduction">Puzzlity's diverse, talented team creates puzzles that help children in
many areas, such as problem solving skills, logic
thinking and creative mind while provding a fun environment to learn.
</p>
</div>
<!--First founder-->
<article class="founder">
<img class="flexleft" src="./images/about_us/myself.png" alt="First founder, Eng Zer Jun"
height="250" width="250">
<div class="flexright">
<h2>Zer Jun Eng</h2>
<h4>Chief Executive Officer</h4>
<p>Eng is the CEO of Puzzlity. He has over 20 years of management experience. After graduating
from University of Sheffield
in 1985, Eng spent 14 years in Random Inc. developing softwares, which included MNS,
BookFace and Chitter. Prior to
Puzzlity, he served as the CEO of Lorem Inc. (2010 - 2015). During his tenure there, the
company's value grew from £20
million to £2 billion. Eng is also the vice president of The World Puzzle Federation (WPF).
</p>
</div>
</article>
<hr>
<!--Second founder-->
<!--Credit: Images are from Google Images-->
<article class="founder">
<img class="flexleft" src="./images/about_us/billgates.jpeg" alt="Second founder, Newt Upton"
height="250" width="250">
<div class="flexright">
<h2>Newt Upton</h2>
<h4>Chief Operating Officer</h4>
<p>Upton is the COO of Puzzlity. After graduated from Yale Univesity with PhD in Psycology,
Upton spent 25 years working
in The Lego Group developing toys for children. Previously, Upton has co-launched the World
Puzzle Championship with
the World Puzzle Federation at London. Upton is also the first runner-up of the World Sudoku
Championship in 2011.
</p>
</div>
</article>
<hr>
<!--Third founder-->
<article class="founder">
<img class="flexleft" src="./images/about_us/stevejobs.jpg" alt="Third founder, Aden Pelley"
height="250" width="250">
<div class="flexright">
<h2>Aden Pelley</h2>
<h4>Lead Game Designer</h4>
<p>Pelley is the lead game designer at Puzzlity. He has over 26 years of experience in game
design. Prior to joining Puzzlity,
Pelley has worked at Electronic Arts as the main game designer of the Plants vs. Zombies
series and Bejeweled series.
Pelley has won the Best Game Designer Award in 2012 for his Plants vs. Zombies game series.
</p>
</div>
</article>
</main>
<!--Footer template on all pages-->
<footer>
<a href="/com1008">
<img id="footer_logo" src="./images/logo/logo_word.svg" alt="Footer logo: puzzlity" width="120">
</a>
<ul class="footer_nav">
<li><a class="footer_link" href="news">News</a></li>
<li><a class="footer_link" href="about">About Us</a></li>
<li><a class="footer_link" href="contact">Contact Us</a></li>
<li><a class="footer_link" href="accessibility">Accessibility</a></li>
</ul>
<h4 id="footer_copyright">© Zer Jun ENG, Web Assignment, 2016</h4>
</footer>
</body>
</html>