-
Notifications
You must be signed in to change notification settings - Fork 0
/
materialize2.html
239 lines (207 loc) · 9.46 KB
/
materialize2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bakery Delight</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<style>
.header-bg {
background-color: #0c2f44; /* Light pink background */
}
.section-bg {
background-color: #fff3e0; /* Light orange background */
}
.shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.table-header {
background-color: #ffab91; /* Light red background */
color: white;
}
.collapse-class{
margin-left: 20px;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="header-bg">
<div class="#0c2f44 nav-wrapper">
<ul>
<li><a href="index.html">Anastasis Home</a></li>
<li> <a href="Selection.html">Find us Here</a></li>
<li> <a href="about.html">About Us</a></li>
<li><a href="JQuery.html">Art Gallery</a></li>
<li><a href="materialize2.html">bakery</a></li>
<li><a href="materialize3.html">Bakery Interactive</a></li>
<li><a href="materialize.html">Bavarian Recipe</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header Section -->
<div class="section header-bg center-align">
<h1 class="white-text">Welcome to the Anastasis Bakery Department</h1>
<p class="white-text">Goodness for your soul</p>
</div>
<div class="col s12 res">
<img src="images/bavaria-flag-.png" alt="Bakery Image" class="responsive-img shadow">
</div>
<!-- About Us Section -->
<div id="about " class="section section-bg">
<div class="container">
<div class="row ">
<div class=" col s8 m8 ">
<h2>About Us</h2>
<p>At Anastasis, we would like to provide you with a tasty expirence while you shop. So we created the bakery department! We dove into our bavarian roots and brought back some authentic recipes from southern Germany. We are determined to bring you real, fresh, and delicious baked goods. We specialize in little bread rolls and bavarian sourdough bread. But we have new selections every month.</p>
</div>
</div>
</div>
</div>
<!-- Menu Section -->
<div id="menu" class="section">
<div class="center align container">
<h2>Specialties</h2>
<table class="highlight">
<thead class="table-header">
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bavarian Sourdough Bread</td>
<td>A classic rye and wheat sourdough bread with satisfying crust.</td>
<td>$6.00</td>
</tr>
<tr>
<td>La chocolate Croissant</td>
<td>Flaky croissant full of chocolate goodness.</td>
<td>$2.50</td>
</tr>
<tr>
<td>Bavarian Semmel roll</td>
<td>Fluffy hand-sized bread roll from Germany</td>
<td>$1.50</td>
</tr>
<tr>
<td>Bagel</td>
<td>Assortment of bagels, crispy-blueberry, cinnamon-sugar, sourdough, and more.</td>
<td>$2.50</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row center-align">
<div class=" card col s3 center-align">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/BayerBrot.jpeg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Bavarian sourdough<i class="material-icons right">more_vert</i></span>
<p><a href="#">Page</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Bavarian sourdough<i class="material-icons right">close</i></span>
<p>Alt bayerische Bauernbrot, or Traditional Bavarian farmer's Bread is a hearty sourdough bread baked with wheat, and sometimes also with rye, and barley. It usually comes with seeds. It is a challenging bread to bake, yet excellent to eat.</p>
</div>
</div>
<div class="col s1"></div>
<div class="col s3 center-align">
<img src="images/Bagel_with_sesame.jpg" alt="Bakery Image" class="responsive-img circle shadow ">
<p class="card-panel blue-text center-align ">Fresh Bagels</p>
</div>
<div class="col s1"></div>
<div class=" card col s3 center-align">
<div class="card-image">
<img class="activator" src="images/brotchen.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Bavarian Semmel rolls<i class="material-icons right">more_vert</i></span>
<p><a href="#">Page</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Bavarian Semmel rolls<i class="material-icons right">close</i></span>
<p>Brotchen, or bread rolls, are common types of bread in germany similar to a hamburger bun, except they are usually high quality, fresh, and are very versatile. They can be used for sandwiches, toast, snacks, or anything you want to use it for. In Bavaria, they are known as Semmel.</p>
</div>
</div>
</div>
</div>
<!--<div class="col s4">
<img src="images/brotchen.jpg" alt="Bakery Image" class="responsive-img shadow">
<blockquote>Especially Shortbread</blockquote>
</div>-->
</div>
<div class="collapse-class">
<div class="col 8 m8">Find out more about specialty baked items!</div>
<!--JS Stuff-->
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">blur_circular</i>Strawberry Torte</div>
<div class="collapsible-body"><span>A strawberry torte is a common type of Cake served in Germany. Traditionally, there is a cake bottom, with jelly or glaze on top. Then it is topped with strawberries. The cake is semi Sweet, while the strawberry and glaze are sweet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">blur_circular</i>Choko-Croissant</div>
<div class="collapsible-body"><span>Chocolate Croissants are a common treat throughout western Europe. It can vary in composition. It involves a croissant and chocolate. Commonly, you may see the Croissant drizzled with chocolate, full of chocolate chunks, or stuffed with chocolate cream.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">blur_circular</i>Cinnamon-roasted Almonds</div>
<div class="collapsible-body"><span>Cinnamon-roasted Almonds are a favorite christmas treat at Christkindelsmarkts in Germany. They are exactly what you would imagine! almonds roasted with cinnamon and sugar.</span></div>
</li>
</ul>
</div>
<!-- Contact Section -->
<div id="contact" class="section section-bg">
<div class="container">
<h2>Contact Us</h2>
<div class="row">
<div class="col s12 m6">
<form>
<div class="input-field">
<input id="name" type="text" class="validate">
<label for="name">Name</label>
</div>
<div class="input-field">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field">
<textarea id="message" class="materialize-textarea"></textarea>
<label for="message">Message</label>
</div>
<button type="submit" class="btn waves-effect waves-light">Send</button>
</form>
</div>
<div class="col s12 m6">
<h5>Visit Us</h5>
<p>17775 E High Street,<br> Oxford, OH 45056</p>
<p><i class="material-icons">phone</i> (513)800-336-8888</p>
<p><i class="material-icons">email</i> [email protected]</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer header-bg">
<div class="header-bg">
<div class="row">
<div class="col s12 center-align">
<p class="white-text">© 2024 Anastasis. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<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('.collapsible');
M.Collapsible.init(elems);
});
</script>
</body>
</html>