Add 2 files
Browse files- README.md +7 -5
- index.html +263 -19
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
sdk: static
|
7 |
pinned: false
|
|
|
|
|
8 |
---
|
9 |
|
10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
1 |
---
|
2 |
+
title: site
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: red
|
5 |
+
colorTo: purple
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
+
tags:
|
9 |
+
- deepsite
|
10 |
---
|
11 |
|
12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
@@ -1,19 +1,263 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="nl">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>Luxe Zwart Marmer</title>
|
7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
9 |
+
<style>
|
10 |
+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
|
11 |
+
|
12 |
+
body {
|
13 |
+
font-family: 'Montserrat', sans-serif;
|
14 |
+
background-color: #0a0a0a;
|
15 |
+
color: #e0e0e0;
|
16 |
+
}
|
17 |
+
|
18 |
+
.marble-bg {
|
19 |
+
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');
|
20 |
+
background-size: cover;
|
21 |
+
background-position: center;
|
22 |
+
background-attachment: fixed;
|
23 |
+
position: relative;
|
24 |
+
}
|
25 |
+
|
26 |
+
.marble-bg::before {
|
27 |
+
content: '';
|
28 |
+
position: absolute;
|
29 |
+
top: 0;
|
30 |
+
left: 0;
|
31 |
+
width: 100%;
|
32 |
+
height: 100%;
|
33 |
+
background: rgba(10, 10, 10, 0.7);
|
34 |
+
}
|
35 |
+
|
36 |
+
.marble-texture {
|
37 |
+
background: linear-gradient(135deg, rgba(30, 30, 30, 0.9) 0%, rgba(50, 50, 50, 0.7) 100%);
|
38 |
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
39 |
+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
|
40 |
+
backdrop-filter: blur(8px);
|
41 |
+
-webkit-backdrop-filter: blur(8px);
|
42 |
+
}
|
43 |
+
|
44 |
+
.gold-accent {
|
45 |
+
color: #d4af37;
|
46 |
+
border-color: #d4af37;
|
47 |
+
}
|
48 |
+
|
49 |
+
h1, h2, h3 {
|
50 |
+
font-family: 'Playfair Display', serif;
|
51 |
+
}
|
52 |
+
|
53 |
+
.marble-divider {
|
54 |
+
height: 2px;
|
55 |
+
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
|
56 |
+
margin: 2rem 0;
|
57 |
+
}
|
58 |
+
</style>
|
59 |
+
</head>
|
60 |
+
<body class="marble-bg min-h-screen">
|
61 |
+
<div class="marble-bg min-h-screen">
|
62 |
+
<!-- Navigatie -->
|
63 |
+
<nav class="marble-texture fixed w-full z-50">
|
64 |
+
<div class="container mx-auto px-6 py-4">
|
65 |
+
<div class="flex items-center justify-between">
|
66 |
+
<div class="text-2xl font-bold gold-accent">
|
67 |
+
<i class="fas fa-gem mr-2"></i> NoirMarbre
|
68 |
+
</div>
|
69 |
+
<div class="hidden md:flex space-x-8">
|
70 |
+
<a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a>
|
71 |
+
<a href="#" class="text-gray-300 hover:text-white transition duration-300">Collectie</a>
|
72 |
+
<a href="#" class="text-gray-300 hover:text-white transition duration-300">Over Ons</a>
|
73 |
+
<a href="#" class="text-gray-300 hover:text-white transition duration-300">Contact</a>
|
74 |
+
</div>
|
75 |
+
<div class="md:hidden">
|
76 |
+
<button class="text-gray-300 focus:outline-none">
|
77 |
+
<i class="fas fa-bars text-2xl"></i>
|
78 |
+
</button>
|
79 |
+
</div>
|
80 |
+
</div>
|
81 |
+
</div>
|
82 |
+
</nav>
|
83 |
+
|
84 |
+
<!-- Hero Sectie -->
|
85 |
+
<section class="pt-32 pb-20 px-4">
|
86 |
+
<div class="container mx-auto text-center">
|
87 |
+
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-white">Zwarte Marmeren <span class="gold-accent">Elegantie</span></h1>
|
88 |
+
<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>
|
89 |
+
<div class="flex justify-center space-x-4">
|
90 |
+
<button class="px-8 py-3 bg-transparent border gold-accent rounded-full hover:bg-yellow-800 hover:bg-opacity-20 transition duration-300">
|
91 |
+
Bekijk Collectie
|
92 |
+
</button>
|
93 |
+
<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">
|
94 |
+
Contacteer Ons
|
95 |
+
</button>
|
96 |
+
</div>
|
97 |
+
</div>
|
98 |
+
</section>
|
99 |
+
|
100 |
+
<!-- Hoogtepunten -->
|
101 |
+
<section class="py-20 px-4">
|
102 |
+
<div class="container mx-auto">
|
103 |
+
<div class="text-center mb-16">
|
104 |
+
<h2 class="text-4xl font-bold mb-4">Exclusieve <span class="gold-accent">Kenmerken</span></h2>
|
105 |
+
<div class="marble-divider mx-auto w-1/3"></div>
|
106 |
+
<p class="max-w-2xl mx-auto text-gray-300">Onze zwarte marmeren producten combineren natuurlijke schoonheid met vakmanschap van de hoogste kwaliteit.</p>
|
107 |
+
</div>
|
108 |
+
|
109 |
+
<div class="grid md:grid-cols-3 gap-10">
|
110 |
+
<div class="marble-texture p-8 rounded-lg hover:shadow-lg transition duration-500">
|
111 |
+
<div class="text-4xl gold-accent mb-4">
|
112 |
+
<i class="fas fa-mountain"></i>
|
113 |
+
</div>
|
114 |
+
<h3 class="text-2xl font-bold mb-3">100% Natuurlijk</h3>
|
115 |
+
<p class="text-gray-300">Gewonnen uit de beste marmergroeven ter wereld, met aandacht voor duurzaamheid.</p>
|
116 |
+
</div>
|
117 |
+
|
118 |
+
<div class="marble-texture p-8 rounded-lg hover:shadow-lg transition duration-500">
|
119 |
+
<div class="text-4xl gold-accent mb-4">
|
120 |
+
<i class="fas fa-hammer"></i>
|
121 |
+
</div>
|
122 |
+
<h3 class="text-2xl font-bold mb-3">Handgemaakt</h3>
|
123 |
+
<p class="text-gray-300">Elk stuk wordt met precisie bewerkt door onze ervaren vakmensen.</p>
|
124 |
+
</div>
|
125 |
+
|
126 |
+
<div class="marble-texture p-8 rounded-lg hover:shadow-lg transition duration-500">
|
127 |
+
<div class="text-4xl gold-accent mb-4">
|
128 |
+
<i class="fas fa-award"></i>
|
129 |
+
</div>
|
130 |
+
<h3 class="text-2xl font-bold mb-3">Exclusief Design</h3>
|
131 |
+
<p class="text-gray-300">Unieke patronen die geen enkel stuk marmer hetzelfde maken.</p>
|
132 |
+
</div>
|
133 |
+
</div>
|
134 |
+
</div>
|
135 |
+
</section>
|
136 |
+
|
137 |
+
<!-- Galerij -->
|
138 |
+
<section class="py-20 px-4">
|
139 |
+
<div class="container mx-auto">
|
140 |
+
<div class="text-center mb-16">
|
141 |
+
<h2 class="text-4xl font-bold mb-4">Onze <span class="gold-accent">Collectie</span></h2>
|
142 |
+
<div class="marble-divider mx-auto w-1/3"></div>
|
143 |
+
</div>
|
144 |
+
|
145 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
146 |
+
<div class="marble-texture rounded-lg overflow-hidden group">
|
147 |
+
<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>
|
148 |
+
<div class="p-6">
|
149 |
+
<h3 class="text-xl font-bold mb-2">Noir Absolute</h3>
|
150 |
+
<p class="text-gray-300 mb-4">Diepzwart marmer met subtiele goudaderen</p>
|
151 |
+
<button class="text-sm gold-accent border-b border-transparent hover:border-yellow-600 transition duration-300">Meer details</button>
|
152 |
+
</div>
|
153 |
+
</div>
|
154 |
+
|
155 |
+
<div class="marble-texture rounded-lg overflow-hidden group">
|
156 |
+
<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>
|
157 |
+
<div class="p-6">
|
158 |
+
<h3 class="text-xl font-bold mb-2">Eclipse</h3>
|
159 |
+
<p class="text-gray-300 mb-4">Dramatische witte aderen op diepzwarte achtergrond</p>
|
160 |
+
<button class="text-sm gold-accent border-b border-transparent hover:border-yellow-600 transition duration-300">Meer details</button>
|
161 |
+
</div>
|
162 |
+
</div>
|
163 |
+
|
164 |
+
<div class="marble-texture rounded-lg overflow-hidden group">
|
165 |
+
<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>
|
166 |
+
<div class="p-6">
|
167 |
+
<h3 class="text-xl font-bold mb-2">Midnight Vein</h3>
|
168 |
+
<p class="text-gray-300 mb-4">Complex aderpatroon met goud- en zilvertinten</p>
|
169 |
+
<button class="text-sm gold-accent border-b border-transparent hover:border-yellow-600 transition duration-300">Meer details</button>
|
170 |
+
</div>
|
171 |
+
</div>
|
172 |
+
</div>
|
173 |
+
</div>
|
174 |
+
</section>
|
175 |
+
|
176 |
+
<!-- CTA Sectie -->
|
177 |
+
<section class="py-20 px-4">
|
178 |
+
<div class="container mx-auto marble-texture rounded-2xl p-12 text-center max-w-5xl">
|
179 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-6">Klaar om uw ruimte te transformeren?</h2>
|
180 |
+
<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>
|
181 |
+
<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">
|
182 |
+
Maak een afspraak <i class="fas fa-arrow-right ml-2"></i>
|
183 |
+
</button>
|
184 |
+
</div>
|
185 |
+
</section>
|
186 |
+
|
187 |
+
<!-- Footer -->
|
188 |
+
<footer class="marble-texture py-12 px-4">
|
189 |
+
<div class="container mx-auto">
|
190 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-10">
|
191 |
+
<div>
|
192 |
+
<h3 class="text-xl font-bold gold-accent mb-4">NoirMarbre</h3>
|
193 |
+
<p class="text-gray-300">Gespecialiseerd in exclusieve zwarte marmeren producten sinds 1995.</p>
|
194 |
+
</div>
|
195 |
+
<div>
|
196 |
+
<h4 class="text-lg font-semibold mb-4">Navigatie</h4>
|
197 |
+
<ul class="space-y-2">
|
198 |
+
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a></li>
|
199 |
+
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Collectie</a></li>
|
200 |
+
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Projecten</a></li>
|
201 |
+
<li><a href="#" class="text-gray-300 hover:text-white transition duration-300">Over Ons</a></li>
|
202 |
+
</ul>
|
203 |
+
</div>
|
204 |
+
<div>
|
205 |
+
<h4 class="text-lg font-semibold mb-4">Contact</h4>
|
206 |
+
<ul class="space-y-2 text-gray-300">
|
207 |
+
<li><i class="fas fa-map-marker-alt gold-accent mr-2"></i> Marmerstraat 45, 1000 Brussel</li>
|
208 |
+
<li><i class="fas fa-phone gold-accent mr-2"></i> +32 123 45 67 89</li>
|
209 |
+
<li><i class="fas fa-envelope gold-accent mr-2"></i> [email protected]</li>
|
210 |
+
</ul>
|
211 |
+
</div>
|
212 |
+
<div>
|
213 |
+
<h4 class="text-lg font-semibold mb-4">Volg Ons</h4>
|
214 |
+
<div class="flex space-x-4">
|
215 |
+
<a href="#" class="text-gray-300 hover:text-white transition duration-300 text-xl"><i class="fab fa-facebook-f"></i></a>
|
216 |
+
<a href="#" class="text-gray-300 hover:text-white transition duration-300 text-xl"><i class="fab fa-instagram"></i></a>
|
217 |
+
<a href="#" class="text-gray-300 hover:text-white transition duration-300 text-xl"><i class="fab fa-pinterest-p"></i></a>
|
218 |
+
<a href="#" class="text-gray-300 hover:text-white transition duration-300 text-xl"><i class="fab fa-linkedin-in"></i></a>
|
219 |
+
</div>
|
220 |
+
</div>
|
221 |
+
</div>
|
222 |
+
<div class="marble-divider mt-12 w-full"></div>
|
223 |
+
<div class="text-center pt-8 text-gray-400">
|
224 |
+
<p>© 2023 NoirMarbre. Alle rechten voorbehouden.</p>
|
225 |
+
</div>
|
226 |
+
</div>
|
227 |
+
</footer>
|
228 |
+
</div>
|
229 |
+
|
230 |
+
<script>
|
231 |
+
// Eenvoudige JavaScript voor mobiel menu (optioneel)
|
232 |
+
document.addEventListener('DOMContentLoaded', function() {
|
233 |
+
const mobileMenuButton = document.querySelector('.md\\:hidden button');
|
234 |
+
const mobileMenu = document.querySelector('.md\\:hidden + .md\\:flex');
|
235 |
+
|
236 |
+
if(mobileMenuButton) {
|
237 |
+
mobileMenuButton.addEventListener('click', function() {
|
238 |
+
if(mobileMenu) {
|
239 |
+
mobileMenu.classList.toggle('hidden');
|
240 |
+
}
|
241 |
+
});
|
242 |
+
}
|
243 |
+
|
244 |
+
// Smooth scroll voor ankerlinks
|
245 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
246 |
+
anchor.addEventListener('click', function (e) {
|
247 |
+
e.preventDefault();
|
248 |
+
|
249 |
+
const targetId = this.getAttribute('href');
|
250 |
+
if(targetId === '#') return;
|
251 |
+
|
252 |
+
const targetElement = document.querySelector(targetId);
|
253 |
+
if(targetElement) {
|
254 |
+
targetElement.scrollIntoView({
|
255 |
+
behavior: 'smooth'
|
256 |
+
});
|
257 |
+
}
|
258 |
+
});
|
259 |
+
});
|
260 |
+
});
|
261 |
+
</script>
|
262 |
+
<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>
|
263 |
+
</html>
|