-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·181 lines (170 loc) · 10.8 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
<!DOCTYPE html>
<html lang="en" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Compro Slug</title>
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width">
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
</head><body><div class="page">
<h1 id="page-title">Page Title h1</h1>
<p>This is a paragraph of text, as would appear in the body of the site. Body
text is typically in a legible, relatively unadorned font, sized between 10px
and 24px, depending on how much and how important textual content is on the
site. For pleasurable reading, a line width of 45em (roughly 80 characters
per line, depending on the font) and line-height with breathing room but not
rivers is ideal.</p>
<h2>How about a form after this h2?</h2>
<form><fieldset><legend>I am legend</legend>
<div class="form-item"><label for="text">Text <span class="form-required" title="This field is required.">*</span></label><input id="text" type="text" value="easy pretty forms" name="awesome" /></div>
<div class="form-item"><label for="placeholder">Text (HTML5)</label><input id="placeholder" type="text" name="placeholder" placeholder="This is a placeholder" /></div>
<div class="form-item"><label for="password">Password</label><input id="password" type="password" value="p455w0rd" name="password" /></div>
<div class="form-item"><label for="file">File</label><input id="file" type="file" value="" name="file" /></div>
<div class="form-item"><label for="select">Select</label><select id="select" name="select">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select></div>
<div class="form-item"><label for="select2">Multi-Select</label><select id="select2" name="select2" size="3">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select></div>
<div class="form-item"><label for="checkbox">Checkbox</label><input id="checkbox" type="checkbox" value="p455w0rd" name="checkbox" /></div>
<div class="form-item"><label for="spinbox">Number</label><input id="number" type="number" min="0" max="10" step="2" value="6" name="number" /></div>
<div class="form-item"><label for="textarea">Textarea</label><textarea id="textarea" name="textarea"></textarea></div>
<div class="form-item"><span class="implicit-label">Default Buttons</span><button type="button">Button</button><input id="sub" type="submit" value="Submit" name="awesome" /></div>
<div class="form-item"><span class="implicit-label">Button States</span>
<button type="button">Regular</button>
<button class="b-hover" type="button">Hover</button>
<button class="b-active" type="button">Clicked</button>
<button class="b-focus" type="button">Keyboard Focused</button>
</div>
</fieldset></form>
<h2>After this h2 is Typography</h2>
<p>So here's another paragraph. Paragraphs can contain inline text treatments like
<a href="#">Links</a> and sometimes <strong>bold text</strong> and maybe even
<em>italicized text</em>. It's wild what readers will tolerate from their text.
Look out below for an hr:</p>
<hr />
<p>Okay, back to paragraphing. Let's have some text for a bit so that we can
look at line-height-sensitive things like subscripts<sub>2</sub> and taking
things to Ann Arbor using superscripts -- A<sup>2</sup>. This paragraph is
rather wasteful.</p>
<h3>This h3 finds the table below attractive</h3>
<table>
<!--<caption>This table has a thead and tbody. It was made to hold tabular data.</caption>-->
<thead>
<tr><th>Col One</th><th>Col Two</th><th>Col Three</th></tr>
</thead><tbody>
<tr><td>Data One</td><td>Data Two</td><td>Data Three</td></tr>
<tr><td>Data One</td><td>Data Two</td><td>Data Three</td></tr>
<tr><td>Data One</td><td>Data Two</td><td>Data Three</td></tr>
<tr><td>Data One</td><td>Data Two</td><td>Data Three</td></tr>
<tr><td>Data One</td><td>Data Two</td><td>Data Three</td></tr>
<tr><td>Data One</td><td>Data Two</td><td>Data Three</td></tr>
<tr><td>Data One</td><td>Data Two</td><td>Data Three</td></tr>
<tr><td>Data One</td><td>Data Two</td><td>Data Three</td></tr>
</tbody></table>
<h3>But this h3 likes tabs better</h3>
<ul class="tabs primary">
<li class="active"><a href="#" class="active">View<span class="element-invisible">(active tab)</span></a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Devel</a></li>
</ul>
<p>This slug is really heavy on paragraphs.<br />See what I did there? That was
a break right inside a graph! Somebody stop me!</p>
<blockquote>You crazy for this one (blockquote), Rick. It's-ya-boy.</blockquote>
-Jay-z
<p>Right above here is Jay-z's name. It's "free text" in the sense that it's not
wrapped in a block-level element. That happens sometimes.</p>
<pre>
This is a <pre> element.
See three spaces?
Is this on a new line?
Yeah, PRE is pretty cool like that. Why don't we just make our webpages as just one big PRE element?
</pre>
<h3>Some h4 elements want to go to the next page</h4>
<p>Ain't that right?</p>
<div class="pager clearfix"><ul class="links pager pager-list">
<li class="1 pager-item first active"><a href="/blog" title="Go to page 1" class="active">1</a></li>
<li class="2 pager-item active"><a href="/blog?page=1" title="Go to page 2" class="active">2</a></li>
<li class="3 pager-current"><span>3</span></li>
<li class="4 pager-item active"><a href="/blog?page=3" title="Go to page 4" class="active">4</a></li>
<li class="5 pager-item active"><a href="/blog?page=4" title="Go to page 5" class="active">5</a></li>
<li class="6 pager-item last active"><a href="/blog?page=5" title="Go to page 6" class="active">6</a></li>
</ul> <ul class="links pager pager-links"><li class="pager-first first active"><a href="/blog" title="Go to first page" class="active">« first</a></li>
<li class="pager-previous active"><a href="/blog?page=1" title="Go to previous page" class="active">‹ previous</a></li>
<li class="pager-next active"><a href="/blog?page=3" title="Go to next page" class="active">next ›</a></li>
<li class="pager-last last active"><a href="/blog?page=5" title="Go to last page" class="active">last »</a></li>
</ul></div>
<h2>Let's Talk Mood</h2>
<div class="not-drupal-just-mood">
<p>This box indicates the typical border, border-radius, box-shadow, and other
treatments that special elements on the site might use. When in doubt, the
settings to this box can be used alone, or in conjunction with one another,
to highlight special stuff or generally convey the site aesthetic.</p>
<p>Hovering over the box gives an idea of the animation/transition scheme; most
importantly the typical timing and
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function">easing</a>.</p>
</div>
<h2>That was fancy. How about some lists?</h2>
<p>Starting with an unordered list:</p>
<ul>
<li>One list item is the loneliest list item</li>
<li>This list item went to market</li>
<li>Three take my hand and come with me because you look so fine that I really
wanna make you mine</li>
<li>Four score and seven years ago</li>
<li>Five</li>
</ul>
<p>Bullets are cool, but hows about numbers?:</p>
<ol>
<li>I don't have anything witty left to write</li>
<li>left to right</li>
</ol>
<h5>And (h5 btw) some links...</h5>
<p>While you could just hover over <a href="#">a link like this one</a> to see
the hover state, you can also see it <a class="hover" href="#">on this link</a>
without hovering. Same goes for <a class="visited" href="#">visited links</a>,
<a class="a-active" href="#">active state</a>, and
<a class="focus" href="#">focus state</a>. The classes used to do this could be
useful for JavaScript, but are otherwise bad CSS practice.</p>
<h2>¡Qué horror!</h2>
<p>Below are some error messages. ¡Ay Dios Mio!</p>
<div class="messages status">
<h2 class="element-invisible">Status message</h2>
Blog entry <em class="placeholder">Gravis Inhibeo Premo Quadrum Vicis</em> has been updated.
</div>
<div class="messages warning">
<h2 class="element-invisible">Warning message</h2>
You might not want to do what you just did again. But this time things are okay.
</div>
<div class="messages error">
<h2 class="element-invisible">Error message</h2>
Glaring Error. I can't believe the site is even displaying this message!
</div>
<h3>Social Icons?</h3>
<a href="http://www.facebook.com/bradczerniak" class="icon fb" target="_blank" title="Facebook">f</a>
<a href="http://www.twitter.com/ao5357" class="icon tw" target="_blank" title="Twitter">t</a>
<a href="http://github.com/ao5357" class="icon gh" target="_blank" title="GitHub">g</a>
<h2>Images</h2>
<p>Images that appear as body content.</p>
<div class="field field-name-field-image field-type-image field-label-hidden">
<div class="field-items">
<div class="field-item even">
<img src="deps/cage-640x480.jpg" alt="Nicolas Cage after taking some downers">
</div>
</div>
</div>
<div class="field field-name-field-image field-type-image field-label-hidden">
<div class="field-items">
<div class="field-item even right-bad">
<img src="deps/kitten-huffing.jpg" alt="A kitten in a traditional huffing bowl.">
<p>A kitten in a traditional huffing bowl.</p>
</div>
</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div></body></html>