From fb8e4f066887d6091f852caa416cc6563569859c Mon Sep 17 00:00:00 2001
From: Jason Streifling <jason@streifling.com>
Date: Thu, 3 Oct 2024 09:50:33 +0200
Subject: [PATCH] CSS etwas vereinheitlicht

---
 index.html       | 18 +++++++++---------
 styles/input.css |  8 ++++++++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 776940d..bc4a502 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
 
     <main>
         <section class="bg-stone-700 py-16 text-stone-50">
-            <div class="container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto">
+            <div class="section">
                 <div class="my-auto">
                     <h2 class="mb-4 text-center text-2xl">Trocken- und Innenausbau</h2>
                     <p>
@@ -44,7 +44,7 @@
         </section>
 
         <section class="py-16">
-            <div class="container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto">
+            <div class="section">
                 <div class="gap-2 grid grid-cols-2 my-auto">
                     <div class="flex justify-end">
                         <img class="max-w-64" src="images/baustelle.webp">
@@ -148,7 +148,7 @@
         </section>
 
         <section class="bg-stone-700 py-24 text-stone-50">
-            <div class="container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto">
+            <div class="section">
                 <div class="my-auto">
                     <h2 class="mb-4 text-center text-2xl">Kundenzufriedenheit</h2>
                     <p>
@@ -182,7 +182,7 @@
                         </div>
                     </div>
 
-                    <div class="card bg-gray-200 mx-auto w-96 p-12 rounded-xl text-gray-800">
+                    <div class="card">
                         <p>
                             Die Zusammenarbeit mit Herrn Bremer war hervorragend! Das Team war stets pünktlich und
                             professionell. Besonders beeindruckt hat uns die hohe Qualität der Arbeit und die Liebe zum
@@ -191,7 +191,7 @@
                         <p class="mt-4 text-center">- <strong>Anna Müller</strong></p>
                     </div>
 
-                    <div class="card hidden bg-gray-200 mx-auto w-96 p-12 rounded-xl text-gray-800">
+                    <div class="card hidden">
                         <p>
                             Wir sind begeistert von der Qualität und dem Service. Von der ersten Beratung bis zur
                             Fertigstellung wurden wir hervorragend betreut. Unsere Wünsche wurden genau umgesetzt, und
@@ -200,7 +200,7 @@
                         <p class="mt-4 text-center">- <strong>Thomas Schmidt</strong></p>
                     </div>
 
-                    <div class="card hidden bg-gray-200 mx-auto w-96 p-12 rounded-xl text-gray-800">
+                    <div class="card hidden">
                         <p>
                             Schnelle und saubere Arbeit. Das Team war immer freundlich und hat uns bei jedem Schritt des
                             Projekts unterstützt. Wir sind sehr zufrieden mit dem Ergebnis und können die Firma nur
@@ -209,7 +209,7 @@
                         <p class="mt-4 text-center">- <strong>Julia Becker</strong></p>
                     </div>
 
-                    <div class="card hidden bg-gray-200 mx-auto w-96 p-12 rounded-xl text-gray-800">
+                    <div class="card hidden">
                         <p>
                             Von der Planung bis zur Fertigstellung lief alles reibungslos. Das Team hat unsere
                             Vorstellungen perfekt umgesetzt und war dabei immer zuverlässig und kompetent. Wir sind sehr
@@ -222,8 +222,8 @@
         </section>
     </main>
 
-    <footer class="my-24 text-stone-700">
-        <div class="container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto">
+    <footer class="py-24 text-stone-700">
+        <div class="section">
             <div>
                 <h2 class="text-2xl">Anschrift</h2>
                 <p>Dominik Bremer Trocken- und Innenausbau</p>
diff --git a/styles/input.css b/styles/input.css
index b5c61c9..b99bb98 100644
--- a/styles/input.css
+++ b/styles/input.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.card {
+    @apply bg-gray-200 mx-auto p-12 rounded-xl text-gray-800 w-96
+}
+
+.section {
+    @apply container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto
+}