diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..416bdce --- /dev/null +++ b/css/style.css @@ -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); +} \ No newline at end of file diff --git a/img/relindis_agethen.png b/img/relindis_agethen.png new file mode 100644 index 0000000..ca0e288 Binary files /dev/null and b/img/relindis_agethen.png differ diff --git a/index.html b/index.html index c8edbe7..d6cebac 100644 --- a/index.html +++ b/index.html @@ -4,26 +4,33 @@ - Ernährungsberater + Ernährungsberater - Tri-hub + + + + + + + -
+
+ +
+ +
- -
-
-
+
-
-
+
-
+ \ No newline at end of file diff --git a/js/berater.js b/js/berater.js new file mode 100644 index 0000000..52666ae --- /dev/null +++ b/js/berater.js @@ -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 = ` +
+ ${berater.name} Profilbild +
+

${berater.name}

+

${berater.role}

+ +
+

${berater.bioTitle}

+

${berater.bioText}

+
+ `; + + container.appendChild(card); + }); + }) + .catch(error => { + console.error('Fehler:', error); + container.innerHTML = '

Die Beraterprofile konnten nicht geladen werden.

'; + }); +}); \ No newline at end of file diff --git a/json/berater.json b/json/berater.json new file mode 100644 index 0000000..20cee1e --- /dev/null +++ b/json/berater.json @@ -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." + } +] \ No newline at end of file diff --git a/script.js b/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/style.css b/style.css deleted file mode 100644 index e69de29..0000000