-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
376 lines (344 loc) · 23.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Webseiten für Gewinner</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="out.css">
</head>
<body class="selection:bg-rose-600 selection:text-white">
<main class="bg-white">
<!-- Hero section -->
<div class="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
<div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
<div>
<div class="mt-6">
<h1 class="text-rose-600 text-6xl font-extrabold font-serif">Leon Alef</h1>
</div>
<div class="">
<div class="mt-4 sm:max-w-xl">
<h1 class="text-4xl text-gray-900 tracking-tight sm:text-5xl">Webseiten für Gewinner</h1>
<div class="mt-6 text-xl text-gray-500">
<p>
Sie haben eine Vision für Ihr Produkt, Ihr Unternehmen oder Ihre Leidenschaft?</p>
<p>
Sie stehen in den Startlöchern um Ihre Vision groß raus zu bringen?</p>
</div>
</div>
<div class="mt-12 sm:max-w-lg sm:w-full sm:flex items-center">
<div class="min-w-0 flex-1">
<p class="block w-full rounded-md text-xl text-gray-500">
Wir begleiten Sie gern.<br><b>Schritt für Schritt.</b>
</p>
</div>
<div class="mt-4 sm:mt-0 sm:ml-3">
<button data-tf-popup="ViuEeRGD" data-tf-opacity="100" data-tf-size="100" data-tf-iframe-props="title=Ihre Webseite" data-tf-auto-close="5000" data-tf-transitive-search-params data-tf-medium="snippet" class="block w-full rounded-md border border-transparent px-5 py-3 bg-rose-500 text-base font-medium text-white shadow hover:bg-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10">Erster Schritt</button><script src="//embed.typeform.com/next/embed.js"></script>
</div>
</div>
</div>
</div>
</div>
<div class="sm:mx-auto sm:max-w-3xl sm:px-6">
<div class="py-12 sm:relative sm:mt-12 sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<div class="hidden sm:block">
<div class="absolute inset-y-0 left-1/2 w-screen bg-gray-50 rounded-l-3xl lg:left-80 lg:right-0 lg:w-full"></div>
<svg class="absolute top-8 right-1/2 -mr-3 lg:m-0 lg:left-0" width="404" height="392" fill="none" viewBox="0 0 404 392">
<defs>
<pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width="404" height="392" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)" />
</svg>
</div>
<div class="relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full lg:pl-12">
<img alt="Wireframe Smartphone mit Aquarellfarbe" class="w-full rounded-md shadow-xl ring-1 ring-black ring-opacity-5 lg:h-full lg:w-auto lg:max-w-none" height="400" src="hal-gatewood-tZc3vjPCk-Q-unsplash.2e16d0ba.fill-600x400.jpg" width="600">
</div>
</div>
</div>
</div>
<div class="bg-white text-white pt-16 lg:py-24 selection:bg-white selection:text-rose-600">
<div class="bg-rose-600 pb-16 lg:relative lg:z-10 lg:pb-0">
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-8 lg:px-8">
<div class="relative lg:-my-8">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-1/2 bg-white lg:hidden"></div>
<div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:h-full lg:p-0">
<div class="aspect-w-10 aspect-h-6 overflow-hidden rounded-xl shadow-xl sm:aspect-w-16 sm:aspect-h-7 lg:aspect-none lg:h-full">
<img alt="Zahnräder und Riemen" class="object-cover lg:h-full lg:w-full" height="600" src="kiwihug-Hld-BtdRdPU-unsplash.2e16d0ba.fill-900x600.jpg" width="900">
</div>
</div>
</div>
<div class="mt-12 lg:col-span-2 lg:m-0 lg:pl-8">
<div class="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20">
<blockquote>
<div>
<svg class="h-12 w-12 opacity-25" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<div class="mt-6 text-2xl font-medium">
<p class="selection:text-rose-600">
Maßgeschneidertes Layout, genau die richtigen Funktionen.
Lebendig, schlank, präzise.
Bringen Sie Ihre Vision ins Spiel.<br>
Wir bringen sie ins Netz.</p>
</div>
</div>
<footer class="mt-6">
<p class="text-2xl font-medium font-serif selection:text-rose-600">Leon Alef</p>
<p class="text-lg font-medium text-rose-100 selection:text-rose-600">Webentwickler</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-3xl lg:text-center">
<h2 class="text-base font-semibold leading-7 text-rose-600">Wir werden Ihrem Bedarf gerecht</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl font-serif">Diese Formen kann Ihre Webseite annehmen</p>
<p class="mt-6 text-lg leading-8 text-gray-600">
Mit unseren Individualentwicklungen liegen Sie immer richtig.
Und das, ohne direkt ein Vermögen aufbringen zu müssen.
In unserem Startgespräch arbeiten wir Ihren Bedarf konkret heraus und wägen Pro und Kontra aller Elemente detailliert ab.
Auf dieser Grundlage unterbreiten wir Ihnen ein konkretes Angebot, das Ihrem Bedarf entspricht.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
<div class="relative pl-16">
<dt class="text-base font-semibold leading-7 text-gray-900">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-rose-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
</svg>
</div>
Visitenkarten-Webseite
</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">
Eine sehr einfache Webseite, die die wesentlichen Informationen über Sie oder Ihre Firma präsentiert.
Ähnlich wie eine Visitenkarte ist sie schnell gelesen und bietet relativ wenig Interaktion.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base font-semibold leading-7 text-gray-900">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-rose-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
</svg>
</div>
Komplexe Firmenportraits
</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">
Eine Firma mit einer Vielzahl von Kunden, Mitarbeitern & Abteilungen und Nachunternehmern & Dienstleistern
muss bei der Aufbereitung der gezeigten Informationen viele Blickwinkel betrachten und dennoch ihr eigenes Image aufrecht erhalten.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base font-semibold leading-7 text-gray-900">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-rose-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" />
</svg>
</div>
Management Software
</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">
Mit großen Schritten zur Automatisierung von Unternehmensprozessen - bitte hier entlang!
Ihre Daten in schnellen SSD-Datenbanken, intuitiv verwaltet und mit beliebiger Cloud-Infrastruktur verbunden.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base font-semibold leading-7 text-gray-900">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-rose-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z" />
</svg>
</div>
E-Mail Marketing
</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">
Für viele Standard, für jeden wichtig. Ob als primären Kommunikationsweg oder als universelle Grundlage setzen Sie E-Mail
heutzutage für Ihr Tagesgeschäft gewinnbringend ein. Liefern Sie Informationen und Werbung an Interessenten und Kunden.
</dd>
</div>
</dl>
</div>
<div class="mx-auto max-w-3xl mt-8">
<p class="text-base font-semibold leading-7 text-rose-600">... und viele weitere mehr.</p>
<p class="text-lg leading-8 text-gray-600">
Lassen Sie uns an Ihrer Vision teilhaben. Gemeinsam erarbeiten wir mit Ihnen die beste Lösung.
</p>
<div class="mt-4 ">
<button data-tf-popup="ViuEeRGD" data-tf-opacity="100" data-tf-size="100" data-tf-iframe-props="title=Ihre Webseite" data-tf-auto-close="5000" data-tf-transitive-search-params data-tf-medium="snippet" class="block rounded-md border border-transparent px-3 py-2 bg-rose-600 text-base font-medium text-white shadow hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-6">Erster Schritt</button><script src="//embed.typeform.com/next/embed.js"></script>
</div>
</div>
</div>
</div>
<div class="bg-white py-16 sm:py-24">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="relative overflow-hidden bg-gray-900 px-6 py-20 shadow-xl sm:rounded-3xl sm:px-10 sm:py-24 md:px-12 lg:px-20">
<div class="relative mx-auto max-w-4xl lg:mx-0">
<h2 class="text-base font-semibold leading-7 text-rose-600">Genau was Sie brauchen</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-serif">Aus diesen Elementen kann Ihre Webseite bestehen</p>
<ul role="list" class="text-white grid grid-cols-1 lg:grid-cols-2 my-8 gap-y-4 sm:gap-y-8 p-4 rounded-lg">
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">Navigationsmenü</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">Hero-Aufmacher</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">Kundenbewertungen</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">Galerie / Portfolio</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">Unternehmensportrait</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">Aktuelles / Blog</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">E-Commerce Shop</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">Kontaktformular</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100">Fußzeile</p>
</div>
</div>
</li>
<li class="text-gray-900">
<div class="flex h-full items-center gap-x-6">
<svg class="h-7 w-7 flex-none font-bold text-gray-800 bg-white rounded-full p-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="text-base font-semibold leading-7 tracking-tight text-gray-100"><i>... und alles Weitere</i></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold font-serif tracking-tight text-gray-900 sm:text-4xl">Portfolio</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Eine Auswahl unserer neuesten Kreationen.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article class="flex flex-col items-start justify-between">
<div class="relative w-full">
<img src="bailey-alexander-DfffcjQ106U-unsplash.jpg" alt="" class="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]">
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="max-w-xl">
<div class="mt-8 flex items-center gap-x-4 text-xs">
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Visitenkarte</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="portfolio/schreiner/index.html">
<span class="absolute inset-0"></span>
HolzLuxeDesign - Schreiner
</a>
</h3>
<p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600">
Ein Schreiner voller Leidenschaft und Tatendrang
</p>
</div>
</div>
</article>
</div>
</div>
</div-->
</main>
<footer class="mt-24 bg-gray-900 sm:mt-12">
<div class="mx-auto max-w-md py-12 px-4 overflow-hidden sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
<div class="px-5 py-2">
<a href="/vertriebspartner/" class="text-base text-gray-400 hover:text-gray-300"> Vertriebspartner </a>
</div>
<div class="px-5 py-2">
<a href="/impressum/" class="text-base text-gray-400 hover:text-gray-300"> Impressum </a>
</div>
<div class="px-5 py-2">
<a href="/datenschutz/" class="text-base text-gray-400 hover:text-gray-300"> Datenschutz </a>
</div>
</nav>
<p class="mt-8 text-center text-base text-gray-400">© 2023 Leon Alef. Alle Rechte vorbehalten.</p>
</div>
</footer>
</body>
</html>
<!--
vim:ts=2:shiftwidth=2:expandtab:syntax=html
-->