-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
347 lines (317 loc) · 14.9 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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Century Bakery</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link rel="shortcut icon" href="assets/img/logo.png" type="image/x-icon" />
<!-- Vendor CSS Files -->
<link rel="stylesheet" href="assets/vendor/aos.css/aos.css" />
<link rel="stylesheet" href="assets/vendor/flickity.css/flickity.css" />
<!-- Template Main CSS File -->
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>
<!-- ======= Header ======= -->
<div class="nav">
<a data-scroll data-easing="easeInQuint" href="#beranda" data-aos="fade-down" data-aos-duration="400"
data-aos-delay="50">Home</a>
<a data-scroll data-easing="easeInQuint" href="#tentang" data-aos="fade-down" data-aos-duration="400"
data-aos-delay="100">About Us</a>
<a data-scroll data-easing="easeInQuint" href="#menu" data-aos="fade-down" data-aos-duration="400"
data-aos-delay="150">Menu</a>
<img src="assets/img/logo.png" alt="" data-aos="fade-down" data-aos-duration="1500">
<a data-scroll data-easing="easeInQuint" href="#review" data-aos="fade-down" data-aos-duration="400"
data-aos-delay="150">Review</a>
<a data-scroll data-easing="easeInQuint" href="#partnership" data-aos="fade-down" data-aos-duration="400"
data-aos-delay="100">Partnership</a>
<a data-scroll data-easing="easeInQuint" href="#lokasi" data-aos="fade-down" data-aos-duration="400"
data-aos-delay="50">Location</a>
<img src="assets/img/menu.png" alt="" id="btn-nav" data-aos="fade-down" data-aos-duration="700" data-aos-delay="50">
</div>
<!-- ======= Navbar ======= -->
<div class="nav-menu">
<div class="btn-menu">
<img src="assets/img/close.png" alt="" id="btn-menu">
</div>
<a id="nav-link" data-scroll data-easing="easeInQuint" href="#beranda">Home</a>
<a id="nav-link1" data-scroll data-easing="easeInQuint" href="#tentang">About Us</a>
<a id="nav-link2" data-scroll data-easing="easeInQuint" href="#menu">Menu</a>
<a id="nav-link3" data-scroll data-easing="easeInQuint" href="#review">Review</a>
<a id="nav-link4" data-scroll data-easing="easeInQuint" href="#partnership">Partnership</a>
<a id="nav-link5" data-scroll data-easing="easeInQuint" href="#lokasi">Location</a>
</div> <!-- End Header -->
<!-- ======= Home Start ======= -->
<div class="beranda" id="beranda">
<span id="typed" data-aos="fade-up" data-aos-duration="500"></span>
</div>
<!-- ======= Home End ======= -->
<!-- ======= About Start ======= -->
<div class="tentang container" id="tentang">
<img src="assets/img/paperbag.png" alt="" data-aos="fade-down" data-aos-duration="1500" data-aos-delay="200">
<div class="area-tentang" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
<h1 class="judul">About Us</h1>
<p>
Century Bakery was Founded in 1920 in Indonesia with The Motto of the Best Service and Quality, we always
choose
the Best Ingredients. We make dishes with local Ingredients, We make them by Hand and with Love. 23 Outlet
have
been opened in Indonesia with 763 employes. Many Companies and People have trusted us.
</p>
<p>. . .</p>
</div>
</div>
<!-- ======= About End ======= -->
<!-- ======= visi Start ======= -->
<div class="visi container">
<h1 class="judul">Vision & Mission</h1>
<div class="area-visi">
<div class="visi-kiri">
<div class="box-visi" data-aos="fade-up" data-aos-duration="500">
<img src="assets/img/pelayanan.png" alt="">
<h1>Best Service</h1>
<p>we choose employees who are competent in their fields, we train waiters before working in our company.
</p>
</div>
<div class="box-visi" data-aos="fade-up" data-aos-duration="500">
<img src="assets/img/bahan.png" alt="">
<h1>Fresh Ingredients</h1>
<p>we choose fresh local ingredients, we have partnerships with several grocery companies. We process
fresh
ingredients in the kitchen every day.</p>
</div>
<div class="box-visi" data-aos="fade-up" data-aos-duration="500">
<img src="assets/img/suasana.png" alt="">
<h1>Good Atmosphere</h1>
<p>we chose a strategic place. The design of the place is adjusted so that visitors feel at home entering
our
shop, chatting with friends, friends and family is very comfortable here.</p>
</div>
</div>
<div class="main-carousel">
<div class="carousel-cell">
<img src="assets/img/toko.jpg" alt="">
</div>
<div class="carousel-cell">
<img src="assets/img/toko1.jpg" alt="">
</div>
<div class="carousel-cell">
<img src="assets/img/toko2.jpg" alt="">
</div>
<div class="carousel-cell">
<img src="assets/img/toko3.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- ======= visi End ======= -->
<!-- ======= Menu Start ======= -->
<div class="menu container" id="menu">
<h1 class="judul" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">Menu</h1>
<div class="carousel">
<div class="box-menu carousel-cell">
<img src="assets/img/coockies.jpg" alt="">
<div class="area-menu">
<h1 class="judul">Coockies</h1>
<p>Crispy texture because it is baked at high temperature plus chocochips to make the taste sweet.</p>
<h1 class="harga">IDR 30.000</h1>
</div>
</div>
<div class="box-menu carousel-cell">
<img src="assets/img/croissant.jpg" alt="">
<div class="area-menu">
<h1 class="judul">Croissant</h1>
<p>Crispy texture on the outside and soft on the inside, filled with butter which makes it taste
delicious,
perfect for breakfast</p>
<h1 class="harga">IDR 20.000</h1>
</div>
</div>
<div class="box-menu carousel-cell">
<img src="assets/img/baguette.jpg" alt="">
<div class="area-menu">
<h1 class="judul">Baguette</h1>
<p>bread that is elongated in shape and has a hard skin texture but is soft inside, elongated like a
stick,
usually served sliced and spread with butter and garlic.</p>
<h1 class="harga">IDR 40.000</h1>
</div>
</div>
<div class="box-menu carousel-cell">
<img src="assets/img/pretzels.jpg" alt="">
<div class="area-menu">
<h1 class="judul">Pretzel</h1>
<p> The taste of pretzels is generally savory or slightly sweet. The texture of the pretzels is usually
soft
and tender. Generally, pretzels are served with a sprinkling of coarse salt.</p>
<h1 class="harga">IDR 25.000</h1>
</div>
</div>
<div class="box-menu carousel-cell">
<img src="assets/img/sourdough.jpg" alt="">
<div class="area-menu">
<h1 class="judul">Sourdough</h1>
<p>This easy-to-digest bread goes well with butter and garlic, the texture is dense and fibrous and the
taste
is slightly sour.</p>
<h1 class="harga">IDR 50.000</h1>
</div>
</div>
<div class="box-menu carousel-cell">
<img src="assets/img/donuts.jpg" alt="">
<div class="area-menu">
<h1 class="judul">Donuts</h1>
<p>Soft Bread Texture Covered with sweet Chocolate and also sprinkled with nuts and has other flavors.</p>
<h1 class="harga">IDR 20.0000</h1>
</div>
</div>
<div class="box-menu carousel-cell">
<img src="assets/img/muffin.jpg" alt="">
<div class="area-menu">
<h1 class="judul">Muffin</h1>
<p>The Texture is soft with vanilla cream filling on top and also sprinkled with cocoa powder and choco
chips.
</p>
<h1 class="harga">IDR 20.000</h1>
</div>
</div>
</div>
</div>
<!-- ======= Menu End ======= -->
<!-- ======= Review Start ======= -->
<div class="review container" id="review">
<h1 class="judul" data-aos="zoom-in-up" data-aos-duration="1000">Review</h1>
<div class="area-review">
<div class="box-review" data-aos="fade-up" data-aos-duration="1500">
<img src="assets/img/profile.png" alt="">
<h1 data-aos="zoom-in-up" data-aos-duration="500" data-aos-delay="500">Crish Ederson</h1>
<p data-aos="fade-down" data-aos-duration="500" data-aos-delay="800">I Buy Croissants And Baguette here
every
morning. The Texture of the Croissants is soft inside and Crispy on the outside, the bread here is always
delecius.</p>
<p data-aos="fade-up" data-aos-duration="500" data-aos-delay="800">. . .</p>
</div>
<div class="box-review" data-aos="fade-up" data-aos-duration="1500">
<img src="assets/img/profile1.png" alt="">
<h1 data-aos="zoom-in-up" data-aos-duration="500" data-aos-delay="500">Natalie Hadel</h1>
<p data-aos="fade-down" data-aos-duration="500" data-aos-delay="800">When I Was Little, My Mother always
bought
me Donuts here after school. The Taste has never changed from the first time I Bought it, Their Service is
Very Friendly</p>
<p data-aos="fade-up" data-aos-duration="500" data-aos-delay="800">. . .</p>
</div>
<div class="box-review" data-aos="fade-up" data-aos-duration="1500">
<img src="assets/img/profile2.png" alt="">
<h1 data-aos="zoom-in-up" data-aos-duration="500" data-aos-delay="500">David Handrick</h1>
<p data-aos="fade-down" data-aos-duration="500" data-aos-delay="800">I Like Hanging out here with my friends
every week, the bread here is affordable, The atmosphere here very comfortable to chat with Friends.</p>
<p data-aos="fade-up" data-aos-duration="500" data-aos-delay="800"> . . .</p>
</div>
</div>
</div>
<!-- ======= Review End ======= -->
<!-- ======= Partnership Start ======= -->
<div class="partner container" id="partnership">
<h1 class="judul" data-aos="zoom-in-up" data-aos-duration="500">Partnership</h1>
<div class="main-carousel">
<div class="carousel-cell">
<img src="assets/img/AYANA.png" alt="">
</div>
<div class="carousel-cell">
<img src="assets/img/grand-aston.png" alt="">
</div>
<div class="carousel-cell">
<img src="assets/img/LOGO-GIK.png" alt="">
</div>
<div class="carousel-cell">
<img src="assets/img/padma-legian-logo.png" alt="">
</div>
<div class="carousel-cell">
<img src="assets/img/potato-head.png" alt="">
</div>
<div class="carousel-cell">
<img src="assets/img/hard-rock.png" alt="">
</div>
</div>
</div>
<!-- ======= Partnership End ======= -->
<!-- ======= Outlet Start ======= -->
<div class="lokasi container" id="lokasi">
<h1 class="judul" data-aos="fade-up" data-aos-duration="500">Outlet</h1>
<iframe id="map" data-aos="fade-up" data-aos-duration="500" data-aos-delay="800"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.1521988417944!2d107.18197431477056!3d-6.502408995296435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x306f0894fd4695c8!2zNsKwMzAnMDguNyJTIDEwN8KwMTEnMDMuMCJF!5e0!3m2!1sen!2sid!4v1668349240972!5m2!1sen!2sid"
frameborder="0" allowfullscreen></iframe>"
</div>
<!-- ======= Outlet End ======= -->
<!-- ======= Galery Start ======= -->
<div class="gallery container">
<h1 class="judul">Galery</h1>
<div class="area-gallery" id="content">
<img src="assets/img/toko.jpg" alt="">
<img src="assets/img/toko2.jpg" alt="">
<img src="assets/img/toko3.jpg" alt="">
<img src="assets/img/toko1.jpg" alt="">
<img src="assets/img/gallery1.jpg" alt="">
<img src="assets/img/gallery2.jpg" alt="">
</div>
</div>
<!-- ======= Galery End ======= -->
<!-- ======= Footer Start ======= -->
<div class="footer">
<div class="footer-1">
<div class="footer-logo" data-aos="fade-down" data-aos-duration="800">
<img src="assets/img/logo.png" alt="">
<h1>Century Bakery</h1>
</div>
<p data-aos="fade-up" data-aos-duration="800">Provide The Best Service <br> Made By Hand And Love.</p>
<div class="sosial-media">
<a href="">
<img src="assets/img/facebook.png" alt="" data-aos="zoom-in-up" data-aos-duration="800" data-aos-delay="200">
</a>
<a href="https://www.instagram.com/msn.production/">
<img src="assets/img/instagram.png" alt="" data-aos="zoom-in-up" data-aos-duration="800" data-aos-delay="250">
</a>
<a href="">
<img src="assets/img/twitter.png" alt="" data-aos="zoom-in-up" data-aos-duration="800" data-aos-delay="300">
</a>
</div>
</div>
<div class="footer-2">
<h1 data-aos="fade-down" data-aos-duration="800" data-aos-delay="200">Contact</h1>
<a href="" data-aos="fade-up" data-aos-duration="800" data-aos-delay="250">+62 821 2566 4554</a>
<a href="" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">[email protected]</a>
</div>
<div class="footer-3">
<h1 data-aos="fade-down" data-aos-duration="800" data-aos-delay="300">Operational Time</h1>
<p data-aos="fade-up" data-aos-duration="800" data-aos-delay="350">Mon - Wed 05 Am - 09 Pm</p>
<p data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">Thu - Sat 05 Am - 08 Pm</p>
<p data-aos="fade-up" data-aos-duration="800" data-aos-delay="450">Sun 04 Am - 08 Pm</p>
</div>
<div class="footer-4" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">
<h1>Link</h1>
<a data-scroll data-easing="easeInQuint" href="#beranda">Home</a>
<a data-scroll data-easing="easeInQuint" href="#tentang">About Us</a>
<a data-scroll data-easing="easeInQuint" href="#menu">Menu</a>
<a data-scroll data-easing="easeInQuint" href="#review">Review</a>
<a data-scroll data-easing="easeInQuint" href="#partnership">Partnership</a>
<a data-scroll data-easing="easeInQuint" href="#lokasi">Location</a>
</div>
</div>
<footer>
<h1>© Copyright 2022, <a href=""> MSN PRODUCTION - PT. Mulia Sejati Nusantara.</a> All Rights Reserved</h1>
</footer>
<!-- ======= Footer End ======= -->
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery.js/jquery.js"></script>
<script src="assets/vendor/type.js/type.js"></script>
<script src="assets/vendor/aos.js/aos.js"></script>
<script src="assets/vendor/flickity.js/flickity.pkgd.min.js"></script>
<script src="assets/vendor/smoth-scroll.js/smoth-scroll.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>