kurs-app/CSS/Element/card.css

74 lines
1.4 KiB
CSS

.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;
}