responsivce

This commit is contained in:
zktsn0w 2023-10-12 22:11:00 +02:00
parent 9dbc7b2084
commit 596bf7e9f5
2 changed files with 13 additions and 14 deletions

View File

@ -6,16 +6,16 @@ import Footer from "../views/Footer.astro";
<Navigation /> <Navigation />
<div class="h-screen w-screen flex flex-col"> <div class="h-screen w-screen flex flex-col">
<div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12"> <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
<div class="grid grid-cols-2 grid-rows-3 w-1/2 h-full gap-7"> <div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
<div <div
class="col-span-1 row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between" class="col-span-1 2xl:row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
> >
<a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS"> <a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS">
<p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition"> <p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
Web-Entwicklung Web-Entwicklung
</p> </p>
</a> </a>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4 max-xl:hidden">
<p class="font-mono text-lg break-words"> <p class="font-mono text-lg break-words">
Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen. Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen.
@ -24,12 +24,11 @@ import Footer from "../views/Footer.astro";
Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln. Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
</p> </p>
</div> </div>
<p class="xl:hidden font-mono break-words">
<p class="font-mono font-bold text-zinc-700"> Ich bin Webentwickler und erstelle großartige Websites mit modernen Frameworks, um ein beeindruckendes
Colaborated with: <span class="text-emerald-700 underline" Nutzererlebnis zu bieten. Lass mich dir bei deiner Online-Präsenz helfen.
><a target="_blank" href="https://iamsebastian.dev/">IamSebastianDev</a></span
>
</p> </p>
<p></p>
</div> </div>
<div <div
class="col-span-1 row-span-1 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between" class="col-span-1 row-span-1 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
@ -41,7 +40,7 @@ import Footer from "../views/Footer.astro";
<p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p> <p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
</div> </div>
<div <div
class="col-span-1 row-start-2 col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between" class="col-span-1 2xl:row-start-2 2xl:col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
> >
<div> <div>
<p class="font-mono font-bold text-2xl">Server-Deployment</p> <p class="font-mono font-bold text-2xl">Server-Deployment</p>
@ -53,7 +52,7 @@ import Footer from "../views/Footer.astro";
<p></p> <p></p>
</div> </div>
<div <div
class="col-span-2 row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1" class="2xl:col-span-2 2xl:row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
> >
<div> <div>
<p class="font-mono font-bold text-2xl">WICHTIG!</p> <p class="font-mono font-bold text-2xl">WICHTIG!</p>

View File

@ -6,9 +6,9 @@ import Footer from "../views/Footer.astro";
<Navigation /> <Navigation />
<div class="h-screen w-screen flex flex-col"> <div class="h-screen w-screen flex flex-col">
<div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12"> <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
<div class="grid grid-cols-2 grid-rows-3 w-1/2 h-full gap-7"> <div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
<div <div
class="col-span-1 row-span-2 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between" class="col-span-1 2xl:row-span-2 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
> >
<a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS"> <a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS">
<p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition"> <p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
@ -43,7 +43,7 @@ import Footer from "../views/Footer.astro";
<p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p> <p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
</div> </div>
<div <div
class="col-span-1 row-start-2 col-start-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between" class="col-span-1 2xl:row-start-2 2xl:col-start-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
> >
<div> <div>
<p class="font-mono font-bold text-2xl">SolidJS Component Library</p> <p class="font-mono font-bold text-2xl">SolidJS Component Library</p>
@ -56,7 +56,7 @@ import Footer from "../views/Footer.astro";
<p></p> <p></p>
</div> </div>
<div <div
class="col-span-2 row-start-3 bg-emerald-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1" class="c2xl:col-span-2 2xl:row-start-3 bg-emerald-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
> >
<div> <div>
<p class="font-mono font-bold text-2xl">Weitere Projekte</p> <p class="font-mono font-bold text-2xl">Weitere Projekte</p>