-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
292 lines (282 loc) · 9.41 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facatology</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Retro style page about cats" />
<meta name="keywords" content="Retro, Cats, Development, Vintage, Poster" />
<meta name="author" content="github.com/danilo-89" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Itim&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap"
rel="stylesheet"
/>
</head>
<body>
<nav id="nav" class="before-animation">
<div class="nav-container">
<img
class="nav-top-img"
src="/img/nav-top.svg"
alt="distorted rectangle-like shape illustration"
/>
<button id="navBtn" class="nav-btn" aria-label="Expand menu">
<img
src="/img/ham.svg"
alt="3 parallel distorted lines illustration"
/>
</button>
<div id="navHolder" class="nav-holder">
<img
class="nav-bottom-img"
src="/img/nav-bottom-frame.svg"
alt="distorted rectangle-like shape illustration"
/>
<div class="nav-ul-wrapper">
<ul class="nav-ul">
<button id="closeBtn" class="close-btn" aria-label="Close menu">
X
</button>
<li>
<a href="#etymologySection">Etymology</a>
</li>
<li>
<a href="#lifespanSection">Life span</a>
</li>
<li>
<a href="#superstitionSection">Superstition</a>
</li>
<li>
<a href="#infoSection">Info</a>
</li>
</ul>
</div>
</div>
<a class="nav-title" href="/#">Fac@tology</a>
<p class="nav-p">facts about cats</p>
<div class="logo-frame">
<div class="logo-frame-inside">
<img
style="
transform: translateY(186%) rotate(0deg);
transform-origin: -5% 52%;
"
class="logo-hand"
src="/img/cat/cat-hand.svg"
alt="cartoony cat's left hand"
/>
<img
class="logo-tail"
src="/img/cat/cat-tail.svg"
alt="cartoony cat's tail"
/>
<img
class="logo-body"
src="/img/cat/cat-main.svg"
alt="cartoony cat's body"
/>
</div>
</div>
</div>
</nav>
<div class="container">
<section id="etymologySection">
<article class="frame-retro frame-etymology">
<h2>Etymology</h2>
<p>
The origin of the English word cat, Old English catt, is thought to
be the Late Latin word cattus, which was first used at the beginning
of the 6th century. It was suggested that the word 'cattus' is
derived from an Egyptian precursor of Coptic ϣⲁⲩ šau, "tomcat", or
its feminine form suffixed with -t. The Late Latin word may be
derived from another Afro-Asiatic or Nilo-Saharan language. The
Nubian word kaddîska "wildcat" and Nobiin kadīs are possible sources
or cognates. The Nubian word may be a loan from Arabic قَطّ qaṭṭ ~
قِطّ qiṭṭ. It is "equally likely that the forms might derive from an
ancient Germanic word, imported into Latin and thence to Greek and
to Syriac and Arabic".
</p>
<div class="etymology-inside-duo">
<figure>
<img src="/img/book.svg" alt="book illustration" />
</figure>
<p class="text-italic">
The English puss, extended as pussy and pussycat, is attested from
the 16th century and may have been introduced from Dutch poes or
from Low German puuskatte, related to Swedish kattepus, or
Norwegian pus, pusekatt. Similar forms exist in Lithuanian puižė
and Irish puisín or puiscín. The etymology of this word is
unknown, but it may have simply arisen from a sound used to
attract a cat.
</p>
</div>
</article>
</section>
<section class="life-span-section" id="lifespanSection">
<article class="frame-retro frame-lifespan lss-part-1">
<h2>Life span</h2>
<p>
Reliable information on the lifespans of domestic cats is varied and
limited. Nevertheless, a number of studies have investigated the
matter and have come up with noteworthy estimates. The average
lifespan of pet cats has risen in recent decades. In the early
1980s, it was about seven years, rising to 9.4 years in 1995 and
about 15 years in 2021. Some cats have been reported as surviving
into their 30s, with the oldest known cat, Creme Puff, dying at a
age of 38. Neutering increases life expectancy: one study found
castrated male cats live twice as long as intact males, while spayed
female cats live 62% longer than intact females. The life expectancy
of a cat that is living indoors is typically about 16.9 years, while
the life expectancy of one living outdoors is 5.6 years.
</p>
<a
href="https://en.wikipedia.org/w/index.php?title=Aging_in_cats"
target="_blank"
rel="noopener noreferrer"
class="btn-retro"
>More on Wikipedia</a
>
</article>
<div class="lss-part-2">
<div class="red-fill-frame">
<div class="red-fill-frame-content">
<p>
It has also been found that the greater a cat's weight, the
lower its life expectancy on average.
</p>
</div>
</div>
<div class="frame-retro frame-calculator">
<h3>Get your cat's age</h3>
<p>
Find out how old in human years your feline is, using calculator
bellow
</p>
<form id="calcForm" class="frame-calc" type="">
<img
class="img-calc"
src="/img/calc-frame.svg"
alt="distorted frame illustration"
width="120px"
height="auto"
/>
<input
type="number"
min="0"
max="50"
step="0.5"
class="input-calc"
name="catAge"
placeholder="your cat's age"
/>
</form>
<span id="errorSpan" class="error"
>Please enter valid age of a cat</span
>
<p>
Your cat age is <br />
<span id="humanAge">?</span> years in human years.
</p>
</div>
</div>
</section>
<section id="superstitionSection">
<article class="frame-retro frame-superstition">
<h2>Superstition</h2>
<p>
Many cultures have negative superstitions about cats. An example
would be the belief that encountering a black cat ("crossing one's
path") leads to bad luck, or that cats are witches' familiars used
to augment a witch's powers and skills. The killing of cats in
Medieval Ypres, Belgium, is commemorated in the innocuous
present-day Kattenstoet (cat parade). In mid-16th century France,
cats would be burnt alive as a form of entertainment. According to
Norman Davies, the assembled people "shrieked with laughter as the
animals, howling with pain, were singed, roasted, and finally
carbonized".
</p>
<img src="/img/scared-cat.svg" alt="scared cast illustration" />
</article>
</section>
<section id="infoSection">
<article class="frame-retro frame-info">
<h2>Info</h2>
<p>
Initially I was just trying to make custom svg frames but as I
progressed it seemed cool to make the whole page in this style.
</p>
<h3>Text sources:</h3>
<p>
Wikipedia contributors. (2022, February 11). Cat. In Wikipedia, The
Free Encyclopedia. Retrieved 15:59, February 13, 2022, from
<a
href="https://en.wikipedia.org/w/index.php?title=Cat&oldid=1071282637"
target="_blank"
rel="noopener noreferrer"
>article link</a
>
</p>
<p>
Wikipedia contributors. (2022, January 16). Aging in cats. In
Wikipedia, The Free Encyclopedia. Retrieved 17:10, February 13,
2022, from
<a
href="https://en.wikipedia.org/w/index.php?title=Aging_in_cats&oldid=1065965006"
target="_blank"
rel="noopener noreferrer"
>article link</a
>
</p>
<h3>Images:</h3>
<p>
Most images are extracted from old war posters:
<a
href="https://commons.wikimedia.org/wiki/File:War_Production_Drive_-_NARA_-_534645.jpg"
target="_blank"
rel="noopener noreferrer"
>link1</a
>
,
<a
href="https://commons.wikimedia.org/wiki/File:War_Production_Drive_-_NARA_-_534658.jpg"
target="_blank"
rel="noopener noreferrer"
>link2</a
>
<br />
Background noise texture:
<a
href="https://www.cssmatic.com/noise-texture"
target="_blank"
rel="noopener noreferrer"
>link</a
>
</p>
<div>
<img src="/img/contact.svg" alt="contact text inside two circles" />
<p>
<a
href="https://github.com/danilo-89"
target="_blank"
rel="noopener noreferrer"
>github.com/danilo-89</a
>
</p>
</div>
</article>
</section>
</div>
<script src="/js.js"></script>
</body>
</html>