Hugging Face's logo

Spaces:
joelpdev
/
sebbe-3
Running

App Files Community
joelpdev commited on
Commit
3ef05d3
·
verified ·
1 Parent(s): 475106a

- Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +388 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sebbe 3
3
- emoji: 📊
4
  colorFrom: pink
5
- colorTo: yellow
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: sebbe-3
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: green
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,388 @@
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="sv">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Wilhelms Finsnickeri</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
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 50: '#f0f9ff',
17
+ 100: '#e0f2fe',
18
+ 200: '#bae6fd',
19
+ 300: '#7dd3fc',
20
+ 400: '#38bdf8',
21
+ 500: '#0ea5e9',
22
+ 600: '#0284c7',
23
+ 700: '#0369a1',
24
+ 800: '#075985',
25
+ 900: '#0c4a6e',
26
+ },
27
+ wood: {
28
+ 50: '#f8f4f0',
29
+ 100: '#f0e9e2',
30
+ 200: '#e1d3c5',
31
+ 300: '#d2bdae',
32
+ 400: '#c3a797',
33
+ 500: '#b49180',
34
+ 600: '#a57b69',
35
+ 700: '#966552',
36
+ 800: '#874f3b',
37
+ 900: '#783924',
38
+ }
39
+ },
40
+ fontFamily: {
41
+ 'serif': ['Playfair Display', 'serif'],
42
+ 'sans': ['Open Sans', 'sans-serif']
43
+ }
44
+ }
45
+ }
46
+ }
47
+ </script>
48
+ <style>
49
+ .project-card:hover .project-image {
50
+ transform: scale(1.05);
51
+ }
52
+ .project-card:hover .project-overlay {
53
+ opacity: 0.9;
54
+ }
55
+ .wood-texture {
56
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJ3b29kIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNkMmJkYWEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjd29vZCkiLz48L3N2Zz4=');
57
+ }
58
+ .hero-pattern {
59
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJncmFpbiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjhmNGYwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWluKSIvPjwvc3ZnPg==');
60
+ }
61
+ .transition-all {
62
+ transition: all 0.3s ease-in-out;
63
+ }
64
+ .animate-fade-in {
65
+ animation: fadeIn 0.8s ease-out;
66
+ }
67
+ @keyframes fadeIn {
68
+ from { opacity: 0; transform: translateY(20px); }
69
+ to { opacity: 1; transform: translateY(0); }
70
+ }
71
+ </style>
72
+ </head>
73
+ <body class="font-sans bg-wood-50 text-wood-900">
74
+ <!-- Header -->
75
+ <header class="bg-white shadow-md sticky top-0 z-50">
76
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
77
+ <div class="flex items-center">
78
+ <div class="w-10 h-10 rounded-full bg-primary-600 flex items-center justify-center mr-3">
79
+ <i class="fas fa-tools text-white text-xl"></i>
80
+ </div>
81
+ <h1 class="text-2xl font-serif font-bold text-wood-800">Wilhelms Finsnickeri</h1>
82
+ </div>
83
+ <nav class="hidden md:flex space-x-8">
84
+ <a href="#" class="text-wood-700 hover:text-primary-600 font-medium">Hem</a>
85
+ <a href="#" class="text-wood-700 hover:text-primary-600 font-medium">Projekt</a>
86
+ <a href="#" class="text-wood-700 hover:text-primary-600 font-medium">Om mig</a>
87
+ <a href="#" class="text-wood-700 hover:text-primary-600 font-medium">Kontakt</a>
88
+ </nav>
89
+ <button class="md:hidden text-wood-700">
90
+ <i class="fas fa-bars text-2xl"></i>
91
+ </button>
92
+ </div>
93
+ </header>
94
+
95
+ <!-- Hero Section -->
96
+ <section class="hero-pattern py-16 md:py-24">
97
+ <div class="container mx-auto px-4 text-center">
98
+ <h2 class="text-4xl md:text-6xl font-serif font-bold text-wood-900 mb-6 animate-fade-in">Hantverk med hjärta och själ</h2>
99
+ <p class="text-xl text-wood-700 max-w-2xl mx-auto mb-10 animate-fade-in">Traditionellt snickeri med modern design och omsorg i varje detalj</p>
100
+ <div class="animate-fade-in">
101
+ <a href="#projects" class="inline-block bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-8 rounded-full shadow-lg transition-all transform hover:scale-105">
102
+ Se senaste projekt
103
+ </a>
104
+ </div>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Featured Projects -->
109
+ <section id="projects" class="py-16 bg-white">
110
+ <div class="container mx-auto px-4">
111
+ <div class="text-center mb-16">
112
+ <h2 class="text-3xl md:text-4xl font-serif font-bold text-wood-900 mb-4">Senaste projekt</h2>
113
+ <div class="w-24 h-1 bg-primary-500 mx-auto"></div>
114
+ </div>
115
+
116
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
117
+ <!-- Project 1 -->
118
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl">
119
+ <div class="relative overflow-hidden">
120
+ <img src="https://wilhelmsfinsnickeri.se/assets/images/J-sk%C3%A5p/1.jpg" alt="Väggskåp" class="w-full h-64 object-cover project-image transition-all duration-500">
121
+ <div class="project-overlay absolute inset-0 bg-primary-600 bg-opacity-0 flex items-center justify-center transition-all duration-300">
122
+ <a href="https://wilhelmsfinsnickeri.se/sk%C3%A5p/2025/02/21/v%C3%A4ggsk%C3%A5p.html" class="text-white bg-wood-800 bg-opacity-80 hover:bg-opacity-100 py-2 px-6 rounded-full font-medium transition-all">
123
+ Visa projekt
124
+ </a>
125
+ </div>
126
+ </div>
127
+ <div class="p-6">
128
+ <span class="text-sm text-wood-500">21 feb 2025</span>
129
+ <h3 class="text-xl font-serif font-bold text-wood-900 mt-2 mb-3">Väggskåp</h3>
130
+ <p class="text-wood-700 mb-4">Ett elegant väggskåp med modern design och praktisk funktionalitet.</p>
131
+ <a href="https://wilhelmsfinsnickeri.se/sk%C3%A5p/2025/02/21/v%C3%A4ggsk%C3%A5p.html" class="text-primary-600 hover:text-primary-800 font-medium flex items-center">
132
+ Läs mer <i class="fas fa-arrow-right ml-2 text-sm"></i>
133
+ </a>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Project 2 -->
138
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl">
139
+ <div class="relative overflow-hidden">
140
+ <img src="https://wilhelmsfinsnickeri.se/assets/images/2024-12-24-v%C3%A4ggsk%C3%A5p/5.jpg" alt="Väggskåp" class="w-full h-64 object-cover project-image transition-all duration-500">
141
+ <div class="project-overlay absolute inset-0 bg-primary-600 bg-opacity-0 flex items-center justify-center transition-all duration-300">
142
+ <a href="https://wilhelmsfinsnickeri.se/sk%C3%A5p/2024/12/24/v%C3%A4ggsk%C3%A5p.html" class="text-white bg-wood-800 bg-opacity-80 hover:bg-opacity-100 py-2 px-6 rounded-full font-medium transition-all">
143
+ Visa projekt
144
+ </a>
145
+ </div>
146
+ </div>
147
+ <div class="p-6">
148
+ <span class="text-sm text-wood-500">24 dec 2024</span>
149
+ <h3 class="text-xl font-serif font-bold text-wood-900 mt-2 mb-3">Väggskåp</h3>
150
+ <p class="text-wood-700 mb-4">Traditionell hantverksteknik möter modern estetik i detta skåp.</p>
151
+ <a href="https://wilhelmsfinsnickeri.se/sk%C3%A5p/2024/12/24/v%C3%A4ggsk%C3%A5p.html" class="text-primary-600 hover:text-primary-800 font-medium flex items-center">
152
+ Läs mer <i class="fas fa-arrow-right ml-2 text-sm"></i>
153
+ </a>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Project 3 -->
158
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl">
159
+ <div class="relative overflow-hidden">
160
+ <img src="https://wilhelmsfinsnickeri.se/assets/images/J-skrin/cover.jpg" alt="Skrin" class="w-full h-64 object-cover project-image transition-all duration-500">
161
+ <div class="project-overlay absolute inset-0 bg-primary-600 bg-opacity-0 flex items-center justify-center transition-all duration-300">
162
+ <a href="https://wilhelmsfinsnickeri.se/skrin/2024/07/05/j-skrin.html" class="text-white bg-wood-800 bg-opacity-80 hover:bg-opacity-100 py-2 px-6 rounded-full font-medium transition-all">
163
+ Visa projekt
164
+ </a>
165
+ </div>
166
+ </div>
167
+ <div class="p-6">
168
+ <span class="text-sm text-wood-500">5 jul 2024</span>
169
+ <h3 class="text-xl font-serif font-bold text-wood-900 mt-2 mb-3">Skrin</h3>
170
+ <p class="text-wood-700 mb-4">Ett vackert snickeri med detaljerad utsmyckning och hög kvalitet.</p>
171
+ <a href="https://wilhelmsfinsnickeri.se/skrin/2024/07/05/j-skrin.html" class="text-primary-600 hover:text-primary-800 font-medium flex items-center">
172
+ Läs mer <i class="fas fa-arrow-right ml-2 text-sm"></i>
173
+ </a>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Project 4 -->
178
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl">
179
+ <div class="relative overflow-hidden">
180
+ <img src="https://wilhelmsfinsnickeri.se/assets/images/dinas-ask/cover.jpg" alt="Smyckesskrin" class="w-full h-64 object-cover project-image transition-all duration-500">
181
+ <div class="project-overlay absolute inset-0 bg-primary-600 bg-opacity-0 flex items-center justify-center transition-all duration-300">
182
+ <a href="https://wilhelmsfinsnickeri.se/skrin/2024/04/01/dinas-ask.html" class="text-white bg-wood-800 bg-opacity-80 hover:bg-opacity-100 py-2 px-6 rounded-full font-medium transition-all">
183
+ Visa projekt
184
+ </a>
185
+ </div>
186
+ </div>
187
+ <div class="p-6">
188
+ <span class="text-sm text-wood-500">1 apr 2024</span>
189
+ <h3 class="text-xl font-serif font-bold text-wood-900 mt-2 mb-3">Smyckesskrin</h3>
190
+ <p class="text-wood-700 mb-4">Ett exklusivt smyckesskrin med fina detaljer och hög kvalitet.</p>
191
+ <a href="https://wilhelmsfinsnickeri.se/skrin/2024/04/01/dinas-ask.html" class="text-primary-600 hover:text-primary-800 font-medium flex items-center">
192
+ Läs mer <i class="fas fa-arrow-right ml-2 text-sm"></i>
193
+ </a>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Project 5 -->
198
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl">
199
+ <div class="relative overflow-hidden">
200
+ <img src="https://wilhelmsfinsnickeri.se/assets/images/yamasuke/cover.jpg" alt="Yamasuke" class="w-full h-64 object-cover project-image transition-all duration-500">
201
+ <div class="project-overlay absolute inset-0 bg-primary-600 bg-opacity-0 flex items-center justify-center transition-all duration-300">
202
+ <a href="https://wilhelmsfinsnickeri.se/jekyll/update/2024/03/22/yamasuke.html" class="text-white bg-wood-800 bg-opacity-80 hover:bg-opacity-100 py-2 px-6 rounded-full font-medium transition-all">
203
+ Visa projekt
204
+ </a>
205
+ </div>
206
+ </div>
207
+ <div class="p-6">
208
+ <span class="text-sm text-wood-500">22 mar 2024</span>
209
+ <h3 class="text-xl font-serif font-bold text-wood-900 mt-2 mb-3">Yamasuke</h3>
210
+ <p class="text-wood-700 mb-4">En unik design med japanska influenser och modern teknik.</p>
211
+ <a href="https://wilhelmsfinsnickeri.se/jekyll/update/2024/03/22/yamasuke.html" class="text-primary-600 hover:text-primary-800 font-medium flex items-center">
212
+ Läs mer <i class="fas fa-arrow-right ml-2 text-sm"></i>
213
+ </a>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Project 6 -->
218
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl">
219
+ <div class="relative overflow-hidden">
220
+ <img src="https://wilhelmsfinsnickeri.se/assets/images/subwoofer/cover.jpg" alt="Baslåda" class="w-full h-64 object-cover project-image transition-all duration-500">
221
+ <div class="project-overlay absolute inset-0 bg-primary-600 bg-opacity-0 flex items-center justify-center transition-all duration-300">
222
+ <a href="https://wilhelmsfinsnickeri.se/hifi/2023/07/07/basl%C3%A5da.html" class="text-white bg-wood-800 bg-opacity-80 hover:bg-opacity-100 py-2 px-6 rounded-full font-medium transition-all">
223
+ Visa projekt
224
+ </a>
225
+ </div>
226
+ </div>
227
+ <div class="p-6">
228
+ <span class="text-sm text-wood-500">7 jul 2023</span>
229
+ <h3 class="text-xl font-serif font-bold text-wood-900 mt-2 mb-3">Baslåda</h3>
230
+ <p class="text-wood-700 mb-4">En akustiskt optimerad baslåda för den perfekta ljudupplevelsen.</p>
231
+ <a href="https://wilhelmsfinsnickeri.se/hifi/2023/07/07/basl%C3%A5da.html" class="text-primary-600 hover:text-primary-800 font-medium flex items-center">
232
+ Läs mer <i class="fas fa-arrow-right ml-2 text-sm"></i>
233
+ </a>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="text-center mt-12">
239
+ <a href="#" class="inline-block bg-wood-800 hover:bg-wood-900 text-white font-medium py-3 px-8 rounded-full shadow transition-all transform hover:scale-105">
240
+ Visa alla projekt
241
+ </a>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ <!-- About Section -->
247
+ <section class="py-16 bg-wood-100 wood-texture">
248
+ <div class="container mx-auto px-4">
249
+ <div class="flex flex-col md:flex-row items-center">
250
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
251
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96"></div>
252
+ </div>
253
+ <div class="md:w-1/2">
254
+ <h2 class="text-3xl md:text-4xl font-serif font-bold text-wood-900 mb-6">Om Wilhelms Finsnickeri</h2>
255
+ <p class="text-wood-700 mb-6">Wilhelm har arbetat med trä sedan 2010 och specialiserat sig på fina snickeriarbeten med personlig touch. Varje projekt är unikt och skapat med passion för detaljer och kvalitet.</p>
256
+ <p class="text-wood-700 mb-6">Med bakgrund inom möbelkonstruktion och en kärlek för traditionellt hantverk kombinerar Wilhelm moderna tekniker med klassiska snickerimetoder för att skapa funktionella och vackra objekt.</p>
257
+ <div class="flex flex-wrap gap-4">
258
+ <div class="flex items-center">
259
+ <i class="fas fa-check-circle text-primary-600 mr-2"></i>
260
+ <span>Handgjorda projekt</span>
261
+ </div>
262
+ <div class="flex items-center">
263
+ <i class="fas fa-check-circle text-primary-600 mr-2"></i>
264
+ <span>Hållbarhet i fokus</span>
265
+ </div>
266
+ <div class="flex items-center">
267
+ <i class="fas fa-check-circle text-primary-600 mr-2"></i>
268
+ <span>Anpassade lösningar</span>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- Contact Section -->
277
+ <section class="py-16 bg-white">
278
+ <div class="container mx-auto px-4">
279
+ <div class="text-center mb-16">
280
+ <h2 class="text-3xl md:text-4xl font-serif font-bold text-wood-900 mb-4">Kontakta mig</h2>
281
+ <p class="text-wood-700 max-w-2xl mx-auto">Har du ett projekt du vill diskutera eller frågor om mitt arbete? Hör av dig!</p>
282
+ </div>
283
+
284
+ <div class="max-w-4xl mx-auto bg-wood-50 rounded-xl shadow-lg p-8">
285
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
286
+ <div>
287
+ <h3 class="text-xl font-serif font-bold text-wood-900 mb-4">Kontaktinformation</h3>
288
+ <div class="space-y-4">
289
+ <div class="flex items-start">
290
+ <i class="fas fa-envelope text-primary-600 mt-1 mr-4"></i>
291
+ <div>
292
+ <h4 class="font-medium text-wood-900">E-post</h4>
293
+ <p class="text-wood-700">[email protected]</p>
294
+ </div>
295
+ </div>
296
+ <div class="flex items-start">
297
+ <i class="fas fa-phone text-primary-600 mt-1 mr-4"></i>
298
+ <div>
299
+ <h4 class="font-medium text-wood-900">Telefon</h4>
300
+ <p class="text-wood-700">+46 700 123 456</p>
301
+ </div>
302
+ </div>
303
+ <div class="flex items-start">
304
+ <i class="fas fa-map-marker-alt text-primary-600 mt-1 mr-4"></i>
305
+ <div>
306
+ <h4 class="font-medium text-wood-900">Adress</h4>
307
+ <p class="text-wood-700">Snickarvägen 12<br>123 45 Snickarbyn</p>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ <div>
313
+ <h3 class="text-xl font-serif font-bold text-wood-900 mb-4">Skicka ett meddelande</h3>
314
+ <form>
315
+ <div class="mb-4">
316
+ <input type="text" placeholder="Ditt namn" class="w-full px-4 py-3 rounded-lg border border-wood-300 focus:outline-none focus:ring-2 focus:ring-primary-500">
317
+ </div>
318
+ <div class="mb-4">
319
+ <input type="email" placeholder="Din e-post" class="w-full px-4 py-3 rounded-lg border border-wood-300 focus:outline-none focus:ring-2 focus:ring-primary-500">
320
+ </div>
321
+ <div class="mb-4">
322
+ <textarea placeholder="Ditt meddelande" rows="4" class="w-full px-4 py-3 rounded-lg border border-wood-300 focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
323
+ </div>
324
+ <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-all">
325
+ Skicka meddelande
326
+ </button>
327
+ </form>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- Footer -->
335
+ <footer class="bg-wood-900 text-wood-100 py-12">
336
+ <div class="container mx-auto px-4">
337
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
338
+ <div>
339
+ <h3 class="text-xl font-serif font-bold mb-4">Wilhelms Finsnickeri</h3>
340
+ <p class="text-wood-300 mb-4">Traditionellt snickeri med modern design och omsorg i varje detalj.</p>
341
+ <div class="flex space-x-4">
342
+ <a href="#" class="text-wood-300 hover:text-white">
343
+ <i class="fab fa-instagram"></i>
344
+ </a>
345
+ <a href="#" class="text-wood-300 hover:text-white">
346
+ <i class="fab fa-facebook-f"></i>
347
+ </a>
348
+ <a href="#" class="text-wood-300 hover:text-white">
349
+ <i class="fab fa-pinterest-p"></i>
350
+ </a>
351
+ </div>
352
+ </div>
353
+ <div>
354
+ <h4 class="text-lg font-serif font-bold mb-4">Snabblänkar</h4>
355
+ <ul class="space-y-2">
356
+ <li><a href="#" class="text-wood-300 hover:text-white">Hem</a></li>
357
+ <li><a href="#" class="text-wood-300 hover:text-white">Projekt</a></li>
358
+ <li><a href="#" class="text-wood-300 hover:text-white">Om mig</a></li>
359
+ <li><a href="#" class="text-wood-300 hover:text-white">Kontakt</a></li>
360
+ </ul>
361
+ </div>
362
+ <div>
363
+ <h4 class="text-lg font-serif font-bold mb-4">Projekttyper</h4>
364
+ <ul class="space-y-2">
365
+ <li><a href="#" class="text-wood-300 hover:text-white">Möbler</a></li>
366
+ <li><a href="#" class="text-wood-300 hover:text-white">Skåp & förvaring</a></li>
367
+ <li><a href="#" class="text-wood-300 hover:text-white">Skrin & askar</a></li>
368
+ <li><a href="#" class="text-wood-300 hover:text-white">HiFi-lösningar</a></li>
369
+ </ul>
370
+ </div>
371
+ <div>
372
+ <h4 class="text-lg font-serif font-bold mb-4">Nyhetsbrev</h4>
373
+ <p class="text-wood-300 mb-4">Få uppdateringar om nya projekt och erbjudanden.</p>
374
+ <form class="flex">
375
+ <input type="email" placeholder="Din e-post" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-wood-900">
376
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 rounded-r-lg">
377
+ <i class="fas fa-paper-plane"></i>
378
+ </button>
379
+ </form>
380
+ </div>
381
+ </div>
382
+ <div class="border-t border-wood-800 mt-10 pt-6 text-center text-wood-400">
383
+ <p>&copy; 2025 Wilhelms Finsnickeri. Alla rättigheter förbehållna.</p>
384
+ </div>
385
+ </div>
386
+ </footer>
387
+ <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=joelpdev/sebbe-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
388
+ </html>