Skip to content
This repository was archived by the owner on Jan 18, 2019. It is now read-only.

Commit 7814000

Browse files
belen-albezabelen-albeza
committed
add index page + styles
1 parent 30241e4 commit 7814000

File tree

2 files changed

+101
-0
lines changed

2 files changed

+101
-0
lines changed

‎index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>3D AABB collisions</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="styles.css" type="text/css">
7+
</head>
8+
<body>
9+
10+
<header class="main-header">
11+
<h1><a href="index.html">3D AABB collisions</a></h1>
12+
<p class="subtitle">Index</p>
13+
</header>
14+
15+
<div class="main-wrapper">
16+
<p>This is a collection of demos and examples on how to use and implement
17+
<strong>3D Axis-Aligned Bounding-Box collision detection</strong> in HTML 5 games.</p>
18+
<p>It is recommended to also read the companion articles at the
19+
<a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps">Mozilla Developer Network</a>.
20+
</p>
21+
22+
<nav>
23+
<h1>Demos</h1>
24+
<ul>
25+
<li><a href="point.html">Point vs Sphere and Box</a></li>
26+
<li><a href="sphere.html">Sphere vs Sphere and Box</a></li>
27+
<li><a href="box.html">Box vs Sphere and Box</a></li>
28+
</ul>
29+
</nav>
30+
31+
<footer class="main-footer">
32+
<p>Source code on <a href="https://github.com/mozdevs/gamedev-js-3d-aabb">the Github repository</a>.</p>
33+
</footer>
34+
</div><!-- main wrapper -->
35+
36+
</body>
37+
</html>

‎styles.css

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body {
2+
font-family: 'Source Code Pro', 'Courier', monospace;
3+
margin: 0;
4+
}
5+
6+
canvas {
7+
background: #000;
8+
}
9+
10+
a, a:hover, a:visited {
11+
color: #000;
12+
text-decoration: none;
13+
}
14+
15+
a {
16+
border-bottom: 2px solid #31ffd5;
17+
}
18+
19+
a:hover {
20+
background:#31ffd5;
21+
}
22+
23+
.main-wrapper {
24+
width: 512px;
25+
padding-left: 1em;
26+
padding-right: 1em;
27+
margin: 0 auto;
28+
}
29+
30+
.main-header, .main-footer {
31+
text-align: center;
32+
}
33+
34+
.subtitle {
35+
font-size: 1.5em;
36+
}
37+
38+
.main-header {
39+
margin-top: 0;
40+
margin-bottom: 2em;
41+
}
42+
43+
.main-header h1 {
44+
margin: 0;
45+
background: #31ffd5;
46+
padding: 0.5em 1em;
47+
}
48+
49+
.main-header a {
50+
color: #000;
51+
text-decoration: none;
52+
}
53+
54+
.main-footer {
55+
margin-top: 2em;
56+
}
57+
58+
li, p {
59+
line-height: 1.25em;
60+
}
61+
62+
li {
63+
margin: 0.5em 0;
64+
}

0 commit comments

Comments
 (0)