Ink & Aura | Luxury Decor & Art
<!-- Fonts -->
<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:wght@400;500;600&family=Lora:wght@400;500&family=Montserrat:wght@500;600&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/scented-rituals.css">
<link rel="stylesheet" href="css/responsive.css">
<nav class="nav">
<ul class="nav-list">
<li class="has-dropdown">
<a href="#" class="dropdown-trigger">Scented Rituals</a>
<div class="dropdown-menu">
<div class="dropdown-column">
<p class="dropdown-quote"><span style="color: #BFA15A;">Ceremonies to sanctify your time and awaken the senses.</span></p>
<ul>
<li><a href="#">The Stillness Collection</a></li>
<li><a href="#">The Clarity Collection</a></li>
<li><a href="#">The Solace Collection</a></li>
<li><a href="#">The Revival Collection</a></li>
<li><a href="#">The Ember Collection</a></li>
</ul>
</div>
<div class="dropdown-column">
<div class="feature-image">
<img src="https://placehold.co/300x200?text=Scented+Rituals" alt="Scented Rituals">
<span class="feature-text">New Arrivals</span>
</div>
</div>
</div>
</li>
<li class="has-dropdown">
<a href="#" class="dropdown-trigger">Visual Sanctuaries</a>
<div class="dropdown-menu">
<div class="dropdown-column">
<p class="dropdown-quote"><span style="color: #BFA15A;">Ceremonies to sanctify your time and awaken the senses.Windows into tranquility, transforming your walls into silent storytellers.</span></p></p>
<ul>
<li><a href="#">Whispers on Canvas</a></li>
<li><a href="#">Earthen Textures</a></li>
<li><a href="#">Statements of Being</a></li>
<li><a href="#">Chronicles in Ink</a></li>
</ul>
</div>
<div class="dropdown-column">
<div class="feature-image">
<img src="https://placehold.co/300x200?text=Visual+Sanctuaries" alt="Visual Sanctuaries">
<span class="feature-text">New Arrivals</span>
</div>
</div>
</div>
</li>
<li class="has-dropdown">
<a href="#" class="dropdown-trigger">Objects of Stillness</a>
<div class="dropdown-menu">
<div class="dropdown-column">
<p class="dropdown-quote"><span style="color: #BFA15A;">Anchors of calm that give a room its soul, turning space into sanctuary.</span></p>
<ul>
<li><a href="#">Sacred Vessels</a></li>
<li><a href="#">Meditative Forms</a></li>
<li><a href="#">Objects of Order</a></li>
<li><a href="#">Woven Comforts</a></li>
</ul>
</div>
<div class="dropdown-column">
<div class="feature-image">
<img src="https://placehold.co/300x200?text=Objects+of+Stillness" alt="Objects of Stillness">
<span class="feature-text">New Arrivals</span>
</div>
</div>
</div>
</li>
<li class="has-dropdown">
<a href="#" class="dropdown-trigger">The Emerging Canvas</a>
<div class="dropdown-menu">
<div class="dropdown-column">
<p class="dropdown-quote"><span style="color: #BFA15A;">Beauty with purpose. Discover the future of craft, where every acquisition nurtures a dream.</span></p>
<ul>
<li><a href="#">Works of Hope</a></li>
<li><a href="#">Raw Expressions</a></li>
<li><a href="#">Formative Studies</a></li>
<li><a href="#">Narratives of Youth</a></li>
</ul>
</div>
<div class="dropdown-column">
<div class="feature-image">
<img src="https://placehold.co/300x200?text=Emerging+Canvas" alt="Emerging Canvas">
<span class="feature-text">Support the Artists</span>
</div>
</div>
</div>
</li>
<li class="has-dropdown">
<a href="#" class="dropdown-trigger">The Artisan's Atelier</a>
<div class="dropdown-menu">
<div class="dropdown-column">
<p class="dropdown-quote"><span style="color: #BFA15A;">A collaboration between your unique vision and the soul of our craft.</span></p>
<ul>
<li><a href="#">Compose a Signature Scent</a></li>
<li><a href="#">Commission an Artwork</a></li>
<li><a href="#">Shape a Personal Sculpture</a></li>
<li><a href="#">Begin a Consultation</a></li>
</ul>
</div>
<div class="dropdown-column">
<div class="feature-image">
<img src="https://placehold.co/300x200?text=Artisans+Atelier" alt="Artisan's Atelier">
<span class="feature-text">Begin Your Creation</span>
</div>
</div>
</div>
</li>
<li><a href="our-story.html">Our Story</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="cart-btn" aria-label="Cart">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 3h2l.4 2M7 13h10l4-8H5.4m1.6 8L6 21h12M9 19.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM20 19.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"></path>
</svg>
<span class="cart-count">0</span>
</button>
<button class="mobile-menu-toggle" aria-label="Toggle mobile menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</div>
</header>
<!-- Mobile Menu -->
<div class="mobile-menu">
<div class="mobile-menu-content">
<nav class="mobile-nav">
<ul>
<li class="has-submenu">
<a href="#" class="submenu-trigger">Scented Rituals</a>
<ul class="submenu">
<li><a href="scented-rituals.html">Sacred Vessels</a></li>
<li><a href="scented-rituals.html">Meditative Forms</a></li>
<li><a href="scented-rituals.html">Objects of Order</a></li>
<li><a href="scented-rituals.html">Woven Comforts</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#" class="submenu-trigger">The Emerging Canvas</a>
<ul class="submenu">
<li><a href="the-emerging-canvas.html">Works of Hope</a></li>
<li><a href="the-emerging-canvas.html">Raw Expressions</a></li>
<li><a href="the-emerging-canvas.html">Formative Studies</a></li>
<li><a href="the-emerging-canvas.html">Narratives of Youth</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#" class="submenu-trigger">The Artisan's Atelier</a>
<ul class="submenu">
<li><a href="bespoke-atelier.html">Compose a Signature Scent</a></li>
<li><a href="bespoke-atelier.html">Commission an Artwork</a></li>
<li><a href="bespoke-atelier.html">Shape a Personal Sculpture</a></li>
<li><a href="bespoke-atelier.html">Begin a Consultation</a></li>
</ul>
</li>
<li><a href="our-story.html">Our Story</a></li>
</ul>
</nav>
</div>
</div>
<!-- Main Content -->
<main>
<!-- Hero Section with Video -->
<section class="hero-section">
<div class="hero-video-container">
<video autoplay muted loop playsinline>
<source src="assets/videos/hero-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="hero-content">
<h1>Luxury for the <span style="color: #BFA15A;">Soul</span>â„¢</h1>
<p>Soulful art and scents that glow like embers, crafting an atmosphere for shared moments.</p>
<!-- This new container properly spaces and aligns your buttons -->
<div class="hero-buttons">
<a href="products.html" class="btn-primary">Explore Collection</a>
<a href="bespoke.html" class="btn-primary">Create Bespoke</a>
</div> <!-- An Olfactive Journey Section -->
<section class="olfactive-journey">
<div class="container">
<h2>An Olfactive Journey</h2>
<p class="section-subtitle">Each fragrance a memory, each flame a ritual...</p>
<div class="product-grid-three">
<div class="product-card">
<div class="product-image">
<img src="assets/images/candle-midnight.jpg" alt="Midnight Reverie Candle">
</div>
<div class="product-info">
<h3>Midnight Reverie</h3>
<p>A deep, contemplative blend of sandalwood and amber</p>
<span class="price">$68</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="assets/images/candle-golden.jpg" alt="Golden Hour Candle">
</div>
<div class="product-info">
<h3>Golden Hour</h3>
<p>Warm citrus and vanilla capturing the day's last light</p>
<span class="price">$72</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="assets/images/candle-morning.jpg" alt="Morning Solitude Candle">
</div>
<div class="product-info">
<h3>Morning Solitude</h3>
<p>Fresh bergamot and white tea for peaceful beginnings</p>
<span class="price">$65</span>
</div>
</div>
</div>
<div class="section-cta">
<a href="scented-rituals.html" class="btn-secondary">Discover the Full Ritual</a>
</div>
</div>
</section>
<!-- The Curator's Vault Section -->
<section class="curators-vault">
<div class="container">
<h2>The Curator's Vault</h2>
<p class="section-subtitle">Once a season, we unveil a collection of rare forms and fleeting scents. Objects of profound beauty, crafted in limited numbers.</p>
<div class="vault-grid">
<div class="product-card limited-edition">
<div class="limited-badge">Limited Edition</div>
<div class="product-image">
<img src="assets/images/vault-obsidian.jpg" alt="Obsidian Vessel">
</div>
<div class="product-info">
<h3>Obsidian Vessel</h3>
<p>Hand-carved volcanic glass with rare oud essence</p>
<span class="price">$285</span>
<span class="edition-info">Only 12 remaining</span>
</div>
</div>
<div class="product-card limited-edition">
<div class="limited-badge">Limited Edition</div>
<div class="product-image">
<img src="assets/images/vault-amber.jpg" alt="Amber Meditation">
</div>
<div class="product-info">
<h3>Amber Meditation</h3>
<p>Ancient amber resin with frankincense and myrrh</p>
<span class="price">$320</span>
<span class="edition-info">Only 8 remaining</span>
</div>
</div>
<div class="product-card limited-edition">
<div class="limited-badge">Limited Edition</div>
<div class="product-image">
<img src="assets/images/vault-crystal.jpg" alt="Crystal Sanctuary">
</div>
<div class="product-info">
<h3>Crystal Sanctuary</h3>
<p>Rose quartz vessel with Bulgarian rose absolute</p>
<span class="price">$395</span>
<span class="edition-info">Only 5 remaining</span>
</div>
</div>
<div class="product-card limited-edition">
<div class="limited-badge">Limited Edition</div>
<div class="product-image">
<img src="assets/images/vault-platinum.jpg" alt="Platinum Essence">
</div>
<div class="product-info">
<h3>Platinum Essence</h3>
<p>Platinum-infused ceramic with rare white truffle</p>
<span class="price">$450</span>
<span class="edition-info">Only 3 remaining</span>
</div>
</div>
</div>
<div class="section-cta">
<a href="limited-editions.html" class="btn-primary">Acquire from the Vault</a>
</div>
</div>
</section>
<!-- Story Preview Section -->
<section class="story-preview">
<div class="container">
<div class="story-content">
<h2>Our Story</h2>
<p>At Ink & Aura, we believe in the transformative power of thoughtfully curated spaces. Each piece in our collection is selected with intention, designed to elevate your surroundings and inspire moments of reflection.</p>
<a href="our-story.html" class="btn-secondary">Read More</a>
</div>
<div class="story-image">
<img src="assets/images/story-preview.jpg" alt="Ink & Aura studio">
</div>
</div>
</section>
<!-- Scented Rituals Section -->
<section class="scented-rituals">
<div class="container">
<h2>Scented Rituals</h2>
<p class="section-description">Coconut wax candles with poetic names and therapeutic aromas that transform your space into a sanctuary.</p>
<div class="rituals-grid">
<!-- Card 1 -->
<div class="ritual-card">
<div class="ritual-image">
<img src="assets/images/candle-midnight.jpg" alt="Midnight Reverie Candle">
</div>
<div class="ritual-content">
<h3>Midnight Reverie</h3>
<p>A symphony of bergamot and sandalwood that whispers stories of quiet contemplation and moonlit reflections.</p>
<div class="ritual-details">
<span>SIZE: SMALL, BOWL</span>
<span>WEIGHT: 150G</span>
<span>LABEL: FABRIC</span>
</div>
<div class="ritual-price">
<span>$68</span>
</div>
<div class="ritual-actions">
<button class="btn-add-cart">Add</button>
<button class="btn-customize">Customize</button>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="ritual-card">
<div class="ritual-image">
<img src="assets/images/candle-golden.jpg" alt="Golden Hour Candle">
</div>
<div class="ritual-content">
<h3>Golden Hour</h3>
<p>Warm amber and vanilla notes that capture the gentle radiance of sunset, bringing peace to your evening rituals.</p>
<div class="ritual-details">
<span>SIZE: SMALL, BOWL</span>
<span>WEIGHT: 150G</span>
<span>LABEL: FABRIC</span>
</div>
<div class="ritual-price">
<span>$68</span>
</div>
<div class="ritual-actions">
<button class="btn-add-cart">Add</button>
<button class="btn-customize">Customize</button>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="ritual-card">
<div class="ritual-image">
<img src="assets/images/candle-morning.jpg" alt="Morning Solitude Candle">
</div>
<div class="ritual-content">
<h3>Morning Solitude</h3>
<p>Fresh eucalyptus and citrus create a moment of clarity, perfect for beginning each day with intention.</p>
<div class="ritual-details">
<span>SIZE: SMALL, BOWL</span>
<span>WEIGHT: 150G</span>
<span>LABEL: FABRIC</span>
</div>
<div class="ritual-price">
<span>$68</span>
</div>
<div class="ritual-actions">
<button class="btn-add-cart">Add</button>
<button class="btn-customize">Customize</button>
</div>
</div>
</div>
</div>
<div class="view-all-container">
<a href="scented-rituals.html" class="btn-view-all">View All Scented Rituals</a>
</div>
</div>
</section>
<!-- Featured Categories -->
<section class="featured-categories">
<div class="container">
<h2>Explore Our Collections</h2>
<div class="category-grid">
<a href="category.html?type=decor" class="category-card">
<img src="assets/images/category-decor.jpg" alt="Luxury Decor">
<h3>Decor</h3>
</a>
<a href="category.html?type=art" class="category-card">
<img src="assets/images/category-art.jpg" alt="Fine Art">
<h3>Art</h3>
</a>
<a href="category.html?type=candles" class="category-card">
<img src="assets/images/category-candles.jpg" alt="Artisanal Candles">
<h3>Candles</h3>
</a>
</div>
</div>
</section>
<!-- Emerging Artist Feature -->
<section class="emerging-artist">
<div class="container">
<h2>The Emerging Canvas</h2>
<div class="artist-feature">
<div class="artist-image">
<img src="assets/images/featured-artist.jpg" alt="Featured Artist">
</div>
<div class="artist-content">
<h3>Featured Artist: Emma Laurent</h3>
<p>Discover the ethereal works of our featured emerging artist, whose delicate brushstrokes capture the interplay of light and shadow in urban landscapes.</p>
<a href="emerging-canvas.html" class="btn-secondary">Explore the Collection</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>Ink & Aura</h3>
<p>Curated elegance for discerning spaces.</p>
</div>
<div class="footer-column">
<h3>Shop</h3>
<ul>
<li><a href="category.html?type=decor">Decor</a></li>
<li><a href="category.html?type=art">Art</a></li>
<li><a href="category.html?type=candles">Candles</a></li>
</ul>
</div>
<div class="footer-column">
<h3>About</h3>
<ul>
<li><a href="our-story.html">Our Story</a></li>
<li><a href="emerging-canvas.html">The Emerging Canvas</a></li>
<li><a href="artisans-atelier.html">The Artisan's Atelier</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Connect</h3>
<ul class="social-links">
<li><a href="#">Instagram</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 Ink & Aura. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/main.js"></script>
<script src="js/header.js"></script>
<script src="js/menu.js"></script>