maraz/Glueck-Auf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style verschönert

Browse source
This commit is contained in:
Mara Zöllner 2026-05-20 20:32:16 +02:00
parent 35b58ad5bf
commit d6bb7f7449
7 changed files with 111 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
css/style.css
View file

@ -167,3 +167,87 @@ body.dark #dark-mode-toggle {
border-color: transparent;
box-shadow: 0 0 18px rgba(96,165,250,0.4);
}
/* =========================
Unterseiten – Page Hero
========================= */
.page-hero {
padding: 5rem 3rem 3.5rem;
max-width: 820px;
margin: 0 auto;
animation: fadeUp 0.9s ease both;
}
.page-hero .hero-tag {
margin-bottom: 1rem;
}
.page-hero h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.8rem, 7vw, 5rem);
line-height: 1;
letter-spacing: 0.03em;
color: #fff;
margin-bottom: 2rem;
}
.page-hero h1 span { color: #7ab3ff; }
/* =========================
Seiteninhalt
========================= */
.page {
max-width: 820px;
margin: 0 auto;
padding: 0 3rem 4rem;
}
.page hr {
border: none;
border-top: 1px solid rgba(255,255,255,0.07);
margin: 2.5rem 0;
}
/* Texte */
.bio, .page p {
font-size: 1.05rem;
font-weight: 300;
color: rgba(255,255,255,0.6);
line-height: 1.9;
margin-bottom: 0.6rem;
}
.skills-label, .page .label {
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 1rem;
}
/* Skills */
.skills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.skill {
padding: 0.4rem 1.1rem;
border: 1px solid rgba(255,255,255,0.15);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
transition: border-color 0.2s, color 0.2s;
}
.skill:hover { border-color: #7ab3ff; color: #7ab3ff; }
/* Dark Mode */
body.dark .page p,
body.dark .bio { color: rgba(226,232,240,0.8); }
body.dark .skill {
border-color: rgba(226,232,240,0.2);
color: rgba(226,232,240,0.7);
}
body.dark .skill:hover { border-color: #60a5fa; color: #60a5fa; }

4
eis_projekt.html
View file

@ -25,8 +25,8 @@
<button id="dark-mode-toggle">🌙</button>
</nav>
<div class="page">
<p class="tag">Glück Auf Projekt</p>
<div class="page-hero">
<p class="hero-tag">Glück Auf Projekt</p>
<h1>Mein Projekt.</h1>
<p class="sub">Hier findest du Informationen zu meinem Glück Auf-Lernprojekt.</p>

4
impressum.html
View file

@ -25,8 +25,8 @@
<button id="dark-mode-toggle">🌙</button>
</nav>
<div class="page">
<p class="tag">Rechtliches</p>
<div class="page-hero">
<p class="hero-tag">Rechtliches</p>
<h1>Impressum</h1>
<section>

4
kontakt.html
View file

@ -25,8 +25,8 @@
<button id="dark-mode-toggle">🌙</button>
</nav>
<div class="page">
<p class="tag">Kontakt</p>
<div class="page-hero">
<p class="hero-tag">Kontakt</p>
<h1>Schreib mir.</h1>
<p class="sub">Ich freue mich über jede Nachricht – egal ob Frage, Zusammenarbeit oder einfach Hallöchen.</p>

4
notenrechner.html
View file

@ -24,8 +24,8 @@
<button id="dark-mode-toggle">🌙</button>
</nav>
<div class="page">
<p class="tag">Übung</p>
<div class="page-hero">
<p class="hero-tag">Übung</p>
<h1>Notenrechner</h1>
<p class="sub">Gib deine Punktzahl ein und erhalte deine Note.</p>

4
textanalyse.html
View file

@ -24,8 +24,8 @@
<button id="dark-mode-toggle">🌙</button>
</nav>
<div class="page">
<p class="tag">Übung</p>
<div class="page-hero">
<p class="hero-tag">Übung</p>
<h1>Textanalyse</h1>
<p class="sub">Analysiere deinen Text auf Knopfdruck.</p>
</div>

33
ueber_mich.html
View file

@ -24,24 +24,25 @@
<button id="dark-mode-toggle">🌙</button>
</nav>
<div class="page">
<p class="tag">Über mich</p>
<h1>Hallo, ich bin Mara.</h1>
<<div class="page-hero">
<p class="hero-tag">Über mich</p>
<h1>Hallo, ich bin <span>Mara.</span></h1>
</div>
<p class="bio">Ich weiß noch nicht, was ich preisgeben will.</p>
<p class="bio"> Gib mir bitte noch etwas Zeit!</p>
<hr>
<p class="skills-label">Kenntnisse</p>
<div class="skills">
<span class="skill">HTML</span>
<span class="skill">CSS</span>
<span class="skill">JavaScript</span>
<span class="skill">Python</span>
<span class="skill">Webdesign</span>
<span class="skill">Linux</span>
</div>
<div class="page">
<p class="bio">Ich weiß noch nicht, was ich preisgeben will.</p>
<p class="bio">Gib mir bitte noch etwas Zeit!</p>
<hr>
<p class="skills-label">Kenntnisse</p>
<div class="skills">
<span class="skill">HTML</span>
<span class="skill">CSS</span>
<span class="skill">JavaScript</span>
<span class="skill">Python</span>
<span class="skill">Webdesign</span>
<span class="skill">Linux</span>
</div>
</div>
<footer>
<a href="impressum.html">Impressum</a> · <a href="kontakt.html">Kontakt</a>