erste funktionierende Berater-Sektion
luay
parent
dfdcd70d24
commit
fb01091e61
|
|
@ -0,0 +1,100 @@
|
||||||
|
:root {
|
||||||
|
--bg-dark-1: #0d0d1a;
|
||||||
|
--bg-dark-2: #1a1a2e;
|
||||||
|
--accent-teal: #10B981;
|
||||||
|
|
||||||
|
--text-white: #ffffff;
|
||||||
|
--text-lightgray: #F8FAFC;
|
||||||
|
--text-muted: #94A3B8;
|
||||||
|
|
||||||
|
/* Beide Schrift-Variablen nutzen jetzt Sans-Serif (Inter) */
|
||||||
|
--font-display: 'Inter', system-ui, sans-serif;
|
||||||
|
--font-body: 'Inter', system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
background-color: var(--bg-dark-1);
|
||||||
|
color: var(--text-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-section {
|
||||||
|
padding: 80px 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
max-width: 1000px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-card {
|
||||||
|
background-color: var(--bg-dark-2);
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
width: 380px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-image-wrapper {
|
||||||
|
background-color: var(--bg-dark-1);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-image-wrapper img {
|
||||||
|
width: 100%;
|
||||||
|
height: 350px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Name nutzt jetzt Sans-Serif */
|
||||||
|
.berater-name {
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-rolle {
|
||||||
|
margin: 0 0 24px 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berater-bio-box {
|
||||||
|
background-color: var(--bg-dark-1);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio-title {
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-lightgray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio-text {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 24 MiB |
25
index.html
25
index.html
|
|
@ -4,26 +4,33 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Ernährungsberater</title>
|
<title>Ernährungsberater - Tri-hub</title>
|
||||||
|
|
||||||
|
<!-- Typografie: Nur noch Sans-Serif (Inter) geladen -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Leistungsübersicht Vincent-->
|
<!-- Leistungsübersicht Vincent-->
|
||||||
<section>
|
<section></section>
|
||||||
|
|
||||||
|
<!-- Berater & Qualifikationen -->
|
||||||
|
<section class="berater-section">
|
||||||
|
<!-- Container wird durch berater.js befüllt -->
|
||||||
|
<div class="berater-container" id="berater-container"></div>
|
||||||
</section>
|
</section>
|
||||||
<!-- Berater & Qualifikationen Ahmad -->
|
|
||||||
<section>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<!-- Info über Beratung Dennis-->
|
<!-- Info über Beratung Dennis-->
|
||||||
<section>
|
<section></section>
|
||||||
|
|
||||||
</section>
|
|
||||||
<!-- Produktsübersicht Shahnam -->
|
<!-- Produktsübersicht Shahnam -->
|
||||||
<section>
|
<section></section>
|
||||||
|
|
||||||
</section>
|
<script src="js/berater.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Die neue ID 'berater-container' auswählen
|
||||||
|
const container = document.getElementById('berater-container');
|
||||||
|
|
||||||
|
fetch('json/berater.json')
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Fehler beim Laden der Datei: json/berater.json');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(beraterDaten => {
|
||||||
|
// Variablen von 'advisor' zu 'berater' geändert
|
||||||
|
beraterDaten.forEach(berater => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'berater-card'; // Neue Klasse
|
||||||
|
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="berater-image-wrapper">
|
||||||
|
<img src="${berater.image}" alt="${berater.name} Profilbild">
|
||||||
|
</div>
|
||||||
|
<h2 class="berater-name">${berater.name}</h2>
|
||||||
|
<h3 class="berater-rolle">${berater.role}</h3>
|
||||||
|
|
||||||
|
<div class="berater-bio-box">
|
||||||
|
<h4 class="bio-title">${berater.bioTitle}</h4>
|
||||||
|
<p class="bio-text">${berater.bioText}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.appendChild(card);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Fehler:', error);
|
||||||
|
container.innerHTML = '<p style="color: #94A3B8;">Die Beraterprofile konnten nicht geladen werden.</p>';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "Relindis Agethen",
|
||||||
|
"role": "TRIATHLETIN UND BERATERIN",
|
||||||
|
"image": "img/relindis_agethen.png",
|
||||||
|
"bioTitle": "Kurzbiografie",
|
||||||
|
"bioText": "Relindis Agethen bereichert das Team mit ihrer umfassenden Expertise. Als aktive Triathletin und Beraterin weiß sie genau, worauf es bei der Vorbereitung ankommt und unterstützt Athletinnen und Athleten dabei, ihre persönlichen Ziele sicher zu erreichen."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "Relindis Agethen",
|
||||||
|
"role": "TRIATHLETIN UND BERATERIN",
|
||||||
|
"image": "img/relindis_agethen.png",
|
||||||
|
"bioTitle": "Kurzbiografie",
|
||||||
|
"bioText": "Relindis Agethen bereichert das Team mit ihrer umfassenden Expertise. Als aktive Triathletin und Beraterin weiß sie genau, worauf es bei der Vorbereitung ankommt und unterstützt Athletinnen und Athleten dabei, ihre persönlichen Ziele sicher zu erreichen."
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
Reference in New Issue