-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (143 loc) · 8.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cactus.css | Just add some HTML</title>
<link rel="icon" type="image/x-icon" href="static/favicon.ico">
<link rel="stylesheet" href="dist/cactus.css">
</head>
<body>
<main class="container">
<svg id="emoji" width="6rem" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<g id="color">
<path fill="#b1cc33" d="M35.4871,7.054c-3.6266,0-6.5664,3.2647-6.5664,7.292V33.5385H25.9434c-3.9616,0-3.7957-1.0309-3.7957-4.7691l-1.6106-3.2526c0-2.7922-.3806-3.6821-3.3989-3.41-2.6314.2368-5.1765,1.5557-5.1765,4.05L11.7561,37.44c0,2.6374,4.38,7.58,7.1743,7.58l7.013.0688v0h2.9773V64.1754l13.1328,0V14.346C42.0535,10.3187,39.1138,7.054,35.4871,7.054Z"/>
<path fill="#b1cc33" d="M54.5238,25.9843a4.7767,4.7767,0,0,0-5.2448,4.7531v6.3643c0,3.7383.1565,4.7691-3.5816,4.7691H42.3061l.0793,11.5507h3.312v0h8.3573A4.7757,4.7757,0,0,0,58.83,48.6458V30.9427A4.9143,4.9143,0,0,0,54.5238,25.9843Z"/>
</g>
<g id="line">
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M42.0535,63.1477V14.198c0-3.9562-2.94-7.1634-6.5664-7.1634s-6.5664,3.2072-6.5664,7.1634v48.95"/>
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M25.0615,44.0454H18.6972a6.7684,6.7684,0,0,1-6.7685-6.7686V26.137a4.7765,4.7765,0,0,1,5.2447-4.7531A4.9143,4.9143,0,0,1,21.48,26.3423V31.11a3.3843,3.3843,0,0,0,3.3842,3.3842h.1975"/>
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M45.8256,52.4027h8.3573a4.7757,4.7757,0,0,0,4.7756-4.7756V29.9239a4.9143,4.9143,0,0,0-4.3065-4.9584,4.7765,4.7765,0,0,0-5.2447,4.7531v6.3643c0,3.7382.1565,6.7685-3.5817,6.7685"/>
<line x1="40.0964" x2="44.1648" y1="18.3489" y2="14.2805" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<line x1="51.1343" x2="55.2027" y1="48.083" y2="44.0146" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<line x1="20.1528" x2="24.2212" y1="30.3694" y2="26.301" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<line x1="33.146" x2="29.668" y1="11.7031" y2="7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<line x1="31.2172" x2="26.6242" y1="55.2326" y2="51.6104" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<line x1="55.9054" x2="59.9738" y1="27.9961" y2="23.9277" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<line x1="51.032" x2="46.6265" y1="35.5724" y2="31.7245" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<line x1="36.1743" x2="33.2368" y1="25.5782" y2="21.3614" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<line x1="14.6936" x2="11.7561" y1="25.9619" y2="20.712" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
<h1>cactus.css</h1>
<p><a href="dist/cactus.css"><strong>cactus.css</strong></a> is a drop-in CSS stylesheet to make <em>classless*</em> HTML pages a bit cleaner on the eye.</p>
<p>The stylesheets fonts, spacing, colours etc can be customised using a simple set of CSS variables.</p>
<hr>
<h2>Example headings</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h2>Example paragraphs</h2>
<p>HTML, or HyperText Markup Language, is a programming language used to create and structure the content of web pages. It is the <a href="https://en.wikipedia.org/wiki/HTML">foundation of the modern internet</a>, and is an essential skill for anyone looking to work in web development or design.</p>
<p>One of the reasons HTML is so good is that it is relatively easy to learn and use. Even beginners with no programming experience can pick up the basics of HTML quickly, and use it to create simple web pages. The language uses a system of tags and attributes to structure and format the content of a page, making it easy to add headings, paragraphs, lists, links, and other common elements.</p>
<hr>
<h3>Figures</h3>
<p>The figure HTML element represents self-contained content, potentially with an optional caption, which is specified using the figcaption element. The figure, its caption, and its contents are referenced as a single unit.</p>
<p>Below is an example of a figure with a figcaption and a cite.</p>
<figure class="bleed">
<img src="static/scottishstoater-y7nNdGEjmKM-unsplash.jpg" alt="Photo of a CalMac ferry crossing the firth of the Clyde, Scotland">
<figcaption>
Cumbrae to Largs Ferry, Scotland
<cite>Photo by <a href="https://unsplash.com/@scottishstoater">@scottishstoater</a> on <a href="https://unsplash.com/@scottishstoater">Unsplash</a>
</cite>
</figcaption>
</figure>
<p>Another random test paragraph. Unsplash is a popular website that offers a vast collection of high-quality, royalty-free photos. The photos on Unsplash are contributed by a talented community of photographers from around the world, and cover a wide range of subjects, from beautiful landscapes and cityscapes, to interesting people and objects.</p>
<hr>
<h3>Lists</h3>
<h4>Ordered</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Strawberries</li>
<li>Oranges</li>
</ol>
<h4>Unordered</h4>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Strawberries</li>
<li>Oranges</li>
</ul>
<h4>Nested lists</h4>
<ul>
<li>
The best fruit
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Strawberries</li>
<li>Oranges</li>
</ol>
</li>
<li>Bananas</li>
<li>Strawberries</li>
<li>Oranges</li>
</ul>
<hr>
<h3>Tables</h3>
<table>
<tr>
<th>Team</th>
<th>Wins</th>
<th>Draws</th>
<th>Losses</th>
<th>Points</th>
</tr>
<tr>
<td>Celtic FC</td>
<td>22</td>
<td>5</td>
<td>1</td>
<td>71</td>
</tr>
<tr>
<td>Rangers FC</td>
<td>18</td>
<td>8</td>
<td>3</td>
<td>62</td>
</tr>
<tr>
<td>Aberdeen FC</td>
<td>15</td>
<td>5</td>
<td>8</td>
<td>50</td>
</tr>
<tr>
<td>Hearts of Midlothian FC</td>
<td>10</td>
<td>6</td>
<td>12</td>
<td>36</td>
</tr>
<tr>
<td>Hibernian FC</td>
<td>9</td>
<td>8</td>
<td>11</td>
<td>35</td>
</tr>
</table>
<footer>
<p>Released under the <a href="https://github.com/chrissy-dev/cactus.css/blob/main/LICENSE">MIT License</a>. Maintained by <a href="https://chrissy.dev">Chris Collins</a>.</p>
<small>*Not entirely classless, some sensible helpers included 😬.</small>
</footer>
</main>
</body>
</html>