-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathindex.html
193 lines (168 loc) · 6.35 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
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
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Game Development Group</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text.css">
<!-- Stylesheet Link -->
<link href="css/style2.css" rel="stylesheet" media="screen">
<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Shojumaru' rel='stylesheet' type='text/css'>
<!-- Favicon -->
<link rel="icon" type="image/png" href="img/favicon.ico">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="41">
<div id="home">
<div id="logo-container">
<img src="img/html5_badge_desaturated.png" id="logo-html5-des">
<img src="img/html5_badge.png" id="logo-html5">
<span id="logo-game">Game</span>
<span id="logo-dev">Dev</span>
</div>
</div>
<section class="section section-dark" id="learn">
<div class="container text-large">
<h3 class="heading">2D Track</h2>
<ol class="track-list">
<li>
<a href="http://www.codecademy.com/courses/web-beginner-en-SWM11/0/3?curriculum_id=50b91eda28c2fb212300039e" target="_blank">
Draw with JavaScript
<p class="muted">by Eric Weinstein</p>
</a>
</li>
<li>
<a href="http://www.codecademy.com/courses/web-intermediate-en-CkOwl" target="_blank">
Getting Started
<p class="muted">by Logan Ralston with Tommy Copeland and William Van Rensselaer</p>
</a>
</li>
<li>
<a href="http://www.codecademy.com/courses/web-beginner-en-Hdmch" target="_blank">
Physics
<p class="muted">by William Van Rensselaer with Logan Ralston</p>
</a>
</li>
<li>
<a href="http://www.codecademy.com/courses/web-intermediate-en-5LH5k" target="_blank">
Getting Input
<p class="muted">by Logan Ralston with William Van Rensselaer, SungRim Huh, Tommy Copeland, and Graeme</p>
</a>
</li>
<li>
Project: Pong <span class="label">Coming Soon</span>
<p class="muted">by Logan Ralston with William Van Rensselaer, SungRim Huh, Graeme, and Anonymos</p>
</li>
<li>
Object Oriented Game Development <span class="label">Coming Soon</span>
<p class="muted">by William Van Rensselaer with Logan Ralston</p>
</li>
<li>
Sprite Sheets <span class="label">Coming Soon</span>
<p class="muted">by Logan Ralston with William Van Rensselaer and Graeme</p>
</li>
<li>
Physics 2 <span class="label">Coming Soon</span>
<p class="muted">by William Van Rensselaer</p>
</li>
<li>
Sounds and Music <span class="label">Coming Soon</span>
<p class="muted">by Logan Ralston with William Van Rensselaer and Graeme</p>
</li>
<li>
Project: Fruit Ninja <span class="label">Coming Soon</span>
<p class="muted">by William Van Rensselaer with Logan Ralston and Graeme</p>
</li>
</ol>
<h3 class="heading tm20">3D Track</h3>
<ol class="track-list">
<li>
<a href="http://www.codecademy.com/courses/web-advanced-en-wQkx9" target="_blank">
Drawing 3D in Three.js
<p class="muted">by Tommy Copeland</p>
</a>
</li>
</ol>
<h3 class="heading tm20">Feeling Underwhelmed?</h3>
<ol class="track-list">
<li>
<a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial?redirectlocale=en-US&redirectslug=Canvas_tutorial" target="_blank">
More on Drawing with JavaScript
<p class="muted">learn more about the <canvas></p>
</a>
</li>
<li>
<a href="https://www.udacity.com/course/cs255" target="_blank">
Udacity's HTML5 Game Development Course
<p class="muted">"This course will walk you through the major components of building GRITS, an HTML5 game."</p>
</a>
</li>
<li>
<a href="http://www.html5rocks.com/en/" target="_blank">
HTML5 Rocks
<p class="muted">"All HTML5, all the time."</p>
</a>
</li>
</ol>
</div>
</section>
<section class="section" id="about">
<div class="container">
<h1>About Us</h1>
<p class="text-large">
We are the HTML5 Game Development Group, a group on <a href="http://codecademy.com/">Codecademy</a> of over 50000 members, that is passionate about creating HTML5 games and moving the web forward. This site is a project by some of our members to create a website where anyone can create, share, learn how to make, and talk about HTML5 Games.
<b>This site is currently a work in progress.</b>
</p>
<aside class="pull-right text-large">
<span class="muted">Visit us on:</span>
<a href="https://github.com/HTML5-Games" title="GitHub"><img src="img/GitHub-Mark-32px.png" alt="GitHub"></a>
<a href="http://www.codecademy.com/groups/html5-game-development/invite/9aec4bb0429f38c47944ab6d42fc30d3" class="font-cursive link-light">Codecademy</a>
</aside>
</div>
</section>
<footer id="footer" class="section section-dark">
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="//i.creativecommons.org/l/by/3.0/88x31.png"></a>
</footer>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="//www.parsecdn.com/js/parse-1.2.7.min.js"></script>
<script src="js/main.js"></script>
<script>
(function( $ ) {
// Logo animation
var $window = $( window ),
$logoContainer = $( "#logo-container" ),
$logo = $( "#logo-html5" ),
$logoDes = $( "#logo-html5-des" ),
$logoGame = $( "#logo-game" ),
$logoDev = $( "#logo-dev" );
$logoContainer.height( $window.height() );
$logoDes.fadeTo( "slow", .1, function() {
$logo.delay( 500 ).fadeIn( "fast", function() {
$logoDes.hide();
$logoGame.animate({
marginLeft: "-250px",
opacity: "toggle"
}, "slow" );
$logoDev.animate({
marginLeft: 84,
opacity: "toggle"
}, "slow", function() {
$logoContainer.delay( 200 ).animate({
height: 180
}, "slow", function() {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
);
});
});
});
})( jQuery );
</script>
</body>
</html>