-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (229 loc) · 7.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Little Lemon</title>
<meta name="description" content="Homepage for the Little Lemon Restaurant" />
<meta name="author" content="Little Lemon Restaurant" />
<link rel="stylesheet" href="styles.css" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp"
crossorigin="anonymous"
/>
</head>
<body>
<header>
<img src="logos/Asset [email protected]" id="home" />
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#order">Order</a></li>
</ul>
</nav>
<main>
<section>
<article class="promotion">
<h1>New on Our Menu:<br />Falafel!!</h1>
</article>
</section>
<section id="menu">
<article class="info">
<h2>Our Menu</h2>
<img src="images/salad.jpg" id="item2" />
<p>
Filler text about our resturaunt. Lorem ipsum dolor sit amet
consectetur adipsicing elit. Corporis debitis rerum, magni
voluptatem sed architeto placeat beatae tenetur officia quod.
</p>
</article>
<article class="info">
<h2>Order From Us</h2>
<img src="images/kebob.jpg" id="item3" />
<p>
Filler text about our resturaunt. Lorem ipsum dolor sit amet
consectetur adipsicing elit. Corporis debitis rerum, magni
voluptatem sed architeto placeat beatae tenetur officia quod.
</p>
</article>
<article class="info">
<h2>Our New Location</h2>
<img src="images/gyro.jpg" id="item4" />
<p>
Filler text about our resturaunt. Lorem ipsum dolor sit amet
consectetur adipsicing elit. Corporis debitis rerum, magni
voluptatem sed architeto placeat beatae tenetur officia quod.
</p>
</article>
</section>
<section id="about">
<article class="info">
<h1>About US</h1>
<p>
Based in Chicago, Illinois, Little Lemon is a family-owned
Mediterranean restaurant, focused on traditional recipes served with
a modern twist. The chefs draw inspiration from Italian, Greek, and
Turkish culture and have a menu of 12-15 items that they rotate
seasonally. The restaurant has a rustic and relaxed atmosphere with
moderate prices, making it a popular place for a meal any time of
the day.
<br />
Little Lemon is owned by two Italian brothers, Mario and Adrian, who
moved to the United States to pursue their shared dream of owning a
restaurant. To craft the menu, Mario relies on family recipes and
his experience as a chef in Italy. Adrian does all the marketing for
the restaurant and led the effort to expand the menu beyond classic
Italian to incorporate additional cuisines from the Mediterranean
region.
</p>
</article>
</section>
<section id="order">
<form id="order-form" method="post" action="www.com">
<fieldset>
<h2>Order</h2>
<img src="./kitchen.png" id="item5" />
<p>
Please place your order below or call <u>555-555-5555</u> to
order.
</p>
</fieldset>
<fieldset>
<label id="name-label"
>First Name:
<input type="text" id="first-name" required placeholder="John"
/></label>
<label id="name-label"
>Last Name:
<input type="text" id="last-name" required placeholder="Doe"
/></label>
</fieldset>
<fieldset>
<label id="info-label"
>Email:
<input type="email" required placeholder="[email protected]"
/></label>
<label id="info-label"
>Address:
<input
type="text"
required
placeholder="house no. street, city, state"
/></label>
<label id="info-label"
>Phone: <input type="tel" required placeholder="000-000-0000"
/></label>
</fieldset>
<fieldset>
<label
>Menu Options
<select id="dropdown">
<option value="">select one</option>
<option value="1">Falafel - $12.00</option>
<option value="2">Mediterranean Salad - $10.00</option>
<option value="3">Kebob - $15.00</option>
<option value="4">Gyro - $12.00</option>
</select></label
>
</fieldset>
<fieldset>
<p>How would you like to recieve your items?</p>
<label
><input
type="radio"
name="order-type"
class="inline"
value="radio"
/>
Pick Up</label
>
<label
><input
type="radio"
name="order-type"
class="inline"
value="radio"
/>
Delivery</label
>
</fieldset>
<fieldset>
<label>
<input
type="checkbox"
name="terms"
class="inline"
required
value="checkbox"
/>
I understand that all information entered is being collected. See
<a href="" class="terms">Privacy Agreement.</a>
</label>
<label>
<input
type="checkbox"
name="terms"
class="inline"
required
value="checkbox"
/>
I accept the
<a href="https://www.coursera.org" class="terms"
>Terms and Conditions</a
>
</label>
</fieldset>
<fieldset>
<label id="card-label"
>Card:
<input
type="number"
minlength="14"
maxlength="14"
required
placeholder="000-000-0000-0000"
/></label>
<label id="card-label"
>Expiration Date: <input type="date" required
/></label>
</fieldset>
<fieldset>
<label id="comments"
>Additional Comments:
<textarea
name="requests"
rows="3"
cols="30"
placeholder="Enter any additional delivery information"
></textarea>
</label>
</fieldset>
<section>
<article>
<input id="submit" type="submit" value="SUBMIT" />
</article>
</section>
</form>
</section>
</main>
<footer>
<div>
<img src="logos/Asset [email protected]" />
</div>
<div>
<p><i>(Little Lemon @Copyright)</i></p>
</div>
<script src="bootstrap.bundle.min.js"></script>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
crossorigin="anonymous"
></script>
</body>
</html>