@intergrav/dev.css 2.0.11 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -10
- package/demo.html +263 -251
- package/dev.css +286 -311
- package/package.json +32 -15
- package/theme/boilerplate.css +15 -15
- package/theme/night.css +12 -12
- package/theme/terminal.css +15 -15
package/README.md
CHANGED
|
@@ -2,27 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://github.com/intergrav/dev.css)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Tiny, simple, classless CSS framework in the style of Vercel's [Geist](https://vercel.com/geist) design system. Inspired by [xz/new.css](https://github.com/xz/new.css).
|
|
6
6
|
|
|
7
|
-
The minified stylesheet weighs only **~
|
|
8
|
-
|
|
9
|
-
It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space.
|
|
7
|
+
The minified stylesheet weighs only **~4.8kb** and can make any plain HTML file look clean and modern. It also has a light and dark theme.
|
|
10
8
|
|
|
11
9
|
## Importing
|
|
12
10
|
|
|
13
11
|
In your HTML's `<head>` all you have to write is this, and you're done! (`.min` means to minify the file)
|
|
14
12
|
|
|
15
13
|
```html
|
|
16
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@
|
|
14
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3">
|
|
17
15
|
```
|
|
18
16
|
|
|
19
|
-
I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box. It will use the default system/browser san-serif fonts
|
|
17
|
+
I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box. It will use the default system/browser san-serif fonts if those are not available.
|
|
20
18
|
|
|
21
19
|
### Geist Font
|
|
22
20
|
|
|
23
21
|
```html
|
|
24
22
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css">
|
|
25
23
|
```
|
|
24
|
+
|
|
25
|
+
Recommended, monospace variant:
|
|
26
|
+
|
|
26
27
|
```html
|
|
27
28
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css">
|
|
28
29
|
```
|
|
@@ -47,6 +48,10 @@ If you need a navigation bar, you can add a `<nav>` with `<a>` links inside it.
|
|
|
47
48
|
|
|
48
49
|
Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a description of the page the user is currently on.
|
|
49
50
|
|
|
51
|
+
### Footer
|
|
52
|
+
|
|
53
|
+
Optionally, use the `<footer>` tag to create a large footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like.
|
|
54
|
+
|
|
50
55
|
### Text
|
|
51
56
|
|
|
52
57
|
Wrap all body text in `<p>` tags, unless it's the sole child of another element. If you want to write quotes, you can use the `<blockquote>` tag. To highlight text, wrap it in the `<mark>` tag. Want to show code? Use `<code>` for short inline code. Use `<pre>` for code blocks. Use `<kbd>` for keyboard input.
|
|
@@ -57,7 +62,7 @@ For a link button, you can wrap the button in an `<a>` tag. Here's a code exampl
|
|
|
57
62
|
|
|
58
63
|
```html
|
|
59
64
|
<a href="https://example.com">
|
|
60
|
-
|
|
65
|
+
<button>Click me!</button>
|
|
61
66
|
</a>
|
|
62
67
|
```
|
|
63
68
|
|
|
@@ -67,8 +72,8 @@ The `<details>` element can make a toggle-able dropdown without using any JavaSc
|
|
|
67
72
|
|
|
68
73
|
```html
|
|
69
74
|
<details>
|
|
70
|
-
|
|
71
|
-
|
|
75
|
+
<summary>Click me!</summary>
|
|
76
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
72
77
|
</details>
|
|
73
78
|
```
|
|
74
79
|
|
|
@@ -79,6 +84,7 @@ To learn about other HTML elements and how to write HTML, visit [W3Schools/html]
|
|
|
79
84
|
## Themes
|
|
80
85
|
|
|
81
86
|
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet:
|
|
87
|
+
|
|
82
88
|
```html
|
|
83
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@
|
|
89
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
|
|
84
90
|
```
|
package/demo.html
CHANGED
|
@@ -1,274 +1,286 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>demo - intergrav/dev.css</title>
|
|
7
|
+
<link rel="stylesheet" href="dev.css" />
|
|
8
|
+
<link
|
|
9
|
+
rel="stylesheet"
|
|
10
|
+
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
|
|
11
|
+
/>
|
|
12
|
+
<link
|
|
13
|
+
rel="stylesheet"
|
|
14
|
+
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"
|
|
15
|
+
/>
|
|
16
|
+
</head>
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</header>
|
|
18
|
+
<body>
|
|
19
|
+
<header>
|
|
20
|
+
<h4>intergrav/dev.css</h4>
|
|
21
|
+
<h1>demo</h1>
|
|
22
|
+
<p>This is the demo page for dev.css.</p>
|
|
23
|
+
<nav>
|
|
24
|
+
<a href="demo">demo</a> /
|
|
25
|
+
<a href="https://github.com/intergrav/dev.css">git</a> /
|
|
26
|
+
<a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a> /
|
|
27
|
+
<a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/">jsdelivr</a>
|
|
28
|
+
</nav>
|
|
29
|
+
</header>
|
|
31
30
|
|
|
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
|
-
|
|
31
|
+
<h1>Heading 1</h1>
|
|
32
|
+
<p>
|
|
33
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
34
|
+
elit.
|
|
35
|
+
</p>
|
|
36
|
+
<h2>Heading 2</h2>
|
|
37
|
+
<p>
|
|
38
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
39
|
+
elit.
|
|
40
|
+
</p>
|
|
41
|
+
<h3>Heading 3</h3>
|
|
42
|
+
<p>
|
|
43
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
44
|
+
elit.
|
|
45
|
+
</p>
|
|
46
|
+
<h4>Heading 4</h4>
|
|
47
|
+
<p>
|
|
48
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
49
|
+
elit.
|
|
50
|
+
</p>
|
|
51
|
+
<h5>Heading 5</h5>
|
|
52
|
+
<p>
|
|
53
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
54
|
+
elit.
|
|
55
|
+
</p>
|
|
56
|
+
<h6>Heading 6</h6>
|
|
57
|
+
<p>
|
|
58
|
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
|
|
59
|
+
elit.
|
|
60
|
+
</p>
|
|
62
61
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
<br />
|
|
63
|
+
<hr />
|
|
64
|
+
<br />
|
|
66
65
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
66
|
+
<blockquote>
|
|
67
|
+
This entire page was made with dev.css. You can view the source
|
|
68
|
+
<a href="https://github.com/intergrav/dev.css/blob/main/demo.html">here</a
|
|
69
|
+
>.
|
|
70
|
+
</blockquote>
|
|
72
71
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
<br />
|
|
73
|
+
<hr />
|
|
74
|
+
<br />
|
|
76
75
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
76
|
+
<p>
|
|
77
|
+
Lorem <mark>ipsum</mark> dolor sit amet
|
|
78
|
+
<strong>consectetur</strong> adipisicing elit. Aut
|
|
79
|
+
<i>harum molestias</i> labore amet possimus
|
|
80
|
+
<s>exercitationem aperiam</s> earum, doloribus
|
|
81
|
+
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
|
|
82
|
+
quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
|
|
83
|
+
</p>
|
|
85
84
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
<p>
|
|
86
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
87
|
+
<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit
|
|
88
|
+
repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
|
|
89
|
+
debitis eveniet totam minima vel.
|
|
90
|
+
</p>
|
|
92
91
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
92
|
+
<ul>
|
|
93
|
+
<li>List item</li>
|
|
94
|
+
<li>List item</li>
|
|
95
|
+
<li>List item</li>
|
|
96
|
+
<li>List item</li>
|
|
97
|
+
</ul>
|
|
99
98
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
<ol>
|
|
100
|
+
<li>Step 1</li>
|
|
101
|
+
<li>Step 2</li>
|
|
102
|
+
<li>????</li>
|
|
103
|
+
<li>Profit!</li>
|
|
104
|
+
</ol>
|
|
106
105
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
106
|
+
<dl>
|
|
107
|
+
<dt>Web</dt>
|
|
108
|
+
<dd>The part of the Internet that contains websites and web pages</dd>
|
|
109
|
+
<dt>HTML</dt>
|
|
110
|
+
<dd>A markup language for creating web pages</dd>
|
|
111
|
+
<dt>CSS</dt>
|
|
112
|
+
<dd>A technology to make HTML look better</dd>
|
|
113
|
+
</dl>
|
|
115
114
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
115
|
+
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
|
|
116
|
+
If you think privacy is unimportant for you because you have nothing to
|
|
117
|
+
hide, you might as well say free speech is unimportant for you because you
|
|
118
|
+
have nothing useful to say.
|
|
119
|
+
<br />
|
|
120
|
+
<br />
|
|
121
|
+
– Edward Snowden
|
|
122
|
+
</blockquote>
|
|
124
123
|
|
|
125
|
-
|
|
124
|
+
<pre>
|
|
126
125
|
<!DOCTYPE html>
|
|
127
|
-
<html>
|
|
128
|
-
<head>
|
|
129
|
-
<title>Hello World</title>
|
|
130
|
-
</head>
|
|
131
|
-
<body>
|
|
132
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
133
|
-
</body>
|
|
126
|
+
<html>
|
|
127
|
+
<head>
|
|
128
|
+
<title>Hello World</title>
|
|
129
|
+
</head>
|
|
130
|
+
<body>
|
|
131
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
132
|
+
</body>
|
|
134
133
|
</html></pre
|
|
135
|
-
|
|
134
|
+
>
|
|
136
135
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
136
|
+
<br />
|
|
137
|
+
<hr />
|
|
138
|
+
<br />
|
|
140
139
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
<thead>
|
|
146
|
-
<tr>
|
|
147
|
-
<th>Name</th>
|
|
148
|
-
<th>Instrument</th>
|
|
149
|
-
</tr>
|
|
150
|
-
</thead>
|
|
151
|
-
<tbody>
|
|
152
|
-
<tr>
|
|
153
|
-
<td>Yui Hirasawa</td>
|
|
154
|
-
<td>Lead Guitar</td>
|
|
155
|
-
</tr>
|
|
156
|
-
<tr>
|
|
157
|
-
<td>Mio Akiyama</td>
|
|
158
|
-
<td>Bass</td>
|
|
159
|
-
</tr>
|
|
160
|
-
<tr>
|
|
161
|
-
<td>Ritsu Tainaka</td>
|
|
162
|
-
<td>Drums</td>
|
|
163
|
-
</tr>
|
|
164
|
-
<tr>
|
|
165
|
-
<td>Tsumugi Kotobuki</td>
|
|
166
|
-
<td>Keyboard</td>
|
|
167
|
-
</tr>
|
|
168
|
-
<tr>
|
|
169
|
-
<td>Azusa Nakano</td>
|
|
170
|
-
<td>Rhythm Guitar</td>
|
|
171
|
-
</tr>
|
|
172
|
-
</tbody>
|
|
173
|
-
<tfoot>
|
|
174
|
-
<tr>
|
|
175
|
-
<th>Name</th>
|
|
176
|
-
<th>Instrument</th>
|
|
177
|
-
</tr>
|
|
178
|
-
</tfoot>
|
|
179
|
-
</table>
|
|
140
|
+
<details>
|
|
141
|
+
<summary>Click me!</summary>
|
|
142
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
143
|
+
</details>
|
|
180
144
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
145
|
+
<br />
|
|
146
|
+
<hr />
|
|
147
|
+
<br />
|
|
184
148
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
<p>
|
|
225
|
-
<label>Password</label><br />
|
|
226
|
-
<input type="password" name="password" />
|
|
227
|
-
</p>
|
|
228
|
-
<p>
|
|
229
|
-
<label>Country</label><br />
|
|
230
|
-
<select>
|
|
231
|
-
<option>China</option>
|
|
232
|
-
<option>India</option>
|
|
233
|
-
<option>United States</option>
|
|
234
|
-
<option>Indonesia</option>
|
|
235
|
-
<option>Brazil</option>
|
|
236
|
-
</select>
|
|
237
|
-
</p>
|
|
238
|
-
<p>
|
|
239
|
-
<label>Comments</label><br />
|
|
240
|
-
<textarea></textarea>
|
|
241
|
-
</p>
|
|
242
|
-
<p>
|
|
243
|
-
<label>
|
|
244
|
-
<input type="checkbox" value="terms" />
|
|
245
|
-
I agree to the <a>terms and conditions</a>
|
|
246
|
-
</label>
|
|
247
|
-
</p>
|
|
248
|
-
<p>
|
|
249
|
-
<button>Sign up</button>
|
|
250
|
-
<button type="reset">Reset form</button>
|
|
251
|
-
<button disabled="disabled">Disabled</button>
|
|
252
|
-
</p>
|
|
253
|
-
</form>
|
|
149
|
+
<table>
|
|
150
|
+
<caption>
|
|
151
|
+
Ho-kago Tea Time
|
|
152
|
+
</caption>
|
|
153
|
+
<thead>
|
|
154
|
+
<tr>
|
|
155
|
+
<th>Name</th>
|
|
156
|
+
<th>Instrument</th>
|
|
157
|
+
</tr>
|
|
158
|
+
</thead>
|
|
159
|
+
<tbody>
|
|
160
|
+
<tr>
|
|
161
|
+
<td>Yui Hirasawa</td>
|
|
162
|
+
<td>Lead Guitar</td>
|
|
163
|
+
</tr>
|
|
164
|
+
<tr>
|
|
165
|
+
<td>Mio Akiyama</td>
|
|
166
|
+
<td>Bass</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td>Ritsu Tainaka</td>
|
|
170
|
+
<td>Drums</td>
|
|
171
|
+
</tr>
|
|
172
|
+
<tr>
|
|
173
|
+
<td>Tsumugi Kotobuki</td>
|
|
174
|
+
<td>Keyboard</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td>Azusa Nakano</td>
|
|
178
|
+
<td>Rhythm Guitar</td>
|
|
179
|
+
</tr>
|
|
180
|
+
</tbody>
|
|
181
|
+
<tfoot>
|
|
182
|
+
<tr>
|
|
183
|
+
<th>Name</th>
|
|
184
|
+
<th>Instrument</th>
|
|
185
|
+
</tr>
|
|
186
|
+
</tfoot>
|
|
187
|
+
</table>
|
|
254
188
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
189
|
+
<br />
|
|
190
|
+
<hr />
|
|
191
|
+
<br />
|
|
258
192
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
193
|
+
<form>
|
|
194
|
+
<p>
|
|
195
|
+
<em>
|
|
196
|
+
This is not a real form and does not submit or save any information.
|
|
197
|
+
</em>
|
|
198
|
+
</p>
|
|
199
|
+
<p>
|
|
200
|
+
<label>First name</label><br />
|
|
201
|
+
<input type="text" name="first_name" />
|
|
202
|
+
</p>
|
|
203
|
+
<p>
|
|
204
|
+
<label>Last name</label><br />
|
|
205
|
+
<input type="text" name="last_name" />
|
|
206
|
+
</p>
|
|
207
|
+
<p>
|
|
208
|
+
<label>Gender</label><br />
|
|
209
|
+
<label>
|
|
210
|
+
<input type="radio" name="gender" value="Male" />
|
|
211
|
+
Male
|
|
212
|
+
</label>
|
|
213
|
+
<br />
|
|
214
|
+
<label>
|
|
215
|
+
<input type="radio" name="gender" value="Female" />
|
|
216
|
+
Female
|
|
217
|
+
</label>
|
|
218
|
+
<br />
|
|
219
|
+
<label>
|
|
220
|
+
<input type="radio" name="gender" value="other-none-na" />
|
|
221
|
+
Non-binary
|
|
222
|
+
</label>
|
|
223
|
+
</p>
|
|
224
|
+
<p>
|
|
225
|
+
<label>Email</label><br />
|
|
226
|
+
<input type="email" name="email" required="" />
|
|
227
|
+
</p>
|
|
228
|
+
<p>
|
|
229
|
+
<label>Phone number</label><br />
|
|
230
|
+
<input type="tel" name="phone" />
|
|
231
|
+
</p>
|
|
232
|
+
<p>
|
|
233
|
+
<label>Password</label><br />
|
|
234
|
+
<input type="password" name="password" />
|
|
235
|
+
</p>
|
|
236
|
+
<p>
|
|
237
|
+
<label>Country</label><br />
|
|
238
|
+
<select>
|
|
239
|
+
<option>China</option>
|
|
240
|
+
<option>India</option>
|
|
241
|
+
<option>United States</option>
|
|
242
|
+
<option>Indonesia</option>
|
|
243
|
+
<option>Brazil</option>
|
|
244
|
+
</select>
|
|
245
|
+
</p>
|
|
246
|
+
<p>
|
|
247
|
+
<label>Comments</label><br />
|
|
248
|
+
<textarea></textarea>
|
|
249
|
+
</p>
|
|
250
|
+
<p>
|
|
251
|
+
<label>
|
|
252
|
+
<input type="checkbox" value="terms" />
|
|
253
|
+
I agree to the <a>terms and conditions</a>
|
|
254
|
+
</label>
|
|
255
|
+
</p>
|
|
256
|
+
<p>
|
|
257
|
+
<button>Sign up</button>
|
|
258
|
+
<button type="reset">Reset form</button>
|
|
259
|
+
<button disabled="disabled">Disabled</button>
|
|
260
|
+
</p>
|
|
261
|
+
</form>
|
|
263
262
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
263
|
+
<br />
|
|
264
|
+
<hr />
|
|
265
|
+
<br />
|
|
266
|
+
|
|
267
|
+
<img
|
|
268
|
+
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
|
|
269
|
+
alt="Mt. Fuji"
|
|
270
|
+
/>
|
|
271
|
+
|
|
272
|
+
<p>
|
|
273
|
+
Inline image:
|
|
274
|
+
<a href="#"
|
|
275
|
+
><img
|
|
276
|
+
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
|
|
277
|
+
width="50"
|
|
278
|
+
alt="Mt. Fuji"
|
|
279
|
+
/></a>
|
|
280
|
+
</p>
|
|
281
|
+
|
|
282
|
+
<footer>
|
|
283
|
+
<p>This is an optional footer.</p>
|
|
284
|
+
</footer>
|
|
285
|
+
</body>
|
|
274
286
|
</html>
|