public/girlsday2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init commit
Deploy Website per SSH / index.html auf Webserver deployen (push) Failing after 2m26s
Details

Browse Source
This commit is contained in:
Andreas Martin
2026-04-23 11:46:58 +02:00
commit ff04008a8c
3 changed files with 1021 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitea/workflows/deploy.yml
+66
View File
@@ -0,0 +1,66 @@
name: Deploy Website per SSH
# Auslöser: Bei jedem Push auf den main-Branch
on:
push:
branches:
- main
workflow_dispatch: # ermöglicht manuelles Starten über die Gitea-Oberfläche
jobs:
deploy:
name: index.html auf Webserver deployen
runs-on: ubuntu-latest
steps:
# ─────────────────────────────────────────────
# 1. Repository auschecken
# ─────────────────────────────────────────────
- name: 📥 Repository klonen
uses: actions/checkout@v4
# ─────────────────────────────────────────────
# 2. SSH-Key einrichten
# ─────────────────────────────────────────────
- name: 🔑 SSH-Key vorbereiten
run: |
mkdir -p ~/.ssh
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan -H -p ${{ secrets.SSH_PORT }} ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
# ─────────────────────────────────────────────
# 3. Verbindung testen (optional, aber empfohlen)
# ─────────────────────────────────────────────
- name: 🔌 SSH-Verbindung testen
run: |
ssh -p ${{ secrets.SSH_PORT }} \
-i ~/.ssh/id_rsa \
${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} \
"echo '✅ SSH-Verbindung erfolgreich' && hostname && date"
# ─────────────────────────────────────────────
# 4. index.html per SCP kopieren
# ─────────────────────────────────────────────
- name: 📤 index.html auf Server kopieren
run: |
scp -P ${{ secrets.SSH_PORT }} \
-i ~/.ssh/id_rsa \
./index.html \
${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.DEPLOY_PATH }}/index.html
# ─────────────────────────────────────────────
# 5. Berechtigungen auf dem Server setzen (optional)
# ─────────────────────────────────────────────
- name: 🔧 Dateirechte anpassen
run: |
ssh -p ${{ secrets.SSH_PORT }} \
-i ~/.ssh/id_rsa \
${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} \
"chmod 644 ${{ secrets.DEPLOY_PATH }}/index.html && ls -lah ${{ secrets.DEPLOY_PATH }}/"
# ─────────────────────────────────────────────
# 6. Erfolgsmeldung
# ─────────────────────────────────────────────
- name: ✅ Deployment abgeschlossen
run: echo "🎉 index.html wurde erfolgreich nach ${{ secrets.SSH_HOST }}:${{ secrets.DEPLOY_PATH }} deployed!"
README.md
+14
View File
@@ -0,0 +1,14 @@
# Girls and Boys Day
Demo Seite für den Girls Day 2026, der IGS Buxtehude.
Die Seite ist mit Claude WEB erstellt und wurde von Lena Angepasst mit korrekten Werten und Tätigkeiten.
```prompt
Context: Schulkind, GrilsDay, Mädchen.Klasse 6
erstelle eine Websteite, Name Lena Martin, Seriöser Aufbau, thema Girls and Boys Day,
ein Tag bei einen Beruf des DevOps.
```
index.html
+941
View File
@@ -0,0 +1,941 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Girls'Day Erfahrungsbericht – Lena Martin</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #6a0f8e;
--primary-light: #9b30c2;
--accent: #e91e8c;
--accent-light: #f48fb1;
--bg: #faf5ff;
--bg-card: #ffffff;
--text-dark: #1a1a2e;
--text-mid: #3d3d5c;
--text-light: #6b6b8a;
--border: #e0d4f0;
--success: #2e7d32;
--tag-bg: #f3e5f5;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg);
color: var(--text-dark);
line-height: 1.7;
}
/* ── HEADER ── */
header {
background: linear-gradient(135deg, var(--primary) 0%, #4a0072 50%, #1a0030 100%);
color: #fff;
padding: 0;
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 300px; height: 300px;
background: rgba(233,30,140,0.15);
border-radius: 50%;
}
header::after {
content: '';
position: absolute;
bottom: -80px; left: -40px;
width: 250px; height: 250px;
background: rgba(155,48,194,0.12);
border-radius: 50%;
}
.header-inner {
max-width: 960px;
margin: 0 auto;
padding: 60px 24px 50px;
position: relative;
z-index: 1;
}
.badge-girlsday {
display: inline-block;
background: var(--accent);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 20px;
}
header h1 {
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 800;
line-height: 1.2;
margin-bottom: 12px;
}
header h1 span {
color: var(--accent-light);
}
.header-sub {
font-size: 1.05rem;
color: rgba(255,255,255,0.82);
max-width: 600px;
margin-bottom: 28px;
}
.author-bar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.author-avatar {
width: 50px; height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #fff;
font-weight: 700;
flex-shrink: 0;
border: 3px solid rgba(255,255,255,0.3);
}
.author-info .name {
font-weight: 700;
font-size: 1rem;
color: #fff;
}
.author-info .meta {
font-size: 0.8rem;
color: rgba(255,255,255,0.7);
}
/* ── LAYOUT ── */
.page-container {
max-width: 960px;
margin: 0 auto;
padding: 40px 24px 60px;
display: grid;
grid-template-columns: 1fr 280px;
gap: 32px;
align-items: start;
}
@media (max-width: 720px) {
.page-container {
grid-template-columns: 1fr;
}
}
/* ── CARDS ── */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 30px;
margin-bottom: 26px;
box-shadow: 0 2px 12px rgba(106,15,142,0.06);
}
.card:last-child { margin-bottom: 0; }
.card-title {
font-size: 1.18rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.card-title .icon {
font-size: 1.3rem;
}
/* ── INTRO HIGHLIGHT ── */
.intro-highlight {
border-left: 4px solid var(--accent);
background: linear-gradient(90deg, #fce4f3, #f9f0ff);
padding: 18px 22px;
border-radius: 0 10px 10px 0;
margin-bottom: 20px;
font-size: 1.02rem;
font-style: italic;
color: var(--text-mid);
}
/* ── TAGESABLAUF TIMELINE ── */
.timeline {
position: relative;
padding-left: 28px;
}
.timeline::before {
content: '';
position: absolute;
left: 9px; top: 6px; bottom: 6px;
width: 2px;
background: linear-gradient(to bottom, var(--accent), var(--primary));
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: 28px;
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot {
position: absolute;
left: -28px;
top: 4px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--primary);
border: 3px solid var(--bg);
box-shadow: 0 0 0 2px var(--primary);
}
.timeline-time {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.timeline-title {
font-weight: 700;
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 6px;
}
.timeline-desc {
font-size: 0.93rem;
color: var(--text-mid);
}
/* ── INFO BOXES ── */
.info-box {
background: var(--tag-bg);
border: 1px solid #d4aaee;
border-radius: 10px;
padding: 16px 18px;
margin-top: 16px;
}
.info-box.green {
background: #e8f5e9;
border-color: #a5d6a7;
}
.info-box-title {
font-weight: 700;
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--primary);
margin-bottom: 8px;
}
.info-box.green .info-box-title {
color: var(--success);
}
/* ── ERKENNTNIS LISTE ── */
.checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.checklist li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.95rem;
color: var(--text-mid);
}
.checklist li::before {
content: '✔';
color: var(--accent);
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
margin-top: 2px;
}
/* ── TECH GLOSSAR ── */
.glossar-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 500px) {
.glossar-grid { grid-template-columns: 1fr; }
}
.glossar-item {
background: var(--tag-bg);
border-radius: 8px;
padding: 12px 14px;
border: 1px solid var(--border);
}
.glossar-term {
font-weight: 700;
font-size: 0.88rem;
color: var(--primary);
margin-bottom: 4px;
}
.glossar-def {
font-size: 0.82rem;
color: var(--text-light);
}
/* ── ZITAT ── */
blockquote {
background: linear-gradient(135deg, #f3e5f5, #fce4f3);
border-left: 5px solid var(--accent);
border-radius: 0 12px 12px 0;
padding: 20px 24px;
margin: 20px 0;
font-style: italic;
font-size: 1.05rem;
color: var(--text-mid);
}
blockquote cite {
display: block;
margin-top: 10px;
font-size: 0.82rem;
font-style: normal;
font-weight: 700;
color: var(--primary);
}
/* ── SIDEBAR ── */
.sidebar .card {
padding: 22px;
}
.sidebar .card-title {
font-size: 1rem;
}
.stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 0.88rem;
}
.stat-row:last-child { border-bottom: none; }
.stat-label { color: var(--text-light); }
.stat-value { font-weight: 700; color: var(--primary); }
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.tag {
background: var(--tag-bg);
border: 1px solid #d4aaee;
color: var(--primary);
font-size: 0.78rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
}
.tag.accent {
background: #fce4f3;
border-color: var(--accent-light);
color: var(--accent);
}
/* Bewertungs-Sterne */
.stars {
color: #f9a825;
font-size: 1.2rem;
letter-spacing: 2px;
}
.rating-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.rating-label {
font-size: 0.85rem;
color: var(--text-mid);
}
/* Progress bar */
.progress-bar {
background: #e0d4f0;
border-radius: 10px;
height: 8px;
overflow: hidden;
margin-bottom: 4px;
}
.progress-fill {
height: 100%;
border-radius: 10px;
background: linear-gradient(90deg, var(--primary-light), var(--accent));
}
/* ── EMPFEHLUNG BOX ── */
.empfehlung {
background: linear-gradient(135deg, var(--primary), #9b30c2);
color: #fff;
border-radius: 14px;
padding: 28px;
text-align: center;
margin-top: 26px;
}
.empfehlung h3 {
font-size: 1.15rem;
margin-bottom: 10px;
}
.empfehlung p {
font-size: 0.9rem;
opacity: 0.88;
margin-bottom: 18px;
}
.btn {
display: inline-block;
background: var(--accent);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 0.88rem;
padding: 10px 22px;
border-radius: 24px;
transition: background 0.2s;
}
.btn:hover { background: #c21577; }
/* ── FOOTER ── */
footer {
background: var(--text-dark);
color: rgba(255,255,255,0.7);
text-align: center;
padding: 28px 24px;
font-size: 0.83rem;
}
footer a {
color: var(--accent-light);
text-decoration: none;
}
footer strong {
color: #fff;
}
/* ── RESPONSIVE ── */
@media (max-width: 600px) {
.header-inner { padding: 40px 20px 36px; }
.card { padding: 20px; }
}
</style>
</head>
<body>
<!-- ═══════════════════════════ HEADER ═══════════════════════════ -->
<header>
<div class="header-inner">
<span class="badge-girlsday">🚀 Girls'Day 2026 · Erfahrungsbericht</span>
<h1>Ein Tag als<br><span>DevOps-Engineers</span></h1>
<p class="header-sub">
Wie ich beim Girls'Day hinter die Kulissen der Software-Entwicklung geschaut
habe – und warum Technik viel mehr Spaß macht, als ich dachte.
</p>
<div class="author-bar">
<div class="author-avatar">LM</div>
<div class="author-info">
<div class="name">Lena Martin</div>
<div class="meta">Klasse 6 &nbsp;·&nbsp; Girls'Day, 23. April 2026</div>
</div>
</div>
</div>
</header>
<!-- ═══════════════════════════ MAIN ═══════════════════════════ -->
<div class="page-container">
<!-- ────────────────── HAUPTINHALT ────────────────── -->
<main>
<!-- EINLEITUNG -->
<div class="card">
<div class="card-title"><span class="icon">📝</span> Einleitung</div>
<div class="intro-highlight">
„Ich wusste vorher nicht einmal, was DevOps bedeutet. Jetzt weiß ich,
dass ich vielleicht einmal genau das machen möchte."
</div>
<p>
Mein Name ist <strong>Lena Martin</strong>, ich bin 13 Jahre alt und besuche
die 6. Klasse. Am <strong>23. April 2026</strong> durfte ich beim
<strong>Girls'Day – Mädchen-Zukunftstag</strong> einen ganzen Tag lang in
einem echten Softwareunternehmen mitarbeiten. Dort habe ich den Berufsalltag
eines <em>DevOps-Engineers</em> kennengelernt.
</p>
<p style="margin-top:12px;">
Der Girls'Day findet jedes Jahr im April statt und gibt Mädchen die
Möglichkeit, Berufe kennenzulernen, in denen Frauen bisher kaum vertreten
sind – vor allem in den Bereichen IT, Technik, Handwerk und
Naturwissenschaften. Für mich war es eine ganz neue Welt.
</p>
<div class="info-box">
<div class="info-box-title">💡 Was ist der Girls'Day?</div>
<p style="font-size:0.9rem; color:var(--text-mid);">
Der Girls'Day ist ein bundesweiter Aktionstag, der einmal jährlich –
meist am vierten Donnerstag im April – stattfindet. Schülerinnen ab
Klasse 5 können Unternehmen, Hochschulen und Betriebe besuchen und
Berufe kennenlernen, in denen Männer bisher stark überwiegen.
Organisiert wird er vom
<em>Kompetenzzentrum Technik-Diversity-Chancengleichheit e. V.</em>
in Bielefeld.
</p>
</div>
</div>
<!-- WAS IST DEVOPS -->
<div class="card">
<div class="card-title"><span class="icon">💻</span> Was ist eigentlich DevOps?</div>
<p>
Bevor ich von meinem Tag erzähle, erkläre ich kurz, was
<strong>DevOps</strong> bedeutet – denn ich kannte das Wort vorher
überhaupt nicht.
</p>
<p style="margin-top:12px;">
DevOps setzt sich zusammen aus den englischen Wörtern
<strong>„Development"</strong> (Entwicklung) und
<strong>„Operations"</strong> (Betrieb). DevOps-Engineers und
-Ingenieure sorgen dafür, dass neue Programme schnell und fehlerfrei
fertiggestellt, getestet und für alle Nutzer bereitgestellt werden.
Sie bauen sozusagen die <em>Brücke</em> zwischen den Programmiererinnen,
die neue Funktionen schreiben, und dem Team, das die Server betreibt.
</p>
<div class="glossar-grid" style="margin-top:18px;">
<div class="glossar-item">
<div class="glossar-term">🖥️ Server</div>
<div class="glossar-def">Ein leistungsstarker Computer, der Programme und Daten für viele Nutzer gleichzeitig bereitstellt.</div>
</div>
<div class="glossar-item">
<div class="glossar-term">🔁 Pipeline</div>
<div class="glossar-def">Eine automatische „Fließband"-Kette, die neuen Code prüft und veröffentlicht.</div>
</div>
<div class="glossar-item">
<div class="glossar-term">🐳 Container</div>
<div class="glossar-def">Eine Art „digitale Box", in der ein Programm sicher und isoliert läuft.</div>
</div>
<div class="glossar-item">
<div class="glossar-term">📊 Monitoring</div>
<div class="glossar-def">Das ständige Beobachten von Systemen, damit Fehler sofort erkannt werden.</div>
</div>
<div class="glossar-item">
<div class="glossar-term">☁️ Cloud</div>
<div class="glossar-def">Server und Rechenleistung, die über das Internet genutzt werden – ohne eigene Hardware.</div>
</div>
<div class="glossar-item">
<div class="glossar-term">🤖 Automatisierung</div>
<div class="glossar-def">Wiederkehrende Aufgaben werden von Skripten erledigt, damit Menschen Zeit sparen.</div>
</div>
</div>
</div>
<!-- TAGESABLAUF -->
<div class="card">
<div class="card-title"><span class="icon">🗓️</span> Mein Tagesablauf</div>
<p style="margin-bottom:20px; color:var(--text-mid); font-size:0.93rem;">
Von 08:30 bis 16:00 Uhr war ich dabei. Hier ist alles, was ich erlebt habe:
</p>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">08:30 Uhr</div>
<div class="timeline-title">Ankommen & Willkommensrunde</div>
<div class="timeline-desc">
Ich wurde am Empfang abgeholt und bekam meinen eigenen
Besucher-Ausweis – das hat sich schon professionell angefühlt!
Zusammen mit vier anderen Mädchen aus verschiedenen Schulen haben
wir uns in einem Besprechungsraum kennengelernt. Eine
DevOps-Engineers namens <strong>Clara</strong> hat uns erklärt,
was uns erwartet.
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">09:00 Uhr</div>
<div class="timeline-title">Bürorundgang & Teamvorstellung</div>
<div class="timeline-desc">
Wir haben das ganze Unternehmen besichtigt. Besonders beeindruckend
war der <em>Server-Raum</em>: Es war sehr kalt, sehr laut und
überall blinkten bunte Lichter an riesigen schwarzen Schränken.
Clara erklärte uns, dass das die echten Computer sind, auf denen
die Programme laufen.
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">09:45 Uhr</div>
<div class="timeline-title">Workshop: „Wie läuft eine Pipeline ab?"</div>
<div class="timeline-desc">
An echten Computern haben wir eine vereinfachte
<strong>CI/CD-Pipeline</strong> beobachtet. Clara hat uns gezeigt,
wie aus neuem Programmcode automatisch eine fertige App wird:
testen, prüfen, veröffentlichen – alles in weniger als 3 Minuten,
ganz ohne Handarbeit. Das fand ich total faszinierend.
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">11:00 Uhr</div>
<div class="timeline-title">Selber machen: Mini-Aufgabe am Laptop</div>
<div class="timeline-desc">
Wir durften selbst an einem Laptop eine kleine Aufgabe lösen:
Wir haben einen <strong>Fehler in einem Skript</strong> gesucht
und ihn repariert (das nennt man „debuggen"). Als mein Code am Ende
funktionierte und auf dem Bildschirm „✅ Build erfolgreich!"
erschien, war ich richtig stolz auf mich.
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">12:15 Uhr</div>
<div class="timeline-title">Mittagspause & Gespräche mit dem Team</div>
<div class="timeline-desc">
In der Kantine haben wir mit verschiedenen Mitarbeiterinnen
gegessen und viele Fragen gestellt: Wie lange haben sie studiert?
Haben sie auch mit 11 schon Interesse an Technik gehabt?
Viele sagten: <em>„Nein – aber neugierig sein reicht!"</em>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">13:15 Uhr</div>
<div class="timeline-title">Live-Demo: Monitoring & Fehleralarm</div>
<div class="timeline-desc">
Auf einem großen Monitor sahen wir in Echtzeit, wie das
Monitoring-System des Unternehmens funktioniert. Plötzlich
leuchtete ein roter Alarm auf – natürlich nur als Demo. Wir
konnten zuschauen, wie das Team innerhalb von Minuten den
„Fehler" lokalisierte und behob. Wie in einer Krimiserie!
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">14:30 Uhr</div>
<div class="timeline-title">Teammeeting – als echte Teilnehmerinnen</div>
<div class="timeline-desc">
Wir wurden zu einem echten <strong>Stand-up-Meeting</strong>
eingeladen. Jede Person erklärte kurz: Was habe ich heute
gemacht? Was plane ich als Nächstes? Gibt es Probleme?
Wir durften sogar unsere eigene Zusammenfassung des Tages
vorstellen – auf Englisch!
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-time">15:15 Uhr</div>
<div class="timeline-title">Abschlussrunde & Zertifikat</div>
<div class="timeline-desc">
Zum Abschluss haben wir über unsere Eindrücke gesprochen und
jede von uns hat ein offizielles
<strong>Girls'Day-Teilnahmezertifikat</strong> erhalten.
Außerdem bekamen wir eine kleine Überraschungstasche mit
Infomaterial und einem USB-Stick mit Lernressourcen zum Thema
Programmieren für Einsteiger.
</div>
</div>
</div>
</div>
<!-- ZITAT -->
<blockquote>
„Ich dachte immer, Technik sei nur etwas für Jungs. Aber heute habe ich
gelernt, dass das totaler Unsinn ist. Die coolsten Dinge, die ich heute
gesehen habe, wurden von Frauen gebaut."
<cite>– Lena Martin, Klasse 6</cite>
</blockquote>
<!-- ERKENNTNISSE -->
<div class="card">
<div class="card-title"><span class="icon">🌟</span> Was ich gelernt habe</div>
<ul class="checklist">
<li>DevOps-Engineers brauchen sowohl technisches Wissen als auch Teamfähigkeit und Kommunikation.</li>
<li>Viele Aufgaben werden automatisiert – das spart Zeit für die wirklich interessanten Herausforderungen.</li>
<li>Fehler sind normal. Wichtig ist, sie schnell zu erkennen und ruhig zu beheben.</li>
<li>Man muss nicht perfekt in Mathe sein – logisches Denken und Neugier sind genauso wichtig.</li>
<li>Frauen in der IT sind immer noch eine Minderheit, aber das ändert sich – und jede von uns kann dazu beitragen.</li>
<li>Englisch ist in der Technikwelt sehr wichtig, weil viele Fachbegriffe und Programme auf Englisch sind.</li>
<li>Es gibt viele verschiedene Wege in einen IT-Beruf: Studium, Ausbildung oder auch Quereinsteig.</li>
</ul>
<div class="info-box green" style="margin-top:20px;">
<div class="info-box-title">🎓 Mögliche Ausbildungswege für DevOps</div>
<p style="font-size:0.88rem; color:#2e4a2e;">
<strong>Studium:</strong> Informatik, Medieninformatik, Wirtschaftsinformatik<br>
<strong>Ausbildung:</strong> Fachinformatikerin für Systemintegration<br>
<strong>Selbststudium:</strong> Online-Kurse, Coding-AGs, Jugend forscht<br>
<strong>Girls'Day:</strong> Jedes Jahr neu reinschnuppern und Kontakte knüpfen!
</p>
</div>
</div>
<!-- FAZIT -->
<div class="card">
<div class="card-title"><span class="icon">✏️</span> Mein persönliches Fazit</div>
<p>
Der Girls'Day war für mich ein wirklich besonderer Tag. Ich bin
hineingegangen ohne große Erwartungen und herausgekommen mit dem Gefühl,
dass ich vielleicht wirklich einmal einen Beruf in der IT-Welt anstreben
möchte.
</p>
<p style="margin-top:12px;">
Was mich am meisten begeistert hat: In einem DevOps-Team arbeiten
Menschen zusammen, die unterschiedliche Stärken mitbringen. Es geht nicht
darum, alles alleine zu können – sondern darum, gemeinsam Lösungen zu
finden. Das klingt für mich nach einem Traumjob.
</p>
<p style="margin-top:12px;">
Ich empfehle jedem Mädchen: <strong>Traut euch!</strong> Meldet euch
beim Girls'Day an, probiert etwas Neues aus – vielleicht entdeckt ihr
auch eine neue Leidenschaft.
</p>
<div class="empfehlung">
<h3>📌 Jetzt für den nächsten Girls'Day anmelden!</h3>
<p>Über 10.000 Unternehmen beteiligen sich jedes Jahr. Für jede ist etwas dabei!</p>
<a class="btn" href="https://www.girls-day.de" target="_blank" rel="noopener">
→ girls-day.de besuchen
</a>
</div>
</div>
</main>
<!-- ────────────────── SIDEBAR ────────────────── -->
<aside class="sidebar">
<!-- STECKBRIEF -->
<div class="card">
<div class="card-title"><span class="icon">🪪</span> Steckbrief</div>
<div class="stat-row">
<span class="stat-label">Name</span>
<span class="stat-value">Lena Martin</span>
</div>
<div class="stat-row">
<span class="stat-label">Klasse</span>
<span class="stat-value">6</span>
</div>
<div class="stat-row">
<span class="stat-label">Aktionstag</span>
<span class="stat-value">Girls'Day 2026</span>
</div>
<div class="stat-row">
<span class="stat-label">Datum</span>
<span class="stat-value">23. April 2026</span>
</div>
<div class="stat-row">
<span class="stat-label">Beruf</span>
<span class="stat-value">DevOps-Engineers</span>
</div>
<div class="stat-row">
<span class="stat-label">Dauer</span>
<span class="stat-value">08:30 – 16:00 Uhr</span>
</div>
</div>
<!-- BEWERTUNG -->
<div class="card">
<div class="card-title"><span class="icon">⭐</span> Meine Bewertung</div>
<div class="rating-row">
<span class="rating-label">Spaßfaktor</span>
</div>
<div class="progress-bar"><div class="progress-fill" style="width:95%"></div></div>
<div class="rating-row" style="margin-top:10px;">
<span class="rating-label">Lerneffekt</span>
</div>
<div class="progress-bar"><div class="progress-fill" style="width:90%"></div></div>
<div class="rating-row" style="margin-top:10px;">
<span class="rating-label">Organisation</span>
</div>
<div class="progress-bar"><div class="progress-fill" style="width:88%"></div></div>
<div class="rating-row" style="margin-top:10px;">
<span class="rating-label">Weiterempfehlung</span>
</div>
<div class="progress-bar"><div class="progress-fill" style="width:100%"></div></div>
<div style="text-align:center; margin-top:16px;">
<div class="stars">★★★★★</div>
<p style="font-size:0.8rem; color:var(--text-light); margin-top:4px;">5 von 5 Sternen</p>
</div>
</div>
<!-- TAGS -->
<div class="card">
<div class="card-title"><span class="icon">🏷️</span> Themen</div>
<div class="tag-cloud">
<span class="tag">DevOps</span>
<span class="tag accent">Girls'Day</span>
<span class="tag">IT</span>
<span class="tag">MINT</span>
<span class="tag">Berufsorientierung</span>
<span class="tag accent">Programmieren</span>
<span class="tag">Cloud</span>
<span class="tag">Automatisierung</span>
<span class="tag">Coding</span>
<span class="tag accent">Zukunftsberuf</span>
</div>
</div>
<!-- GIRLS DAY FAKTEN -->
<div class="card">
<div class="card-title"><span class="icon">📊</span> Girls'Day in Zahlen</div>
<div class="stat-row">
<span class="stat-label">Teilnehmerinnen gesamt</span>
<span class="stat-value">&gt; 1,5 Mio.</span>
</div>
<div class="stat-row">
<span class="stat-label">Teilnehmende Betriebe</span>
<span class="stat-value">&gt; 10.000</span>
</div>
<div class="stat-row">
<span class="stat-label">Termin</span>
<span class="stat-value">4. Do. im April</span>
</div>
<div class="stat-row">
<span class="stat-label">Zielgruppe ab</span>
<span class="stat-value">Klasse 5</span>
</div>
<div class="stat-row">
<span class="stat-label">Organisator</span>
<span class="stat-value">Kompetenzzentrum Bielefeld</span>
</div>
</div>
<!-- QUELLEN -->
<div class="card">
<div class="card-title"><span class="icon">🔗</span> Quellen & Links</div>
<ul style="list-style:none; display:flex; flex-direction:column; gap:8px;">
<li>
<a href="https://www.girls-day.de/footer/haeufige-fragen"
target="_blank" rel="noopener"
style="color:var(--accent); font-size:0.85rem; text-decoration:none; font-weight:600;">
→ girls-day.de (Offizielle Seite)
</a>
</li>
<li>
<a href="https://www.frankfurt-main.ihk.de/aus-und-weiterbildung/berufsorientierung/veranstaltungen-und-projekte/girls-and-boys-day-maedchen-jungen-zukunftstag-5441620"
target="_blank" rel="noopener"
style="color:var(--accent); font-size:0.85rem; text-decoration:none; font-weight:600;">
→ IHK Frankfurt – Girls'Day
</a>
</li>
<li>
<a href="https://planet-beruf.de/eltern-und-erziehungsberechtigte/berufswahlinfos-fuer-mein-kind/berufsfelder-und-branchen/bericht-der-girlsday-und-der-boysday-im-ueberblick"
target="_blank" rel="noopener"
style="color:var(--accent); font-size:0.85rem; text-decoration:none; font-weight:600;">
→ Planet Beruf – Überblick
</a>
</li>
<li>
<a href="https://www.bafza.de/engagement-und-aktionen/girlsday-und-boysday"
target="_blank" rel="noopener"
style="color:var(--accent); font-size:0.85rem; text-decoration:none; font-weight:600;">
→ BAFZA – Girls'Day & Boys'Day
</a>
</li>
</ul>
</div>
</aside>
</div>
<!-- ═══════════════════════════ FOOTER ═══════════════════════════ -->
<footer>
<p>
<strong>Erfahrungsbericht Girls'Day 2026</strong> &nbsp;·&nbsp;
Verfasst von <strong>Lena Martin</strong>, Klasse 6 &nbsp;·&nbsp;
Aktionstag: 23. April 2026
</p>
<p style="margin-top:8px;">
Mehr Infos: <a href="https://www.girls-day.de" target="_blank" rel="noopener">www.girls-day.de</a>
&nbsp;|&nbsp;
<a href="https://www.boys-day.de" target="_blank" rel="noopener">www.boys-day.de</a>
</p>
<p style="margin-top:8px; opacity:0.5; font-size:0.75rem;">
Schulprojekt · Alle Inhalte wurden zum Zweck der Berufsorientierung erstellt.
</p>
</footer>
</body>
</html>