-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (131 loc) · 6.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sandwich Showdown</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body id="index-body">
<div id="background-left" class="image">
<div class="background-image-license">
<p><a href="jaymantri.com">jaymatri.com</a> - <a href="https://creativecommons.org/publicdomain/zero/1.0/">License </a></p>
</div>
</div>
<div id="background-right" class="image">
<div class="background-image-license">
<p><a href="jaymantri.com">jaymatri.com</a> - <a href="https://creativecommons.org/publicdomain/zero/1.0/">License </a></p>
</div>
</div>
<main id="index-main">
<div id="welcome">
<div id="welcome-body">
<h1>Welcome to the Sandwich Showdown! Your chance to win a lifetime supply of sandwiches!</h1>
<p>Who doesn't love sandwiches?</p>
<p>No one.</p>
<p>No one doesn't love sandwiches, and therefore, everyone loves sandwiches.</p>
<h3>So, wouldn't you be excited to for a chance to win a lifetime of sandwiches?</h3>
<p>Of course.</p>
<p>Of course you would.</p>
</div>
</div>
<div id="the-art-of-the-sandwich">
<div id="intention">
<h2>The world needs more Sandwich Artists!</h2>
<p>The mission of our foundation is to create a new generation of Sandwich Artists. To make the world a better place. A sandwich is more than bread and filling. It's an art-form as old as teeth themselves, and and art-form that is under threat. We invite you to celebrate this art-form with your mouths, of course, but also with your hands, your heart and your mind.</p>
</div>
<div id="basics">
<h2>The Basics</h2>
<div id="bread">
<h3>Bread</h3>
<p>The bread is the foundation. Use fresh bread (best to make your own). For God's sake, use real bread. Respect the bread</p>
<div class="image">
<img src="images/bread.jpg" alt="bread">
<p >By <a href="https://pixabay.com/en/bread-baker-bake-food-baked-goods-1747290/">KRiemer</a> - <a href="https://creativecommons.org/publicdomain/zero/1.0/deed.en">License</a></p>
</div>
</div>
<div id="ingredients">
<h3>Ingredients</h3>
<p>Don't skimp on ingredients. Respect the meat. Respect the spread. Please, <span class="em">please</span>, <span class="strong">no bad tomatoes!</span></p>
<div class="image">
<img src="images/La-pineda.jpg" alt="deli-cured-meats">
<p>By <a href="//commons.wikimedia.org/w/index.php?title=User:Daveglass&action=edit&redlink=1" class="new" title="User:Daveglass (page does not exist)">Daveglass</a> - <a href="http://creativecommons.org/licenses/by/3.0" title="Creative Commons Attribution 3.0">License</a> - <a href="https://commons.wikimedia.org/w/index.php?curid=14960760">Link</a></p>
</div>
</div>
</div>
<div id="tips">
<h3>"Rules" every Sandwich Artist should know</h3>
<ol>
<li>Everything on every bite</li>
<li>Soft breads with soft meats; hard breads with hard meats</li>
<li>Layering it right. Slippery, not slippery, etc. </li>
<li>Keep it simple. Never use more than one <span class="em">secret</span> ingredient</li>
</ol>
</div>
<div id="more-tips">
<h3>A few more things to think about for <span class="strong">every</span> sandwich you make</h3>
<ul>
<li>Acidity. Gotta have some.</li>
<li>Mind the sauce. Not too wet, not too dry.</li>
<li>The right sauce for the right meat</li>
<li><span class="strike">Sometimes</span> simple is best</li>
</ul>
</div>
</div>
<div id="contest-instructions">
<h2>How to enter the contest</h2>
<ol>
<li>Make a list of 30 sandwich ideas, throw out 29 of them.</li>
<li>Repeat four more times. At the end of the day you should have thrown out 145 sandwich ideas and you'll have a list of 5 left.</li>
<li>Make all five. Eat them, throw out 4.</li>
<li>Now you're ready! Enter your sandwich recipe in the form below to see if you won!</li>
</ol>
</div>
<div id="contest-entry">
<fieldset>
<form name="sandwich" action="contest-results.html" method="get">
<label> Enter your sandwich recipe here. Include all necessary details. Bread, ingredients, condiments, order of assembly, bread treatment, cutting instructions, toothpick placement, etc.</label>
<textarea name=recipe>Your recipe here...</textarea>
<br>
<button type="Submit">SUBMIT RECIPE</button>
</form>
</fieldset>
</div>
<footer>
<hr><p><a href="http://www.epicurious.com/expert-advice/how-to-build-layer-best-sandwich-article">Here</a> is a great resource for some more sandwich knowledge. I particularly like this site's use of the <span class="code">article</span> container within the body and <span class="code">aside</span> tag (although I don't fully understand that one.</p>
</footer>
</main>
</body>
</html>
<!--
Things to include:
X - the basic HTML structure elements found on every HTML page
some content that mixes header and paragraph tags
X - at least one image
X - at least two block-level elements that give semantic meaning to content
X - a table or form (you can submit to httpbin if you like, or to the other page of your site)
X - a list
X - at least one additional page that is linked from index.html
sections
- welcome w/ intention
image of sandwich
- the basics
bread
pic
ingredients
pic
some tips
- instructions
make a list of 30 sandwich ideas, throw out 29 of them. do it again. at the end of the day you should have thrown out 145 sandwich ideas and you'll have a list of 5 left.
make all five. eat them, throw out 4. now you're ready.
- contest
Use form to have people enter contests -> link to contest results page.
Some rules of how to make a sandwich
1. Everything on every bite
2. Soft breads with soft meats, hard breads with hard meats
3. Layering. slippery, not slippery, etc.
4. keep it simple. never more than 1 "secret" ingredient
Some things to think about
- acidity
- over/under sauced
- to dry?
- sometimes simple is best
-->