Lena.Martin
4cc58019b4
Deploy Website per SSH / index.html auf Webserver deployen (push) Successful in 8s
906 lines
33 KiB
HTML
906 lines
33 KiB
HTML
<!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 · 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 09:00 bis 16:30 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">09:00-09:20 Uhr</div>
|
||
<div class="timeline-title">Kennelernen des Arbeitsbereich</div>
|
||
<div class="timeline-desc">
|
||
Ein
|
||
DevOps-Engineers namens <strong>Andreas</strong> hat mir erklärt,
|
||
was mich erwartet.
|
||
Andreas arbeitet als DevOps im Service Support, die Themen sind primär
|
||
Infrastruktur, Automatisierung Prozesse.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-time">09:20-09:40 Uhr</div>
|
||
<div class="timeline-title">das daily</div>
|
||
<div class="timeline-desc">
|
||
Nach dem Andreas mir das meist gezeigt hat war auch schon der erste Termin. disen Termin nent man Daily.
|
||
Beim daily besprechen die kollegen was sie machen oder was sie machen werden.Andreas hat werend dem daily einn
|
||
angrif bei einer Webseite behoben.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-time">10:30-10:40 Uhr</div>
|
||
<div class="timeline-title">wie man mit mammouth.ai eine webseite herstelen</div>
|
||
<div class="timeline-desc">
|
||
Nach dem der Daily zu ende gegangen war hat Andreas mir gezeigt wie man eine webseite mit
|
||
einer KI namens mammouth.ai und mit den Modellen von Claude.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-time">10:40-10.50 Uhr</div>
|
||
<div class="timeline-title">die ersten wörter</div>
|
||
<div class="timeline-desc">
|
||
|
||
Andreas hat die schtich worte in ein Kasten geschriben und dan bestetigt.
|
||
Wir mussten kurz warten doch dann war es fertggestellt.Wir mussten noch ein wenig am anfag korigirt.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-time">10:50-15:50 Uhr</div>
|
||
<div class="timeline-title">mein text</div>
|
||
<div class="timeline-desc">
|
||
nach dem der text fertig war konnte ich mein tag auch schon aufschreiben.
|
||
nach dem ich alles aufgeschriben hate konnten wir die Webseite online machen. </em>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-time">15.50-16:30 Uhr</div>
|
||
<div class="timeline-title">am ende des tages</div>
|
||
<div class="timeline-desc">
|
||
Nach dem wir fertig waren konte ich mein bericht über meinen tag anfangen.
|
||
Am ende habe ich in auch geübt.
|
||
</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. Das war der beste tag
|
||
</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">09:00 – 16:30 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">> 1,5 Mio.</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Teilnehmende Betriebe</span>
|
||
<span class="stat-value">> 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> ·
|
||
Verfasst von <strong>Lena Martin</strong>, Klasse 6 ·
|
||
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>
|
||
|
|
||
<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>
|