-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
316 lines (311 loc) · 15.1 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
<!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>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="gambar/logo.png" type="image/x-icon" />
<script src="jquery.js"></script>
<script src="type.js"></script>
<script src="aos.js"></script>
<script src="flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="aos.css" />
<!-- <link rel="stylesheet" href="fontawesome/css/all.css" /> -->
<link rel="stylesheet" href="flickity.css" />
<script src="smoth-scroll.js"></script>
</head>
<body>
<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="gambar/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="gambar/menu.png" alt="" id="btn-nav" data-aos="fade-down" data-aos-duration="700" data-aos-delay="50">
</div>
<div class="nav-menu">
<div class="btn-menu">
<img src="gambar/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>
<div class="beranda" id="beranda">
<span id="typed" data-aos="fade-up" data-aos-duration="500"></span>
</div>
<div class="tentang container" id="tentang">
<img src="gambar/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>
<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="gambar/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="gambar/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="gambar/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="gambar/toko.jpg" alt="">
</div>
<div class="carousel-cell">
<img src="gambar/toko1.jpg" alt="">
</div>
<div class="carousel-cell">
<img src="gambar/toko2.jpg" alt="">
</div>
<div class="carousel-cell">
<img src="gambar/toko3.jpg" alt="">
</div>
</div>
</div>
</div>
<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="gambar/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="gambar/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="gambar/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="gambar/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="gambar/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="gambar/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="gambar/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>
<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="gambar/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="gambar/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="gambar/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>
<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="gambar/AYANA.png" alt="">
</div>
<div class="carousel-cell">
<img src="gambar/grand-aston.png" alt="">
</div>
<div class="carousel-cell">
<img src="gambar/LOGO-GIK.png" alt="">
</div>
<div class="carousel-cell">
<img src="gambar/padma-legian-logo.png" alt="">
</div>
<div class="carousel-cell">
<img src="gambar/potato-head.png" alt="">
</div>
<div class="carousel-cell">
<img src="gambar/hard-rock.png" alt="">
</div>
</div>
</div>
<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!1d3944.6582202111285!2d115.17399811402282!3d-8.628772390091752!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd238cfa9704293%3A0xb90785bd6a37c482!2sSMK%20Wira%20Harapan!5e0!3m2!1sen!2sid!4v1663761769380!5m2!1sen!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="gallery container">
<h1 class="judul">Galery</h1>
<div class="area-gallery" id="content">
<img src="gambar/toko.jpg" alt="">
<img src="gambar/toko2.jpg" alt="">
<img src="gambar/toko3.jpg" alt="">
<img src="gambar/toko1.jpg" alt="">
<img src="gambar/gallery1.jpg" alt="">
<img src="gambar/gallery2.jpg" alt="">
</div>
</div>
<div class="footer">
<div class="footer-1">
<div class="footer-logo" data-aos="fade-down" data-aos-duration="800">
<img src="gambar/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="gambar/facebook.png" alt="" data-aos="zoom-in-up" data-aos-duration="800" data-aos-delay="200">
</a>
<a href="">
<img src="gambar/instagram.png" alt="" data-aos="zoom-in-up" data-aos-duration="800" data-aos-delay="250">
</a>
<a href="">
<img src="gambar/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">0833 1234 5678</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>
<script>
AOS.init();
new Typed("#typed", {
strings: [
"Food Make Happiness",
"Fresh Ingredients Every Day",
"HANDMADE WITH AN EXTRA PINCH OF LOVE",
],
typeSpeed: 100,
delaySpeed: 300,
loop: true,
});
$("#btn-nav").click(function () {
$(".nav-menu").toggleClass("active");
});
$("#btn-menu").click(function () {
$(".nav-menu").removeClass("active");
});
$("#nav-link").click(function() {
$(".nav-menu").removeClass("active");
});
$("#nav-link1").click(function() {
$(".nav-menu").removeClass("active");
});
$("#nav-link2").click(function() {
$(".nav-menu").removeClass("active");
});
$("#nav-link3").click(function() {
$(".nav-menu").removeClass("active");
});
$("#nav-link4").click(function() {
$(".nav-menu").removeClass("active");
});
$("#nav-link5").click(function() {
$(".nav-menu").removeClass("active");
});
$(".carousel").flickity({
cellAlign: "left",
contain: true,
autoPlay: true,
wrapAround: true,
pageDots: false,
});
$(".main-carousel").flickity({
cellAlign: "left",
contain: true,
autoPlay: 5000,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
draggable: false,
});
var scroll = new SmoothScroll('a[href*="#"]',{
speed: 300,
speedAsDuration: true
});
var easeInQuint = new SmoothScroll('[data-easing="easeInQuint"]', {easing: 'easeInQuint'});
</script>
</body>
</html>