index.html
· 7.2 KiB · HTML
原始文件
<!doctype html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>dbase leipzig – coming soon</title>
<meta name="description" content="dbase leipzig – deine digitale basis für web, apps und automatisierung. coming soon." />
<meta property="og:title" content="dbase leipzig – coming soon" />
<meta property="og:description" content="deine digitale basis für web, apps und automatisierung." />
<meta property="og:type" content="website" />
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons CDN -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
},
colors: {
ink: "#050816",
panel: "rgba(255,255,255,0.06)",
line: "rgba(255,255,255,0.12)",
muted: "#9aa7bd",
brand: "#2563eb",
glow: "#38bdf8",
},
boxShadow: {
soft: "0 30px 100px rgba(0,0,0,.45)",
}
}
}
}
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
body {
background:
radial-gradient(circle at 20% 20%, rgba(56, 189, 248, .18), transparent 30%),
radial-gradient(circle at 80% 10%, rgba(37, 99, 235, .22), transparent 32%),
radial-gradient(circle at 50% 100%, rgba(99, 102, 241, .16), transparent 34%),
#050816;
}
.grid-bg {
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(to bottom, black, transparent 85%);
}
</style>
</head>
<body class="min-h-screen overflow-x-hidden text-white antialiased">
<div class="grid-bg pointer-events-none fixed inset-0"></div>
<main class="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col px-5 py-6 sm:px-8">
<header class="flex items-center justify-between">
<a href="/" class="group flex items-center gap-3" aria-label="dbase leipzig startseite">
<div class="grid h-11 w-11 place-items-center rounded-2xl border border-white/10 bg-white/10 shadow-soft backdrop-blur">
<span class="text-xl font-black tracking-tighter text-sky-300">db</span>
</div>
<div>
<p class="text-sm font-bold tracking-tight sm:text-base">dbase leipzig</p>
<p class="text-xs text-muted">digital base</p>
</div>
</a>
<a
href="mailto:kontakt@dbase-leipzig.de"
class="hidden items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white/80 backdrop-blur transition hover:border-sky-300/40 hover:text-white sm:flex"
>
<i data-lucide="mail" class="h-4 w-4"></i>
kontakt
</a>
</header>
<section class="grid flex-1 items-center gap-12 py-20 lg:grid-cols-[1.05fr_.95fr]">
<div>
<div class="mb-6 inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-2 text-sm font-semibold text-sky-100">
<span class="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_0_6px_rgba(52,211,153,.12)]"></span>
coming soon
</div>
<h1 class="max-w-3xl text-5xl font-black tracking-[-0.08em] sm:text-7xl lg:text-8xl">
deine digitale
<span class="block bg-gradient-to-r from-white via-sky-200 to-blue-400 bg-clip-text text-transparent">
basis.
</span>
</h1>
<p class="mt-7 max-w-2xl text-lg leading-8 text-muted sm:text-xl">
moderne websites, web-apps und automatisierung für vereine, initiativen
und projekte in leipzig.
</p>
<div class="mt-9 flex flex-col gap-3 sm:flex-row">
<a
href="mailto:kontakt@dbase-leipzig.de"
class="inline-flex items-center justify-center gap-2 rounded-2xl bg-white px-5 py-3 font800 font-bold text-ink transition hover:-translate-y-0.5 hover:bg-sky-100"
>
projekt anfragen
<i data-lucide="arrow-right" class="h-5 w-5"></i>
</a>
<a
href="#leistungen"
class="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-5 py-3 font-bold text-white backdrop-blur transition hover:-translate-y-0.5 hover:border-sky-300/40"
>
ansehen
<i data-lucide="sparkles" class="h-5 w-5"></i>
</a>
</div>
</div>
<div id="leistungen" class="rounded-[2rem] border border-white/10 bg-panel p-4 shadow-soft backdrop-blur-xl">
<div class="rounded-[1.5rem] border border-white/10 bg-black/20 p-5">
<div class="mb-6 flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-400/80"></span>
<span class="h-3 w-3 rounded-full bg-yellow-400/80"></span>
<span class="h-3 w-3 rounded-full bg-green-400/80"></span>
</div>
<div class="space-y-3 font-mono text-sm text-slate-300">
<p><span class="text-sky-300">const</span> dbase = {</p>
<p class="pl-5">location: <span class="text-blue-200">"leipzig"</span>,</p>
<p class="pl-5">focus: <span class="text-blue-200">["web", "apps", "automation"]</span>,</p>
<p class="pl-5">status: <span class="text-emerald-300">"launching"</span></p>
<p>};</p>
</div>
</div>
<div class="mt-4 grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
<article class="rounded-3xl border border-white/10 bg-white/[0.04] p-5">
<i data-lucide="monitor-smartphone" class="mb-4 h-6 w-6 text-sky-300"></i>
<h2 class="font-bold tracking-tight">websites</h2>
<p class="mt-2 text-sm leading-6 text-muted">schnell, klar, responsiv und modern.</p>
</article>
<article class="rounded-3xl border border-white/10 bg-white/[0.04] p-5">
<i data-lucide="database-zap" class="mb-4 h-6 w-6 text-sky-300"></i>
<h2 class="font-bold tracking-tight">web-apps</h2>
<p class="mt-2 text-sm leading-6 text-muted">tools, dashboards, datenbanken und apis.</p>
</article>
<article class="rounded-3xl border border-white/10 bg-white/[0.04] p-5">
<i data-lucide="workflow" class="mb-4 h-6 w-6 text-sky-300"></i>
<h2 class="font-bold tracking-tight">automation</h2>
<p class="mt-2 text-sm leading-6 text-muted">workflows, schnittstellen und weniger handarbeit.</p>
</article>
</div>
</div>
</section>
<footer class="flex flex-col gap-3 border-t border-white/10 py-6 text-sm text-muted sm:flex-row sm:items-center sm:justify-between">
<p>© <span id="year"></span> dbase leipzig</p>
<p>deine digitale basis</p>
</footer>
</main>
<script>
lucide.createIcons();
document.getElementById("year").textContent = new Date().getFullYear();
</script>
</body>
</html>
| 1 | <!doctype html> |
| 2 | <html lang="de" class="scroll-smooth"> |
| 3 | <head> |
| 4 | <meta charset="utf-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | <title>dbase leipzig – coming soon</title> |
| 7 | <meta name="description" content="dbase leipzig – deine digitale basis für web, apps und automatisierung. coming soon." /> |
| 8 | |
| 9 | <meta property="og:title" content="dbase leipzig – coming soon" /> |
| 10 | <meta property="og:description" content="deine digitale basis für web, apps und automatisierung." /> |
| 11 | <meta property="og:type" content="website" /> |
| 12 | |
| 13 | <!-- Tailwind CSS CDN --> |
| 14 | <script src="https://cdn.tailwindcss.com"></script> |
| 15 | |
| 16 | <!-- Lucide Icons CDN --> |
| 17 | <script src="https://unpkg.com/lucide@latest"></script> |
| 18 | |
| 19 | <script> |
| 20 | tailwind.config = { |
| 21 | theme: { |
| 22 | extend: { |
| 23 | fontFamily: { |
| 24 | sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"], |
| 25 | }, |
| 26 | colors: { |
| 27 | ink: "#050816", |
| 28 | panel: "rgba(255,255,255,0.06)", |
| 29 | line: "rgba(255,255,255,0.12)", |
| 30 | muted: "#9aa7bd", |
| 31 | brand: "#2563eb", |
| 32 | glow: "#38bdf8", |
| 33 | }, |
| 34 | boxShadow: { |
| 35 | soft: "0 30px 100px rgba(0,0,0,.45)", |
| 36 | } |
| 37 | } |
| 38 | } |
| 39 | } |
| 40 | </script> |
| 41 | |
| 42 | <style> |
| 43 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"); |
| 44 | |
| 45 | body { |
| 46 | background: |
| 47 | radial-gradient(circle at 20% 20%, rgba(56, 189, 248, .18), transparent 30%), |
| 48 | radial-gradient(circle at 80% 10%, rgba(37, 99, 235, .22), transparent 32%), |
| 49 | radial-gradient(circle at 50% 100%, rgba(99, 102, 241, .16), transparent 34%), |
| 50 | #050816; |
| 51 | } |
| 52 | |
| 53 | .grid-bg { |
| 54 | background-image: |
| 55 | linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), |
| 56 | linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); |
| 57 | background-size: 48px 48px; |
| 58 | mask-image: linear-gradient(to bottom, black, transparent 85%); |
| 59 | } |
| 60 | </style> |
| 61 | </head> |
| 62 | |
| 63 | <body class="min-h-screen overflow-x-hidden text-white antialiased"> |
| 64 | <div class="grid-bg pointer-events-none fixed inset-0"></div> |
| 65 | |
| 66 | <main class="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col px-5 py-6 sm:px-8"> |
| 67 | <header class="flex items-center justify-between"> |
| 68 | <a href="/" class="group flex items-center gap-3" aria-label="dbase leipzig startseite"> |
| 69 | <div class="grid h-11 w-11 place-items-center rounded-2xl border border-white/10 bg-white/10 shadow-soft backdrop-blur"> |
| 70 | <span class="text-xl font-black tracking-tighter text-sky-300">db</span> |
| 71 | </div> |
| 72 | <div> |
| 73 | <p class="text-sm font-bold tracking-tight sm:text-base">dbase leipzig</p> |
| 74 | <p class="text-xs text-muted">digital base</p> |
| 75 | </div> |
| 76 | </a> |
| 77 | |
| 78 | <a |
| 79 | href="mailto:kontakt@dbase-leipzig.de" |
| 80 | class="hidden items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white/80 backdrop-blur transition hover:border-sky-300/40 hover:text-white sm:flex" |
| 81 | > |
| 82 | <i data-lucide="mail" class="h-4 w-4"></i> |
| 83 | kontakt |
| 84 | </a> |
| 85 | </header> |
| 86 | |
| 87 | <section class="grid flex-1 items-center gap-12 py-20 lg:grid-cols-[1.05fr_.95fr]"> |
| 88 | <div> |
| 89 | <div class="mb-6 inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-2 text-sm font-semibold text-sky-100"> |
| 90 | <span class="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_0_6px_rgba(52,211,153,.12)]"></span> |
| 91 | coming soon |
| 92 | </div> |
| 93 | |
| 94 | <h1 class="max-w-3xl text-5xl font-black tracking-[-0.08em] sm:text-7xl lg:text-8xl"> |
| 95 | deine digitale |
| 96 | <span class="block bg-gradient-to-r from-white via-sky-200 to-blue-400 bg-clip-text text-transparent"> |
| 97 | basis. |
| 98 | </span> |
| 99 | </h1> |
| 100 | |
| 101 | <p class="mt-7 max-w-2xl text-lg leading-8 text-muted sm:text-xl"> |
| 102 | moderne websites, web-apps und automatisierung für vereine, initiativen |
| 103 | und projekte in leipzig. |
| 104 | </p> |
| 105 | |
| 106 | <div class="mt-9 flex flex-col gap-3 sm:flex-row"> |
| 107 | <a |
| 108 | href="mailto:kontakt@dbase-leipzig.de" |
| 109 | class="inline-flex items-center justify-center gap-2 rounded-2xl bg-white px-5 py-3 font800 font-bold text-ink transition hover:-translate-y-0.5 hover:bg-sky-100" |
| 110 | > |
| 111 | projekt anfragen |
| 112 | <i data-lucide="arrow-right" class="h-5 w-5"></i> |
| 113 | </a> |
| 114 | |
| 115 | <a |
| 116 | href="#leistungen" |
| 117 | class="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-5 py-3 font-bold text-white backdrop-blur transition hover:-translate-y-0.5 hover:border-sky-300/40" |
| 118 | > |
| 119 | ansehen |
| 120 | <i data-lucide="sparkles" class="h-5 w-5"></i> |
| 121 | </a> |
| 122 | </div> |
| 123 | </div> |
| 124 | |
| 125 | <div id="leistungen" class="rounded-[2rem] border border-white/10 bg-panel p-4 shadow-soft backdrop-blur-xl"> |
| 126 | <div class="rounded-[1.5rem] border border-white/10 bg-black/20 p-5"> |
| 127 | <div class="mb-6 flex items-center gap-2"> |
| 128 | <span class="h-3 w-3 rounded-full bg-red-400/80"></span> |
| 129 | <span class="h-3 w-3 rounded-full bg-yellow-400/80"></span> |
| 130 | <span class="h-3 w-3 rounded-full bg-green-400/80"></span> |
| 131 | </div> |
| 132 | |
| 133 | <div class="space-y-3 font-mono text-sm text-slate-300"> |
| 134 | <p><span class="text-sky-300">const</span> dbase = {</p> |
| 135 | <p class="pl-5">location: <span class="text-blue-200">"leipzig"</span>,</p> |
| 136 | <p class="pl-5">focus: <span class="text-blue-200">["web", "apps", "automation"]</span>,</p> |
| 137 | <p class="pl-5">status: <span class="text-emerald-300">"launching"</span></p> |
| 138 | <p>};</p> |
| 139 | </div> |
| 140 | </div> |
| 141 | |
| 142 | <div class="mt-4 grid gap-3 sm:grid-cols-3 lg:grid-cols-1"> |
| 143 | <article class="rounded-3xl border border-white/10 bg-white/[0.04] p-5"> |
| 144 | <i data-lucide="monitor-smartphone" class="mb-4 h-6 w-6 text-sky-300"></i> |
| 145 | <h2 class="font-bold tracking-tight">websites</h2> |
| 146 | <p class="mt-2 text-sm leading-6 text-muted">schnell, klar, responsiv und modern.</p> |
| 147 | </article> |
| 148 | |
| 149 | <article class="rounded-3xl border border-white/10 bg-white/[0.04] p-5"> |
| 150 | <i data-lucide="database-zap" class="mb-4 h-6 w-6 text-sky-300"></i> |
| 151 | <h2 class="font-bold tracking-tight">web-apps</h2> |
| 152 | <p class="mt-2 text-sm leading-6 text-muted">tools, dashboards, datenbanken und apis.</p> |
| 153 | </article> |
| 154 | |
| 155 | <article class="rounded-3xl border border-white/10 bg-white/[0.04] p-5"> |
| 156 | <i data-lucide="workflow" class="mb-4 h-6 w-6 text-sky-300"></i> |
| 157 | <h2 class="font-bold tracking-tight">automation</h2> |
| 158 | <p class="mt-2 text-sm leading-6 text-muted">workflows, schnittstellen und weniger handarbeit.</p> |
| 159 | </article> |
| 160 | </div> |
| 161 | </div> |
| 162 | </section> |
| 163 | |
| 164 | <footer class="flex flex-col gap-3 border-t border-white/10 py-6 text-sm text-muted sm:flex-row sm:items-center sm:justify-between"> |
| 165 | <p>© <span id="year"></span> dbase leipzig</p> |
| 166 | <p>deine digitale basis</p> |
| 167 | </footer> |
| 168 | </main> |
| 169 | |
| 170 | <script> |
| 171 | lucide.createIcons(); |
| 172 | document.getElementById("year").textContent = new Date().getFullYear(); |
| 173 | </script> |
| 174 | </body> |
| 175 | </html> |
| 176 |