From cfc0e99f6352be0c8d122ba89688788b33d00c3a Mon Sep 17 00:00:00 2001
From: Besmir Skenderi / PBBFS23A <Besmir.Skenderi@edu.bib.de>
Date: Thu, 26 Jun 2025 12:52:26 +0200
Subject: [PATCH] =?UTF-8?q?card.css=20hat=20jetzt=20die=20Kursfelder=20auf?=
 =?UTF-8?q?=20der=20Mainpage=20=C3=BCbernommen.=20Das=20Design=20das=20vor?=
 =?UTF-8?q?her=20in=20showWelcome.phtml=20war,=20ist=20jetzt=20durch=20car?=
 =?UTF-8?q?d.css=20ersetzt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CSS/Element/card.css            | 73 +++++++++++++++++++++++++++++++++
 Views/Welcome/showWelcome.phtml | 48 ++++++----------------
 2 files changed, 85 insertions(+), 36 deletions(-)

diff --git a/CSS/Element/card.css b/CSS/Element/card.css
index e69de29..8a99c8b 100644
--- a/CSS/Element/card.css
+++ b/CSS/Element/card.css
@@ -0,0 +1,73 @@
+.welcome-container {
+    background-color: var(--brand-background);
+    padding: 40px 20px;
+    min-height: 100vh;
+    font-family: var(--font-family-main);
+}
+
+.welcome-heading {
+    color: var (--brand-primary);
+    font-size: var(--font-size-title-h2);
+    margin-bottom: 40px;
+}
+
+.course-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: space-between;
+    max-width: 100%;
+}
+
+.course-card {
+    flex: 0 0 calc(33.333% - 20px);
+    background: var(--brand-white);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    min-height: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
+.course-image {
+    background-color: var(--brand-white); /* Platzhalter, später durch Kursbild ersetzen */
+    height: 200px;
+}
+
+.course-content {
+    background-color: var(--brand-primary);
+    color: var(--brand-white);
+    padding: 20px;
+    font-size: var(--font-size-text);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--font-family-main);
+}
+
+.course-left,
+.course-right {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--font-size-small);
+}
+
+.course-left div:first-child,
+.course-right div:first-child {
+    font-weight: bold;
+    font-size: var(--font-size-text);
+}
+
+.course-right {
+    text-align: right;
+}
+
+.course-card {
+    display: flex;
+    flex-direction: column;
+}
+
+.course-image {
+    flex: 1;
+}
diff --git a/Views/Welcome/showWelcome.phtml b/Views/Welcome/showWelcome.phtml
index d364651..c23000b 100644
--- a/Views/Welcome/showWelcome.phtml
+++ b/Views/Welcome/showWelcome.phtml
@@ -1,45 +1,22 @@
 <?php include dirname(__DIR__) . '/header.phtml'; ?>
 
-<article style="background-color: #1f1b15; padding: 40px 20px; min-height: 100vh; font-family: sans-serif;">
+<article class="welcome-container">
 
-    <h2 style="color: orange; font-size: 28px; margin-bottom: 40px;">Kurse</h2>
+    <h2 class="welcome-heading">Kurse</h2>
 
-    <div style="
-        display: flex;
-        flex-wrap: wrap;
-        gap: 30px;
-        justify-content: space-between;
-        max-width: 100%;
-    ">
+    <div class="course-grid">
 
         <?php for ($i = 0; $i < 6; $i++): ?>
-        <div style="
-            flex: 0 0 calc(33.333% - 20px);
-            background: #fff;
-            border-radius: 12px;
-            overflow: hidden;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-            min-height: 300px;
-            display: flex;
-            flex-direction: column;
-        ">
-            <div style="background-color: #eee; height: 200px;"></div>
-            <div style="
-                background-color: orange;
-                color: white;
-                padding: 20px;
-                font-size: 18px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            ">
-                <div>
-                    <div style="font-weight: bold;">5 ★ &nbsp; Marketing Pro</div>
-                    <div style="font-size: 14px;">Bulu ulu Straße 17</div>
+        <div class="course-card">
+            <div class="course-image"></div>
+            <div class="course-content">
+                <div class="course-left">
+                    <div>5 ★ &nbsp; Marketing Pro</div>
+                    <div>Bulu ulu Straße 17</div>
                 </div>
-                <div style="text-align: right;">
-                    <div style="font-weight: bold;">59,99€</div>
-                    <div style="font-size: 14px;">33333 Frankfurt</div>
+                <div class="course-right">
+                    <div>59,99€</div>
+                    <div>33333 Frankfurt</div>
                 </div>
             </div>
         </div>
@@ -50,4 +27,3 @@
 </article>
 
 <?php include dirname(__DIR__) . '/footer.phtml'; ?>
-            
\ No newline at end of file