-
Notifications
You must be signed in to change notification settings - Fork 1
/
test.html
97 lines (85 loc) · 2.98 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tiny.css</title>
<link rel="stylesheet" href="dist/tiny.css">
</head>
<body>
<header>
<h1>Tiny.css</h1>
</header>
<p><strong>Tiny.css</strong> is a <em>very</em> minimalistic css library to override the
horrendous default style with good looking design. If you quickly
want to get an html page up and running, tiny.css is for you!</p>
<p>Visit the github repository <a href="https://github.com/ihsan6133/tiny.css">here</a>!</p>
<h2>Demos</h2>
<input type="" placeholder="Name">
<pre><code>// This is Javascript <br>console.log("Hello World!");</code></pre>
<blockquote>
The HTML blockquote Element (or HTML Block Quotation Element)
indicates that the enclosed text is an extended quotation.
Usually, this is rendered visually by indentation (see Notes
for how to change it). A URL for the source of the quotation
may be given using the cite attribute, while a text
representation of the source can be given using the
<code><cite></code> element."
MDN, "The Block Quotation element"
<footer>
<cite>MDN, "The Block Quotation Element"</cite>
</footer>
</blockquote>
<button onclick='document.querySelector("dialog").showModal()'>Click me!</button>
<dialog>
<header>This is a dialog</header>
<button onclick="document.querySelector('dialog').close()">Close</button>
</dialog>
<details>
<summary>Click me!</summary>
<p>Hello THis is the text i was talking about! You can copy it with <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
</details>
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>2</td>
<td>$2</td>
</tr>
<tr>
<td>Orange</td>
<td>3</td>
<td>$3</td>
</tr>
<tr>
<td>Banana</td>
<td>4</td>
<td>$4</td>
</tr>
</tbody>
</table>
<p>Here is an Image:</p>
<img src="https://placekitten.com/1000/1000" alt="Cat Picture">
<h3>Form</h3>
<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="[email protected]">
<input type="button" value="This button is disabled">
<label>Favourite animal</label>
<select>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<div>
<input type="checkbox" name="remember-me" id="remember-me">
<label for="remember-me">Remember me</label>
</div>
</body>
</html>