-
Notifications
You must be signed in to change notification settings - Fork 3
/
artscrafts.html
79 lines (76 loc) · 3.72 KB
/
artscrafts.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Elementary school bathroom chaos, now captured in code">
<meta name="keywords" content="humor, bathroom, teaching, kids, funny, students, school, toilet, nast">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Toilet Transcripts</title>
<!-- external CSS link -->
<link href='https://fonts.googleapis.com/css?family=Schoolbell' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cedarville+Cursive'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div id=container>
<header id="page-header" class="clearfix">
<h1>The <del>Toiloit</del> <ins>Toilet</ins> Transcripts</h1>
<a class="navicon"></a>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="index.html">Backstory</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="glossary.html">Glossary</a></li>
<li class="flushed"><a href="artscrafts.html">Arts & Crafts</a></li>
</ul>
</nav>
</header>
<main class="clearfix">
<h2> Arts & Crafts (& Games)</h2>
<section id="artscrafts" class="clearfix">
<p> The unique vocabulary choices of the Toilet Transcripts have inspired many works of art: </p>
<article class="art wide">
<div class="card clearfix">
<iframe width="288" height="417" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/314323738&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
<h3>Nast</h3>
<p>After hearing a dramatic reading of the Toilet Transcripts performed at Offline Camp,
Steven Trevathan created this musical piece to pay homage to the word "nast."</p>
</div>
</article>
<article class="art">
<div class="card clearfix">
<img src="images/bathroom.jpg">
<h3>Sastls</h3>
<p>Two longtime fans of the work created this bathroom plaque to pay homage to "sastls,"
the one word in the Toilet Transcripts which still has not been linked to any word in
the English dictionary. In a moment of utmost irony, they misspelled it as "sassle."</p>
</div>
</article>
<article class="art">
<div class="card clearfix">
<img src="images/potty-talk.png">
<h3>Potty Talk</h3>
<p>This hangman-style mystery word guessing game challenges you to guess a word that appears in the Toilet Transcripts. <a href="https://potty-talk.teri.dev">Play now!</a></p>
</div>
</article>
</section>
<footer class="clearfix">
<div id="disclaimer">
<p>(*) Particulars have been redacted to protect those innocent (??) of crimes including poor bathroom habits, spelling, and handwriting.</p>
</div>
<div id="copyright">
<p>© Teri Chadbourne</p>
</div>
</footer>
</div>
<!-- #container -->
<script src="js/index.js"></script>
</body>
</html>