essentique/index.html at main · MuzafferH/essentique · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Essentique — Luxurious Essential Oils, Handcrafted Naturally</title>
  <meta name="description" content="Essentique creates luxurious, 100% natural essential oil blends. Handcrafted in Penang, Malaysia. No alcohol. No synthetic fragrance. No artificial preservatives.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Outfit:wght@200;300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Preloader -->
  <div id="preloader">
    <div class="preloader-logo">
      <svg class="nose-icon" viewBox="0 0 60 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M30 5 C25 15, 15 30, 12 45 C9 58, 15 72, 30 75 C45 72, 51 58, 48 45 C45 30, 35 15, 30 5Z" stroke="var(--gold)" stroke-width="1.5" fill="none" class="nose-path"/>
      </svg>
    </div>
  </div>

  <!-- Navigation -->
  <nav id="navbar">
    <div class="nav-inner">
      <a href="#hero" class="nav-logo">Essentique</a>
      <div class="nav-links">
        <a href="#story">Story</a>
        <a href="#products">Products</a>
        <a href="#find">Find Us</a>
        <a href="#contact">Contact</a>
      </div>
      <button class="nav-toggle" aria-label="Menu">
        <span></span>
        <span></span>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu -->
  <div id="mobile-menu">
    <a href="#story">Story</a>
    <a href="#products">Products</a>
    <a href="#find">Find Us</a>
    <a href="#contact">Contact</a>
  </div>

  <!-- Hero -->
  <section id="hero">
    <div class="hero-bg">
      <img src="assets/hero-bottles.jpg" alt="Essentique essential oil bottles" class="hero-img">
      <div class="hero-overlay"></div>
    </div>
    <div class="hero-content">
      <div class="hero-badge reveal">
        <span class="badge-line"></span>
        <span class="badge-text">Est. Penang, Malaysia</span>
        <span class="badge-line"></span>
      </div>
      <h1 class="hero-title reveal">
        <span class="title-line">Essentique</span>
      </h1>
      <div class="hero-tagline reveal">
        <p class="tagline-typed"></p>
      </div>
      <div class="hero-divider reveal">
        <span class="gold-line"></span>
      </div>
      <a href="#story" class="hero-scroll reveal">
        <span class="scroll-text">Explore</span>
        <span class="scroll-chevron">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.5"/>
          </svg>
        </span>
      </a>
    </div>
    <div class="hero-grain"></div>
  </section>

  <!-- Story -->
  <section id="story">
    <div class="section-container">
      <div class="story-grid">
        <div class="story-images">
          <div class="story-img-wrapper reveal-slide-right">
            <img src="assets/founder.jpg" alt="The artisan behind Essentique" class="story-img story-img-main">
          </div>
          <div class="story-img-wrapper story-img-offset reveal-slide-right" style="animation-delay: 0.2s">
            <img src="assets/artisan-working.jpg" alt="Handcrafting essential oil blends" class="story-img">
          </div>
        </div>
        <div class="story-text">
          <span class="section-label reveal">Our Story</span>
          <h2 class="section-title reveal">Crafted by Hand.<br>Guided by Nature.</h2>
          <div class="story-divider reveal"><span class="gold-line-sm"></span></div>
          <p class="story-paragraph reveal">
            Born from a deep reverence for nature's aromatic treasures, Essentique brings you essential oil blends that are as pure as their origins. Every bottle is handcrafted with intention — blending pure essential oils with fractionated coconut oil, nothing more.
          </p>
          <p class="story-paragraph reveal">
            No alcohol. No synthetic fragrance. No artificial preservatives. Just the authentic essence of botanicals, carefully selected and blended to create scents that move with your body and evolve throughout the day.
          </p>
          <div class="story-values reveal">
            <div class="value-item">
              <span class="value-number">100%</span>
              <span class="value-label">Natural</span>
            </div>
            <div class="value-divider"></div>
            <div class="value-item">
              <span class="value-number">Zero</span>
              <span class="value-label">Synthetics</span>
            </div>
            <div class="value-divider"></div>
            <div class="value-item">
              <span class="value-number">Pure</span>
              <span class="value-label">Intention</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Products -->
  <section id="products">
    <div class="section-container">
      <div class="products-header">
        <span class="section-label reveal">The Collection</span>
        <h2 class="section-title reveal">Luxurious Essentials</h2>
        <div class="story-divider reveal"><span class="gold-line-sm"></span></div>
        <p class="products-intro reveal">Each blend tells a story. Applied to pulse points — wrists, neck, behind the ears — they become part of yours.</p>
      </div>

      <div class="products-grid">
        <div class="product-card reveal-scale">
          <div class="product-icon">
            <svg viewBox="0 0 40 60" fill="none"><rect x="12" y="20" width="16" height="35" rx="3" stroke="var(--gold)" stroke-width="1.2"/><rect x="15" y="10" width="10" height="12" rx="2" stroke="var(--gold)" stroke-width="1.2"/><circle cx="20" cy="6" r="3" stroke="var(--gold)" stroke-width="1.2"/></svg>
          </div>
          <h3 class="product-name">Roll-On Blends</h3>
          <p class="product-desc">Pure essential oil blends in fractionated coconut oil. Portable luxury for your pulse points. 10ml of concentrated nature.</p>
          <span class="product-price">from RM 50</span>
        </div>

        <div class="product-card reveal-scale" style="animation-delay: 0.15s">
          <div class="product-icon">
            <svg viewBox="0 0 40 60" fill="none"><rect x="10" y="25" width="20" height="28" rx="3" stroke="var(--gold)" stroke-width="1.2"/><path d="M15 25V18C15 15 17 12 20 12C23 12 25 15 25 18V25" stroke="var(--gold)" stroke-width="1.2"/><line x1="20" y1="8" x2="20" y2="12" stroke="var(--gold)" stroke-width="1.2"/><circle cx="17" cy="8" r="1" fill="var(--gold)" opacity="0.5"/><circle cx="23" cy="8" r="1" fill="var(--gold)" opacity="0.5"/></svg>
          </div>
          <h3 class="product-name">Essential Oil Sprays</h3>
          <p class="product-desc">Room and body mists crafted from pure botanicals. Transform your space with a single spritz of natural fragrance.</p>
          <span class="product-price">from RM 60</span>
        </div>

        <div class="product-card reveal-scale" style="animation-delay: 0.3s">
          <div class="product-icon">
            <svg viewBox="0 0 40 60" fill="none"><ellipse cx="20" cy="40" rx="14" ry="8" stroke="var(--gold)" stroke-width="1.2"/><path d="M6 40V30C6 22 12 16 20 16C28 16 34 22 34 30V40" stroke="var(--gold)" stroke-width="1.2"/><path d="M16 16C16 12 18 8 20 8C22 8 24 12 24 16" stroke="var(--gold)" stroke-width="1.2"/></svg>
          </div>
          <h3 class="product-name">Diffusers & Candles</h3>
          <p class="product-desc">Handpoured aromatherapy candles and reed diffusers. Slow-burning, richly scented anchors for your rituals.</p>
          <span class="product-price">from RM 80</span>
        </div>

        <div class="product-card reveal-scale" style="animation-delay: 0.45s">
          <div class="product-icon">
            <svg viewBox="0 0 40 60" fill="none"><circle cx="20" cy="30" r="14" stroke="var(--gold)" stroke-width="1.2"/><path d="M14 24C16 20 18 18 20 16C22 18 24 20 26 24" stroke="var(--gold)" stroke-width="1.2"/><path d="M12 32C15 28 18 26 20 24C22 26 25 28 28 32" stroke="var(--gold)" stroke-width="1.2" opacity="0.6"/><circle cx="20" cy="36" r="3" stroke="var(--gold)" stroke-width="1" opacity="0.4"/></svg>
          </div>
          <h3 class="product-name">Custom Blending</h3>
          <p class="product-desc">Create your own signature scent. A personalized experience — choose your oils, and we craft a blend that's uniquely yours.</p>
          <span class="product-price">Personalized</span>
        </div>
      </div>

      <div class="products-gallery reveal">
        <div class="gallery-track">
          <div class="gallery-item"><img src="assets/product-display.jpg" alt="Essential oil roll-ons display"></div>
          <div class="gallery-item"><img src="assets/bottles-closeup.jpg" alt="Amber bottles close-up"></div>
          <div class="gallery-item"><img src="assets/stall-overview.jpg" alt="Essentique market stall"></div>
          <div class="gallery-item"><img src="assets/artisan-portrait.jpg" alt="Artisan at work"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Find Us -->
  <section id="find">
    <div class="section-container">
      <div class="find-grid">
        <div class="find-text">
          <span class="section-label reveal">Find Us</span>
          <h2 class="section-title reveal">Experience<br>in Person</h2>
          <div class="story-divider reveal"><span class="gold-line-sm"></span></div>
          <p class="find-paragraph reveal">
            Scent is personal — it deserves to be experienced, not just seen on a screen. Find us at pop-up markets across Penang, where you can explore, sample, and discover your signature blend.
          </p>
          <div class="find-location reveal">
            <div class="location-pin">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="var(--gold)"/>
              </svg>
            </div>
            <div class="location-info">
              <span class="location-name">Georgetown, Penang</span>
              <span class="location-detail">Pop-up Markets & Weekend Bazaars</span>
            </div>
          </div>
          <a href="https://maps.app.goo.gl/Yc1XaQoYYGFTQVPF6" target="_blank" rel="noopener" class="btn-gold reveal">
            <span>View on Google Maps</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.5"/></svg>
          </a>
        </div>
        <div class="find-image reveal-slide-right">
          <img src="assets/stall-overview.jpg" alt="Essentique at a Georgetown market">
          <div class="find-image-frame"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact / Footer -->
  <footer id="contact">
    <div class="footer-glow"></div>
    <div class="section-container">
      <div class="footer-content">
        <div class="footer-brand">
          <h2 class="footer-logo">Essentique</h2>
          <p class="footer-tagline">Luxurious Essential Oils.<br>Handcrafted Naturally.</p>
        </div>
        <div class="footer-links">
          <a href="https://instagram.com/essentique_my" target="_blank" rel="noopener" class="footer-social">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
              <rect x="2" y="2" width="20" height="20" rx="5" stroke="var(--gold)" stroke-width="1.5"/>
              <circle cx="12" cy="12" r="5" stroke="var(--gold)" stroke-width="1.5"/>
              <circle cx="17.5" cy="6.5" r="1.5" fill="var(--gold)"/>
            </svg>
            <span>@essentique_my</span>
          </a>
          <a href="tel:+60142742667" class="footer-social">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
              <path d="M5 4H9L11 9L8.5 10.5C9.57 12.67 11.33 14.43 13.5 15.5L15 13L20 15V19C20 20.1 19.1 21 18 21C9.92 21 3 14.08 3 6C3 4.9 3.9 4 5 4Z" stroke="var(--gold)" stroke-width="1.5"/>
            </svg>
            <span>+60 14 2742 667</span>
          </a>
        </div>
        <div class="footer-bottom">
          <span class="footer-line"></span>
          <p class="footer-copy">&copy; 2026 Essentique. All rights reserved.</p>
        </div>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>