-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
214 lines (159 loc) · 8.79 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
<!--
Commentary for the general setup and structure of my parody version of a basic commercial website.
First up is the basic HTML header information, followed by the normal basic structure through to the end of the file with highlights along the way.
-->
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPATULA CITY</title>
<!-- Link to styles.css -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Divs for viewport border -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<!-- Divs for viewport border corner decorative dots -->
<div id="dotTL"></div>
<div id="dotTR"></div>
<div id="dotBL"></div>
<div id="dotBR"></div>
<h1>SPATULA CITY</h1>
<h2 id="motto"><p>"We Sell Spatulas</p><p>...and That's ALL!"</p></h2>
<!--
Quick nav menu to the various category pages (Other catalog pages are non-extant for now).
Single column on sm screens - inline style on lg screens
-->
<header>
<nav>
<h3>Click a link if you know what you want. If not, read the descriptions below and click on a pic.</h3>
<h4>** Come back often as we add products continually (and even new categories on occasion). **</h4>
<ul class="no-bullets">
<li class="nav"><p></p><a href="/catPages/rugged.html?" title="Rugged">Rugged</a></li>
<li class="nav"><p></p><a href="/catPages/hi-tech.html?" title="Hi-Tech">Hi-Tech</a></li>
<li class="nav"><p></p><a href="/catPages/luxury.html?" title="Luxury">Luxury</a></li>
<li class="nav"><p></p><a href="/catPages/economy.html?" title="Economy">Economy</a></li>
<li class="nav"><p></p><a href="/catPages/romantic.html?" title="Romantic">Romantic</a></li>
<li class="nav"><p></p><a href="/catPages/holiday.html?" title="Holiday">Holiday</a></li>
<li class="nav"><p></p><a href="/catPages/gift.html?" title="Gift">Gift</a></li>
<li class="nav"><p></p><a href="/catPages/other.html?" title="Other">Other</a></li>
</ul>
</nav>
</header>
<!-- Quote generator function and button output -->
<blockquote><h3 id="quotes"></h3></blockquote>
<button id="submit" value="Refresh Page" onClick="assignQuote()">another quote you'll flip over</button>
<!--
The site contains basic intro text and pictures of spatulas for each category.
Images are clickable leading to a now non-existant page for that category which would have other spatula images, info and purchase options.
Single column on sm screens - 2 column style on lg screens
I had in mind the following categories: Romantic (lace or red ribbon wrapped, leather, spiked), Rugged (Outdoorsy, for the bar-b-quer), Economy (basic, bare-bones bargain), High-tech (timer/thermometer on the handle, excess smoke detector), and Elegant (high-end, gold/silver/platinum plated, jewel encrusted). I later added holiday, gift and 'other' category to make a total of eight.
-->
<div class="container">
<div class="columnA" class="odd">
<header>
<h2>Rugged Spatulas...</h2>
<p>...for outdoor enthusiasts</p>
<a href="/catPages/rugged.html?"><img src=./images/ruggedSpatula.jpg width="300px" height="300px" alt=""></a>
<p>Grillin' and tailgate parties rock with our spalulas.</p>
</header>
</div>
<div class="columnB" class="even">
<header>
<h2>Hi-Tech Spatulas...</h2>
<p>...for gadget aficionados</p>
<a href="/catPages/hi-tech.html?"><img src=./images/hitechSpatula.jpg width="300px" height="300px" alt=""></a>
<p>You don't have one? And you call yourself a geek?</p>
</header>
</div>
<div class="columnA" class="odd">
<header>
<h2>Luxury Spatulas...</h2>
<p>...to turn the heads of truly upper crust gentlefolk</p>
<a href="/catPages/luxury.html?"><img src=./images/luxurySpatula.jpg width="300px" height="300px" alt=""></a>
<p>Presentation is what it's all about.</p>
</header>
</div>
<div class="columnB" class="even">
<header>
<h2>Economy Spatulas...</h2>
<p>...for when you just need to flip stuff</p>
<a href="/catPages/economy.html?"><img src=./images/economySpatula.jpeg width="300px" height="300px" alt=""></a>
<p>Quality, inexpensive ones get the job done, too.</p>
</header>
</div>
<div class="columnA" class="odd">
<header>
<h2>Romantic Spatulas...</h2>
<p>...to turn your various appetites amorous</p><!--Spatula 'o nine tails!-->
<a href="/catPages/romantic.html?"><img src=./images/romanceSpatula.jpg width="300px" height="300px" alt=""></a>
<p>See our newest item: the Spatula o' nine tails!</p>
</header>
</div>
<div class="columnB" class="even">
<header>
<h2>Holiday Spatulas...</h2>
<p>...for those celebratory days on the calendar</p>
<a href="/catPages/holiday.html?"><img src=./images/easterSpatula.jpeg width="300px" height="300px" alt=""></a>
<p>Be immersed in the spirit of the day while cooking.</p>
</header>
</div>
<div class="columnA" class="odd">
<header>
<h2>Gift Spatulas...</h2>
<p>...will make that special person flip</p>
<a href="/catPages/gift.html?"><img src=./images/giftSpatula.jpg width="300px" height="300px" alt=""></a>
<p>Spatulas are always a perfect gift-giving idea.</p>
</header>
</div>
<div class="columnB" class="even">
<header>
<h2>The Odd Spatula...</h2>
<p>...that doesn't fit any other category</p>
<a href="/catPages/other.html?"><img src=./images/otherSpatula.jpg width="300px" height="300px" alt=""></a>
<p>See descriptions for any special uses these have.</p>
</header>
</div>
</div>
<div class="about">
<h2>About Spatula City</h2>
<p>This is a parody site in honor of the famous commercial in the cult hit UHF.</p>
<p>No infringement or disrespect in any way is intended toward the holders of the rights of this work and its derivatives.</p>
</div>
<!-- Links to Facebook, Twitter, outside websites -->
<container class="ft_width">
<li class="footer-nav-item">Follow us:</li>
<ul class="no-bullets">
<li class="facebook footer-nav-item"><a href="https://www.facebook.com/" target="_blank">Facebook</a></li>
<li class="twitter footer-nav-item"><a href="https://twitter.com/" target="_blank">Twitter</a></li>
</ul>
<li class="footer-nav-item">Interesting sites about spatulas:</li>
<ul class="no-bullets">
<li><a href="https://medium.com/@brockhdw/the-spatula-a54ef2ffbe81" title="The Spatula" target="_blank">The Spatula</a></li>
<li><a href="http://www.planetspatula.com/facts%20and%20fun.html" title="Planet Spatula" target="_blank">Planet Spatula</a></li>
<li><a href="https://www.nationalgeographic.com/people-and-culture/food/the-plate/2015/03/27/tools-5-things-you-didnt-know-about-spatulas/" title="5 Things You Didn’t Know About Spatulas" target="_blank">5 Things You Didn’t Know About Spatulas</a></li>
<li><a href="http://blog.surlatable.com/kitchen-tools-101-is-it-a-spatula-a-turner-a-flipper-or-what/" title="Spatula, Flipper, or Turner?" target="_blank">Spatula, Flipper, or Turner?</a></li>
<li><a href="http://georgebillions.com/index.php/2017/08/31/a-few-words-about-john-spaduala-who-invented-the-spatula/" title="Inventor of the Spatula" target="_blank">Inventor of the Spatula</a></li>
</ul>
<li class="footer-nav-item">UHF (The movie):</li>
<ul class="no-bullets">
<li><a href="https://www.amazon.com/UHF-Weird-Al-Yankovic/dp/B00005JKHX" title="Amazon page" target="_blank">Amazon page</a></li>
<li><a href="https://www.imdb.com/title/tt0098546/" title="IMDB entry" target="_blank">IMDB entry</a></li>
<li><a href="https://www.imdb.com/title/tt0098546/trivia" title="IMDB trivia entry" target="_blank">IMDB trivia entry</a></li>
<li><a href="https://en.wikipedia.org/wiki/UHF_(film)" title="Wikipedia entry" target="_blank">Wikipedia entry</a></li>
<li><a href="https://www.ifc.com/shows/comedy-bang-bang/blog/2015/09/10-things-you-didnt-know-about-uhf" title="UHF trivia" target="_blank">See the Spatula City Billboard</a></li>
<li><a href="https://letsgotubin.substack.com/p/the-spatula-city-commercial-from" title="Spatula City Commercial" target="_blank">View the Spatula City Commercial</a></li>
</ul>
</container>
<!-- Faux copyright line -->
<footer>
<span>© Copyright 2019 Sy Greenblum Enterprises (not really)</span>
</footer>
<!-- Link to JavaScript -->
<script src="scripts/script.js"></script>
</body>
</html>