Like 0
Fork 0

Last active 2 hours ago

kxvinws revised this gist 2 hours ago. Go to revision

1 file changed, 175 insertions

index.html(file created)

@@ -0,0 +1,175 @@
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>
Newer Older

Powered by Opengist ⋅ Load: 17ms⋅

English