-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
executable file
·312 lines (312 loc) · 32.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
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
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favico/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favico/favicon-16x16.png" sizes="16x16">
<title>Dark Ages of the Web</title>
<meta name="description" content="Old Web features — frontend and UI patterns">
<meta name="author" content="Pavel Laptev">
<meta property="og:title" content="Dark Ages of the Web">
<meta property="og:image" content="https://pavellaptev.github.io/web-dark-ages/img/web-preview.jpg">
<meta property="og:description" content="Old Web features — frontend and UI patterns">
<meta property="og:url" content="https://pavellaptev.github.io/web-dark-ages/">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/style.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="lightbox"><img src=""></div>
<div class="cursor"></div>
<div class="main-slide">
<div class="main-slide__wrap"><img class="baby" src="./img/DancingbabyOK.gif"><img class="head-sign" src="./img/calavera.gif">
<div class="main-slide__center-gif"><img class="centr-img torch-left" src="./img/torch.gif"><img class="centr-img torch-right" src="./img/torch.gif"><img class="centr-img girl" src="./img/AtoD1.gif"><img class="centr-img dragon" src="./img/small-red-fire-dragon-1.gif"><img class="centr-img earth" src="./img/earthspin.gif"><img class="centr-img title" src="./img/dark-ages.gif"></div>
<div class="main-slide__btm-gif"><img class="btm-img finger" src="./img/finger.gif"><img class="btm-img caption" src="./img/caption.gif"></div>
</div>
</div>
<div class="intro-slide">
<div class="intro-slide__text">
<p>The year 1994 when all began and the great era when the web we know today was born. It was the time when developers and designers only learn how to do web, collect and create a web experience from scratch - before landing pages, burger menu, Z and F-Pattern, adaptive design, flat design, eCommerce, functional animation and micro-interactions… Let's watch what we used in the past Web…</p>
</div>
</div>
<div class="screens">
<div class="screens__wrap">
<h1>Popular Screen resolutions</h1>
<div class="screens__monitors">
<div class="screen-wrap">
<div class="screen-body">
<div class="screen-point1"></div>
<div class="screen-point2"></div>
<div class="screen-monitor">
<div class="screen-flare"></div>
</div>
<div class="screen-sizeinfo"><span>800x600px</span></div>
</div>
<div class="screen-stand"></div>
<div class="screen-base"></div>
<div class="screen-shadow"></div>
</div>
</div>
<nav class="screens__slider">
<div class="screens__slider__item" id="monitor-1997">
<div class="screens__slider__item__date"><span>1997</span></div>
<div class="screens__slider__item__btn screens__slider__item__btn_active"></div>
</div>
<div class="screens__slider__item" id="monitor-2002">
<div class="screens__slider__item__date"><span>2002</span></div>
<div class="screens__slider__item__btn"></div>
</div>
<div class="screens__slider__item" id="monitor-2007">
<div class="screens__slider__item__date"><span>2007</span></div>
<div class="screens__slider__item__btn"></div>
</div>
<div class="screens__slider__item" id="monitor-2015">
<div class="screens__slider__item__date"><span>2015</span></div>
<div class="screens__slider__item__btn"></div>
</div>
<div class="screens__slider__timeline"></div>
</nav>
</div>
</div>
<div class="fs">
<div class="fs__wrap"><img class="fs__img-h1" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fz5de03bee878fa.gif">
<p>Today we can use a variety fonts but there was a time when we didn't have web-fonts and only a few variations. Most usable were — <b>Georgia, Arial and Times New Roman</b>. But if you wanted to do something unusual and use your own fonts — that's what I would call pain in the ass. The `@font-face` rule was announced only with the CSS3 fonts module.</p>
<p>The first formats for embedded fonts were Embedded OpenType file (*.EOT) and Portable Font Resource (*.PFR). But let's talk about the three most used methods. And it could seem like these methods came from 1998 but no, I found articles about these methods from 2008 and even later years.</p>
<hr class="fs__hr"><img class="fs__img-h2" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fz5de03af5e0a56.gif">
<p>On the web fonts was almost always paired — one font for headers, one for body text. For headers, designers often used some distinctive fonts and to make that possible developers used images. A designer saved a picture of the header text and passed it to a developer. Just pure images of the text — it was the easiest way to implement a custom font. Sometimes when the client wanted to change a header text by themself developers used images of cut out alphabet and replaced header text with images — word by word.</p>
<hr class="fs__hr"><img class="fs__img-h2" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fz5de10a78d8f31.gif">
<p>A combination of JavaScript and Flash was used to replace parts of the text on a page with a Flash movie that represented the text. Here are the links:</p><a class="fs__block-link" target="_blank" href="https://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FsIFR-link.gif"></a><a class="fs__block-link" target="_blank" href="http://www.htmlandcssbook.com/extras/sifr-and-cufon/"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Folder.gif"></a>
<hr class="fs__hr"><img class="fs__img-h2" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fz5de10b13a0e07.gif">
<p>There were two main libraries: <a href="http://cufon.shoqolate.com/generate/">Cufon</a> and <a href="https://web.archive.org/web/20120511181540/http://typeface.neocracy.org/">Typeface.js</a>. </p>
<p>Here is a comparison of these two libraries:</p><a class="fs__block-link" target="_blank" href="https://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/"><img class="fs__img-h2" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fcufon-vs-typeface.jpg"></a>
</div>
</div>
<div class="tb-l">
<div class="tb-l__wrap">
<table class="tb-l__table tb-l-borders">
<tr>
<th class="tb-l__left"><img class="tb-l__table_logo" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fcool-logo.gif?v=1575237004138"></th>
<th class="tb-l__tag-line">
<h2>We will make your website the old-fashioned way!</h2>
</th>
</tr>
<tr>
<th class="tb-l__left tb-l__menu">
<ul>
<li><a href="#nothing-to-see-here">About</a></li>
<li><a href="#and-here-nothing-to-see">Portfolio</a></li>
<li><a href="#hello">Contacts</a></li>
</ul>
</th>
<th class="tb-l__content">
<p>Back then before the `block` layout, the only way to make a layout was a table layout. It was everywhere. Using a table is a horrible idea for any layout, well, excluding of course table itself.</p>
<button class="tb-l__btn">Show/Hide table borders</button>
<p>And it is funnier that we beat this limitation more than 10 years ago but look at your mailbox — we are still using this outdated approach. Just look at the image below, I call it the "HTML Nightmare".</p><img class="tb-l__preview" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ftable-view.gif">
</th>
</tr>
</table>
</div>
</div>
<div class="sm">
<div class="sm-wrap">
<div class="dead-ui-label" style="right: -40px; top: 30px;"></div>
<h1 class="sm-wrap__header">Web 2.0</h1>
<p class="sm-wrap__text">Around the beginning of 2007, a phenomenon called Web 2.0 began to emerge. Web 2.0 was a modern approach to the old web. New technologies, social media growth and new websites where the content was created by users and not by admins — all of these factors, created Web 2.0.</p>
<p class="sm-wrap__text">We specific styles for buttons, mostly gradients, big border-radius, and glares. Designers loved to use PNG stickers on Web 2.0 when they wanted to tell users about sales, offers or just show how awesome their website is. And another Web 2.0 feature is tag clouds — a tiny block with commonly used tags - the more popular the tag, the larger it is.</p>
<div class="sm-btnbox">
<button class="sm-btns-btn sm-btnbox__btn sm-btnbox__btn_active">Buttons</button>
<button class="sm-stck-btn sm-btnbox__btn">Stickers</button>
<button class="sm-tags-btn sm-btnbox__btn">Tags Cloud</button>
</div>
<div class="sm-box">
<div class="sm-box__item sm-box__btns">
<button class="sm-box__btn1"> <span>Check it out</span>
<svg class="sm-box__btn1_arrow" fill="none" viewBox="0 0 13 17">
<path fill="#fff" d="M.5 16.5V0l12 8.5-12 8z"></path>
</svg>
</button>
<button class="sm-box__btn2">Check it out</button>
<button class="sm-box__btn3">Check it out</button>
<button class="sm-box__btn4">Check it out</button>
<button class="sm-box__btn5"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Farrow.png"></button>
<button class="sm-box__btn6"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Farrow-right.png"></button>
<button class="sm-box__btn7">Check it out</button>
<button class="sm-box__btn8">Check it out</button>
<button class="sm-box__btn9"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhome-icon.png"></button>
<button class="sm-box__btn10">Check it out</button>
<button class="sm-box__btn11"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fplus.png"></button>
<button class="sm-box__btn11"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fminus.png"></button>
</div>
<div class="sm-box__item sm-stickers sm-box-itemhide"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fstickers-img.png"></div>
<div class="sm-box__item sm-tagscloud sm-box-itemhide"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ftag-cloud-3.jpg"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ftag-cloud-2.jpg"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ftag-cloud-1.jpg"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ftag-cloud-4.jpg"></div>
</div>
</div>
</div>
<div class="fl">
<div class="fl__wrap">
<div class="fl__logo"><img class="fl__logo-glitch" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fflash-ban-glitch.gif"><img class="fl__logo-normal" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fflash-ban.png"></div>
<div class="fl__history__wrap">
<div class="fl__history">
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-16.png 2x"><span class="fl__history__item__year">2016</span></div>
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-14.png 2x"><span class="fl__history__item__year">2014</span></div>
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-12.png 2x"><span class="fl__history__item__year">2012</span></div>
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-10.png 2x"><span class="fl__history__item__year">2010</span></div>
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-08.png 2x"><span class="fl__history__item__year">2008</span></div>
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-07.png 2x"><span class="fl__history__item__year">2007</span></div>
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-05.png 2x"><span class="fl__history__item__year">2005</span></div>
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-02.png 2x"><span class="fl__history__item__year">2002</span></div>
<div class="fl__history__item"><img class="fl__history__item__logo" srcset="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ffl-96.png 2x"><span class="fl__history__item__year">1996</span></div>
</div>
</div>
<div class="fl__text">
<p>It’s now abandoned, but a lot of websites were built on FLASH technology.</p>
<p>Basic HTML technologies didn’t provide enough tools for designers to express their ideas and FLASH which was used commonly to create an animations so interactive presentations stepped into the Web.</p>
<p>For designers who wanted to do web development — FLASH websites were the breath of fresh air. Everything you could imagine was possible — from complex interactive animations to 3D.</p>
<p>The main source of inspiration was thefwa.com and it was an honor to add an FWA label to a website.</p>
<p>Sounds good, right? But what happened with FLASH then? Well, briefly it wasn’t secure, it was heavy to load, the 'Apple effect' and HTML5.</p>
<p>Unfortunately I can’t provide any links for you, because you can’t open them, FLASH technology is deadly dead right now.</p>
<p>It’s hard to imagine right now but FLASH was a big part of the internet not so long ago — websites, games, banners and I think that more than 50% of all designer's portfolios were built on FLASH.</p>
</div>
<div class="fl__refs">
<h1 class="fl__refs__title">Refs</h1>
<div class="fl__refs__links"><a class="fl__refs__link" href="https://streamshark.io/blog/birth-and-death-of-flash/" target="blank">Birth and death of Flash</a><a class="fl__refs__link" href="https://thehistoryoftheweb.com/the-story-of-flash/" target="blank">The story of Flash</a><a class="fl__refs__link" href="https://code.tutsplus.com/articles/a-nostalgic-rummage-through-the-history-of-flash--active-6733" target="blank">A nostalgic rummage through the history of flash</a></div>
</div>
</div>
</div>
<div class="hmb">
<div class="hmb__wrap">
<div class="hmb__hero">
<div class="dead-ui-label" style="right: -40px; top: -30px;"></div><img class="hmb__hero__homegif" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhome-gif-2.gif">
<h1 class="hmb__hero__title">Homepage</br>button</h1>
<div class="hmb__hero__back"></div>
</div>
<div class="hmb__content">
<div class="hmb__content__gallery"><a class="hmb__content__gallery__imglink" href="javascript:void(0);" data-bigimage="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-1.jpg" style="background-image: url(https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-1-pr.jpg)"></a><a class="hmb__content__gallery__imglink" href="javascript:void(0);" data-bigimage="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-2.jpg" style="background-image: url(https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-2-pr.jpg)"></a><a class="hmb__content__gallery__imglink" href="javascript:void(0);" data-bigimage="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-3.jpg" style="background-image: url(https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-3-pr.jpg)"></a><a class="hmb__content__gallery__imglink" href="javascript:void(0);" data-bigimage="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-4.jpg" style="background-image: url(https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-4-pr.jpg)"></a><a class="hmb__content__gallery__imglink" href="javascript:void(0);" data-bigimage="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-5.jpg" style="background-image: url(https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-5-pr.jpg)"></a><a class="hmb__content__gallery__imglink" href="javascript:void(0);" data-bigimage="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-6.jpg" style="background-image: url(https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-6-pr.jpg)"></a><a class="hmb__content__gallery__imglink" href="javascript:void(0);" data-bigimage="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-7.jpg" style="background-image: url(https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-7-pr.jpg)"></a><a class="hmb__content__gallery__imglink" href="javascript:void(0);" data-bigimage="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-8.jpg" style="background-image: url(https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhpb-8-pr.jpg)"></a></div>
<div class="hmb__content__text">
<p>The “Home” icon was born in the late '90s but the “HomePage” button was there from the beginning. During the years this button went through different phases but it's not disappeared, it's just hidden. One pattern — the obligatory “HomePage” link in the menu was transformed — now this “HomePage” link is placed in a company logotype, and every website or almost every website uses this pattern.</p>
</div>
</div>
</div>
</div>
<div class="site-maps">
<div class="site-maps__wrap">
<div class="site-maps__map"><img src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fsitemap.svg"></div>
<div class="site-maps__info">
<div class="site-maps__info__top">
<div class="site-maps__info__top_left">
<h3>Site Maps</h3>
</div>
<div class="site-maps__info__top_right">
<h3>R.I.P</h3>
</div>
</div>
<div class="site-maps__info__bottom">
<p>Another thing that we don’t see now is — site map page. Like a “HomePage” button it was one of the obligatory things to have on a website. Basically a sitemap is a page that shows all pages on your website as a structured list.</p>
</div>
</div>
</div>
</div>
<div class="guestbook">
<div class="guestbook__wrap"><img class="guestbook__img" src="./img/sign-guestbook-animation-10.gif">
<h1>Guest Books</h1>
<p>Before the comments sections, the guest book was a page on a website where people wrote their comments. And it doesn't matter if you had a personal webpage or you were a big company - it was a communication hub. Guest books were made in many different technologies, even on <a href="https://youtu.be/9uWFV3QkBW8" target="_blank">Flash</a>.</p>
</div>
</div>
<div class="gf-king">
<div class="gf-king__wrap">
<div class="gf-king__head"><img class="gf-king__head__img gf-king__title" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fcooltext344403526805552.gif"><img class="gf-king__head__img gf-king__crown" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fcrown.gif?v=1576531425369"><img class="gf-king__head__img gf-king__new" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fnew.gif?v=1576532124724"></div>
<div class="gf-king__text">
<p>Before ThreeJS, GASPJS, SVG, CSS animations the only way how you could express yourself in the old internet was with a GIF animation. The fanciest were spinning logos.</p>
</div>
<div class="gf-king__gifs"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fwindows_9x_user.gif?v=1576535359941"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2F_IMVTemp_Show_C_WINDOWSTEMPnsmail4K4.gif?v=1576535360096"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fwindows_floppy_disk_walking.gif?v=15765353602416"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fag00108_.gif?v=1576535360306"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fafcharacter.gif?v=1576535360635"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2F3demail.gif?v=1576535360646"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2F367.gif?v=1576535360660"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fbeavis.gif?v=1576535361005"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fapplespin.gif?v=1576535361038"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fangelbutterflyanim.gif?v=1576535361119"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fbonemail.gif?v=1576535361288"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fbuzon.gif?v=1576535361300"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fcalavera2.gif?v=1576535361338"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fanimatedbutterflyforamyfrompattianne.gif?v=1576535361439"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Faniback.gif?v=1576535361459"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fclicker125.gif?v=1576535361508"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fcatdance.gif?v=1576535361732"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fcorsetbritney.gif?v=1576535362158"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fcross3d.gif?v=1576535362171"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fdesign.gif?v=1576535362323"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FCursorArrow.gif?v=1576535362419"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Femail-3d.gif?v=1576535362487"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FE-mail1.gif?v=1576535362611"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FCwindowsTEMPnsmail1E.gif?v=1576535362707"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fgallop.gif?v=1576535362721"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fgbook.gif?v=1576535362759"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FGUNDAM10.gif?v=1576535363032"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FGermany-07.gif?v=1576535363128"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FHeart_beat.gif?v=1576535363170"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhome.gif?v=1576535363311"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fhomey.gif?v=1576535363706"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fimg2.gif?v=1576535363745"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FImage_Book.gif?v=1576535363819"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Finternet.gif?v=1576535363955"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fj0286801.gif?v=1576535364038"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Flapin_email.gif?v=1576535364184"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Flogobelladesignstransparente.gif?v=1576535364460"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Flaraspinning.gif?v=1576535364533"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fmicrosoft_ie.gif?v=1576535364648"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fredbritney.gif?v=1576535364806"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FSAMURAI.gif?v=1576535365025"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fsearchanim.gif?v=1576535365160"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fsimpsons1.gif?v=1576535365299"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FSpinningLamp.gif?v=1576535365382"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Ftux-windows_throw.gif?v=1576535365528"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Funionj.gif?v=1576535365663"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fwelcome.gif?v=1576535365787"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fwinamp.gif?v=1576535365942"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fearth.gif?v=1576535366267"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2FHappyComputer.gif?v=1576535366340"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fbanner.gif?v=1576535366655"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fportalwindows.gif?v=1576535366679"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fbeavis6.gif?v=1576535367164"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fldimgprf.gif?v=1576535367248"><img class="gf-king__gifs__item" src="https://cdn.glitch.com/78a63c0e-9d0d-41d5-84ad-1c4a47e813e0%2Fwelcometo.gif?v=1576535367478"></div>
<div class="gf-king__text">
<p>More cool images you can grab here on <a href="https://gifcities.org" target="_blank">gifcities.org</a></p>
</div>
</div>
</div>
<div class="btg">
<div class="btg__wrap">
<h1>Make Your Button</h1>
<div class="btg__content">
<div class="btg__stngs">
<div class="btg__stngs__radio">
<input type="radio" checked name="flares" id="flare-none">
<label for="flare-none">None</label>
</div>
<div class="btg__stngs__radio">
<input type="radio" name="flares" id="flare">
<label for="flare">Flare</label>
</div>
<div class="btg__stngs__radio">
<input type="radio" name="flares" id="flare2">
<label for="flare2">Flare 2</label>
</div>
<div class="btg__stngs__radio">
<input type="radio" name="flares" id="flare3">
<label for="flare3">Flare 3</label>
</div>
<hr class="btg__hr">
<div class="btg__stngs__checkbox">
<input type="checkbox" name="inn-glow" id="inn-glow">
<label for="inn-glow">Inner glow</label>
</div>
<hr class="btg__hr">
<div class="btg__stngs__checkbox__inline">
<div class="btg__stngs__checkbox">
<input type="radio" checked name="btn-volume" id="btn-volume-none">
<label for="btn-volume-none">None</label>
</div>
<div class="btg__stngs__checkbox">
<input type="radio" name="btn-volume" id="btn-volume">
<label for="btn-volume">Volume</label>
</div>
<div class="btg__stngs__checkbox">
<input type="radio" name="btn-volume" id="btn-invert-vol">
<label for="btn-invert-vol">Invert Volume</label>
</div>
</div>
<hr class="btg__hr">
<div class="btg__stngs__color">
<input type="color" id="clr-picker" name="clr-picker" value="#2400FF">
<label for="head">Color</label>
</div>
</div>
<div class="btg__btn-view">
<button class="btg__btn"><span>Hello!</span></button>
</div>
</div>
</div>
</div>
<div class="refs-slide">
<div class="refs-slide__wrap">
<h1>References</h1>
<ul>
<li><a href="https://www.webdesignmuseum.org/" target="_blank">Web Design Museum. Web design trends between the years 1991 and 2006</a></li>
<li><a href="https://www.hover.com/blog/10-things-that-used-to-be-on-every-website-that-you-totally-forgot-about/" target="_blank">10 Things That Used to Be on Every Website That You Totally Forgot About</a></li>
<li><a href="https://css-tricks.com/look-back-history-css/" target="_blank">Look Back History CSS</a></li>
<li><a href="https://thehistoryoftheweb.com/the-rise-of-css/" target="_blank">The Rise of CSS</a></li>
<li><a href="https://www.shortpoint.com/web-design-history-101/" target="_blank">Web Design History</a></li>
<li><a href="http://www.walthowe.com/navnet/history.html" target="_blank">A Brief History of the Internet</a></li>
<li><a href="https://www.business2community.com/brandviews/shelley-media-arts/history-website-design-25-years-building-web-01549881" target="_blank">The History of Website Design: 25 Years of Building the Web</a></li>
<li><a href="https://en.wikipedia.org/wiki/Digital_dark_age" target="_blank">Digital Dark Age</a></li>
<li><a href="https://blog.logrocket.com/history-of-frontend-frameworks/" target="_blank">History of front-end frameworks</a></li>
<li><a href="http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html" target="_blank">HTML Tags: Past, Present, Proposed</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods" target="_blank">Legacy layout methods</a></li>
<li><a href="https://www.w3schools.com/browsers/browsers_display.asp" target="_blank">Browser Display Statistics</a></li>
<li><a href="https://thehistoryoftheweb.com/timeline" target="_blank">The History of the Web</a></li>
<li><a href="http://theoldnet.com" target="_blank">Google for old websites</a></li>
<li><a href="https://wiby.me" target="_blank">The search engine that skips all new websites</a></li>
</ul>
</div>
</div>
<div class="end-slide">
<div class="end-slide__wrap">
<h2>To be continued?</h2>
<p>Let me know if you have more recalls from the past Web in <a target="_blank" href="https://github.com/PavelLaptev/web-dark-ages/issues/1">Issues</a> or make your own sections with Pull requests.</p>
<p>Author: <a href="https://pavellaptev.github.io/">Pavel Laptev</a></p>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>