-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
500 lines (400 loc) · 31.1 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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!doctype html>
<html lang="en-US">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Descriptive Metas -->
<title>ET CETER4</title>
<meta name="description" content="ET CETER4 is a composer of sounds/words/images || explore the depths of our web labyrinth" />
<meta name="author" content="ET CETER4" />
<!-- Fonts(?) -->
<!-- CSS -->
<link rel="stylesheet" href="css/vendor/tachyons/css/tachyons.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon -->
<link rel="icon" type="image/png" href="img/favicon.ico" />
</head>
<body class="min-vh-100 w-100 futura fw1" style="background-image: url(img/web-bg2.gif);">
<!-- All Pages-->
<main id="pages" class="min-vh-100">
<!-- Landing Page -->
<section id="landing" class="dn vh-100 w-100 pb-6rem ">
<!-- <h1 class="dn"> Landing Page </h1> Used for HTML5 Outline -->
<section id="landingPageCanvasWrapper" class="fixed vh-100 w-100 pb-6rem z-n1"></section>
<section class="flex items-center vh-100 w-100 pb-6rem">
<div class="flex flex-column justify-between center tc bw1 white pa4">
<h1 class="mt0 mb0 f1 f-headline-ns normal">ETCETER4</h1>
<h1 class="mt0 mb0 f1 f-headline-ns normal">ETCETER4</h1>
<h1 class="mt0 mb0 f1 f-headline-ns normal">ETCETER4</h1>
<h1 class="mt0 mb0 f1 f-headline-ns normal">ETCETER4</h1>
<!--<div class="flex flex-column center tc pa4">
<div class="">
<a href="#menu" id="toMenuPage" class="_enterButton dib relative"> </a> </div>
</div>-->
</div>
</section>
</section>
<!-- Main Menu -->
<section id="menu" class="dn vh-100 w-100 pb-6rem black">
<section id="menuPageCanvasWrapper" class="fixed vh-100 w-100 pb-6rem z-n1"></section>
<section id="menuPageWrapper" class="flex items-center vh-100 w-100 pb-6rem">
<section id="menuPageMenu" class="flex flex-column justify-between center tc ba bw1 b--black pa4">
<div class="tji tji-fix"><a href="http://music.etceter4.com/music" id="toSoundPage" target="_blank" class="db f2 link tji tji-fix black-link">S O U N D</a></div>
<div class="tji tji-fix"><a href="#words" id="toWordsPage" class="db f2 link tji tji-fix cyan-link">W O R D S</a></div>
<div class="tji tji-fix"><a href="#vision" id="toVisionPage" class="db f2 link tji tji-fix magenta-link">V I S I O N</a></div>
<div class="tji tji-fix"><a href="#info" id="toInfoPage" class="db f2 link tji tji-fix yellow-link">I N F O</a></div>
</section>
</section>
</section>
<!-- Menu // Words -->
<!--<section id="words" class="dn vh-100 w-100 pb-6rem bg-blue black">
<section id="wordsContainer" class="fixed vh-100 w-100">
<div id="wordsOuterContainer" class="flex items-center vh-100 w-100">
<div id="wordsInnerContainer" class="flex flex-column justify-between center tc ba bg-gray bw1 b--black pa0 bn">
<div class="tji tji-fix"><a href="analog.html" target="_blank" id="toDiaryPage" class="f3 f-2_250rem-ns link black-link">D I A R Y</a></div>
<div class="tji tji-fix"><a href="#blog" id="toBlogPage" class="f3 f-2_250rem-ns link red-link">B L O G</a></div>
<div class="tji tji-fix"><a href="http://met4morphoses.com" target="_blank" class="f3 f-2_250rem-ns link white-link">M E T 4 M O R P H O S E S</a></div>
<div class="tji tji-fix"><a href="loophole.html" target="_blank" class="f3 f-2_250rem-ns link magenta-link">L O O P H O L E</a></div>
</div>
</div>
</section>
</section>-->
<!-- Menu // Sight -->
<!--<section id="vision" class="dn vh-100 w-100 bg-pink magenta">
<section id="visionContainer" class="fixed vh-100 w-100">
<div id="visionOuterContainer" class="flex items-center vh-100 w-100">
<div id="visionInnerContainer" class="flex flex-column justify-between center tc ba bg-light-green bw1 b--black pa0 bn">
<div class="tji tji-fix"><a href="https://www.youtube.com/user/etceter4" target="_blank" id="toVideoPage" class="f3 f-2_250rem-ns link white-link">V I D E O</a></div>
<div class="tji tji-fix"><a href="ogod.html" target="_blank" id="toOGOD" class="f3 f-2_250rem-ns link cyan-link">O G O D</a></div>
<div class="tji tji-fix"><a href="img/photos/random/stills.html" id="" target="_blank" class="f3 f-2_250rem-ns link black-link">S T I L L</a></div>
</div>
</div>
</section>
</section>-->
<!-- Sound -->
<!--<section id="sound" class="dn h-100 w-100 pb-6rem bg-light-red black">
<section id="soundContainer" class="flex justify-around items-center flex-wrap vh-100 w-100-ns overflow-x-scroll overflow-y-none center">
<section id="OneGameOneDay" class="w-18_750rem shadedow ma4">
<div id="BCContainer" class="h-18_750rem">
</div>
<div id="textContainer" class="pt4 h-6_250rem bg-white tc relative">
<p class="mt1 mb1">OGOD // 2015</p>
<a href="https://www.youtube.com/embed/8ofL2qbSap0?rel=0" target="_blank" id="toOGOD" class="red-link link">WATCH THE VISUAL ALBUM</a>
</div>
</section>
<section id="RMXS" class="w-18_750rem shadedow ma4">
<div id="BCContainer" class="h-18_750rem">
</div>
<div id="textContainer" class="pt4 h-6_250rem bg-white tc relative">
<p class="mt3 mb1">RMXS // 20XX</p>
</div>
</section>
<section id="ProgressionOfDigression" class="w-18_750rem shadedow ma4">
<div id="BCContainer" class="h-18_750rem">
</div>
<div id="textContainer" class="pt4 h-6_250rem bg-white tc relative">
<p class="mt1 mb1">PROGRESSIONDIGRESSION<br>// 2012</p>
</div>
</section>
<section id="Etcetera" class="w-18_750rem shadedow ma4">
<div id="BCContainer" class="h-18_750rem">
</div>
<div id="textContainer" class="pt4 h-6_250rem bg-white tc relative">
<p class="mt3 mb1">ETCETERA // 2011</p>
</div>
</section>
</section>
</section>-->
<!-- Video -->
<!--<section id="video" class="dn h-100 w-100 pb-6rem bg-light-gray black">
<section id="videoContainer" class="flex justify-center items-center flex-wrap flex-row w-90 w-100-ns mw9-ns center">-->
<!--<section class="w-90 w-80-ns shadedow ma4-ns mt4">-->
<!--<div class="youtubeContainer">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/BIaJcXkKW0E?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="_line-modal pt4 h-6_250rem tc relative">
<p class="mt1 mb1">DAVID BOWIE - THURSDAY’S CHILD <br class="dn-ns">(ET CETER4 RMX) // FEB 2016</p>
</div>-->
<!-- Back Button -->
<!--<section id="VideoBackButtonContainer" class="VideoBackButtonContainer mw2 tc">
<a id="VideoBackButton" href="#" class="black-link items-center f-2_250rem-ns link">↵</a>
</section>-->
<!--</section>-->
<!--<section class="w-90 w-80-ns shadedow ma4-ns mt4">
<div class="youtubeContainer">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/8ofL2qbSap0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="_line-modal pt4 h-6_250rem tc relative">
<p class="mt1 mb1">ET CETER4 - OGOD I : XXIX</p>
</div>
</section>
<section class="w-90 w-80-ns shadedow ma4-ns mt4">
<div class="youtubeContainer">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/IiaEEnfSuW8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="_line-modal pt4 h-6_250rem tc relative">
<p class="mt1 mb1">ET CETER4 LIVE <br class="dn-ns">@ ELECTRONICA 1.3</p>
</div>
</section>
<section class="w-90 w-80-ns shadedow ma4-ns mt4">
<div class="youtubeContainer">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/KXaMIIBtrkQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="_line-modal pt4 h-6_250rem tc relative">
<p class="mt1 mb1">ET CETER4 - FASTER</p>
</div>
</section>
<section class="w-90 w-80-ns shadedow ma4-ns mt4 mb4">
<div class="youtubeContainer">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/eHW34l3RrAo?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="_line-modal pt4 h-6_250rem tc relative">
<p class="mt1 mb1">ET CETER4 - SLIP</p>
</div>
</section>
</section>
</section>-->
<!--Stills
<section id="stills" class="dn min-h-100vh vh-100 w-100 pb-6rem bodoni black"> dt
<div id="stillsContainer" class="dtc tc v-mid relative mw108rem-ns">
<section id="imageCaptionContainer" class="mw9 center relative">
<section id="images" class="dt h-100 min-h-21_875rem h-28_125rem-ns center w-100 w-90-ns pt3-ns relative">
<div class="dtc v-mid">
<div id="imageContainer" class="dt w-100">
<div id="stillsImage" class="dtc v-mid heightControl-stills min-h-21_875rem min-h-28_125rem-ns tc h-100">
<img class="mw-100 mh-100 w-auto h-auto anim" src="img/placeholder.jpg" data-src="img/photos/media/media1.jpg" alt="">
</div>
<div id="stillsImage" class="dn v-mid heightControl-stills min-h-21_875rem min-h-28_125rem-ns tc h-100">
<img class="mw-100 mh-100 w-auto h-auto anim" src="img/placeholder.jpg" data-src="img/photos/media/media2.jpg" alt="">
</div>
<div id="stillsImage" class="dn v-mid heightControl-stills min-h-21_875rem min-h-28_125rem-ns tc h-100">
<img class="mw-100 mh-100 w-auto h-auto anim" src="img/placeholder.jpg" data-src="img/photos/media/media3.jpg" alt="">
</div>
</div>
</div>
</section>
<p id="stillsCaption" class="_captionSeperator relative ml3 h4 center pt4 mt0 mb4 mb0-ns tc w-90 w-30-ns">Fires, fury, absolution.<br>Delusion, fantasy, insincerity.<br>Constants follow us.<br>News breaks us.</p>
</section>
<button id="stills-left" class="dib absolute-ns w-20-ns h-100-ns pb6-ns pr-calc-ns left-0 top-0 f4-ns futura clear-button txtshdw-white bg-transparent b--none pointer 0-50 fadeIn"><</button>
<!--<p id="stills-indicator" class="dib mt0 mb0">1/83</p>-->
<!--<button id="stills-right" class="dib absolute-ns w-20-ns h-100-ns pb6-ns pl-calc-ns top-0 right-0 f4-ns futura clear-button txtshdw-white bg-transparent b--none pointer o-50 fadeIn">></button>-->
<!--</div>
</section>-->
<!-- Diary -->
<!--<section id="diary" class="dn min-h-100vh vh-100 w-100 pb-6rem bodoni black relative" style="background:url(img/diary_bg.png) center;"> dt
<div id="diary-BG" class="absolute h-100 w-100 cover z-n1" style="background:url(img/diary_bg.png) center;"></div>
<div id="diary-Container" class="dtc tc v-mid h-100 mw108rem-ns">
<div id="dimageContainer" class="center">
<div id="dstills" class="dt h-100 min-h-21_875rem h-28_125rem-ns center w-100 w-90-ns">
<div class="dtc v-mid tc h-100 mh-100rem-ns">
<div id="dInnerContainer" class="vh-85 min-h-21_875rem min-h-28_125rem-ns">
<div id="diary-leftImage" class="dib-ns db h-100 w-100 w-50-ns fl-ns" style="">
<img class="fr-ns mw-100 mh-100 w-auto h-auto " src="img/placeholder.jpg" data-src="img/photos/diary/diary1.jpg" alt="" style="">
</div>
<div id="diary-rightImage" class="dib-ns dn h-100 min-h-21_875rem min-h-28_125rem-ns w-100 w-50-ns fl-ns" style="">
<img class="dn fl-ns mw-100 mh-100 w-auto h-auto" src="img/placeholder.jpg" data-src="img/photos/diary/diary2.jpg" alt="" style="">
</div>
</div>
</div>
</div>
</div>
<button id="stills-left-diary" class="dib absolute-ns w-20-ns h-100-ns pb6-ns pr-calc-ns left-0 top-0 f4-ns futura clear-button txtshdw-white bg-transparent b--none pointer 0-50 fadeIn"><</button>
<!--<p id="stills-indicator" class="dib mt0 mb0">1/83</p>-->
<!--<button id="stills-right-diary" class="dib absolute-ns w-20-ns h-100-ns pb6-ns pl-calc-ns top-0 right-0 f4-ns futura clear-button txtshdw-white bg-transparent b--none pointer o-50 fadeIn">></button>-->
<!--</div>
</section>-->
<!-- Blog -->
<!--<section id="blog" class="dn h-100 w-100 pb-6rem black">
<div class="center-ns mw7 mh4 mt4">
<div class="center mw7 mb4">
<h1 class="f1 tc measure-wide fw1 mt0 mb1 w-100">crisis</h1>
<h2 class="bodoni tc f5 mt0 mb1 w-100">0 2 . 0 7 . 2 0 1 7</h2>
<p class="center bodoni mt0 measure-wide">
i hope you can see the beauty in me<br>
or rather, i hope you can .. even see me<br>
for it was once dark where I stood<br>
but today i am reborn.<br>
split open,<br>
fearless.<br>
<br>
yet, sitting in the past<br>
there was an i that stood. knowing 'i' could do better.<br>
a plague.<br>
so i did it. i woke up one day and did it.<br>
i gave up for a while, hating myself, hating the work, hating the complexity.<br>
i then moved onto something I could accomplish,<br>
i accomplished failing.<br>
<em>(i have many of those)</em><br>
so here i return.<br>
back again. <br>
i hope you can see the beauty in me.<br>
and i guess, here that is. here i stand in my mess.<br>
touch it. see it. hear it. a part of me is here.<br>
the source of pain, of misery, of love, of hate,<br>
burns into me. into it.<br>
it's reborn.<br>
i'm reborn.<br>
<br>
etceter4.com 3.0.0
</p>
</div>
<hr>
<div class="center mw7 mb4">
<h1 class="f1 tc measure-wide fw1 mt0 mb1 w-100">made some funny changes</h1>
<h2 class="bodoni tc f5 mt0 mb1 w-100">0 8 . 0 2 . 2 0 1 6</h2>
<p class="center bodoni mt0 measure-wide">
added a skeleton key (site map) to ze bottom of ze pg (rite down in the fotter eh) herrr herr herr <br> also
have added <a href="OGOD.html" target="_blank" class="class02e"> OGOD visual experience</a> // each page is a
different song, there is 29 of em.... <br> been feeling better of late. been also telling myself to stop controlling
my moods with narcotics and substances for manymany years. im okay tho. keep busy. keep at/keepitawy. been trying
to decide whether or not depression has been the best/worst exponent of me equation..for sooooo long.
</p>
</div>
<hr>
<div class="center mw7 mt4 mb4">
<h1 class="f1 tc measure-wide fw1 mt0 mb1 w-100">hello hello hello 4g4in</h1>
<h2 class="bodoni tc f5 mt0 mb1 w-100">0 7 . 1 8 . 2 0 1 6</h2>
<p class="center bodoni mt0 measure-wide">
i hope you found your way here alright, please stay awhile. take of your scarfs and hats, its warm outside. cant stop sweating.
i dont pay the bulls tho.<br> think im finishing the site. wwell er finishing it enouhg that is.
enough to not be entirely ashamed about. wellanyway,.<br> i hope you take the time to explore this website. there
has been a lot of work put into the softwear. there are a of doors to explore and navigate. there is a narrative
that will continue to grow. i hope you enjoy it.
<br> my musix is coming along nicely. its been cocooned long neough, thats for sure. so its just some artwork
that needs to be tkn care of. some free stuff to give out.
</p>
</div>
<hr>
<div class="center mw7 mt4 mb4">
<h1 class="f1 tc measure-wide fw1 mt0 mb1 w-100">Something percussive this way comes...</h1>
<h2 class="bodoni tc f5 mt0 mb1 w-100">0 7 . 1 5 . 2 0 1 6</h2>
<p class="center bodoni mt0 measure-wide">
have a few tracks (some say 5 tracks, some may say an EP) that have been kicking around for over a year. making grooves and
moves to get those out quite soon.
</p>
</div>
</div>
</section>-->
<!-- Info -->
<section id="info" class="dn vh-100 w-100 pb-6rem bg-dark-red black">
<section id="infoContainer" class="fixed vh-100 w-100">
<div id="infoOuterContainer" class="flex items-center vh-100 w-100">
<div id="infoInnerContainer" class="flex flex-column justify-between center tc ba bg-yellow bw1 b--black pa0 bn">
<div class="tji tji-fix"><a href="mailto:[email protected]" id="" class="f3 f-2_250rem-ns link white-link">4NTHONEE J4MES P4D4V4NO</a></div>
<div class="tji tji-fix"><a href="mailto:[email protected]" id="" class="f3 f-2_250rem-ns link red-link">D E S I G N E R</a></div>
<div class="tji tji-fix"><a href="http://www.et4l.com/" target="_blank" class="f3 f-2_250rem-ns link black-link">F4THR// [ E T 4 L ]</a></div>
</div>
</div>
</section>
</section>
</main>
<!-- Ad -->
<section id="ad" class="dn vh-auto w-auto pb-6rem tc bg-hot-pink white overflow-y-none">
<section class="ad-container ad-container-ns center bg-white h-100 w-100 absolute left-0 right-0 bottom-0 mw-60 h-60"> <!-- Main Container -->
<section class="bg-white fl-ns ad-img-container w-50-ns"> <!-- Image -->
<img src="img/photos/artwork/passing thru/pt5.png" alt="" class="ad-img ad-img-ns w-100">
</section>
<section class="bg-white pt2 pt0-ns fl-ns w-50-ns">
<div class="absolute relative-ns top-6rem top-0-ns left-0 right-0 center w-100"> <!-- Text -->
<h1 class="mt1 mt5-ns mb2 f1 normal black">PASSING//THRU</h1>
<h2 class="mt0 mt3-ns mb4 f4 normal black">OUT NOW</h2>
</div>
<div class="ad-button-container center">
<div class="flex flex-row flex-wrap justify-center pb-6rem"> <!-- Buttons -->
<a href="#" class="ad-button relative b--solid b--black bw1 link black-link h3 w4 ml2 mb2"><span class="hz-center">ITUNES</span></a>
<a href="#" class="ad-button relative b--solid b--black bw1 link black-link h3 w4 ml2 mb2"><span class="hz-center">SPOTIFY</span></a>
<a href="#" class="ad-button relative b--solid b--black bw1 link black-link h3 w4 ml2 mb2"><span class="hz-center">BANDCAMP</span></a>
<a href="#" class="ad-button relative b--solid b--black bw1 link black-link h3 w4 ml2 mb2"><span class="hz-center">SOUNDCLOUD</span></a>
<a href="http://www.etceter4.com" class="mainsite-button relative b--solid b--black bw1 link black-link h3 w4 ml2 mb2"><span class="hz-center">CONTINUE TO MAIN SITE</span></a>
</div>
</div>
</section>
</section>
</section>
<!-- Mobile Menu-->
<section id="mobileMenu" class="mobileMenu h-100 w-100 pb-6rem tc bg-white black overflow-y-auto">
<h1 class="normal tji tji-fix f-4_00rem w-100 center mt4">E T C E T E R 4</h1>
<div class="relative mh5">
<span class="_etcDashedLine">/////////////////////</span>
</div>
<ul class="list pl0 mt4 mb0 w-100 center f-1_250rem">
<li class="mb2 tji tji-fix bg-blue"><a href="http://music.etceter4.com/music" target="_blank" class="f-2_250rem link black-link"> SOUND </a> </li>
<li class="mb2 tji tji-fix bg-green"><a href="https://www.youtube.com/user/etceter4" target="_blank" class="f-2_250rem link yellow-link">VIDEO </a>
<a href="img/photos/random/stills.html" target="_blank" class="f-2_250rem link magenta-link"> STILLS </a>
<a href="analog.html" target="_blank" class="f-2_250rem link cyan-link"> DIARY</a></li>
<li class="mb2 tji tji-fix bg-pink"><a href="https://etceter4.tumblr.com" target="_blank" class="f-2_250rem link white-link"> BLOG </a>
<a href="loophole.html" target="_blank" class="f-2_250rem link green-link"> LOOPHOLE </a> </li>
<li class="mb2 tji tji-fix bg-yellow"><a href="https://met4morfoses.tumblr.com" target="_blank" class="f-2_250rem link blue-link"> MET4MORFOSES </a> </li>
<li class="mb2 tji tji-fix bg-black"><a href="http://eepurl.com/bPQueX" target="_blank" class="f-2_250rem link white-link"> MAILING_LIST</a></li>
<li class="mb2 tji tji-fix bg-red"><a href="http://music.etceter4.com/music" target="_blank" class="f-2_250rem link cyan-link">STORE </a>
<a href="#info" target="_blank" class="f-2_250rem link black-link"> INFO </a></li>
<!-- Social Sharing -->
<section id="socialRow" class="db-ns w-100 mb2">
<a class="social-link" href="http://www.facebook.com/etceter4" target="_blank">
<i class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="98" height="98" viewBox="0 0 97.8 97.8">
<path d="M48.9 0C21.9 0 0 21.9 0 48.9S21.9 97.8 48.9 97.8 97.8 75.9 97.8 48.9 75.9 0 48.9 0zM67.5 24.9l-6.8 0c-5.3 0-6.3 2.5-6.3 6.2v8.2h12.6L67.1 52H54.4v32.8H41.3V52H30.2V39.3h11v-9.4c0-10.9 6.7-16.9 16.4-16.9l9.9 0V24.9L67.5 24.9z"/></svg></i></a>
<a class="social-link" href="https://twitter.com/_etceter4" target="_blank">
<i class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="98" height="98" viewBox="0 0 97.8 97.8">
<path d="M48.9 0C21.9 0 0 21.9 0 48.9S21.9 97.8 48.9 97.8 97.8 75.9 97.8 48.9 75.9 0 48.9 0zM78.4 35.8c0 0.6 0 1.2 0 1.7 0 20.9-15.9 42.5-42.5 42.5 -8.1 0-16-2.3-22.9-6.7 -0.1-0.1-0.2-0.3-0.1-0.4 0.1-0.2 0.2-0.3 0.4-0.2 1.1 0.1 2.3 0.2 3.5 0.2 6.3 0 12.3-2 17.4-5.7 -6.1-0.5-11.3-4.6-13.2-10.5 0-0.1 0-0.3 0.1-0.4 0.1-0.1 0.2-0.1 0.3-0.1 1.7 0.3 3.4 0.3 5 0.1 -6.3-1.9-10.7-7.8-10.7-14.5l0-0.2c0-0.1 0.1-0.2 0.2-0.3 0.1-0.1 0.2-0.1 0.4 0 1.6 0.9 3.4 1.5 5.3 1.7 -3.6-2.9-5.7-7.2-5.7-11.9 0-2.7 0.7-5.3 2.1-7.6 0.1-0.1 0.2-0.2 0.3-0.2 0.1 0 0.2 0 0.3 0.1 7.4 9 18.2 14.6 29.8 15.3 -0.2-1-0.3-2-0.3-3 0-8.4 6.8-15.2 15.2-15.2 4.1 0 8.1 1.7 10.9 4.6 3.2-0.7 6.3-1.8 9.1-3.5 0.1-0.1 0.3-0.1 0.4 0 0.1 0.1 0.2 0.3 0.1 0.4 -1 3-2.8 5.6-5.3 7.5 2.4-0.4 4.7-1.1 6.8-2.1 0.1-0.1 0.3 0 0.4 0.1 0.1 0.1 0.1 0.3 0 0.4C83.8 31.2 81.3 33.7 78.4 35.8z"/></svg></i></a>
<a class="social-link" href="https://www.instagram.com/etceter4/" target="_blank">
<i class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="97.75" height="97.75" viewBox="0 0 97.75 97.75">
<ellipse cx="48.944" cy="48.719" rx="14.465" ry="14.017"/>
<path d="M71.333 49.501c0 11.981-10.024 21.692-22.389 21.692s-22.389-9.711-22.389-21.692c0-2.147 0.324-4.221 0.924-6.18h-6.616v30.427c0 1.576 1.288 2.863 2.863 2.863h50.159c1.576 0 2.865-1.287 2.865-2.863V43.321h-6.341C71.008 45.28 71.333 47.354 71.333 49.501z"/>
<path d="M65.332 35.11h8.141c1.784 0 3.242-1.458 3.242-3.242v-7.762c0-1.785-1.458-3.243-3.242-3.243h-8.141c-1.785 0-3.243 1.458-3.243 3.243v7.762C62.088 33.651 63.547 35.11 65.332 35.11z"/>
<path d="M48.875 0C21.882 0 0 21.882 0 48.875S21.882 97.75 48.875 97.75 97.75 75.868 97.75 48.875 75.868 0 48.875 0zM75.645 84.891H22.106c-5.087 0-9.246-3.765-9.246-9.244V22.105c0-5.481 4.159-9.245 9.246-9.245h53.539c5.086 0 9.246 3.764 9.246 9.245v53.542C84.891 81.126 80.73 84.891 75.645 84.891z"/></svg></i></a>
<a class="social-link" href="https://www.youtube.com/user/etceter4" target="_blank">
<i class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="98" height="98" viewBox="0 0 97.75 97.75">
<path d="M61.52 45.424c-6.555-3.492-13.097-7.008-19.667-10.468 -3.166-1.667-5.914 0.025-5.941 3.612 -0.027 3.492-0.006 6.985-0.006 10.479 0 3.537 0.012 7.074-0.005 10.61 -0.007 1.229 0.362 2.26 1.38 3 1.355 0.985 2.719 1.018 4.219 0.228 6.609-3.482 13.24-6.924 19.874-10.361 1.458-0.756 2.562-1.707 2.616-3.508C64.044 47.194 62.966 46.194 61.52 45.424z"/>
<path d="M48.875 0C21.883 0 0 21.882 0 48.875S21.883 97.75 48.875 97.75 97.75 75.868 97.75 48.875 75.867 0 48.875 0zM82.833 66.998c0 8.746-7.089 15.835-15.836 15.835H30.753c-8.746 0-15.836-7.09-15.836-15.835V30.752c0-8.746 7.09-15.835 15.836-15.835h36.244c8.747 0 15.836 7.09 15.836 15.835V66.998z"/></svg></i></a>
<!-- Audio Player -->
<section id="audioPlayer" class="audioPlayer r-c center mb2">
<iframe style="border: 0; width: 100%; height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/album=3780915385/size=small/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/">></iframe>
</section>
</section>
</ul>
</section>
<!-- Image Storage -->
<img id="imageStorage" class="dn" src="" alt="Storage For Canvases!"/>
<!-- Footer -->
<footer id="footer" class="fixed bottom-0 w-100 pa3 bw1 bg-white b--black-10">
<nav class="flex flex-row page-wrap justify-around center h-100">
<section id="mobileHamburger" class="width: 100%;">
<button class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
</section>
<!--Back Button
<section id="backButtonContainer" class="backButtonContainer mw2 width: 100%; tc">
<a id="backButton" href="#" class="black-link f-2_0625rem link">↵</a>
</section>-->
<!-- Support Us / Site Map / Mailing List -->
<!--<section id="subscribe" class="dn flex-ns flex-row flex-wrap justify-around items-center min-w-15rem mw6 w-34 h-100 f-1_125rem white">
<a class="link white-link" href="https://etceter4.bandcamp.com" target="_blank">SUPPORT US</a>
<p class="ma0 di">//</p>
<a id="mapToMapButton" class="link white-link" href="sitemap.html" target="_self">SITE MAP</a>
<p class="ma0 di">//</p>
<a class="link white-link" href="http://eepurl.com/bPQueX" target="_blank">MAILING LIST</a>
</section>-->
</nav>
</footer>
<!-- JS Requests -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.1/velocity.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="js/pageData.js"></script>
<script type="text/javascript" src="js/images.js"></script>
<script type="text/javascript" src="js/diary.js"></script>
<script type="text/javascript" src="js/ogod.js"></script>
</body>
</html>