-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
135 lines (123 loc) · 3.89 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Geolize.css: reset your CSS back to 1997</title>
<link rel="stylesheet" type="text/css" href="geolize.css">
</head>
<body>
<header>
<h1> Geolize.css: reset your CSS </h1>
<h2> Geolize is a lightweight collection allowing you to easily turn your website into an HTML5/CSS3 valid Geocities page. </h2>
</header>
<nav> <h2> <a href="https://github.com/StupidHackathonAMS/geolize.css">GitHub</a> <a href="http://stupidhackathon.wtf">StupidHackathon AMS</a> </h2> </nav>
<main>
<hr>
<section>
<h1> Headings (H1) </h1>
<h2> H2 header </h2>
<h3> H3 header </h3>
<h4> H4 header </h4>
<h5> H5 header </h5>
<h6> H6 header </h6>
</section>
<hr>
<section>
<h1> Text </h1>
<p> This is a paragraph.</p>
<p> <strong> This text is strong.</strong> </p>
<p> <em> This text is emphasized. </em> </p>
<p> <b> This text is bold.</b> </p>
<p> <i> This text is italic.</i> </p>
<p> <small> This text is small.</small> </p>
<p> <mark> This text is marked.</mark> </p>
</section>
<hr>
<section>
<h1> Blockquotes and code</h1>
<blockquote> This is a blockquote. </blockquote>
<pre> This is <pre> </pre>
<code> This is <code> </code>
</section>
<hr>
<section>
<h1> Links </h1>
<p> This is a <a href="#####">link</a>. </p>
</section>
<hr>
<section>
<h1> Buttons </h1>
<button>Submit</button>
</section>
<hr>
<section>
<h1>Form Input</h1>
<input type="text"></input>
<button type="submit" class="btn">Search</button>
</section>
<hr>
<section>
<h1>Tables</h1>
<table>
<tr>
<th>Name</th>
<th>Favorite Dog Breed</th>
</tr>
<tr>
<td>Nienke</td>
<td>Pug <img src="img/pug.gif" alt="pug" style="height:50px" /></td>
</tr>
<tr>
<td>Stephanie</td>
<td>Corgi <img src="img/corgi.gif" alt="corgi" style="height:50px" /></td>
</tr>
</table>
</section>
<hr>
<section>
<h1> Images </h1>
<img src="img/underconstruction.gif" alt="under construction animated image">
<h2>Dividers</h2>
<img src="img/dragondivider.gif" alt="dragon" /><br />
<img src="img/flames.gif" alt="flames" /><br />
<img src="img/skater-divider.gif" alt="skater" /><br />
<img src="img/construction.gif" alt="construction" /><br />
<img src="img/tropical.gif" alt="tropical" /><br />
<p> If you want to change the divider, edit this piece of CSS:</p>
<pre>
<code>
hr {
background:url('img/image-you-want-to-use.gif');
height: 1px;
border: 0;
}</code>
</pre>
</section>
<hr>
<section>
<h1>Marquees</h1>
<marquee> I'm a regular marquee </marquee>
<p> Unfortunately, "marquee" has been deprecated. If you want your HTML to be CSS3 valid, you can use this alternative using @keyframes.
Credit goes to <a href="http://www.quackit.com/css/codes/marquees/">Quackit</a>. </p>
<p>Use this div to insert a marquee:</p>
<pre>
<code>
<div class="marquee">
<h3> Your text</h3>
</div></code>
</pre>
<p>It will look like this:</p>
<div class="marquee">
<h3> CSS3 marquee </h3>
</div>
</section>
<hr>
<section>
<h1>Blink</h1>
<blink> I'm blinking in really old browsers right now! </blink>
<p>Just like marquee, blink has been deprecated. You can use this alternative with @keyframes for a CSS3 valid version. Credit goes to <a href="http://fredericiana.com/2012/11/04/html5-blink-tag/">fredericiana</a>. </p>
<p class="blink">I'm blinking in CSS3 compatible browsers!</p>
</section>
</main>
</body>
</html>