-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
258 lines (152 loc) · 13.2 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
<!DOCTYPE html>
<html lang="en">
<!--Hello digital composer! Welcome to my Elevator Pitch Generator web design tool, powered by Stasis Theory. I'm glad you found it--we're going to adapt a 2,000 year old formula to help you pitch an idea, explaining who you are and what you want, why it's important, and what it will do for your audience. I use this document in my Technical Communications classes at the University of Pittsburgh to teach my students a little bit about rhetoric, and a little bit about computer science. Just follow along and with comments like this, and you will make a really cool web documemt that helps pitch your idea and learn a little bit about coding.
You could make web presentations the easy way by creating a pdf's or powerpoint, or you could do a little more work to better understand these digital tools that you use everyday to (re)present yourself and connect with others in virtual spaces. And this last bit is an important point! If we really want to be makers, if we really want to be creative, then we need to understand our tools and how they work.
In this file, you will work through the four questions of stasis: conjecture, definition, quality, and policy. This method is tried and true, 100% guaranteed to help you say something meaningful about almost anything. While the Greeks originally used it to help them explore questions and issues, and to try to figure out where others might disagree on those issues, the design can easily be adapted to other ends like this one. You should even commit this exercise of stasis to memory. That way, if you are ever stuck on an elevator with someone important...you'll be ready to have something to say. That was indeed the problem for Archimedes, the engineer who built the first elevator in 236BC and afterwards found himself riding in his elevator with all kinds of powerful people, ascending and descending with nothing to say. And for almost two hundred years, the the problem continued to plague the Greeks until the rhetorician Hermagoras solved this communication problem by developing the questions of stasis. Some say it was actually Aristotle, some hundred years pre-elevator, who first theorized the questions of stasis. And much later in the Roman period, Cicero, Quintillian, and Hermogenes added their own iterations.
I like to think about stasis theory in terms of space. Some say the goal of this exercise is stasis, or agreement with the other, but I would argue that the goal of stasis is actually movement. Yes, when we come to stasis, we stop. But we stop only long enough in time/space to assess how we got where we are and what happened before moving forward. I argue that we actually use stasis theory to ready ourselves and others to move with changed velocity (in a new direction and perhaps at a different speed.)
To get started with the Elevator Pitch Generator, you will need to fork my repository from GitHub if you haven't already. If you want to easily publish it on GitHub, I'll give you more information at the end of this document. But for right now, fork, and then download the website to a zip file. Go ahead and put these files in a secure place (folder) where you will be able to find them and organize your other assests like images and pdf's, etcetera. You will also need a text editor like "brackets.io" or "notepad-plus-plus.org." Open the style.css and index.html documents in the text editor and we can get started building our stasis theory web document.
If you are working in groups on GitHub, one group member will need to fork the website in GitHub and then each group members should fork from this new repository.
BTW. You can leave these faded comments be, or delete them. They are but road signs, absent from the larger design-->
<!--Go ahead and change the title of this HTML document from "Elevator Pitch Generator" to whatever you want. This other stuff below the title does important work to help tell different browsers what this page should look like on different screens like cell phones or desktops-->
<head>
<title>Workout Training Manual</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Replace the project title and provide a flashy subtitle. Developers refer to this division as a "Hero Block." You don't need to do anything in this html. code, but you'll need to change the background image on the style.css page. First replace the el1.jpg with a .jpg or .png in the project folder (hint: simplify the name). Then use your text editor to open your style.css sheet, find the hero image, and replace el1.jpg with the name of your new image-->
<div class="hero-image">
<div class="hero-text">
<h1>Workout Training Manual</h1>
<!--<h6>Powered by Stasis Theory</h6>-->
</div>
</div>
<!--in this next section you need to answer the first question of stasis, that of conjecture. What is the problem? Can it be solved?-->
<div class="textblock" style="text-align: left">
<h2>Overview</h2>
<h3>Our project team proposed creating a training manual for those seeking to become healthier. We wanted to generate tailored exercise suggestions based on a few factors, such as height, weight, age, previous injuries, and fitness goals to provide an effective workout guide for each individual.</h3>
<div>
<!--Add more photos to your project folder for a photo grid, making sure the files end in .jpg or .png and replace/add to the names on the grid below on this html file. You can add more images if you wish, or subtract...see what happens--you have to be playful to find out how things work.-->
<div class="photogrid">
<div class="row">
<div class="column">
<img src="pgrid1.jpg" alt= "descibe image here for accessibility issues">
<img src="pgrid2.jpg" alt= "descibe image here for accessibility issues">
</div>
<div class="column">
<img src="pgrid4.jpg" alt= "descibe image here for accessibility issues">
<img src="pgrid6.jpeg" alt= "descibe image here for accessibility issues">
</div>
<div class="column">
<img src="pgrid5.jpg" alt= "descibe image here for accessibility issues">
<img src="pgrid3.jpg" alt= "descibe image here for accessibility issues" >
</div>
</div>
</div>
<!--You can't break this thing! Right? Control Z. Comtrol Z. Control Z...-->
<div class="textblock" style="text-align: left">
<h2>Motivation</h2>
<h3>Americans struggle with reaching their fitness goals every day. Often, that is due to poorly chosen exercise programs. We wanted to create a product that would help everyone to reach their fitness goals by providing them with exercises tailored to their goals and current fitness level.</h3>
</div>
<!--Replace the image here. You can also control image width and height %.-->
<img src="el2.jpg" alt="descibe image here for accessibility issues" class="center-img" style="width:50%;height:50%;">
<div class="textblock" style="text-align: left">
<h2>Final Product</h2>
<h3>Our final product is a manual in the form of a website, where users can choose their fitness goal, and are given advice and exercises that suit their goal.</h3>
</div>
<div>
<img src="el3.jpg" alt="descibe image here for accessibility issues" class="center-img" alt="my feet in water" style="width:100%;height:100%;">
</div>
<div class="textblock" style="text-align: left">
<h2>Challenges and Future Development</h2>
<h3>We ran into a few challenges along the way with our product. First, because of our extremely limited timeline, we were not able to create the system we originally envisioned where users can enter their exact stats and receive more tailored recommendations. We would also like to add more detail to recommendations themselves in the future, to better guide users that may have very little exercise knowledge and experience.</h3>
</div>
<div class="parallax"></div>
<div id="logo">
<img src="hero.jpg" alt="image of elevator doors" style="max-width:25%;max-height:25%;">
<p><b>generated by <a href="https://pitt-fuego.github.io/Pitt-Fuego-Coding-Tools/">Pitt Fuego</a></b></p>
<p><em>Why make a spark when you can light a fire?</em></p>
</div>
<!--Add footer here-->
</body>
</html>
<!--Looking to add components? You've come to the right place. Copy and paste Code Snippets and add to the body section. Adjust class properties on style.css.
***Add Text Block***
(Format textblock using inline styling: text-align: left, center, justify, right; Format text: Italics: <em>italics</em>; Bold: <b>bold</b>; Link Website: <a href="link">LinkName</a>; Link Asset: <a href=filename.pdf>FileName</a>; Line Breaks: <br></br>; Tip for composing longer content: use <h3> and <p> instead of <h2> and <h3>)
<div class="textblock" style="text-align: left">
<h2>Header</h2>
<h3>We recommend using our mobile-ready text sizing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
</div>
***Add Block Quote***
(Format text: Italics: <em>italics</em>; Bold: <b>bold</b>. For more stylings, find blockquote class on style.css)
<div class="blockquote" style="text-align: center">
<h2>Excepteur sint occaecat cupidatat non proident!</h2>
</div>
***Add Bulleted Points to Textblock***
(Change <ul></ul> to <ol></ol> to change from unordered list to ordered list. For more stylings, find the ul/li classes on style.css)
<div class= "ul">
<li>first</li>
<li>second</li>
<li>third</li>
</div>
-or- (try a nested list)
<div class="ul">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</div>
***Add a Button***
(Clearly label button for accessibility purposes. If this is not possible, include: aria-label=”label for accessibility purposes.” For more stylings, find button class on style.css)
<div class="buttonbox">
<a href="https://pitt-fuego.github.io/Pitt-Fuego-Coding-Tools/" class="button" aria-label="">Button</a>
</div>
***Embed YouTube Video***
<div class="video">
<div class="video-container">
<<iframe width="560" height="315" src="https://www.youtube.com/embed/PhPLTpqG0pU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>>
</div>
<p>Add a caption.</p>
</div>
***Add a Standard Image***
(Control image properties with inline width value.)
<img src="fuego.jpg" alt="describe the image HERE for accessibility purposes" style="width:30%;" class="center-img">
<p style="text-align: center"><em>Add a caption.</em></p>
***Add Image Block with Padding and Caption*** (Control image properties with inline width value.)
<div class="imgageblock">
<img src="fuego.jpg" alt="describe the image HERE for accessibility purposes" style="width:100%;">
<p style="text-align: center"><em>Add a caption.</em></p>
</div>
***Add a Photo Grid***
<div class="photogrid">
<div class="row">
<div class="column">
<img src="pgrid1.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid2.jpg" alt="describe the image HERE for accessibility purposes">
</div>
<div class="column">
<img src="pgrid3.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid4.jpg" alt="describe the image HERE for accessibility purposes">
</div>
<div class="column">
<img src="pgrid5.jpg" alt="describe the image HERE for accessibility purposes">
<img src="pgrid6.jpg" alt="describe the image HERE for accessibility purposes">
</div>
</div>
<p><em>Add a caption.</em></p>
</div>
***Add a Parallax Window***
(To adjust window, find parallax class on style.css)
<div class="parallax"></div>
***Add a Copyright Footer***
<div id="footer">
<p>Copyright Your Name, Year.</p>
</div>
***Need something that's not here? Then you probably don't need it. But okay...go to w3 Schools***
Looking to publish this webtext in GitHub? Here are your next steps:
Sign in to GitHub. Create a new repository. Name it. Click “uploading an existing file,” then select/drag and drop all of your files... all of them, index.html. style.css, readme, and your image assets. Click "commit." Now go to your repository "settings." Scroll down to "Pages." Here you will change "source" from "none" to "main" branch. This will publish your webtext online. Copy your URL from this settings page...and now it's time to circulate your webtext! Peace and love only, Stephen Quigley, University of Pittsburgh, 2021.-->