-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
399 lines (379 loc) · 19.7 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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/style.css">
<!-- Locomotive Scroll -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>
<!-- Swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
</head>
<body>
<div data-scroll data-scroll-container class="container">
<div data-scroll data-scroll-sticky data-scroll-target="[data-scroll-container]" class="navbar">
<div class="nav d_flex ai_center">
<div class="__items flex_1 d_flex jc_flex-start">
<a href="" class="__link text weight_400">MiniBox®</a>
</div>
<div class="__items flex_1 d_flex max-w767_d_none jc_center cgap_40">
<a href="" class="__link text weight_400">Project</a>
<a href="" class="__link text weight_400">About</a>
<a href="" class="__link text weight_400">Shop</a>
</div>
<div class="__items flex_1 d_flex max-w767_d_none jc_flex-end">
<a href="" class="__link text weight_400">Get in touch</a>
</div>
<div class="__items flex_1 d_none max-w767_d_flex jc_flex-end">
<div class="toggle-menu d_flex fd_column jc_space-between">
<div class="__bar"></div>
<div class="__bar"></div>
</div>
</div>
</div>
</div>
<main class="dark d_flex fd_column rgap_120">
<div class="home d_flex fd_column rgap_80">
<div class="header section">
<div class="row d_flex fd_column">
<div class="col headings d_flex fd_column jc_center ai_center max-w1023_ai_flex-start">
<div class="header__heading weight_500 line-height_009 ws_no-wrap">Designing</div>
<div class="header__heading weight_500 line-height_009 ws_no-wrap">Cozy Chic</div>
</div>
<div class="col">
<img src="img/hero1.jpg" class="hero--image" alt="">
</div>
</div>
</div>
<div class="mission section">
<div class="row d_flex fd_column rgap_60 cgap_20per">
<div class="col d_flex fd_column rgap_40">
<div class="label text w_fit-content">MiniBox® Mission</div>
<div class="sub-title weight_400">
Focused on excellence for our brands, MiniBox® is well estabilished, with a reputation for
great service and a high-quality finish.
</div>
</div>
<div class="col texts flex_1 d_flex max-w767_fd_column rgap_40 cgap_80">
<div class="flex_1">
<div class="header__paragraph text max-w_480 weight_400 line-height_014">
we create inspiring spaces, from urban designs to rural retreats. Join us in our efforts
to transform environments and reimagine the world of architecture.
</div>
</div>
<div class="flex_1">
<div class="header__paragraph text max-w_480 weight_400 line-height_014">
Feel the touch of inspiration at MiniBox®. Our works blend innovation and functionality,
crafting stories of creativity within each space.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="works section d_flex fd_column rgap_80">
<div class="row d_flex jc_space-between ai_flex-end rgap_40 cgap_80">
<div class="heading d_none max-w767_d_flex line-height_010">Project Showcase</div>
<div class="d_flex max-w767_d_none fd_column">
<div class="heading line-height_010">Project</div>
<div class="heading line-height_010">Showcase</div>
</div>
<a href="#" class="__link text w_fit-content">View all projects</a>
</div>
<div class="row d_flex max-w1023_fd_column-reverse jc_flex-end max-w1023_ai_flex-end rgap_40 cgap_40">
<div class="col">
<div class="texts d_flex fd_column rgap_20">
<div class="number weight_500 text_end">(1/4)</div>
<div class="text weight_400 text_end">Contemporary Nature</div>
<div class="text info weight_400 line-height_014 text_end">A blend of modern design and natural elements, creating an open space that connects with nature through materials like wood and stone.</div>
</div>
</div>
<div class="col d_flex max-w1023_fd_column rgap_80">
<img src="img/sub-hero1.jpg" class="sub-hero--image1" alt="">
</div>
</div>
<div class="row d_flex max-w1023_fd_column jc_flex-start rgap_40 cgap_40">
<div class="col">
<img src="img/sub-hero2.jpg" alt="" class="sub-hero--image2">
</div>
<div class="col">
<div class="texts d_flex fd_column rgap_20">
<div class="number weight_500 text_start">(2/4)</div>
<div class="text weight_400 text_start">Timeless Elegance</div>
<div class="text info weight_400 line-height_014 text_start">Seamlessly combining classic furnishings with modern accents, this project evokes an enduring sense of grace and sophistication.</div>
</div>
</div>
</div>
<div class="row d_flex max-w1023_fd_column-reverse jc_flex-end max-w1023_ai_flex-end rgap_40 cgap_40">
<div class="col">
<div class="texts d_flex fd_column rgap_20">
<div class="number weight_500 text_end">(3/4)</div>
<div class="text weight_400 text_end">Pure Opulence</div>
<div class="text info weight_400 line-height_014 text_end">Achieving a pristine, organized look with luxurious touches such as marble and crystal, this project radiates opulent simplicity.</div>
</div>
</div>
<div class="col">
<img src="img/sub-hero3.jpg" alt="" class="sub-hero--image3">
</div>
</div>
<div class="row d_flex max-w1023_fd_column jc_flex-start max-w1023_jc_flex-start rgap_40 cgap_40">
<div class="col">
<img src="img/sub-hero4.jpg" alt="" class="sub-hero--image4">
</div>
<div class="col">
<div class="texts d_flex fd_column rgap_20">
<div class="number weight_500 text_start">(4/4)</div>
<div class="text weight_400 text_start">Green Oasis</div>
<div class="text info weight_400 line-height_014 text_start">Integrating lush indoor plants into a modern design, this project brings the vibrancy of nature indoors using natural materials like wood and clay.</div>
</div>
</div>
</div>
</div>
<div class="our-background d_flex fd_column rgap_80">
<div class="about">
<div class="about__canvas d_flex fd_column rgap_60">
<div class="row d_flex jc_space-between ai_center">
<div class="col d_none max-w767_d_flex">
<div class="heading line-height_010">Our Bakcground</div>
</div>
<div class="col d_flex max-w767_d_none fd_column">
<div class="heading line-height_010">Our</div>
<div class="heading line-height_010">Bakcground</div>
</div>
<div class="col sticker--wrapper d_flex max-w991_d_none jc_flex-end ai_flex-start">
<img src="img/sticker.png" alt="" class="sticker">
</div>
</div>
<div class="row d_flex fd_column rgap_40">
<div class="col d_flex max-w767_fd_column rgap_40 cgap_80">
<div class="flex_1">
<div class="text max-w_480 line-height_014">
MiniBox® started as a small endeavor fueled by creativity. Our journey has led us to blend classic charm and modern ideas, shaping spaces that tell unique stories
</div>
</div>
<div class="flex_1">
<div class="text max-w_480 line-height_014">
We're a team of architects, designers, and artisans. Our passion lies in fusing elegance with contemporary aesthetics to craft spaces that captivate.
</div>
</div>
</div>
<div class="col d_flex max-w767_fd_column rgap_40 cgap_80">
<div class="flex_1">
<div class="text max-w_480 line-height_014">
Personalization is at our core. Collaborating closely with clients, we infuse their visions into designs that radiate authenticity.
</div>
</div>
<div class="flex_1">
<div class="text max-w_480 line-height_014">
MiniBox® bridges dreams and design. Beyond interiors, we turn aspirations into tangible, inhabitable art.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="sub-title">
From humble origins, MiniBox® blends classic and contemporary styles, crafting spaces that tell unique stories. Welcome to a world where design brings imagination to life.
</div>
</div>
</div>
</div>
</div>
<div class="overall">
<div class="row d_flex fd_column rgap_40">
<div class="col">
<div class="label text w_fit-content">MiniBox® Manifesto</div>
</div>
<div class="col d_flex fd_column rgap_80">
<div class="sub-title">
Founded on the belief that there is always room for improvement, MiniBox® was born. Our fervor for our work fuels our growth, an evolution shaped by life's experiences.
</div>
<div class="sub-title">
We cherish sincere design and the processes that guide it. We have faith in the synergy between individuals and their collaboration.
</div>
<div class="sub-title">
Ultimately, we stand by the potency of effective design.
</div>
</div>
</div>
</div>
</div>
</main>
<main class="light d_flex fd_column rgap_120">
<div class="shop d_flex fd_column rgap_80">
<div class="row d_flex max-w1023_fd_column ai_flex-end max-w1023_ai_flex-start rgap_80 cgap_80">
<div class="col flex_1 d_flex fd_column max-w767_d_none">
<div class="heading line-height_010">Our</div>
<div class="heading line-height_010">Furniture</div>
</div>
<div class="col flex_1 d_none max-w767_d_flex">
<div class="heading">Our Furniture</div>
</div>
<div class="col flex_1">
<div class="text max-w_480 line-height_014">Explore our furniture collection, where style meets comfort in timeless designs. Elevate your space with pieces that reflect beauty and innovation.</div>
</div>
</div>
<div class="swiper-container row">
<div class="swiper-wrapper col">
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Wingback chair.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Wingback Chair</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Swivel chair.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Swivel Chair</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Swoop arm sofa.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Swoop Arm Sofa</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Stool.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Stool</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Bench.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Bench</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Coffee table.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Coffee Table</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Console table.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Console Table</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Desk.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Desk</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Dining table.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Dining Table</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Table lamp.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Table Lamp</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Mirror.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Mirror</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Bed.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Bed</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Pillow.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Pillow</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Nightstand.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Nightstand</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Lantern.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Lantern</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Rug.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Rug</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Painting.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Painting</div>
</div>
</a>
<a href="#" class="swiper-slide product-image d_flex overflow_hidden">
<img src="img/Watering can.jpg" alt="" class="d_flex">
<div class="product-info d_flex jc_center ai_center">
<div class="text">Watering Can</div>
</div>
</a>
</div>
</div>
</div>
<div class="footer">
<div class="footer__canvas d_flex fd_column rgap_80">
<div class="row">
<div class="col">
<div class="heading line-height_010">Get in touch</div>
</div>
</div>
<div class="row d_flex fw_wrap rgap_80 cgap_80">
<div class="col flex_1 d_flex fd_column rgap_40">
<div class="text info">Let's start a conversation</div>
<div class="d_flex fd_column rgap_20">
<a href="" class="__link text w_fit-content ws_no-wrap">at@minibox.com</a>
<a href="" class="__link text w_fit-content ws_no-wrap">+62 855 0999 6660</a>
</div>
</div>
<div class="col flex_1 d_flex fd_column rgap_40">
<div class="text info">Based on</div>
<div class="d_flex fd_column rgap_20">
<a href="" class="__link text w_fit-content ws_no-wrap">Jakarta, ID</a>
<a href="" class="__link text w_fit-content ws_no-wrap">Kyoto, JP</a>
</div>
</div>
<div class="col flex_1 d_flex fd_column rgap_40">
<div class="text info">Follow us</div>
<div class="d_flex fd_column rgap_20">
<a href="" class="__link text w_fit-content ws_no-wrap">Facebook 🡦</a>
<a href="" class="__link text w_fit-content ws_no-wrap">Dribbble 🡦</a>
<a href="" class="__link text w_fit-content ws_no-wrap">LinkedIn 🡦</a>
<a href="" class="__link text w_fit-content ws_no-wrap">Twitter 🡦</a>
</div>
</div>
</div>
<div class="row d_flex jc_space-between">
<div class="col">
<div class="text">MiniBox®</div>
</div>
<div class="col">
<div class="text info">©2023 MiniBox LLC. All Rights Reserved</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="js/index.js"></script>
</body>
</html>