Hugging Face's logo

Spaces:
carmoe
/
netzfreude
Running

App Files Community
carmoe commited on
Commit
647d12b
·
verified ·
1 Parent(s): 501fc88

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +585 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Netzfreude
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: netzfreude
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
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,585 @@
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="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pixelkraft | Digitale Lösungen mit Leidenschaft</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f9fa;
15
+ }
16
+
17
+ .hero-section {
18
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
19
+ url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80');
20
+ background-size: cover;
21
+ background-position: center;
22
+ background-repeat: no-repeat;
23
+ }
24
+
25
+ .hero-gradient {
26
+ background: linear-gradient(135deg, rgba(190, 30, 45, 0.9) 0%, rgba(120, 15, 25, 0.9) 100%);
27
+ }
28
+
29
+ .service-card:hover {
30
+ transform: translateY(-10px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32
+ }
33
+
34
+ .playful-element {
35
+ position: absolute;
36
+ width: 100px;
37
+ height: 100px;
38
+ background-color: #BE1E2D;
39
+ border-radius: 50%;
40
+ opacity: 0.1;
41
+ z-index: 0;
42
+ }
43
+
44
+ .nav-link:hover {
45
+ color: #BE1E2D !important;
46
+ }
47
+
48
+ .btn-primary {
49
+ background-color: #BE1E2D;
50
+ transition: all 0.3s ease;
51
+ }
52
+
53
+ .btn-primary:hover {
54
+ background-color: #9e1928;
55
+ transform: translateY(-2px);
56
+ }
57
+
58
+ .btn-outline {
59
+ border: 2px solid #BE1E2D;
60
+ color: #BE1E2D;
61
+ transition: all 0.3s ease;
62
+ }
63
+
64
+ .btn-outline:hover {
65
+ background-color: #BE1E2D;
66
+ color: white;
67
+ }
68
+
69
+ @keyframes fadeIn {
70
+ from { opacity: 0; transform: translateY(20px); }
71
+ to { opacity: 1; transform: translateY(0); }
72
+ }
73
+
74
+ .animate-fadeIn {
75
+ animation: fadeIn 0.8s ease forwards;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="text-gray-800">
80
+ <!-- Navigation -->
81
+ <nav class="bg-white shadow-md sticky top-0 z-50">
82
+ <div class="container mx-auto px-6 py-4">
83
+ <div class="flex items-center justify-between">
84
+ <div class="flex items-center">
85
+ <div class="w-12 h-12 rounded-full bg-gray-900 flex items-center justify-center mr-3">
86
+ <span class="text-white font-bold text-xl">PK</span>
87
+ </div>
88
+ <a href="#" class="text-2xl font-bold text-gray-900">Pixelkraft</a>
89
+ </div>
90
+
91
+ <div class="hidden md:flex items-center space-x-8">
92
+ <a href="#services" class="nav-link text-gray-600 hover:text-gray-900 transition">Leistungen</a>
93
+ <a href="#portfolio" class="nav-link text-gray-600 hover:text-gray-900 transition">Portfolio</a>
94
+ <a href="#about" class="nav-link text-gray-600 hover:text-gray-900 transition">Über uns</a>
95
+ <a href="#contact" class="nav-link text-gray-600 hover:text-gray-900 transition">Kontakt</a>
96
+ </div>
97
+
98
+ <button class="md:hidden focus:outline-none">
99
+ <i class="fas fa-bars text-2xl text-gray-600"></i>
100
+ </button>
101
+ </div>
102
+ </div>
103
+ </nav>
104
+
105
+ <!-- Hero Section -->
106
+ <section class="hero-section text-white py-20 md:py-32 relative overflow-hidden">
107
+ <div class="playful-element top-10 left-10"></div>
108
+ <div class="playful-element bottom-20 right-20"></div>
109
+ <div class="playful-element top-1/3 right-1/4"></div>
110
+
111
+ <div class="container mx-auto px-6 relative z-10">
112
+ <div class="max-w-3xl">
113
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Digitale Lösungen mit Leidenschaft</h1>
114
+ <p class="text-xl md:text-2xl mb-8">Wir gestalten, optimieren und entwickeln digitale Erlebnisse, die Ihre Marke strahlen lassen.</p>
115
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
116
+ <a href="#contact" class="btn-primary text-white font-semibold py-3 px-8 rounded-full text-center">Projekt starten</a>
117
+ <a href="#services" class="btn-outline bg-white bg-opacity-10 hover:bg-opacity-20 font-semibold py-3 px-8 rounded-full text-center">Unsere Leistungen</a>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- Services Section -->
124
+ <section id="services" class="py-20 bg-white">
125
+ <div class="container mx-auto px-6">
126
+ <div class="text-center mb-16">
127
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Unsere Leistungen</h2>
128
+ <p class="max-w-2xl mx-auto text-gray-600">Von der ersten Idee bis zur erfolgreichen Umsetzung - wir begleiten Sie durch den gesamten digitalen Prozess.</p>
129
+ </div>
130
+
131
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
132
+ <!-- Service 1 -->
133
+ <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300 relative overflow-hidden">
134
+ <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6">
135
+ <i class="fas fa-paint-brush text-2xl text-red-600"></i>
136
+ </div>
137
+ <h3 class="text-xl font-bold mb-3">Webdesign & Entwicklung</h3>
138
+ <p class="text-gray-600 mb-4">Individuelle Websites, die nicht nur gut aussehen, sondern auch Ihre Ziele erreichen.</p>
139
+ <ul class="space-y-2 text-gray-600">
140
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Responsive Design</li>
141
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> CMS Integration</li>
142
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> UI/UX Optimierung</li>
143
+ </ul>
144
+ </div>
145
+
146
+ <!-- Service 2 -->
147
+ <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
148
+ <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6">
149
+ <i class="fas fa-chart-line text-2xl text-red-600"></i>
150
+ </div>
151
+ <h3 class="text-xl font-bold mb-3">SEO & Online Marketing</h3>
152
+ <p class="text-gray-600 mb-4">Mehr Sichtbarkeit, mehr Traffic, mehr Kunden - durch strategische Suchmaschinenoptimierung.</p>
153
+ <ul class="space-y-2 text-gray-600">
154
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Keyword-Recherche</li>
155
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> OnPage-Optimierung</li>
156
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Content-Strategie</li>
157
+ </ul>
158
+ </div>
159
+
160
+ <!-- Service 3 -->
161
+ <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
162
+ <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6">
163
+ <i class="fas fa-camera text-2xl text-red-600"></i>
164
+ </div>
165
+ <h3 class="text-xl font-bold mb-3">Fotografie & Videoproduktion</h3>
166
+ <p class="text-gray-600 mb-4">Professionelle Bild- und Videoinhalte, die Ihre Marke authentisch präsentieren.</p>
167
+ <ul class="space-y-2 text-gray-600">
168
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Produktfotografie</li>
169
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Imagefilme</li>
170
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Social Media Content</li>
171
+ </ul>
172
+ </div>
173
+
174
+ <!-- Service 4 -->
175
+ <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
176
+ <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6">
177
+ <i class="fas fa-pen-fancy text-2xl text-red-600"></i>
178
+ </div>
179
+ <h3 class="text-xl font-bold mb-3">Grafikdesign & Branding</h3>
180
+ <p class="text-gray-600 mb-4">Einprägsame visuelle Identitäten, die Ihre Marke unverwechselbar machen.</p>
181
+ <ul class="space-y-2 text-gray-600">
182
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Logo-Design</li>
183
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Corporate Design</li>
184
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Printmedien</li>
185
+ </ul>
186
+ </div>
187
+
188
+ <!-- Service 5 -->
189
+ <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
190
+ <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6">
191
+ <i class="fas fa-keyboard text-2xl text-red-600"></i>
192
+ </div>
193
+ <h3 class="text-xl font-bold mb-3">Texten & Content Creation</h3>
194
+ <p class="text-gray-600 mb-4">Überzeugende Texte, die Ihre Zielgruppe ansprechen und zum Handeln bewegen.</p>
195
+ <ul class="space-y-2 text-gray-600">
196
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Webtexte</li>
197
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Blogartikel</li>
198
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Werbetexte</li>
199
+ </ul>
200
+ </div>
201
+
202
+ <!-- Service 6 -->
203
+ <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
204
+ <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6">
205
+ <i class="fas fa-headset text-2xl text-red-600"></i>
206
+ </div>
207
+ <h3 class="text-xl font-bold mb-3">Beratung & Strategie</h3>
208
+ <p class="text-gray-600 mb-4">Individuelle Digitalstrategien, die zu Ihrem Unternehmen und Ihren Zielen passen.</p>
209
+ <ul class="space-y-2 text-gray-600">
210
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Digitalstrategie</li>
211
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Social Media Beratung</li>
212
+ <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Workshops</li>
213
+ </ul>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Portfolio Section -->
220
+ <section id="portfolio" class="py-20 bg-gray-50">
221
+ <div class="container mx-auto px-6">
222
+ <div class="text-center mb-16">
223
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Ausgewählte Projekte</h2>
224
+ <p class="max-w-2xl mx-auto text-gray-600">Ein Blick auf unsere Arbeit zeigt mehr als tausend Worte.</p>
225
+ </div>
226
+
227
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
228
+ <!-- Project 1 -->
229
+ <div class="group relative overflow-hidden rounded-xl shadow-lg">
230
+ <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Webdesign Projekt" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
231
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-500 flex items-end p-6">
232
+ <div>
233
+ <h3 class="text-white text-xl font-bold mb-2">E-Commerce Plattform</h3>
234
+ <p class="text-gray-200">Umfassendes Shop-System mit individuellen Funktionen</p>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Project 2 -->
240
+ <div class="group relative overflow-hidden rounded-xl shadow-lg">
241
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Corporate Design" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
242
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-500 flex items-end p-6">
243
+ <div>
244
+ <h3 class="text-white text-xl font-bold mb-2">Corporate Relaunch</h3>
245
+ <p class="text-gray-200">Modernes Erscheinungsbild für etabliertes Unternehmen</p>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Project 3 -->
251
+ <div class="group relative overflow-hidden rounded-xl shadow-lg">
252
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="SEO Optimierung" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
253
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-500 flex items-end p-6">
254
+ <div>
255
+ <h3 class="text-white text-xl font-bold mb-2">SEO Kampagne</h3>
256
+ <p class="text-gray-200">+300% organischer Traffic in 6 Monaten</p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="text-center mt-12">
263
+ <a href="#" class="btn-outline font-semibold py-3 px-8 rounded-full inline-block">Mehr Projekte ansehen</a>
264
+ </div>
265
+ </div>
266
+ </section>
267
+
268
+ <!-- About Section -->
269
+ <section id="about" class="py-20 bg-white">
270
+ <div class="container mx-auto px-6">
271
+ <div class="flex flex-col lg:flex-row items-center">
272
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
273
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Wer wir sind</h2>
274
+ <p class="text-gray-600 mb-6">Pixelkraft ist eine Digitalagentur mit Sitz in Berlin, die sich auf ganzheitliche digitale Lösungen spezialisiert hat. Unser Team aus Designern, Entwicklern, Marketingspezialisten und Kreativen verbindet technische Kompetenz mit gestalterischem Feingefühl.</p>
275
+ <p class="text-gray-600 mb-8">Was uns antreibt? Die Leidenschaft für herausragende digitale Erlebnisse und der Anspruch, für jeden Kunden die beste Lösung zu finden - maßgeschneidert und zielgerichtet.</p>
276
+
277
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
278
+ <div class="flex items-center">
279
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4">
280
+ <i class="fas fa-trophy text-red-600"></i>
281
+ </div>
282
+ <div>
283
+ <h4 class="font-bold mb-1">15+ Auszeichnungen</h4>
284
+ <p class="text-sm text-gray-500">Für exzellentes Design</p>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="flex items-center">
289
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4">
290
+ <i class="fas fa-smile text-red-600"></i>
291
+ </div>
292
+ <div>
293
+ <h4 class="font-bold mb-1">120+ zufriedene Kunden</h4>
294
+ <p class="text-sm text-gray-500">In ganz Europa</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="lg:w-1/2 relative">
301
+ <div class="playful-element -top-10 -left-10 w-40 h-40"></div>
302
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Unser Team" class="rounded-xl shadow-xl relative z-10">
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Testimonials -->
309
+ <section class="py-20 bg-gray-50">
310
+ <div class="container mx-auto px-6">
311
+ <div class="text-center mb-16">
312
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Was unsere Kunden sagen</h2>
313
+ <p class="max-w-2xl mx-auto text-gray-600">Erfahren Sie, was unsere Partner über die Zusammenarbeit mit uns denken.</p>
314
+ </div>
315
+
316
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
317
+ <!-- Testimonial 1 -->
318
+ <div class="bg-white p-8 rounded-xl shadow-lg">
319
+ <div class="flex items-center mb-4">
320
+ <div class="text-yellow-400 mr-2">
321
+ <i class="fas fa-star"></i>
322
+ <i class="fas fa-star"></i>
323
+ <i class="fas fa-star"></i>
324
+ <i class="fas fa-star"></i>
325
+ <i class="fas fa-star"></i>
326
+ </div>
327
+ </div>
328
+ <p class="text-gray-600 mb-6">"Die Zusammenarbeit mit Pixelkraft hat unseren Online-Auftritt revolutioniert. Innerhalb von 3 Monaten haben wir eine Verdopplung unserer Leads erreicht."</p>
329
+ <div class="flex items-center">
330
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Müller" class="w-12 h-12 rounded-full mr-4">
331
+ <div>
332
+ <h4 class="font-bold">Sarah Müller</h4>
333
+ <p class="text-sm text-gray-500">Geschäftsführerin, ModeLabel</p>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Testimonial 2 -->
339
+ <div class="bg-white p-8 rounded-xl shadow-lg">
340
+ <div class="flex items-center mb-4">
341
+ <div class="text-yellow-400 mr-2">
342
+ <i class="fas fa-star"></i>
343
+ <i class="fas fa-star"></i>
344
+ <i class="fas fa-star"></i>
345
+ <i class="fas fa-star"></i>
346
+ <i class="fas fa-star"></i>
347
+ </div>
348
+ </div>
349
+ <p class="text-gray-600 mb-6">"Besonders beeindruckt hat uns die strategische Herangehensweise. Pixelkraft hat nicht nur eine Website gebaut, sondern ein ganzes Digitalkonzept entwickelt."</p>
350
+ <div class="flex items-center">
351
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas Weber" class="w-12 h-12 rounded-full mr-4">
352
+ <div>
353
+ <h4 class="font-bold">Thomas Weber</h4>
354
+ <p class="text-sm text-gray-500">Marketingleiter, TechSolutions</p>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Testimonial 3 -->
360
+ <div class="bg-white p-8 rounded-xl shadow-lg">
361
+ <div class="flex items-center mb-4">
362
+ <div class="text-yellow-400 mr-2">
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ <i class="fas fa-star"></i>
366
+ <i class="fas fa-star"></i>
367
+ <i class="fas fa-star-half-alt"></i>
368
+ </div>
369
+ </div>
370
+ <p class="text-gray-600 mb-6">"Die Videoproduktion hat unsere Social-Media-Präsenz auf ein neues Level gehoben. Kreativ, professionell und immer ein offenes Ohr für unsere Ideen."</p>
371
+ <div class="flex items-center">
372
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Julia Schmidt" class="w-12 h-12 rounded-full mr-4">
373
+ <div>
374
+ <h4 class="font-bold">Julia Schmidt</h4>
375
+ <p class="text-sm text-gray-500">CMO, FoodDelight</p>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- Contact Section -->
384
+ <section id="contact" class="py-20 bg-white">
385
+ <div class="container mx-auto px-6">
386
+ <div class="flex flex-col lg:flex-row">
387
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
388
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Kontaktieren Sie uns</h2>
389
+ <p class="text-gray-600 mb-8">Haben Sie ein Projekt, das wir gemeinsam umsetzen können? Schreiben Sie uns eine Nachricht oder rufen Sie uns an. Wir freuen uns auf Ihre Ideen!</p>
390
+
391
+ <div class="space-y-6">
392
+ <div class="flex items-start">
393
+ <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-4">
394
+ <i class="fas fa-map-marker-alt text-red-600"></i>
395
+ </div>
396
+ <div>
397
+ <h4 class="font-bold mb-1">Adresse</h4>
398
+ <p class="text-gray-600">Pixelkraft GmbH<br>Digitalstraße 42<br>10115 Berlin</p>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="flex items-start">
403
+ <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-4">
404
+ <i class="fas fa-phone-alt text-red-600"></i>
405
+ </div>
406
+ <div>
407
+ <h4 class="font-bold mb-1">Telefon</h4>
408
+ <p class="text-gray-600">+49 30 12345678</p>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="flex items-start">
413
+ <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-4">
414
+ <i class="fas fa-envelope text-red-600"></i>
415
+ </div>
416
+ <div>
417
+ <h4 class="font-bold mb-1">E-Mail</h4>
418
+ <p class="text-gray-600">hallo@pixelkraft.de</p>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="mt-10">
424
+ <h4 class="font-bold mb-4">Folgen Sie uns</h4>
425
+ <div class="flex space-x-4">
426
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-600 hover:text-white transition">
427
+ <i class="fab fa-facebook-f"></i>
428
+ </a>
429
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-600 hover:text-white transition">
430
+ <i class="fab fa-instagram"></i>
431
+ </a>
432
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-600 hover:text-white transition">
433
+ <i class="fab fa-linkedin-in"></i>
434
+ </a>
435
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-600 hover:text-white transition">
436
+ <i class="fab fa-behance"></i>
437
+ </a>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="lg:w-1/2">
443
+ <form class="bg-gray-50 p-8 rounded-xl shadow-lg">
444
+ <div class="mb-6">
445
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
446
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Ihr Name">
447
+ </div>
448
+
449
+ <div class="mb-6">
450
+ <label for="email" class="block text-gray-700 font-medium mb-2">E-Mail</label>
451
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Ihre E-Mail-Adresse">
452
+ </div>
453
+
454
+ <div class="mb-6">
455
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Betreff</label>
456
+ <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent">
457
+ <option value="">Wählen Sie ein Thema</option>
458
+ <option value="webdesign">Webdesign</option>
459
+ <option value="seo">SEO</option>
460
+ <option value="design">Grafikdesign</option>
461
+ <option value="video">Videoproduktion</option>
462
+ <option value="other">Anderes</option>
463
+ </select>
464
+ </div>
465
+
466
+ <div class="mb-6">
467
+ <label for="message" class="block text-gray-700 font-medium mb-2">Nachricht</label>
468
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Ihre Nachricht"></textarea>
469
+ </div>
470
+
471
+ <button type="submit" class="btn-primary text-white font-semibold py-3 px-8 rounded-full w-full">Nachricht senden</button>
472
+ </form>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </section>
477
+
478
+ <!-- Footer -->
479
+ <footer class="bg-gray-900 text-white py-12">
480
+ <div class="container mx-auto px-6">
481
+ <div class="flex flex-col md:flex-row justify-between">
482
+ <div class="mb-8 md:mb-0">
483
+ <div class="flex items-center mb-4">
484
+ <div class="w-10 h-10 rounded-full bg-red-600 flex items-center justify-center mr-3">
485
+ <span class="text-white font-bold">PK</span>
486
+ </div>
487
+ <span class="text-xl font-bold">Pixelkraft</span>
488
+ </div>
489
+ <p class="text-gray-400 max-w-xs">Ihre Digitalagentur für ganzheitliche Lösungen im Webdesign, Marketing und Content Creation.</p>
490
+ </div>
491
+
492
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
493
+ <div>
494
+ <h4 class="text-lg font-semibold mb-4">Leistungen</h4>
495
+ <ul class="space-y-2">
496
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Webdesign</a></li>
497
+ <li><a href="#" class="text-gray-400 hover:text-white transition">SEO</a></li>
498
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Grafikdesign</a></li>
499
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Fotografie</a></li>
500
+ </ul>
501
+ </div>
502
+
503
+ <div>
504
+ <h4 class="text-lg font-semibold mb-4">Unternehmen</h4>
505
+ <ul class="space-y-2">
506
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Über uns</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Team</a></li>
508
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Karriere</a></li>
509
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
510
+ </ul>
511
+ </div>
512
+
513
+ <div>
514
+ <h4 class="text-lg font-semibold mb-4">Rechtliches</h4>
515
+ <ul class="space-y-2">
516
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Impressum</a></li>
517
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Datenschutz</a></li>
518
+ <li><a href="#" class="text-gray-400 hover:text-white transition">AGB</a></li>
519
+ </ul>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
525
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Pixelkraft GmbH. Alle Rechte vorbehalten.</p>
526
+ <div class="flex space-x-6">
527
+ <a href="#" class="text-gray-400 hover:text-white transition">
528
+ <i class="fab fa-facebook-f"></i>
529
+ </a>
530
+ <a href="#" class="text-gray-400 hover:text-white transition">
531
+ <i class="fab fa-instagram"></i>
532
+ </a>
533
+ <a href="#" class="text-gray-400 hover:text-white transition">
534
+ <i class="fab fa-linkedin-in"></i>
535
+ </a>
536
+ <a href="#" class="text-gray-400 hover:text-white transition">
537
+ <i class="fab fa-behance"></i>
538
+ </a>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </footer>
543
+
544
+ <script>
545
+ // Mobile menu toggle
546
+ document.querySelector('button').addEventListener('click', function() {
547
+ const menu = document.querySelector('.md\\:flex');
548
+ menu.classList.toggle('hidden');
549
+ menu.classList.toggle('flex');
550
+ menu.classList.toggle('flex-col');
551
+ menu.classList.toggle('absolute');
552
+ menu.classList.toggle('top-16');
553
+ menu.classList.toggle('left-0');
554
+ menu.classList.toggle('right-0');
555
+ menu.classList.toggle('bg-white');
556
+ menu.classList.toggle('p-4');
557
+ menu.classList.toggle('shadow-md');
558
+ });
559
+
560
+ // Smooth scrolling for anchor links
561
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
562
+ anchor.addEventListener('click', function (e) {
563
+ e.preventDefault();
564
+
565
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
566
+ behavior: 'smooth'
567
+ });
568
+ });
569
+ });
570
+
571
+ // Add animation to service cards on scroll
572
+ const observer = new IntersectionObserver((entries) => {
573
+ entries.forEach(entry => {
574
+ if (entry.isIntersecting) {
575
+ entry.target.classList.add('animate-fadeIn');
576
+ }
577
+ });
578
+ }, {threshold: 0.1});
579
+
580
+ document.querySelectorAll('.service-card').forEach(card => {
581
+ observer.observe(card);
582
+ });
583
+ </script>
584
+ <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=carmoe/netzfreude" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
585
+ </html>