-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (154 loc) · 5.23 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="Neonette" property="og:title">
<meta content="An incredibly purple, but lightweight-ish stylesheet based on Nanom's style.css" property="og:description">
<meta content="#B1B3CD" name="theme-color" data-react-helmet="true">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="neon.css">
<title>Neonette</title>
</head>
<body>
<main>
<h1>Neonette</h1>
<hr>
<p>This is Neonette, an incredibly purple, but lightweight-ish stylesheet based on <a href="https://nanom.neocities.org">nanom's style.css</a> (from mid-2021, it kinda changed after a year). Made to be easy to use, modern and nice to look at, Neonette is perfect for making heavy text-based sites or just simple "homepage" sites like <a href="https://obama.solutions/~nicoleaoki">mine</a>!</p>
<p>If you're interested in using Neonette in your project, check out <a href="https://github.com/nicoleaoki/neonette">the Github repo</a> with instructions on how to use it, although it's as easy as adding one link to your HTML/CSS/JSX.</p>
<p>Below, a demo of Neonette is shown, showing off most of HTML's tags while using Neonette, made by <a href="https://granneman.com/webdev/coding/htmlcsstestpage">Scott Granneman</a>, It's a bit clunky but shows off most of what Neonette is capable of.</p>
<br>
<hr>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Haeding Five</h5>
<h6>Heading Six (Broken but I doubt you'd use this)</h6>
<hr>
<br>
<p>
<em>This text is italic text, not italian text, italic, made with em.</em> <i>And this is italic text made with i.</i>
</p>
<p>
<strong>This text is bold text, not bald text, bald, made with strong.</strong> <b>And this is bold text made with b.</b>
</p>
<p>
<u>This is underlined text, not overlined text, made with u.</u> <ins>And this is inserted text, made with ins.</ins>
</p>
<p>
<strike>This is deleted (strikethrough) text, made with strike.</strike> <s>This is also strikethrough text, but made with s.</s> <del>This is deleted text, made with del.</del>
</p>
<p>
<code>This is computer code, made with code.</code> <tt>This is teletype text, made with tt.</tt>
</p>
<p>
<kbd>This is text the user is supposed to enter in, or keyboard, made with kbd.</kbd> <var>This is a variable, made with var.</var> <samp>This is sample program output, made with samp.</samp>
</p>
<p>
<small>This is small text, made with small.</small> <big>This is big text, made with big.</big>
</p>
<p>
<cite>This is a citation, made with cite.</cite> This is a <q>short quotation</q> in the middle of a sentence, made with q.
</p>
<p>
This sentence ends with a <sup>superscript</sup>. This sentence ends with a <sub>subscript</sub>.
</p>
<p>
This is an abbreviation, made with abbr: <abbr>WWW</abbr>. This is an acronym, made with acronym: <acronym>NATO</acronym>. This is a term that needs a definition, made with dfn: <dfn>Yog-Sothoth</dfn>.
</p>
<p>
This is an unordered list:
</p>
<ul>
<li>Koyaanisqatsi</li>
<li>Powaqqatsi</li>
<li>Naqoyqatsi</li>
</ul>
<p>
This is an ordered list:
</p>
<ol>
<li>Larry</li>
<li>Moe</li>
<li>Curly</li>
</ol>
<p>
This is a definition list:
</p>
<dl>
<dt>Defintion Term</dt>
<dd>Definition data defining the previous term</dd>
<dt>Another Definition Term</dt>
<dd>Definition data defining the previous term</dd>
</dl>
<p>
This is an address with breaks:
</p>
<address>
John Q. Public
<br>123 Main Street
<br>Anywhere, ST 12345
</address>
<p>
This is a long quotation inside a blockquote:
</p>
<blockquote>
<p>
“I love songs about horses, railroads, land, judgement day, family, hard times, whiskey, courtship, marriage, adultery, separation, murder, war, prison, rambling, damnation, home, salvation, death, pride, humor, piety, rebellion, patriotism, larceny, determination, tragedy, rowdiness, heartbreak, and love. And Mother. And God.” ~ Johnny Cash
</p>
</blockquote>
<p>
This is pre-formatted:
</p>
<pre>
Start in column one.
Then indent to column ten.
Then back five spaces.
</pre>
<p>
Here's a table with a border, a caption, colgroups, cols, thead, tfoot, & tbody:
</p>
<table border="1">
<caption>This is a table caption, made with caption</caption>
<colgroup span="2">
<col>
<col>
</colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>TD 1.1</td>
<td>TD 1.2</td>
<td>TD 1.3</td>
</tr>
<tr>
<td>TD 2.1</td>
<td>TD 2.2</td>
<td>TD 2.3</td>
</tr>
<tr>
<td>TD 3.1</td>
<td>TD 3.2</td>
<td>TD 3.3</td>
</tr>
</tbody>
</table>
<br>
<footer>And this is a footer, telling you that this project is open source and licensed under MIT, and that you can go check its repo out <a href="https://github.com/nicoleaoki/neonette">here</a>.</footer>
</main>
</body>
</html>