-
Notifications
You must be signed in to change notification settings - Fork 53
/
screenshot-page.html
161 lines (140 loc) · 5.25 KB
/
screenshot-page.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
<!DOCTYPE html>
<html>
<head>
<title>Lorem ipsum dolor sit amet</title>
<!-- <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" type="text/css"> -->
<style>
%CSS_HERE%
</style>
</head>
<body>
<!--
This page is derived from the water.css demo by Kognise.
For the license see
https://github.com/kognise/water.css/blob/master/LICENSE.md
-->
<main>
<section id="content" class="container">
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Element demos</h2>
<p>
This is supposed to be a demo page so we need more elements!
</p>
<h3>Form elements</h3>
<form>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john.doe@gmail.com">
</div>
<div>
<label for="id">User id (read only)</label>
<input readonly name="id" id="id" value="04D6H89Z">
</div>
<div>
<label for="disabled">Random disabled input</label>
<input disabled name="disabled" id="disabled" placeholder="Because why not?">
</div>
<div>
<label for="about">About me</label>
<textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
</div>
<div>
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember me</label>
</div>
<div>
<label>
<input type="checkbox" name="in-label" id="in-label" checked>
Is this checkbox inside a <code><label></code> element?
</label>
</div>
<div>
<fieldset>
<legend>Choose a cardinal direction:</legend>
<div>
<input type="radio" id="north" name="direction" value="north" checked>
<label for="north">North</label>
</div>
<div>
<input type="radio" id="east" name="direction" value="east">
<label for="east">East</label>
</div>
<div>
<input type="radio" id="south" name="direction" value="south">
<label for="south">South</label>
</div>
<div>
<input type="radio" id="west" name="direction" value="west">
<label for="west">West</label>
</div>
</fieldset>
</div>
<input type="submit">
</form>
<h3>Code</h3>
<p>
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
</p>
<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
<h3>Other</h3>
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
<img src="http://via.placeholder.com/408x287" alt="Example image">
<hr>
<p>And here's a nicely marked up table!</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Godzilla</td>
<td>2</td>
<td>$299.99</td>
</tr>
<tr>
<td>Mozilla</td>
<td>10</td>
<td>$100,000.00</td>
</tr>
<tr>
<td>Quesadilla</td>
<td>1</td>
<td>$2.22</td>
</tr>
</tbody>
</table>
<h3>Typography</h3>
<blockquote>
This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href="/">here</a>'s a link.
</p>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</article>
</section>
</main>
</body>
</html>