Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: align layout with UI/UX accessibility guidelines

Browse Source
This commit is contained in:
DanielS
2026-07-18 03:57:08 +02:00
parent 1b5ddac1e6
commit 0c67c97f69
3 changed files with 28 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/index.astro
View File

@@ -28,19 +28,17 @@ import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
</p>
<form class="space-y-4" onsubmit="event.preventDefault()">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="name" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Name</label>
<input type="text" id="name" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
</div>
<div>
<label for="email" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">E-Mail</label>
<input type="email" id="email" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
</div>
<div>
<label for="name" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Name</label>
<input type="text" id="name" required aria-required="true" class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all" />
</div>
<div>
<label for="email" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">E-Mail</label>
<input type="email" id="email" required aria-required="true" class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all" />
</div>
<div>
<label for="message" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Nachricht</label>
<textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea>
<textarea id="message" rows="4" required aria-required="true" class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all resize-none"></textarea>
</div>
<button type="submit" class="w-full py-3 bg-brand-arcticBlue text-zinc-950 font-bold text-xs uppercase tracking-wider rounded hover:bg-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-brand-arcticBlue focus:outline-none">
Anfrage senden