-
Notifications
You must be signed in to change notification settings - Fork 1
/
grid.html
119 lines (109 loc) · 3.93 KB
/
grid.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Comic Grid Test</title>
<link rel="stylesheet" href="reset.css" type="text/css" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<article class="comic group">
<ol class="grid">
<li class="row h300 across-3">
<ol class="panels">
<li class="panel-1">
<p class="speech">Buzz Lightyear has a laser but I don't know how he got stuck in the box in Al's toy barn.</p><div class="tail-left"></div>
</li>
<li class="panel-1">
<p class="speech">He should have flipped his wings to break the ropes.</p><div class="tail-left"></div>
</li>
<li class="panel-1">
<p class="speech">How did Buzz get that cool suit anyway?</p></div><div class="tail-left"></div>
</li>
</ol>
</li>
<li class="row h050 across-1">
<ol class="panels">
<li class="elsewhere yelling">
<p>Flashback</p>
</li>
</ol>
</li>
<li class="row h250 across-4">
<ol class="panels">
<li class="panel-2">
<p class="speech">Luke, I am your father.</p><div class="tail-center"></div>
</li>
<li class="panel-3">
<p class="speech yelling speech-center-75">Nooooo!</p><div class="tail-right"></div>
</li>
<li class="panel-4">
<p class="speech">Feel it, you know it's true.</p><div class="tail-left"></div>
</li>
<li class="panel-5">
<p class="speech">You're right, I know you're my father!</p><div class="tail-center"></div>
</li>
</ol>
</li>
<li class="row h250 across-3">
<ol class="panels">
<li class="panel-6">
<p class="speech speech-left-30">And I know all about that terrible train accident that put you in that suit.</p>
</li>
<li class="panel-7">
<p class="speech speech-right-30">What are you talking about, Darth Vader was never hit by no train!</p>
</li>
<li class="panel-8">
<p class="speech speech-left-30">Sure he was, my mom said so.</p>
</li>
</ol>
</li>
<li class="row h300 across-4">
<ol class="panels">
<li class="panel-9">
<p class="speech">How do light sabers work?<img src="images/tail-2.png"></p><!--<div class="tail-left">--></div>
</li>
<li class="panel-10">
<p class="speech speech-right">I don't know. <img src="images/tail-2.png"></p></div>
</li>
<li class="panel-9">
<p class="speech">If Yoda was really a Jedi why did he need a cane?</p><div class="tail-left"></div> </li>
<li class="panel-10">
<p class="speech speech-right">I don't know.</p><div class="tail-center"></div>
</li>
</ol>
</li>
<li class="row h300 across-4">
<ol class="panels">
<li class="panel-9">
<p class="speech">How did a ship as fast as the millennium falcon get stuck in a tractor beam?</p><div class="tail-left"></div>
</li>
<li class="panel-10">
<p class="speech speech-right">I don't know.</p><div class="tail-center"></div>
</li>
<li class="panel-9">
<p class="speech">Why is Darth Vader in that suit anyway?</p><div class="tail-left"></div>
</li>
<li class="panel-10">
<p class="speech yelling">He was hit by a train!</p><div class="tail-right"></div>
</li>
</ol>
</li>
<li class="row h300 across-2">
<ol class="panels">
<li class="panel-1">
</li>
<li class="panel-1">
<p class="speech speech-right">He was hit by a train.</p><div class="tail-center"></div>
</li>
</ol>
</li>
</ol>
</article>
</body>
</html>