forked from thomasxiii/photon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (95 loc) · 3.49 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta property="twitter:account_id" content="30870167">
<title>Photon | CSS 3D Lighting Engine</title>
<script type="text/javascript" src="http://use.typekit.com/yoe8gdj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/photon.min.js"></script>
<script src="js/base.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12900000-8']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<nav class="primary-menu">
<h1>Photon</h1>
<h2>CSS 3D lighting engine</h2>
<ul>
<li><a href="index.html" class="current">Examples</a></li>
<li><a href="docs.html">Documentation</a></li>
<li><a href="https://github.com/thomasxiii/photon">GitHub Project</a></li>
<li><a href="js/photon.min.js" class="download-btn">download</a></li>
</ul>
</nav>
<div class="attasi">
<a href="http://attasi.com"><img src="images/attasi-logo.png" alt="attasi.com" /></a>
<a href="http://attasi.com">tom giannattasio</a>
<a href="https://twitter.com/attasi">@attasi</a>
</div>
<nav class="example-menu">
<ul>
<li><a href="#" data-demo="crane" class="crane-thumb current">crane</a></li>
<li><a href="#" data-demo="map" class="map-thumb">map</a></li>
<li><a href="#" data-demo="coverflow" class="coverflow-thumb">coverflow</a></li>
</ul>
</nav>
<div class="toggle">
<a href="#" id="label-on" class="label-on current">photon on</a>
<a href="#" id="toggle-btn" class="toggle-btn on">toggle</a>
<a href="#" id="label-off" class="label-off">photon off</a>
</div>
<div class="scene">
<div class="crane demo">
<div class="wing-1a face"></div>
<div class="wing-1b face"></div>
<div class="wing-1c face"></div>
<div class="wing-1d face"></div>
<div class="wing-2a face"></div>
<div class="wing-2b face"></div>
<div class="wing-2c face"></div>
<div class="wing-2d face"></div>
<div class="body-1a face"></div>
<div class="body-1b face"></div>
<div class="body-1c face"></div>
<div class="body-1d face"></div>
<div class="neck-a face"></div>
<div class="neck-b face"></div>
<div class="head-a face"></div>
<div class="head-b face"></div>
<div class="tail-a face"></div>
<div class="tail-b face"></div>
<div class="base-e face"></div>
<div class="base-f face"></div>
<div class="base-g face"></div>
<div class="base-h face"></div>
</div>
<ul class="coverflow demo">
<li class="cover-1 face"><img src="images/cover-1.png" /></li>
<li class="cover-2 face"><img src="images/cover-2.png" /></li>
<li class="cover-3 face"><img src="images/cover-3.png" /></li>
<li class="cover-4 face"><img src="images/cover-4.png" /></li>
<li class="cover-5 face"><img src="images/cover-5.png" /></li>
<li class="cover-6 face"><img src="images/cover-6.png" /></li>
</ul>
<div class="map">
<div class="map-cover face"></div>
<div class="panel-1 face"></div>
<div class="panel-2 face"></div>
<div class="panel-3 face"></div>
</div>
</div>
</body>
</html>