jitware commited on
Commit
f9d128f
·
verified ·
1 Parent(s): 8cdfd5e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +263 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Site
3
- emoji: 📊
4
- colorFrom: purple
5
- colorTo: green
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
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>&copy; 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>