|
|
<!DOCTYPE html> |
|
|
<html lang="nl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Luxe Zwart Marmer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #0a0a0a; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
|
|
|
.marble-bg { |
|
|
background-image: url('https://images.unsplash.com/photo-1565214975364-11885d634a7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
background-attachment: fixed; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.marble-bg::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(10, 10, 10, 0.7); |
|
|
} |
|
|
|
|
|
.marble-texture { |
|
|
background: linear-gradient(135deg, rgba(30, 30, 30, 0.9) 0%, rgba(50, 50, 50, 0.7) 100%); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36); |
|
|
backdrop-filter: blur(8px); |
|
|
-webkit-backdrop-filter: blur(8px); |
|
|
} |
|
|
|
|
|
.gold-accent { |
|
|
color: #d4af37; |
|
|
border-color: #d4af37; |
|
|
} |
|
|
|
|
|
h1, h2, h3 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.marble-divider { |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent); |
|
|
margin: 2rem 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="marble-bg min-h-screen"> |
|
|
<div class="marble-bg min-h-screen"> |
|
|
|
|
|
<nav class="marble-texture fixed w-full z-50"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="text-2xl font-bold gold-accent"> |
|
|
<i class="fas fa-gem mr-2"></i> NoirMarbre |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition duration-300">Collectie</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition duration-300">Over Ons</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition duration-300">Contact</a> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button class="text-gray-300 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="pt-32 pb-20 px-4"> |
|
|
<div class="container mx-auto text-center"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-white">Zwarte Marmeren <span class="gold-accent">Elegantie</span></h1> |
|
|
<p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto text-gray-300">Ontdek de tijdloze schoonheid van zwart marmer in onze exclusieve collectie</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="px-8 py-3 bg-transparent border gold-accent rounded-full hover:bg-yellow-800 hover:bg-opacity-20 transition duration-300"> |
|
|
Bekijk Collectie |
|
|
</button> |
|
|
<button class="px-8 py-3 bg-yellow-800 bg-opacity-30 border border-yellow-800 text-white rounded-full hover:bg-opacity-50 transition duration-300"> |
|
|
Contacteer Ons |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4">Exclusieve <span class="gold-accent">Kenmerken</span></h2> |
|
|
<div class="marble-divider mx-auto w-1/3"></div> |
|
|
<p class="max-w-2xl mx-auto text-gray-300">Onze zwarte marmeren producten combineren natuurlijke schoonheid met vakmanschap van de hoogste kwaliteit.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-10"> |
|
|
<div class="marble-texture p-8 rounded-lg hover:shadow-lg transition duration-500"> |
|
|
<div class="text-4xl gold-accent mb-4"> |
|
|
<i class="fas fa-mountain"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">100% Natuurlijk</h3> |
|
|
<p class="text-gray-300">Gewonnen uit de beste marmergroeven ter wereld, met aandacht voor duurzaamheid.</p> |
|
|
</div> |
|
|
|
|
|
<div class="marble-texture p-8 rounded-lg hover:shadow-lg transition duration-500"> |
|
|
<div class="text-4xl gold-accent mb-4"> |
|
|
<i class="fas fa-hammer"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Handgemaakt</h3> |
|
|
<p class="text-gray-300">Elk stuk wordt met precisie bewerkt door onze ervaren vakmensen.</p> |
|
|
</div> |
|
|
|
|
|
<div class="marble-texture p-8 rounded-lg hover:shadow-lg transition duration-500"> |
|
|
<div class="text-4xl gold-accent mb-4"> |
|
|
<i class="fas fa-award"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Exclusief Design</h3> |
|
|
<p class="text-gray-300">Unieke patronen die geen enkel stuk marmer hetzelfde maken.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4">Onze <span class="gold-accent">Collectie</span></h2> |
|
|
<div class="marble-divider mx-auto w-1/3"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="marble-texture rounded-lg overflow-hidden group"> |
|
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600210492493-0946911123ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80')"></div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Noir Absolute</h3> |
|
|
<p class="text-gray-300 mb-4">Diepzwart marmer met subtiele goudaderen</p> |
|
|
<button class="text-sm gold-accent border-b border-transparent hover:border-yellow-600 transition duration-300">Meer details</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="marble-texture rounded-lg overflow-hidden group"> |
|
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1601593769260-84c6c2d8b8f2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"></div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Eclipse</h3> |
|
|
<p class="text-gray-300 mb-4">Dramatische witte aderen op diepzwarte achtergrond</p> |
|
|
<button class="text-sm gold-accent border-b border-transparent hover:border-yellow-600 transition duration-300">Meer details</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="marble-texture rounded-lg overflow-hidden group"> |
|
|
<div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600566752226-555737adf0e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"></div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Midnight Vein</h3> |
|
|
<p class="text-gray-300 mb-4">Complex aderpatroon met goud- en zilvertinten</p> |
|
|
<button class="text-sm gold-accent border-b border-transparent hover:border-yellow-600 transition duration-300">Meer details</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4"> |
|
|
<div class="container mx-auto marble-texture rounded-2xl p-12 text-center max-w-5xl"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Klaar om uw ruimte te transformeren?</h2> |
|
|
<p class="text-xl mb-8 text-gray-300 max-w-3xl mx-auto">Laat u inspireren door onze zwarte marmeren collectie en creëer een tijdloze luxe uitstraling.</p> |
|
|
<button class="px-10 py-4 bg-yellow-800 bg-opacity-30 border border-yellow-800 text-white rounded-full hover:bg-opacity-50 transition duration-300 text-lg"> |
|
|
Maak een afspraak <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="marble-texture py-12 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-10"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold gold-accent mb-4">NoirMarbre</h3> |
|
|
<p class="text-gray-300">Gespecialiseerd in exclusieve zwarte marmeren producten sinds 1995.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Navigatie</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Collectie</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Projecten</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Over Ons</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Contact</h4> |
|
|
<ul class="space-y-2 text-gray-300"> |
|
|
<li><i class="fas fa-map-marker-alt gold-accent mr-2"></i> Marmerstraat 45, 1000 Brussel</li> |
|
|
<li><i class="fas fa-phone gold-accent mr-2"></i> +32 123 45 67 89</li> |
|
|
<li><i class="fas fa-envelope gold-accent mr-2"></i> [email protected]</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Volg Ons</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition duration-300 text-xl"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition duration-300 text-xl"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition duration-300 text-xl"><i class="fab fa-pinterest-p"></i></a> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition duration-300 text-xl"><i class="fab fa-linkedin-in"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="marble-divider mt-12 w-full"></div> |
|
|
<div class="text-center pt-8 text-gray-400"> |
|
|
<p>© 2023 NoirMarbre. Alle rechten voorbehouden.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const mobileMenuButton = document.querySelector('.md\\:hidden button'); |
|
|
const mobileMenu = document.querySelector('.md\\:hidden + .md\\:flex'); |
|
|
|
|
|
if(mobileMenuButton) { |
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
if(mobileMenu) { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if(targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if(targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jitware/site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
