-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (159 loc) · 5.55 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LazyCSS demo</title>
<link rel="stylesheet" href="lazy.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">LazyCSS</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
<main>
<h1>LazyCSS Demo</h1>
<h1>Heading 1</h1>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Heading 2</h2>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>Heading 3</h3>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h4>Heading 4</h4>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h5>Heading 5</h5>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h6>Heading 6</h6>
<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<hr>
<p>This is a <p>aragraph element with <strong><strong> text</strong>, <em><em>phasized text</em>, text with <u><u>nderlining</u>, text with <s><s>trikethrough</s> and a <a href="#">click<a>ble link.</a></p>
<p>This is a paragraph with a <code><code> element</code>.</p>
<details>
<summary>This is a clickable <summary> element.</summary>
<p>And some extended content wrapped in a <details> element.</p>
</details>
<h3>An unordered <ul> list</h3>
<ul>
<li><li>st item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<h3>An ordered <ol> list</h3>
<ol>
<li><li>st item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<h3>A definition <dl> list</h3>
<dl>
<dt>Defining <dt> element</dt>
<dd>And its <dd> definition.</dd>
<dt>Defining <dt> element</dt>
<dd>And its <dd> definition.</dd>
<dt>Defining <dt> element</dt>
<dd>And its <dd> definition.</dd>
</dl>
<blockquote>
This is a blockquote element.<br><br>-LazyCSS
</blockquote>
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html></code></pre>
<table>
<caption>Caption</caption>
<thead>
<tr>
<th>Table heading</th>
<th>Another heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element 1</td>
<td>Element 2</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
</tr>
</tbody>
</table>
<form>
<p><em>This is not a real form and does not submit or save any information.</em></p>
<label for="first-name">First name</label>
<input type="text" name="first_name" id="first-name">
<label for="last-name">Last name</label>
<input type="text" name="last_name" id="last-name">
<fieldset>
<legend>Gender</legend>
<label>
<input type="radio" name="gender" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" value="Female">
Female
</label>
</fieldset>
<label for="email">Email (*)</label>
<input type="email" name="email" required id="email">
<label for="phone">Phone number</label>
<input type="tel" name="phone" id="phone">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<label for="country">Country</label>
<select id="country">
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select>
<label for="city">City</label>
<input type="text" id="city" list="city-list">
<datalist id="city-list">
<option>New York</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Holiwood</option>
<option>Washington</option>
</datalist>
<label for="comments">Comments</label>
<textarea id="comments"></textarea>
<label>
<input type="checkbox" value="terms">
I agree to the <a>terms and conditions</a>
</label>
<button>Sign up</button>
<button type="reset">Reset form</button>
<button disabled="disabled">Disabled</button>
</form>
<img src="https://placekitten.com/1200/600" alt="cat">
</main>
<aside>
<h3>Responsive aside element</h3>
<img src="https://placekitten.com/1200/600" alt="cat">
<p>This section will be after the main content in mobile view and in the right side of the main content in desktop view.</p>
</aside>
<footer>
© 2023 Copyright notice
</footer>
</body>
</html>