-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
918 lines (876 loc) · 51.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
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
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DAMOS</title>
<link rel="stylesheet" href="styles/reset.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="stylesheet" href="styles/global.css">
<link rel="stylesheet" href="styles/home.css">
</head>
<body>
<header id="header" class="wow animate__animated animate__fadeIn" data-wow-delay=".3s">
<div class="container-navbar">
<a href="index.html" class="brand-link-navbar" aria-label="home">
DAMOS
</a>
<div id="nav" class="right__nav">
<nav class="navigation">
<ul class="nav__list">
<li class="nav__item">
<a href="#">Home</a>
</li>
<li class="nav__item">
<a href="#about">About</a>
</li>
<li class="nav__item">
<a href="#ourCollection">Collection</a>
</li>
<li class="nav__item">
<a href="#gallery">Gallery</a>
</li>
<li class="nav__item">
<a href="#ourTeam">Our Team</a>
</li>
<li class="nav__item">
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="nav__button mobile-hidden">
<div class="divider-nav"></div>
<a href="#contact" class="button">Contact Us</a>
</div>
<div class="cross-icon" id="cross-nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
<div class="burger" id="burger-nav-icon">
<div class="lin1"></div>
<div class="lin2"></div>
<div class="lin3"></div>
</div>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero">
<div class="title">
<h1 class="wow animate__animated animate__fadeIn" data-wow-delay=".1s">
Crafting <br>
<span class="special-font">Dreams</span> <br>
In Clay
</h1>
</div>
<div class="mouse wow animate__animated animate__fadeIn" data-wow-delay=".4s">
<span class="mouse-icon">
<span class="mouse-wheel"></span>
</span>
</div>
<a href="#" class="scrollBtn scrollBtn--inactive" aria-label="Scroll to top" aria-hidden="true" tabindex="-1">
<svg class="scrollBtn-icon" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" color="#fff">
<path d="M450-80v-686L242-558l-42-42 280-280 280 280-42 42-208-208v686h-60Z"></path>
</svg>
</a>
</section>
<!-- Welcome -->
<section class="welcome horizontal-padding top-section-separator">
<div class="welcome-container main-container">
<div class="section__title">
<h2 class="special-font wow animate__animated animate__fadeIn" data-wow-duration="1s">
<span>Welcome to Damos Studio <br> </span>
your premier destination for exquisite ceramics and pottery creations!
</h2>
</div>
<div class="welcome__info">
<div class="column ">
<p class="w-600 big-text wow animate__animated animate__fadeInLeft" data-wow-duration="1s">Welcome to Damos Studio! Immerse yourself in the fascinating world of ceramics
where creativity comes to life. In our studio, we fuse passion for art with craftsmanship to bring you
unique and exquisite ceramic creations.</p>
</div>
<div class="column wow animate__animated animate__fadeInRight" data-wow-duration="1s">
<img src="./img/welcome/welcome.jpg" alt="">
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="about horizontal-padding top-section-separator">
<div class="about-container main-container">
<div class="section__title">
<h3 class="wow animate__animated animate__fadeIn" data-wow-duration="1s">About Us</h3>
<h2 class="special-font wow animate__animated animate__fadeIn" data-wow-duration="1s" data-wow-delay=".15s">
<span>Discover our passion <br></span>
for ceramics at Damos Studio. Since our founding, we are committed to fuse creativity.
</h2>
</div>
<div class="about__content">
<img class="wow animate__animated animate__fadeIn" data-wow-duration="1s" src="./img/aboutUs/ahout-us-hero.jpg" alt="">
<div class="categories">
<div class="category wow animate__animated animate__fadeIn" data-wow-duration="1s" data-wow-delay=".2s">
<div class="category__title">
<h5>Sustainability</h5>
<h5 class="category__number ft-extra-light">01</h5>
</div>
<p class="w-500">We are committed to <span class="bold">sustainability</span> and we are proud to say that our <span class="bold">products</span> are made
from <span class="bold">100% recycled materials</span>.</p>
</div>
<div class="category wow animate__animated animate__fadeIn" data-wow-duration="1s" data-wow-delay=".35s">
<div class="category__title">
<h5>Our Creative Philosophy</h5>
<h5 class="category__number ft-extra-light">02</h5>
</div>
<p class="w-500">We believe that <span class="bold">creativity</span> is the <span class="bold">key</span> to <span class="bold">success</span>. That’s why we are always looking for
new ways to <span class="bold">express</span> our <span class="bold">creativity</span>.</p>
</div>
<div class="category wow animate__animated animate__fadeIn" data-wow-duration="1s" data-wow-delay=".45s">
<div class="category__title">
<h5>Commitment to Excellence:</h5>
<h5 class="category__number ft-extra-light">02</h5>
</div>
<p class="w-500">We are <span class="bold">committed</span> to <span class="bold">excellence</span> and we are proud to <span class="bold">say</span> that our <span class="bold">products</span> are <span class="bold">made</span> from
<span class="bold">100% recycled materials</span>.</p>
</div>
</div>
<div class="content__container">
<div class="column" >
<h4 class="wow animate__animated animate__fadeIn" data-wow-delay=".2s">
Conscious &<br> ethical work
</h4>
<p class="wow animate__animated animate__fadeIn" data-wow-delay=".2s">
At <span class="bold">Damos Studio</span>, our work goes <span class="bold">beyond</span> <span class="bold">creating</span> exceptional <span class="bold">ceramic pieces</span>. We are committed to a
<span class="bold">conscious</span> work ethic that <span class="bold">respects</span> both <span class="bold">people</span> and the <span class="bold">planet</span>. Our commitment is based on the following
<span class="bold">principles</span> :
</p>
<ul class="list">
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".05s">
<div class="list-title">Environmental Responsibility</div>
We use <span class="bold">local raw materials</span> and <span class="bold">sustainable</span> production methods to <span class="bold">minimize</span> our <span class="bold">impact</span> on the
<span class="bold">environment</span>. From <span class="bold">recycling waste</span> to reducing energy <span class="bold">consumption</span>, we are dedicated to <span class="bold">preserving
natural resources</span>.
</li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".10s">
<div class="list-title">Work Ethic</div>
We <span class="bold">value</span> every <span class="bold">individual involved</span> in our <span class="bold">creative process</span>. We ensure that <span class="bold">everyone</span> in our supply
<span class="bold">chain works</span> under fair and safe <span class="bold">conditions</span>, promoting <span class="bold">equality</span> and <span class="bold">respect</span> at every <span class="bold">step</span>.
</li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".15s">
<div class="list-title">Transparency and Accountability</div>
We <span class="bold">strive</span> to <span class="bold">maintain</span> open and <span class="bold">transparent communication</span> with our <span class="bold">community</span>. From our suppliers to our
<span class="bold">customers</span>, we seek to share our <span class="bold">philosophy</span> and <span class="bold">practices</span>, fostering <span class="bold">trust</span> and <span class="bold">commitment</span>.
</li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".20s">
<div class="list-title">Community Support</div>
We <span class="bold">believe</span> in <span class="bold">giving back</span> to the <span class="bold">community around us</span>. We collaborate with <span class="bold">local projects</span> and <span class="bold">charities</span>
to contribute to the <span class="bold">growth</span> and <span class="bold">well-being</span> of the <span class="bold">communities</span> in which we <span class="bold">operate</span>.
</li>
</ul>
</div>
<div class="image__column wow animate__animated animate__fadeInRight">
<img data-wow-duration="1s" src="./img/aboutUs/about-us-lateral.jpg" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- BlockQuote -->
<section class="blockquote horizontal-padding top-section-separator wow animate__animated animate__fadeIn">
<div class="blockquote-container main-container">
<div class="blockquote__content">
<div class="blockquote__text">
<h2 class="special-font text-center">
Forging beauty in every mold, we fuse earth with creativity to bring authenticity to life.
</h2>
</div>
<div class="vertical-line"></div>
<p class="text-center uppercase">Claire Fraser</p>
</div>
</div>
</section>
<!-- OUR COLLECTION -->
<section id="ourCollection" class="our-collection top-section-separator">
<div class="our-collection-container">
<div class="horizontal-padding">
<div class="section__title main-container">
<h3 class="wow animate__animated animate__fadeIn">Our Collection</h3>
<h2 class="special-font wow animate__animated animate__fadeIn" data-wow-delay=".15s">
<span>Explore Handcrafted Elegance <br></span>
Discover ceramic pieces that fuse beauty and functionality with masterful craftsmanship.
</h2>
</div>
</div>
<div class="section__content">
<div class="collection__wrapper">
<div id="collection-mug" class="collection__item horizontal-padding--right">
<div class="collection__image wow animate__animated animate__fadeInLeft"></div>
<div class="collection__description">
<h4 class="mega-text wow animate__animated animate__fadeInLeft">MUGS</h4>
<p class="w-500 wow animate__animated animate__fadeInLeft">Our <span class="bold">mugs</span> are the <span class="bold">perfect companion</span> for your <span class="bold">morning coffee or tea</span>. Made from
<span class="bold">high-quality ceramic</span>, they are <span class="bold">durable</span> and <span class="bold">easy to clean</span>. Choose from a variety of <span class="bold">colors</span> and <span class="bold">designs</span>
to find the <span class="bold">perfect match</span> for your <span class="bold">style</span>.
</p>
<a href="#" class="link wow animate__animated animate__fadeInLeft" data-wow-delay="">See More</a>
</div>
</div>
<div id="collection-vase" class="collection__item collection__item--reverse horizontal-padding--left">
<div class="collection__image wow animate__animated animate__fadeInRight"></div>
<div class="collection__description">
<h4 class="mega-text wow animate__animated animate__fadeInRight">VASES</h4>
<p class="w-500 wow animate__animated animate__fadeInRight"> Our <span class="bold">Glasses</span> Elevate Every Sip. Crafted from <span class="bold">premium glass</span>, our collection offers
<span class="bold">durability</span> and <span class="bold">easy maintenance</span>. <span class="bold">Explore</span> a range of styles and hues to complement your <span class="bold">drinking
experience</span>,</p>
<a href="#" class="link wow animate__animated animate__fadeInRight">See More</a>
</div>
</div>
<div id="collection-decor" class="collection__item horizontal-padding--right">
<div class="collection__image wow animate__animated animate__fadeInLeft"></div>
<div class="collection__description">
<h4 class="mega-text wow animate__animated animate__fadeInLeft">DECOR</h4>
<p class="w-500 wow animate__animated animate__fadeInLeft">Our <span class="bold">Ceramic Decor</span> Pieces Elevate Your Space. <span class="bold">Purposefully designed</span> for plant
enthusiasts or home decorators, our <span class="bold">ceramic creations</span> offer a harmonious blend of <span class="bold">functionality</span> and
<span class="bold">aesthetics</span>. Elevate your <span class="bold">home</span> with our diverse <span class="bold">collection</span>.</p>
<a href="#" class="link wow animate__animated animate__fadeInLeft">See More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GALLERY -->
<section id="gallery" class="gallery top-section-separator horizontal-padding">
<div class="gallery-container main-container">
<div class="section__title">
<h3 class="wow animate__animated animate__fadeIn">Gallery</h3>
<h2 class="special-font wow animate__animated animate__fadeIn" data-wow-delay=".15s">
<span>Journey Through Our Masterpieces <br></span>
Experience our gallery showcasing an array of unique, handcrafted ceramic pieces.
</h2>
</div>
<div class="gallery__container">
<div class="gallery__filter filter-articles">
<button data-filter="*" class="button filter-articles__item active wow animate__animated animate__fadeInLeft" type="button" >All Products</button>
<button data-filter="mugs" class="button filter-articles__item wow animate__animated animate__fadeInLeft" type="button" data-wow-delay=".2s">Mugs</button>
<button data-filter="vases" class="button filter-articles__item wow animate__animated animate__fadeInLeft" type="button" data-wow-delay=".3s">Vases</button>
<button data-filter="decor" class="button filter-articles__item wow animate__animated animate__fadeInLeft" type="button" data-wow-delay=".4s">Decor</button>
</div>
<div class="articles__items wow animate__animated animate__fadeIn">
<article data-filter="mugs" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-1.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Mug</h5>
<h4 class="article__image__overlay__title">Serenity</h4>
</div>
</a>
</article>
<article data-filter="decor" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-3.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Decor</h5>
<h4 class="article__image__overlay__title">ArtVibe</h4>
</div>
</a>
</article>
<article data-filter="vases" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-2.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Vases</h5>
<h4 class="article__image__overlay__title">TerraSip</h4>
</div>
</a>
</article>
<article data-filter="vases" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-4.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Vases</h5>
<h4 class="article__image__overlay__title">ArtisanVibe</h4>
</div>
</a>
</article>
<article data-filter="decor" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-5.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Decor</h5>
<h4 class="article__image__overlay__title">SereneTouch</h4>
</div>
</a>
</article>
<article data-filter="mugs" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-6.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Mug</h5>
<h4 class="article__image__overlay__title">Artisan Blend</h4>
</div>
</a>
</article>
<article data-filter="vases" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-7.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Vases</h5>
<h4 class="article__image__overlay__title">EarthGlow</h4>
</div>
</a>
</article>
<article data-filter="mugs" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-8.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Mug</h5>
<h4 class="article__image__overlay__title">Harmony</h4>
</div>
</a>
</article>
<article data-filter="decor" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-10.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Decor</h5>
<h4 class="article__image__overlay__title">NatureArt</h4>
</div>
</a>
</article>
<article data-filter="mugs" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-18.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Mug</h5>
<h4 class="article__image__overlay__title">Zen Drinkware</h4>
</div>
</a>
</article>
<article data-filter="decor" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-11.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Decor</h5>
<h4 class="article__image__overlay__title">EarthyDecor</h4>
</div>
</a>
</article>
<article data-filter="decor" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-12.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Decor</h5>
<h4 class="article__image__overlay__title">ZenFinesse</h4>
</div>
</a>
</article>
<article data-filter="vases" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-13.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Vases</h5>
<h4 class="article__image__overlay__title">ZenCraft</h4>
</div>
</a>
</article>
<article data-filter="vases" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-14.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Vases</h5>
<h4 class="article__image__overlay__title">NatureLuxe</h4>
</div>
</a>
</article>
<article data-filter="decor" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-16.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Decor</h5>
<h4 class="article__image__overlay__title">NatureNest</h4>
</div>
</a>
</article>
<article data-filter="mugs" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-15.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Mug</h5>
<h4 class="article__image__overlay__title">Tranquil Sippe</h4>
</div>
</a>
</article>
<article data-filter="decor" class="articles__item article">
<a class="article__image">
<img src="./img/gallery/item-17.jpg" alt="Image">
<div class="article__image__overlay">
<h5 class="article__image__overlay__subtitle">Decor</h5>
<h4 class="article__image__overlay__title">HomeGleam</h4>
</div>
</a>
</article>
</div>
</div>
</div>
</section>
<!-- OUR TEAM -->
<section id="ourTeam" class="ourTeam horizontal-padding top-section-separator">
<div class="ourTeam-container main-container">
<div class="section__title">
<h3 class="wow animate__animated animate__fadeIn">Our Team</h3>
<h2 class="special-font wow animate__animated animate__fadeIn" data-wow-delay=".15s">
<span>Discover the Soul of Damos Studio <br></span>
Meet the dedicated artisans who infuse passion and skill into each piece.
</h2>
</div>
<div class="ourTeam__content">
<div class="founder__container">
<img class="team__image wow animate__animated animate__fadeIn" src="./img/ourTeam/ourTeam.jpg" alt="">
<h4 class="text-center wow animate__animated animate__fadeIn">Claire Fraser</h4>
<h5 class="article__image__overlay__subtitle text-center wow animate__animated animate__fadeIn" data-wow-delay=".1s">BASED IN FRANCE</h5>
<img class="founder__image wow animate__animated animate__fadeIn" src="./img/ourTeam/founder.jpg" alt="">
<div class="founder__content">
<p class="special-font big-text text-center wow animate__animated animate__fadeIn">Claire Fraser is a French ceramicist whose work is inspired
by the nature</p>
<div class="founder__description">
<p class="w-500 wow animate__animated animate__fadeIn" data-wow-delay=".1s">
<span class="bold">French ceramicist</span> whose work is <span class="bold">inspired</span> by
the <span class="bold">nature</span> of her <span class="bold">childhood in Burgundy</span>
region where she lives <span class="bold">today</span>. Her work has
a <span class="bold">natural</span> and <span class="bold">soft feel</span> to it, She hand-
throws each <span class="bold">piece</span>, and you can <span class="bold">really
sense</span> the <span class="bold">craft</span> and long study of the <span class="bold">lines</span>.
</p>
<p class="w-500 wow animate__animated animate__fadeIn" data-wow-delay=".2s">
<span class="bold">Elegant yet rustic</span>, rough and pure, her
<span class="bold">pieces</span> add a <span class="bold">very rich visual</span> and <span class="bold">tactile</span>
experience to their <span class="bold">usage</span>. Born in <span class="bold">1978</span>,
Laetitia <span class="bold">lives and works</span> in <span class="bold">Arles</span>. Each piece
is <span class="bold">unique</span> and the <span class="bold">result</span> of a <span class="bold">long study</span>
of the <span class="bold">lines</span> of an <span class="bold">object</span>.
</p>
</div>
</div>
</div>
<div class="team__container">
<h4 class="text-center wow animate__animated animate__fadeIn">Meet Our Team</h4>
<h5 class="article__image__overlay__subtitle uppercase text-center wow animate__animated animate__fadeIn" data-wow-delay=".1s">The talent behind each work</h5>
<div class="team__grid">
<div class="team__item wow animate__animated animate__fadeIn">
<img class="team__item__thumbnail" src="./img/ourTeam/team-1.jpg" alt="">
<p class="special-font big-text">Liam Wilson</p>
<h5 class="article__image__overlay__subtitle uppercase">Clay Modeling Artisan</h5>
<div class="wrap-socials">
<a href="#" class="link-social w-inline-block">
<img src="./img/twitter.svg" loading="lazy" alt="Twitter Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/instagram.svg" loading="lazy" alt="Instagram Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/dribble.svg" loading="lazy" alt="Dribble Icon" class="icon-social">
</a>
</div>
</div>
<div class="team__item team__bottom wow animate__animated animate__fadeIn" data-wow-delay=".1s">
<img class="team__item__thumbnail" src="./img/ourTeam/team-2.jpg" alt="">
<p class="special-font big-text">Sophia Lee</p>
<h5 class="article__image__overlay__subtitle uppercase">Enameling Technique</h5>
<div class="wrap-socials">
<a href="#" class="link-social w-inline-block">
<img src="./img/twitter.svg" loading="lazy" alt="Twitter Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/instagram.svg" loading="lazy" alt="Instagram Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/dribble.svg" loading="lazy" alt="Dribble Icon" class="icon-social">
</a>
</div>
</div>
<div class="team__item wow animate__animated animate__fadeIn">
<img class="team__item__thumbnail" src="./img/ourTeam/team-3.jpg" alt="">
<p class="special-font big-text">Olivia Johnson</p>
<h5 class="article__image__overlay__subtitle uppercase">Events and Workshops Coordinator</h5>
<div class="wrap-socials">
<a href="#" class="link-social w-inline-block">
<img src="./img/twitter.svg" loading="lazy" alt="Twitter Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/instagram.svg" loading="lazy" alt="Instagram Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/dribble.svg" loading="lazy" alt="Dribble Icon" class="icon-social">
</a>
</div>
</div>
<div class="team__item team__top wow animate__animated animate__fadeIn">
<img class="team__item__thumbnail" src="./img/ourTeam/team-4.jpg" alt="">
<p class="special-font big-text">Isabella Martinez</p>
<h5 class="article__image__overlay__subtitle uppercase">Ceramic Pattern Designer</h5>
<div class="wrap-socials">
<a href="#" class="link-social w-inline-block">
<img src="./img/twitter.svg" loading="lazy" alt="Twitter Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/instagram.svg" loading="lazy" alt="Instagram Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/dribble.svg" loading="lazy" alt="Dribble Icon" class="icon-social">
</a>
</div>
</div>
<div class="team__item team__bottom wow animate__animated animate__fadeIn" data-wow-delay=".1s">
<img class="team__item__thumbnail" src="./img/ourTeam/team-5.jpg" alt="">
<p class="special-font big-text">Amelia Adams </p>
<h5 class="article__image__overlay__subtitle uppercase">Packing and Shipping Clerk</h5>
<div class="wrap-socials">
<a href="#" class="link-social w-inline-block">
<img src="./img/twitter.svg" loading="lazy" alt="Twitter Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/instagram.svg" loading="lazy" alt="Instagram Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/dribble.svg" loading="lazy" alt="Dribble Icon" class="icon-social">
</a>
</div>
</div>
<div class="team__item team__top wow animate__animated animate__fadeIn">
<img class="team__item__thumbnail" src="./img/ourTeam/team-6.jpg" alt="">
<p class="special-font big-text">Ethan Garcia</p>
<h5 class="article__image__overlay__subtitle uppercase">Expert in Burning and Furnaces</h5>
<div class="wrap-socials">
<a href="#" class="link-social w-inline-block">
<img src="./img/twitter.svg" loading="lazy" alt="Twitter Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/instagram.svg" loading="lazy" alt="Instagram Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block">
<img src="./img/dribble.svg" loading="lazy" alt="Dribble Icon" class="icon-social">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DECORATION TEXT -->
<section id="decoration-text" class="decorText horizontal-padding top-section-separator main-container">
<p class="mega-text special-font uppercase text-right wow animate__animated animate__fadeIn" data-wow-delay=".2s">When</p>
<p class="mega-text special-font uppercase decorText__special wow animate__animated animate__fadeIn" data-wow-delay=".2s">You Receive a piece <span>From Damos</span></p>
<p class="mega-text special-font uppercase text-right wow animate__animated animate__fadeIn" data-wow-delay=".2s">You Own</p>
<p class="mega-text special-font uppercase text-right wow animate__animated animate__fadeIn" data-wow-delay=".2s">Something unique</p>
</section>
<!-- REVIEWS -->
<section id="reviews" class="reviews top-section-separator horizontal-padding">
<div class="main-container">
<div class="reviews__container">
<div class="review__info wow animate__animated animate__fadeInLeft">
<h2 class="uppercase mega-text special-font">Reviews</h2>
<div class="reviews__rating">
<div class="rating__stars">
<img class="rating__starts__image" src="./img/starts.svg" alt="">
<div class="rating__number">4.8</div>
</div>
<p>Our overall rating is 4.8 out of 5 starts form over 23467 reviews</p>
<a class="button uppercase" href="#">READ THEM HERE</a>
</div>
</div>
<div class="review__list wow animate__animated animate__fadeInRight" data-wow-delay=".2s">
<div class="review__item">
<div class="client__info">
<div class="client__wrapper">
<img class="client__image" src="./img/reviews/testimonial-1.jpg" alt="">
<p>Mathilde E.</p>
</div>
<p class="review__second__text">Verified buyer</p>
<p class="review__second__text">Reviewed on June 7, 2023</p>
</div>
<div class="client__content">
<img class="review__client__starts" src="./img/starts.svg" alt="">
<p class="review__title special-font">Enchanted with Artisan Beauty</p>
<p class="review__text">
Damos Studio has captivated me with its unique pieces. The quality craftsmanship and attention to detail are reflected in each creation, an exceptional experience that I recommend to all lovers of ceramic art!
</p>
</div>
</div>
<div class="review__item">
<div class="client__info">
<div class="client__wrapper">
<img class="client__image" src="./img/reviews/testimonial-2.jpg" alt="">
<p>Emily Johnson</p>
</div>
<p class="review__second__text">Verified buyer</p>
<p class="review__second__text">Reviewed on June 7, 2023</p>
</div>
<div class="client__content">
<img class="review__client__starts" src="./img/starts.svg" alt="">
<p class="review__title special-font">Quality and Beauty in Every Work</p>
<p class="review__text">
My experience at Damos Studio was impressive. The combination of quality, design and personalized attention in each piece is remarkable. A brilliant display of artistic skill and passion for ceramics.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT US -->
<section id="contact" class="contact horizontal-padding top-section-separator">
<div class="contact-container main-container">
<div class="section__title">
<h3 class="wow animate__animated animate__fadeIn">Contact Us</h3>
<h2 class="special-font wow animate__animated animate__fadeIn" data-wow-delay=".15s">
<span>Looking for a unique piece? <br></span>
We're here for you. Contact us for custom orders or any other inquiries.
</h2>
</div>
<div class="section__content">
<div class="content__container">
<div class="column">
<h4 class="wow animate__animated animate__fadeIn" data-wow-delay=".05s">Let's Talk</h4>
<form class="form">
<input type="text" class="text-field wow animate__animated animate__fadeIn" data-wow-delay=".10s" maxlength="256" name="name" data-name="Name" placeholder="Name"
id="name" aria-label="Name" required>
<input type="email" class="text-field wow animate__animated animate__fadeIn" data-wow-delay=".15s" maxlength="256" name="Email"
data-name="Email" placeholder="Email" id="Email" aria-label="Email" required>
<input type="tel"
class="text-field wow animate__animated animate__fadeIn" data-wow-delay=".20s" maxlength="256" name="Telephone" data-name="Telephone" placeholder="Telephone"
id="Telephone" aria-label="Telephone" required>
<textarea placeholder="I have a question..." maxlength="5000"
id="Message" name="Message" data-name="Message" class="text-area w-input wow animate__animated animate__fadeIn" data-wow-delay=".25s"
aria-label="Message"></textarea>
<div class="flex-submit-button wow animate__animated animate__fadeIn" data-wow-delay=".30s">
<input type="submit" value="Submit" data-wait="Please wait..." class="button w-button">
</div>
</form>
<div class="contact__info">
<div>
<h3 class="wow animate__animated animate__fadeIn">Email</h3>
<a class="wow animate__animated animate__fadeIn" data-wow-delay=".05s" href="mailto:[email protected]">[email protected]</a>
</div>
<div>
<h3 class="wow animate__animated animate__fadeIn" data-wow-delay=".10s">Telephone</h3>
<a class="wow animate__animated animate__fadeIn" data-wow-delay=".15s" href="">+34 623493849</a>
</div>
<div>
<h3 class="wow animate__animated animate__fadeIn" data-wow-delay=".20s">Location</h3>
<a class="wow animate__animated animate__fadeIn" data-wow-delay=".25s" href="https://www.google.es/maps/search/36+Henry+Lane+Brooklyn,+NY+11219/@40.6502626,-74.0004134,17z/data=!3m1!4b1?entry=ttu">36 Henry Lane
Brooklyn, NY 11219</a>
</div>
</div>
</div>
<div class="image__column wow animate__animated animate__fadeInRight">
<img src="./img/contactUs/sidebar.jpg" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- MAP -->
<section class="map wow animate__animated animate__fadeIn">
<iframe class="googleMap top-section-separator" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.0756596964225!2d-74.00270940905145!3d40.65026256766714!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25ac6d7407875%3A0x3cbeba302209e44d!2s36th%20St%2C%20Brooklyn%2C%20NY%2C%20EE.%20UU.!5e0!3m2!1ses!2ses!4v1703585572861!5m2!1ses!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
<!-- FAQ -->
<section class="faq top-section-separator horizontal-padding">
<div class="faq-container main-container">
<div class="section__title">
<h3 class="wow animate__animated animate__fadeIn" data-wow-delay=".05s">FAQ</h3>
<h2 class="special-font wow animate__animated animate__fadeIn" data-wow-delay=".10s">
<span>Find answers <br></span>
to your frequently asked questions about our products, manufacturing process and more.
</h2>
</div>
<div class="section__content">
<ul class="faq__list">
<li class="faq__item wow animate__animated animate__fadeIn" data-wow-delay=".05s">
<div class="faq__title">
<div class="faq-number paragraph-big">01</div>
<span class="paragraph-big">
<img class="faq__arrow" src="./img/arrow.svg" alt="Right Arrow">
What is the philosophy behind Damos Studio?
</span>
</div>
<div class="faq__content">
<div class="faq__separator"></div>
<div class="faq__text">
At Damos Studio, our philosophy focuses on fusing artistic creativity with traditional craftsmanship. We strive to create unique pieces that reflect beauty, functionality and exceptional quality. Our approach is based on a connection to authentic craftsmanship, using sustainable methods and high quality materials to deliver works that convey elegance and durability.
</div>
</div>
</li>
<li class="faq__item wow animate__animated animate__fadeIn" data-wow-delay=".10s">
<div class="faq__title">
<div class="faq-number paragraph-big">03</div>
<span class="paragraph-big">
<img class="faq__arrow" src="./img/arrow.svg" alt="Right Arrow">
How does Damos Studio collaborate with sustainability?
</span>
</div>
<div class="faq__content">
<div class="faq__separator"></div>
<div class="faq__text">
At Damos Studio, we are committed to sustainability at every stage of our process. We use local clays and manufacturing methods that minimize environmental impact. In addition, we strive to reduce waste, recycle materials whenever possible and work with suppliers committed to sustainable practices.
</div>
</div>
</li>
<li class="faq__item wow animate__animated animate__fadeIn" data-wow-delay=".15s">
<div class="faq__title">
<div class="faq-number paragraph-big">02</div>
<span class="paragraph-big">
<img class="faq__arrow" src="./img/arrow.svg" alt="Right Arrow">
What makes your ceramic pieces special?
</span>
</div>
<div class="faq__content">
<div class="faq__separator"></div>
<div class="faq__text">
Our pieces are distinguished by their careful creation process. Each piece is the result of a combination of craftsmanship and creativity. We use production methods that value traditional craftsmanship and contemporary innovation. Each piece features a unique design and meticulous attention to detail, reflecting the passion and skill of our artisans.
</div>
</div>
</li>
<li class="faq__item wow animate__animated animate__fadeIn" data-wow-delay=".20s">
<div class="faq__title">
<div class="faq-number paragraph-big">04</div>
<span class="paragraph-big">
<img class="faq__arrow" src="./img/arrow.svg" alt="Right Arrow">
Can I order a customized part?
</span>
</div>
<div class="faq__content">
<div class="faq__separator"></div>
<div class="faq__text">
Of course! We accept custom orders. If you have a unique idea or specific request, contact us to discuss your project. Our team will work with you to create a custom piece that fits your preferences and requirements.
</div>
</div>
</li>
<li class="faq__item wow animate__animated animate__fadeIn" data-wow-delay=".25s">
<div class="faq__title">
<div class="faq-number paragraph-big">05</div>
<span class="paragraph-big">
<img class="faq__arrow" src="./img/arrow.svg" alt="Right Arrow">
How can I care for and maintain my ceramic pieces?
</span>
</div>
<div class="faq__content">
<div class="faq__separator"></div>
<div class="faq__text">
We recommend hand washing your ceramic pieces with warm water and mild soap. Avoid sudden changes in temperature and strong shocks. Although our pieces are dishwasher safe, hand washing will prolong their durability and beauty.
</div>
</div>
</li>
<li class="faq__item wow animate__animated animate__fadeIn" data-wow-delay=".30s">
<div class="faq__title">
<div class="faq-number paragraph-big">06</div>
<span class="paragraph-big">
<img class="faq__arrow" src="./img/arrow.svg" alt="Right Arrow">
What is the production process of a ceramic piece at Damos Studio?
</span>
</div>
<div class="faq__content">
<div class="faq__separator"></div>
<div class="faq__text">
Our process begins with the selection of high quality raw materials. Then, the artisans mold, glaze and fire the pieces with precision and care. Each step is carried out with meticulous attention to ensure the exceptional quality and finish that characterizes our creations.
</div>
</div>
</li>
<li class="faq__item wow animate__animated animate__fadeIn" data-wow-delay=".35s">
<div class="faq__title">
<div class="faq-number paragraph-big">07</div>
<span class="paragraph-big">
<img class="faq__arrow" src="./img/arrow.svg" alt="Right Arrow">
How do you guarantee the quality of your products?
</span>
</div>
<div class="faq__content">
<div class="faq__separator"></div>
<div class="faq__text">
Quality is fundamental to our process. We perform strict quality controls at all stages of production. From the selection of materials to the final process, each piece undergoes rigorous inspections to ensure that it meets our high quality standards before reaching our customers.
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer top-section-separator horizontal-padding">
<div class="footer-container main-container">
<div class="footer__content">
<div class="footer__row logo__container">
<h2 class="logo__text wow animate__animated animate__fadeInLeft">DAMOS</h2>
<div class="horizontal-line wow animate__animated animate__fadeIn"></div>
</div>
<div class="footer__row">
<div class="footer__column social__links">
<p class="footer__description wow animate__animated animate__fadeInLeft" data-wow-delay=".05">Creating timeless beauty through ceramics. We unite art and craftsmanship to offer unique pieces that enchant and endure over time.</p>
<div class="wrap-socials">
<a href="#" class="link-social w-inline-block wow animate__animated animate__fadeIn" data-wow-delay=".10s">
<img src="./img/twitter.svg" loading="lazy" alt="Twitter Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block wow animate__animated animate__fadeIn" data-wow-delay=".20s">
<img src="./img/instagram.svg" loading="lazy" alt="Instagram Icon" class="icon-social">
</a>
<a href="#" class="link-social w-inline-block wow animate__animated animate__fadeIn" data-wow-delay=".25s">
<img src="./img/dribble.svg" loading="lazy" alt="Dribble Icon" class="icon-social">
</a>
</div>
</div>
<div class="footer__column footer__column-links">
<h4 class="wow animate__animated animate__fadeIn" data-wow-delay=".05s">Links</h4>
<ul class="footer__links">
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".10s"><a class="link" href="#">Home</a></li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".15s"><a class="link" href="#ourCollection">Our Collection</a></li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".20s"><a class="link" href="#gallery">Gallery</a></li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".25s"><a class="link" href="#ourTeam">Our Team</a></li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".30s"><a class="link" href="#contact">Contact Us</a></li>
</ul>
</div>
<div class="footer__column footer__column-legal">
<h4 class="wow animate__animated animate__fadeIn" data-wow-delay=".05s">Legal</h4>
<ul class="footer__links">
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".10s"><a class="link" href="#">Legal Notice</a></li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".15s"><a class="link" href="#">Privacy Policy</a></li>
<li class="wow animate__animated animate__fadeIn" data-wow-delay=".20s"><a class="link" href="#">Cookies Policy</a></li>
</ul>
</div>
<div class="footer__column footer__column-visit">
<h4 class="wow animate__animated animate__fadeIn" data-wow-delay=".05s">Visit us</h4>
<p class="wow animate__animated animate__fadeIn" data-wow-delay=".10s">
New York, <br>
Brooklyn Henry Lane.
</p>
<p class="wow animate__animated animate__fadeIn" data-wow-delay=".15s">
<span class="bold">Opening Hours</span>
<br>
10:00 - 18:00
</p>
</div>
</div>
<div class="footer__row copyright__container">
<div class="footer__column">
<div class="horizontal-line wow animate__animated animate__fadeIn"></div>
<div class="copyright__text">
<p class="footer__copy wow animate__animated animate__fadeIn" data-wow-delay=".05s">© 2023 Damos Studio. All rights reserved.</p>
<p class="footer__copy wow animate__animated animate__fadeIn" data-wow-delay=".10s">Designed by <a href="https://github.com/jmcamposdev">jmcamposdev</a></p>
</div>
</div>
</div>
</div>
</div>
</footer>
</main>
<script src="./js/isotope.min.js"></script>
<script src="./js/wow.min.js"></script>
<script src="./js/header.js"></script>
<script src="./js/goToTop.js"></script>
<script src="./js/accordion.js"></script>
<script type="module" src="./js/main.js"></script>
<script>
</script>
</body>
</html>