-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (197 loc) · 7.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="We use quality materials that we get directly from farmers. so that the products we produce are guaranteed quality and taste. It's so delicious, you have to try it!"
/>
<link rel="canonical" href="https://lucybakery.netlify.app">
<link rel="icon" href="./assets/img/window-icon.webp" type="image/webp" />
<title>lucybakery | Cakes shop</title>
<link rel="stylesheet" href="./assets/css/style.min.css" />
</head>
<body>
<header class="flex center">
<nav class="flex">
<a href="/">
<h2 class="ident black">lucybakeryi</h2>
</a>
<ul class="flex">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="flex">
<img src="./assets/img/home-cake.webp" alt="Main cake image" />
<div class="flex col container">
<h1 class="black ident2">
Bring you happiness through a piece of cake
</h1>
<p class="white">
We make lemon tert, tiramisu cake, chocolate soft cookies,
cheesecake pie or anything you want
</p>
<div class="flex btn-container">
<a href="#contact">Order now</a>
<a href="#menu">See all menu</a>
</div>
</div>
</section>
<section id="menu" class="flex center col">
<div class="flex center text-container">
<h2 class="black ident2">Try our best selling</h2>
<span class="vertical-line"></span>
<p class="black">
Here's our best creations that everyone loves. Lightness and
sweetness of the cake make you want more and more. Start from cake,
bread and other creations.
</p>
</div>
<div class="flex center container">
<div class="flex center col product">
<img src="./assets/img/cake1.webp" alt="Tiramisu Cake image" />
<h3 class="black">Tiramisu Cake</h3>
<img src="./assets/img/five-stars.webp" alt="Five stars icon" />
</div>
<div class="flex center col product">
<img src="./assets/img/cake2.webp" alt="Granoffee Cake image" />
<h3 class="black">Granoffee Cake</h3>
<img src="./assets/img/five-stars.webp" alt="Five stars icon" />
</div>
<div class="flex center col product">
<img src="./assets/img/cake3.webp" alt="Caramel Bread image" />
<h3 class="black">Caramel Bread</h3>
<img src="./assets/img/five-stars.webp" alt="Five stars icon" />
</div>
<div class="flex center col product">
<img src="./assets/img/cake4.webp" alt="Berry Cheesecake image" />
<h3 class="black">Berry Cheesecake</h3>
<img src="./assets/img/five-stars.webp" alt="Five stars icon" />
</div>
</div>
<a href="/" class="flex center">
See all menus
<img src="./assets/img/right-arrow.webp" alt="Right arrow icon" />
</a>
</section>
<section id="about" class="flex col center">
<div class="flex container1">
<div class="flex col">
<h2 class="black ident2">We back for you fresh from the oven</h2>
<p class="black">
We use quality materials that we get directly from farmers. Our
bakers are experienced people in the food sector. so that the
products we produce are guaranteed quality and taste. It's so
delicious, you have to try it!
</p>
<a href="/">
Read more
<img src="./assets/img/right-arrow.webp" alt="Right arrow icon" />
</a>
</div>
<img
src="./assets/img/make-cake-image.webp"
alt="Making cake image"
/>
</div>
<div class="flex container2">
<img src="./assets/img/choose.webp" alt="Making cake image" />
<div class="flex col">
<h2 class="black ident2">Come and choose your favourites</h2>
<p class="black">
Try to come to our shop directly to enjoy the delicious taste of
the cake that just came out of the oven. while enjoying it with a
cup of coffee or tea in our very convenient shop, very suitable
for chatting, meeting with your team, or just hanging out with
people you love.
</p>
<a href="/">
See on maps
<img src="./assets/img/right-arrow.webp" alt="Right arrow icon" />
</a>
</div>
</div>
</section>
<section id="promotions" class="flex center col">
<h2 class="black ident2">Latest Promotions</h2>
<div class="flex container">
<div class="flex col text">
<h3 class="black">Orange Pie</h3>
<p class="black">
Lorem ipsum dolor sit amet. Id tempore voluptas rem sunt corrupti
et aperiam tenetur qui culpa dolor aut quia voluptatem et suscipit
sapiente vel deleniti atque.
</p>
</div>
<div class="flex">
<span class="flex center promo-left">
<p>
30% <br />
off
</p>
</span>
<img src="./assets/img/promotion1.webp" alt="Promotion 1 image" />
<img src="./assets/img/promotion2.webp" alt="Promotion 2 image" />
<span class="flex center promo-right">
<p>
20% <br />
off
</p>
</span>
</div>
<div class="flex col text">
<h3 class="black">Berry Pie</h3>
<p class="black">
Lorem ipsum dolor sit amet. Id tempore voluptas rem sunt corrupti
et aperiam tenetur qui culpa dolor aut quia voluptatem et suscipit
sapiente vel deleniti atque.
</p>
</div>
</div>
</section>
<section id="location" class="flex col">
<h2 class="ident2 black">Our location</h2>
<div class="container">
<div class="flex col">
<h3 class="black">Visit Us</h3>
<p class="white">
JI Danau Agung BI E-14/1, Sunder, Jakarta Utara, DKI Jakarta
</p>
</div>
<img
src="./assets/img/maps-location.webp"
alt="Maps location image"
/>
</div>
</section>
</main>
<footer id="contact" class="flex col">
<div class="flex center main-content">
<h2 class="ident black">lucybakeryi</h2>
<div class="flex center col">
<h3 class="black">OPEN HOURS</h3>
<p class="white">
Mon - Sat 08:00 - 20:00 <br />
Sunday closed
</p>
</div>
<div class="flex center col">
<h3 class="black">CONTACT US</h3>
<p class="white">
+554799446289 <br />
</p>
</div>
</div>
<div class="flex center sub-content">
<p>Lucy Bakery © All Right Reserved</p>
</div>
</footer>
</body>
</html>