diff --git a/CSS/Element/card.css b/CSS/Element/card.css index 2a41193..3e856e7 100644 --- a/CSS/Element/card.css +++ b/CSS/Element/card.css @@ -24,18 +24,23 @@ body { color: white; text-align: left; max-width: 1000px; - margin: 0 auto; - padding-left: 230px; margin-bottom: 30px; } .course-grid { display: flex; flex-wrap: wrap; - gap: 30px; - margin: 0 auto; + gap: 40px; + margin-left: 20px; } +@media screen and (max-width: 765px) { + .course-grid{ + margin-left: 0; + } +} + + .course-card { background: var(--brand-white); border-radius: 12px; diff --git a/CSS/Element/filter_box.css b/CSS/Element/filter_box.css index 007cfc0..b9fea33 100644 --- a/CSS/Element/filter_box.css +++ b/CSS/Element/filter_box.css @@ -2,7 +2,6 @@ background: #EB8202; color: #fff; padding: 1em; - max-width: 300px; border-radius: 8px; font-family: sans-serif; margin-bottom: 1em; diff --git a/CSS/Element/form.css b/CSS/Element/form.css index 60af6c5..df13a2a 100644 --- a/CSS/Element/form.css +++ b/CSS/Element/form.css @@ -51,6 +51,12 @@ textarea { margin: auto; } +@media screen and (max-width: 1024px) { + .form-grid { + grid-template-columns: repeat(1, 1fr); + } +} + .form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); @@ -113,3 +119,9 @@ form .error { background: transparent!important; border: transparent!important; } + +@media only screen and (max-width: 500px) { + .input-transparent{ + display: none; + } +} \ No newline at end of file diff --git a/CSS/style.css b/CSS/style.css index b431a18..19a3fbe 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -24,6 +24,7 @@ body { color: var(--brand-white); font-size: 15px; margin: 0; + overflow-x: hidden; } h1 { @@ -48,6 +49,13 @@ main { margin-top: 190px; } +@media screen and (max-width: 1024px) { + main{ + margin-top: 50px; + } +} + + .msg { text-align: center; font-size: 17px; @@ -110,6 +118,14 @@ main { align-items: center; } +@media only screen and (max-width: 500px) { + .d-flex-between{ + flex-wrap: wrap; + justify-content: center; + gap: 20px; + } +} + .hover:hover { opacity: 0.75; text-decoration: none; diff --git a/CSS/style_columns.css b/CSS/style_columns.css index 21a3dd6..9dab512 100644 --- a/CSS/style_columns.css +++ b/CSS/style_columns.css @@ -7,25 +7,37 @@ /*** Container ***/ -.container{ +.container { max-width: 90%; - padding: 24px 42px 24px 42px; + /* padding: 24px 42px 24px 42px; */ margin: 0 auto; color: var(--brand-white); } +@media only screen and (max-width: 500px) { + .container { + padding: 5px; + } +} + .row { display: flex; flex-flow: row; flex-wrap: wrap; } +@media (max-width: 800px) { + .row { + display: block; + } +} + /*** Spaltendefinitionen Smartphone Ansicht ***/ @media (max-width: 529px) { .col-s-12 { flex: 0 0 100%; } - + /*** Loesung Workshop-Seite ***/ .textContent { padding: 15px 0 0 0; @@ -33,19 +45,22 @@ } /*** Spaltendefinitionen Tablet Ansicht ***/ -@media (min-width: 530px) { +@media (min-width: 750px) { .col-m-1 { flex: 0 0 100%; } + .col-m-4 { flex: 0 0 33.3333333%; } + .col-m-6 { flex: 0 0 50%; } + .col-m-12 { flex: 0 0 100%; - } + } } /*** Spaltendefinitionen Desktop Ansicht ***/ @@ -53,21 +68,35 @@ .col-1 { flex: 0 0 8.3333333%; } + .col-3 { flex: 0 0 25%; } + .col-4 { flex: 0 0 33.3333333%; } + + .col-card-4{ + flex: 1 1 calc((100% - (3 - 1) * 40px) / 3); + } + .col-5 { flex: 0 0 41.6666667%; } + .col-6 { flex: 0 0 50%; } + .col-8 { flex: 0 0 66.66666667%; } + + .col-9{ + flex: 0 0 75%; + } + .col-12 { flex: 0 0 100%; } diff --git a/Views/Welcome/showWelcome.phtml b/Views/Welcome/showWelcome.phtml index ca7d4dd..9a9a277 100644 --- a/Views/Welcome/showWelcome.phtml +++ b/Views/Welcome/showWelcome.phtml @@ -2,10 +2,10 @@ include dirname(__DIR__) . '/header.phtml'; // Filter auslesen -$rating = $_GET['rating'] ?? ''; -$price = $_GET['price'] ?? ''; +$rating = $_GET['rating'] ?? ''; +$price = $_GET['price'] ?? ''; $location = $_GET['location'] ?? ''; -?> +?>
@@ -13,114 +13,112 @@ $location = $_GET['location'] ?? '';

KURSE & ERLEBNISSE JEDER ART

Alle Kurse in deiner Nähe – auf einen Blick

-
-
-
-
- - +
+
+
+ + + - - - - + + + + +
-
-
- -
- 5, - 'titel' => 'Marketing Pro', - 'adresse' => 'Bulu ulu Straße 17', - 'preis' => '59,99€', - 'ort' => '33333 Frankfurt', - 'leiter' => 'Max Mustermann' - ], - [ - 'bewertung' => 4, - 'titel' => 'Design Basics', - 'adresse' => 'Musterstraße 10', - 'preis' => '39,99€', - 'ort' => '10115 Berlin', - 'leiter' => 'Lisa Beispiel' - ], - [ - 'bewertung' => 5, - 'titel' => 'Excel Masterclass', - 'adresse' => 'Tabellenweg 5', - 'preis' => '49,99€', - 'ort' => '20457 Hamburg', - 'leiter' => 'Thomas Tabelle' - ], - [ - 'bewertung' => 5, - 'titel' => 'Excel Masterclass', - 'adresse' => 'Tabellenweg 5', - 'preis' => '49,99€', - 'ort' => '20457 Hamburg', - 'leiter' => 'Thomas Tabelle' - ], - [ - 'bewertung' => 5, - 'titel' => 'Excel Masterclass', - 'adresse' => 'Tabellenweg 5', - 'preis' => '49,99€', - 'ort' => '20457 Hamburg', - 'leiter' => 'Thomas Tabelle' - ], - ]; +
+ +
+ 5, + 'titel' => 'Marketing Pro', + 'adresse' => 'Bulu ulu Straße 17', + 'preis' => '59,99€', + 'ort' => '33333 Frankfurt', + 'leiter' => 'Max Mustermann' + ], + [ + 'bewertung' => 4, + 'titel' => 'Design Basics', + 'adresse' => 'Musterstraße 10', + 'preis' => '39,99€', + 'ort' => '10115 Berlin', + 'leiter' => 'Lisa Beispiel' + ], + [ + 'bewertung' => 5, + 'titel' => 'Excel Masterclass', + 'adresse' => 'Tabellenweg 5', + 'preis' => '49,99€', + 'ort' => '20457 Hamburg', + 'leiter' => 'Thomas Tabelle' + ], + [ + 'bewertung' => 5, + 'titel' => 'Excel Masterclass', + 'adresse' => 'Tabellenweg 5', + 'preis' => '49,99€', + 'ort' => '20457 Hamburg', + 'leiter' => 'Thomas Tabelle' + ], + [ + 'bewertung' => 5, + 'titel' => 'Excel Masterclass', + 'adresse' => 'Tabellenweg 5', + 'preis' => '49,99€', + 'ort' => '20457 Hamburg', + 'leiter' => 'Thomas Tabelle' + ], + ]; - // Filter anwenden - $filteredKurse = array_filter($kurse, function($kurs) use ($rating, $location) { - if ($rating && $kurs['bewertung'] < $rating) return false; - if ($location && stripos($kurs['ort'], $location) === false) return false; - return true; - }); - - // Preise in Float umwandeln für Sortierung - if ($price) { - usort($filteredKurse, function($a, $b) use ($price) { - $priceA = floatval(str_replace(',', '.', str_replace('€', '', $a['preis']))); - $priceB = floatval(str_replace(',', '.', str_replace('€', '', $b['preis']))); - return $price === 'asc' ? $priceA <=> $priceB : $priceB <=> $priceA; + // Filter anwenden + $filteredKurse = array_filter($kurse, function ($kurs) use ($rating, $location) { + if ($rating && $kurs['bewertung'] < $rating) return false; + if ($location && stripos($kurs['ort'], $location) === false) return false; + return true; }); - } - foreach ($filteredKurse as $kurs): ?> -
-
-
-
-
★
-
-
Kursleiter:
-
-
-
-
-
+ // Preise in Float umwandeln für Sortierung + if ($price) { + usort($filteredKurse, function ($a, $b) use ($price) { + $priceA = floatval(str_replace(',', '.', str_replace('€', '', $a['preis']))); + $priceB = floatval(str_replace(',', '.', str_replace('€', '', $b['preis']))); + return $price === 'asc' ? $priceA <=> $priceB : $priceB <=> $priceA; + }); + } + + foreach ($filteredKurse as $kurs): ?> +
+
+
+
+
★
+
+
Kursleiter:
+
+
+
+
+
+
-
- + +
-
- -
diff --git a/Views/header.phtml b/Views/header.phtml index 4ef8ad2..5344df2 100644 --- a/Views/header.phtml +++ b/Views/header.phtml @@ -14,25 +14,31 @@ -
- +
- - +
+
\ No newline at end of file