-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
188 lines (172 loc) · 7.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Elise's Pumpkin Loaf Bakery</title>
</head>
<body>
<div class="navbar">
<a href="index.html">Bakery Home</a>
<a href="about.html">Contact Information and Social Media</a>
<a href="sisterlocation.html">Information about Expanding Location</a>
<a href="jquery.html">JQuery</a>
<ul>
<li><a href="materialize.html">Expanding Location</a></li>
<li><a href="materialize2.html">Expanding Location</a></li>
</ul>
</div>
<header>
<h1>Welcome to Elise's Pumpkin Loaf Bakery</h1>
</header>
<div class="container">
<section>
<h2>What we strive for as a company</h2>
<p><strong>Elise's Pumpkin Loaf Bakery</strong> is committed to being an active part of the Oxford community
as one of the many small business owners, which we like to consider a family. We have specially curated
a unique vibe of relaxation and coziness. There is too much hustle and bustle in everyday life to not
have a spot for just rest, which is why we invite every customer to spend some time in our comfy seating
areas, lovesacks included!</p>
<p>We also believe that our menu, while mainly autumnal, encapsulates the fact that fall flavors can be
enjoyed every season. While our specialty is pumpkin loaves, our menu diversifies with lattes,
espressos, coffee cakes, cupcakes, sourdough loaves, and tarts. Give us a stop by to experience the
<u>Elise's Pumpkin Loaves</u> difference.
</p>
<h2>Our Menu</h2>
<ul>
<li>Cold Foam Lattes</li>
<li>Fruit Tarts</li>
<li>Sourdough Loaves</li>
<li>Pumpkin Loaves</li>
</ul>
</section>
<h2>Pumpkin Loaves (our specialty menu)</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Nutmeg Pumpkin Loaf</td>
<td>Our classic loaf with a nutty twist, good for all you nuts out there! (contains: nuts, do not
consume if you are allergic to nuts)</td>
<td>$5.95</td>
</tr>
<tr>
<td>Vanilla Glazed Loaf</td>
<td>If the classic loaf isn't sweet enough for you, try our classic loaf drizzled with vanilla bean
sweet glaze.</td>
<td>$4.95</td>
</tr>
<tr>
<td>Cinnamon Snap Loaf</td>
<td>Classic loaf with a warm cinnamon blend and slight notes of peppermint.</td>
<td>$6.95</td>
</tr>
<tr>
<td>The Classic</td>
<td>Our original loaf, made with an in-house pumpkin puree that perfectly encapsulates the sweet
taste of pumpkin.</td>
<td>$4.95</td>
</tr>
</table>
<div class="image-gallery">
<img src="images/cinnamonpumpkinloaf.jpeg" alt="Cinnamon Loaf">
<img src="images/nutpumpkinloaf.jpeg" alt="Nut Pumpkin Loaf">
<img src="images/pumpkinloafclassic.jpeg" alt="Classic Pumpkin Loaf">
<img src="images/vaniallglazedpumpkinloaf.jpeg" alt="Vanilla Glazed Pumpkin Loaf">
</div>
<h2>Cold Foam Lattes</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Sweet Cream Cold Brew</td>
<td>Our specially formulated in-house cold brew topped with a sweet cream cold foam, can be ordered
in small, medium, or large.</td>
<td>$4.95</td>
</tr>
<tr>
<td>Sweet Cream Pumpkin Cold Brew</td>
<td>Our specially formulated in-house cold brew topped with a sweet cream pumpkin cold foam (made
with real pumpkins), can be ordered in small, medium, or large.</td>
<td>$5.95</td>
</tr>
<tr>
<td>Matcha Latte</td>
<td>A caffeinated, creamy, and frothy tea-based drink, can be ordered in small, medium, or large.</td>
<td>$7.95</td>
</tr>
<tr>
<td>Peppermint Cream Latte</td>
<td>Our in-house cold brew topped with a whipped peppermint cream cold foam, can be ordered in
small, medium, or large.</td>
<td>$8.95</td>
</tr>
</table>
<h2>Sourdough Loaves</h2>
<table>
<tr>
<td>Crusty, tangy bread with a chewy interior and airy texture.</td>
<td>$7.00</td>
</tr>
</table>
<h2>Fruit Tarts</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Classic Tarty-Tart</td>
<td>A classic tart topped with fresh whipped cream, glazed kiwis, strawberries, blueberries, and
mandarin oranges.</td>
<td>$3.95</td>
</tr>
</table>
<h3>Enter your phone number here to be entered into our monthly cookie drawing!</h3>
<h2>Help us select our next best seller!</h2>
<form>
<label for="flavorSelect">Select your favorite pumpkin loaf flavor:</label>
<select id="flavorSelect">
<option>Pumpkin Spice</option>
<option>Chocolate Chip Pumpkin</option>
<option>Cinnamon Swirl</option>
<option>Vanilla Glazed</option>
</select>
<br><br>
<input type="button" onclick="submitFlavor()" value="Submit Flavor">
</form>
<p id="flavorMessage"></p>
<script>
function submitFlavor() {
let flavorSelect = document.getElementById("flavorSelect");
let selectedFlavor = flavorSelect.options[flavorSelect.selectedIndex].text;
let flavorMessage = document.querySelector("#flavorMessage");
flavorMessage.innerHTML = "Great choice! You selected the " + selectedFlavor + " flavor. We hope you enjoy it!";
}
</script>
<!-- Carousel Section -->
<h2>Our Product Carousel</h2>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://i.imgur.com/8l09XDZ.jpeg" alt="Image 1"></a>
<a class="carousel-item" href="#two!"><img src="https://i.imgur.com/B4rfhDJ.jpeg" alt="Image 2"></a>
<a class="carousel-item" href="#three!"><img src="https://i.imgur.com/HrsP3W9.jpeg" alt="Image 3"></a>
<a class="carousel-item" href="#four!"><img src="https://i.imgur.com/WVI1Hqf.jpeg" alt="Image 4"></a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems);
});
</script>
</body>
</html>