/
maple.html
32 lines (28 loc) · 1.93 KB
/
maple.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
<!DOCTYPE html>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>HTML5!!!</title>
<style>
* { margin: 0; padding: 0; font-size: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;text-decoration: none;}
html { background-image: url(img/greybg.png); }
header { font-size: 25px; font-weight: bold; padding-left: 30px; color: black; background-image: url(img/whitebg.png); height: 60px; line-height: 60px; vertical-align: middle; border-bottom: 3px solid rgba(200,0,0,0.5) }
ul { height: 100%; width: -moz-calc(4 * 188px); margin: auto; padding-top: 60px; }
li { display: inline-block; margin: 20px; }
h1 { font-size: 14px; color: white!important; text-align: center; margin: 12px 0 25px; }
img { border: 12px solid #F0F0F0; border-radius: 8px; }
@media all and (max-width: 800px) { ul { width: -moz-calc(3 * 188px); padding-top: 50px; } }
@media all and (max-width: 500px) { ul { width: -moz-calc(2 * 144px); padding-top: 20px; } img {width: 110px; border-width: 7px} li {margin: 15px} }
</style>
<header>
HTML5 Demos
</header>
<ul>
<li class="phone"><a href="apis/"><img src="img/apis.png"><h1>WebAPIs</h1></a>
<li class="tablet"><a href="runfield/"><img src="img/runfield.png"><h1>Runfield</h1></a>
<li class="phone tablet"><a href="browserquest/client/"><img src="img/browserquest.png"><h1>BrowserQuest</h1></a>
<li class="phone tablet"><a href="http://hahlo.com"><img src="img/hahlo.png"><h1>Hahlo Twitter</h1></a>
<li class="phone tablet"><a href="http://foodsense.is/"><img src="img/foodsense.png"><h1>Foodsense</h1></a>
<li class="phone tablet"><a href="http://www.poetfreak.com/explore"><img src="img/poetfreak.png"><h1>PoetFreak</h1></a>
<li class="tablet"><a href="webgl/minegl.html"><img src="img/minegl.png"><h1>MineGL</h1></a>
<li class="tablet"><a href="webgl/gnomwgl.htm"><img src="img/gnomegl.png"><h1>GnomeGL</h1></a>
</ul>