showWelcome neu aufgebaut, style Funktionen komplett in card.css übergeben
This commit is contained in:
parent
430d1b38c0
commit
625cf0f30e
@ -1,73 +1,111 @@
|
||||
.welcome-container {
|
||||
background-color: var(--brand-background);
|
||||
padding: 40px 20px;
|
||||
min-height: 100vh;
|
||||
/* === Grundlayout === */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-family-main);
|
||||
background-color: var(--brand-background);
|
||||
color: var(--brand-white);
|
||||
}
|
||||
|
||||
/* === Header-Bereich === */
|
||||
.welcome-header {
|
||||
text-align: center;
|
||||
margin: 60px 20px 40px 20px;
|
||||
}
|
||||
|
||||
.welcome-heading {
|
||||
color: var (--brand-primary);
|
||||
font-size: var(--font-size-title-h2);
|
||||
margin-bottom: 40px;
|
||||
font-size: 50px;
|
||||
font-weight: 500;
|
||||
color: var(--brand-primary); /* Orange-Ton */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.welcome-subheading {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: left;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding-left: 230px;
|
||||
}
|
||||
|
||||
/* === Kurs-Grid === */
|
||||
.course-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
gap: 30px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* === Kurs-Karte === */
|
||||
.course-card {
|
||||
flex: 0 0 calc(33.333% - 20px);
|
||||
flex: 0 0 calc(33.333% - 20px); /* Drei nebeneinander */
|
||||
background: var(--brand-white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Optional: Kurs-Bildbereich */
|
||||
.course-image {
|
||||
background-color: var(--brand-white); /* Platzhalter, später durch Kursbild ersetzen */
|
||||
height: 200px;
|
||||
background-color: #ddd; /* Platzhalter – kannst du durch echte Bilder ersetzen */
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* === Kurs-Inhalt === */
|
||||
.course-content {
|
||||
background-color: var(--brand-primary);
|
||||
background-color: var(--brand-primary); /* Orange */
|
||||
color: var(--brand-white);
|
||||
padding: 20px;
|
||||
font-size: var(--font-size-text);
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-family-main);
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.course-left,
|
||||
.course-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--font-size-small);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.course-left div:first-child,
|
||||
.course-right div:first-child {
|
||||
font-weight: bold;
|
||||
font-size: var(--font-size-text);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.course-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.course-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* === Responsive Anpassung === */
|
||||
@media screen and (max-width: 1024px) {
|
||||
.course-card {
|
||||
flex: 0 0 calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.course-image {
|
||||
flex: 1;
|
||||
@media screen and (max-width: 640px) {
|
||||
.course-card {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.welcome-heading {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.welcome-subheading {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
.container{
|
||||
max-width: 90%;
|
||||
padding: 24px 42px 24px 42px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
||||
@ -1,29 +1,60 @@
|
||||
<?php include dirname(__DIR__) . '/header.phtml'; ?>
|
||||
<?php
|
||||
include dirname(__DIR__) . '/header.phtml';
|
||||
?>
|
||||
|
||||
<article class="welcome-container">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1>
|
||||
<p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
|
||||
<div class="course-grid">
|
||||
<?php
|
||||
// Beispiel-Kurse
|
||||
$kurse = [
|
||||
[
|
||||
'bewertung' => 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'
|
||||
]
|
||||
];
|
||||
|
||||
<h2 class="welcome-heading">Kurse</h2>
|
||||
|
||||
<div class="course-grid">
|
||||
|
||||
<?php for ($i = 0; $i < 6; $i++): ?>
|
||||
<div class="course-card">
|
||||
<div class="course-image"></div>
|
||||
<div class="course-content">
|
||||
<div class="course-left">
|
||||
<div>5 ★ Marketing Pro</div>
|
||||
<div>Bulu ulu Straße 17</div>
|
||||
</div>
|
||||
<div class="course-right">
|
||||
<div>59,99€</div>
|
||||
<div>33333 Frankfurt</div>
|
||||
foreach ($kurse as $kurs): ?>
|
||||
<div class="course-card col-4">
|
||||
<div class="course-image"></div>
|
||||
<div class="course-content">
|
||||
<div class="course-left">
|
||||
<div><?= $kurs['bewertung'] ?> ★</div>
|
||||
<div><?= $kurs['titel'] ?></div>
|
||||
<div>Kursleiter: <?= $kurs['leiter'] ?></div>
|
||||
<div><?= $kurs['adresse'] ?></div>
|
||||
</div>
|
||||
<div class="course-right">
|
||||
<div><?= $kurs['preis'] ?></div>
|
||||
<div><?= $kurs['ort'] ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<?php include dirname(__DIR__) . '/footer.phtml'; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user