-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (159 loc) · 9.9 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
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>Home</title>
<link href="index.min.css?v=1.0.4" rel="stylesheet">
<style>
@media (min-width: 45rem) {
:root {
padding-bottom: 3rem;
padding-top: 3rem;
}
body > * {
margin-left: auto;
margin-right: auto;
max-width: 45rem;
}
}
</style>
</head>
<body>
<p role="alert">Do you like this project? Please support my <a href="https://github.com/mecha-cms">Mecha CMS</a> project too. Thank you!</p>
<main>
<nav>
<ul>
<li><a aria-current="page" href="">Home</a></li>
<li><a href="form">Form</a></li>
<li><a href="links">Links</a></li>
<li><a href="list">List</a></li>
<li><a href="table">Table</a></li>
</ul>
</nav>
<hgroup>
<h1>Layout 1.0.4</h1>
<p>A base style suitable as a starting point for any web layout.</p>
</hgroup>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor justo luctus, varius lorem sed, molestie massa. Ut et justo finibus, pharetra magna fermentum, rhoncus mauris. In et nulla eu nisl lobortis commodo in sed justo. Quisque iaculis odio a nulla faucibus dictum nec ac risus. Aliquam finibus, ex sit amet laoreet gravida, lacus nisl tincidunt turpis, a vestibulum dui purus a dolor. Aliquam eu urna at felis feugiat faucibus ut non mi. Quisque cursus nisi vitae maximus auctor.</p>
<blockquote>
<p>Donec feugiat magna eleifend enim porttitor, aliquet bibendum diam aliquam. Mauris sollicitudin, libero in efficitur blandit, dolor ligula ornare libero, non sagittis nibh diam id tortor. Maecenas sollicitudin justo sit amet urna vulputate, et interdum erat finibus. Fusce in consequat diam. Nulla mi tellus, condimentum et ligula eget, malesuada lacinia ante. Proin eu lacus eget metus tempus gravida.</p>
</blockquote>
<p>Fusce erat lectus, auctor eu lacinia eget, molestie at sapien. Nulla dignissim tortor a massa sagittis, id dictum ligula mattis. Duis ac tortor commodo, blandit sem quis, pulvinar neque.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>
<p><small>Small</small></p>
<p>Suspendisse in sagittis purus, at lobortis tortor. Donec faucibus, urna eget volutpat mollis, ligula erat tincidunt neque, sit amet pharetra libero metus at mauris. Aliquam metus neque, pellentesque id euismod vel, fermentum et nisl. Sed vulputate ipsum dapibus augue sollicitudin cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus bibendum pulvinar ipsum ut condimentum. Ut vitae rutrum leo.</p>
<hr>
<p role="note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor justo luctus, varius lorem sed, molestie massa. Ut et justo finibus, pharetra magna fermentum, rhoncus mauris. In et nulla eu nisl lobortis commodo in sed justo. Quisque iaculis odio a nulla faucibus dictum nec ac risus. Aliquam finibus, ex sit amet laoreet gravida, lacus nisl tincidunt turpis, a vestibulum dui purus a dolor. Aliquam eu urna at felis feugiat faucibus ut non mi. Quisque cursus nisi vitae maximus auctor.</p>
<p>Lorem <strong>bold</strong> ipsum dolor <em>italic</em> sit amet, <small>small</small> consectetuer <code>code</code> adipiscing elit, sed diam <abbr title="Yo!">abbr</abbr> nonummy <a href="#">link</a> nibh euismod <mark>mark</mark> tincidunt ut laoreet <kbd>kbd</kbd> dolore magna aliquam erat volutpat. Ut wisi <del>del</del> enim <ins>ins</ins> ad minim veniam, quis nostrud H<sub>2</sub>O exerci tation 10<sup>2</sup> ullamcorper suscipit <dfn>dfn</dfn> lobortis nisl ut <a href="#"><svg viewBox="0 0 24 24">
<path d="M21.79 13L16 16l1 2l-4-.75V21h-2v-3.75L7 18l1-2l-5.79-3l1-1.73L1.61 8l3.6-.23l1-1.77l3.42 3.9L8 5h2l2-3l2 3h2l-1.63 4.9L17.79 6l1 1.73l3.6.23l-1.6 3.23Z"></path>
</svg> link</a> aliquip ex ea commodo <svg viewBox="0 0 24 24">
<path d="M21.79 13L16 16l1 2l-4-.75V21h-2v-3.75L7 18l1-2l-5.79-3l1-1.73L1.61 8l3.6-.23l1-1.77l3.42 3.9L8 5h2l2-3l2 3h2l-1.63 4.9L17.79 6l1 1.73l3.6.23l-1.6 3.23Z"></path>
</svg> consequat.</p>
<pre><code>function foo(bar = true) {
return bar ?? 'baz';
}</code></pre>
<p>Pellentesque at ante lobortis lorem scelerisque laoreet. Suspendisse porttitor ante erat, vitae semper tortor eleifend ac. Mauris odio massa, aliquet in purus nec, ultricies congue nulla. Morbi viverra tempor turpis, sed pretium turpis elementum eget. Nam id metus a sem feugiat varius vel vel orci. Pellentesque dignissim varius luctus.</p>
<dl>
<dt>Lorem Ipsum</dt>
<dd>Dolor sit amet, consectetuer adipiscing elit.</dd>
<dt>Sed Diam Nonummy</dt>
<dd>Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
<dt>Ut Wisi Enim Ad Minim Veniam</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor justo luctus, varius lorem sed, molestie massa. Ut et justo finibus, pharetra magna fermentum, rhoncus mauris.</dd>
</dl>
<table>
<caption>Table caption goes here.</caption>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data 1.1</td>
<td>Table Data 1.2</td>
<td>Table Data 1.3</td>
</tr>
<tr>
<td>Table Data 2.1</td>
<td>Table Data 2.2</td>
<td>Table Data 2.3</td>
</tr>
<tr>
<td>Table Data 3.1</td>
<td>Table Data 3.2</td>
<td>Table Data 3.3</td>
</tr>
</tbody>
</table>
<p>Donec blandit fermentum pharetra. Curabitur dui ex, ornare id urna vitae, lobortis lacinia nibh. Pellentesque non nunc sit amet felis fermentum vehicula. Donec ut purus malesuada massa ornare gravida. Donec hendrerit est sit amet sem consequat, eu sollicitudin mi imperdiet. Sed hendrerit vulputate ante in viverra. Maecenas in dignissim ex. Donec augue dolor, dignissim ut consequat a, varius eget justo. Suspendisse pretium leo eget orci venenatis dapibus.</p>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3<ol>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ol>
</li>
<li>List Item 4</li>
</ol>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
<li>List Item 4</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3<ul>
<li>List Item 3.1<ol>
<li>List item 3.1.1</li>
<li>List item 3.1.2</li>
<li>List item 3.1.3</li>
</ol>
</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
<li>List Item 3.4</li>
<li>List Item 3.5</li>
</ul>
</li>
<li>List Item 4</li>
</ol>
<p>Fusce vulputate quam nunc, eget dignissim nulla molestie in. Praesent mattis finibus ante sit amet hendrerit. Donec a lacus eros. Mauris tellus ex, consectetur in massa nec, elementum vulputate quam. Nunc hendrerit tortor arcu, non lacinia augue efficitur eget. Quisque egestas aliquet odio, ultrices condimentum enim tristique a. Sed congue, ex ut pulvinar semper, libero mi vestibulum nisl, a sagittis lorem nisi sed nunc. Nam egestas congue auctor. Sed risus ligula, euismod at risus vulputate, tempor auctor lorem.</p>
<p>Mauris auctor, lectus quis condimentum hendrerit, erat diam mattis erat, tincidunt semper nibh lacus blandit metus. Vivamus iaculis risus a mauris faucibus, quis aliquam ante faucibus. Integer in nulla ac ex pulvinar aliquam quis id arcu. Quisque aliquet risus sed vehicula aliquet. Pellentesque eget elit a velit imperdiet accumsan. Praesent id felis ex. Nam risus felis, ultrices quis leo a, venenatis suscipit sapien.</p>
<p><video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">Sorry, your browser does not support embedded videos.
</video></p>
<p><audio controls>
<source src="audio.mp3" type="audio/mpeg">Your browser does not support embedded audios.
</audio></p>
<figure><img alt="900 × 300" loading="lazy" src="image.png">
<figcaption>Image caption goes here.</figcaption>
</figure>
<p>Pellentesque libero neque, pellentesque vitae nibh nec, convallis ultrices odio. In bibendum semper viverra. Donec porta non lectus a convallis. Nunc in convallis augue. Mauris porta augue sed diam feugiat congue. Nunc risus sem, gravida sed mi eu, cursus gravida ipsum. Donec tellus leo, volutpat ut vehicula nec, vehicula non est. Aliquam felis lacus, sollicitudin id vulputate sit amet, mattis quis diam. Suspendisse elementum arcu ut augue posuere convallis.</p>
<details>
<summary>Lorem ipsum dolor sit amet</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor justo luctus, varius lorem sed, molestie massa. Ut et justo finibus, pharetra magna fermentum, rhoncus mauris. In et nulla eu nisl lobortis commodo in sed justo.</p>
</details>
<p>Pellentesque at ante lobortis lorem scelerisque laoreet. Suspendisse porttitor ante erat, vitae semper tortor eleifend ac. Mauris odio massa, aliquet in purus nec, ultricies congue nulla. Morbi viverra tempor turpis, sed pretium turpis elementum eget.</p>
</main>
</body>
</html>