No description

Find a file

Mara Zöllner 6a80784761 style css angepasst		2026-05-20 20:43:32 +02:00
css	style css angepasst	2026-05-20 20:43:32 +02:00
img	logo eingefügt	2026-05-20 20:10:54 +02:00
js	style css angepasst	2026-05-20 20:43:32 +02:00
.gitignore	initialer commit	2026-05-06 22:05:16 +00:00
eis_projekt.html	style verschönert	2026-05-20 20:32:16 +02:00
impressum.html	style verschönert	2026-05-20 20:32:16 +02:00
index.html	style css angepasst	2026-05-20 20:43:32 +02:00
kontakt.html	style verschönert	2026-05-20 20:32:16 +02:00
notenrechner.html	style verschönert	2026-05-20 20:32:16 +02:00
README.md	Erstellung der Readme Datei	2026-05-20 13:04:48 +00:00
textanalyse.html	style verschönert	2026-05-20 20:32:16 +02:00
ueber_mich.html	style verschönert	2026-05-20 20:32:16 +02:00

README.md

Glück Auf – Persönliche Webseite

Ein statisches Webprojekt bestehend aus mehreren HTML-Seiten mit einheitlichem Design im dunklen Blau-Stil. Erstellt als Lernprojekt.

Pfad auf dem Server:

/home/isa7/public_html

Projektstruktur

public_html/
├── index.html          ← Startseite
├── ueber_mich.html     ← Persönliche Vorstellungsseite
├── eis_projekt.html    ← Projektseite (Glück Auf Lernprojekt)
├── kontakt.html        ← Kontaktformular
├── impressum.html      ← Impressum / rechtliche Angaben
├── README.md           ← Diese Datei
│
├── css/
│   └── style.css       ← Zentrales Stylesheet für alle Seiten
│
├── js/
│   └── script.js       ← JavaScript für Partikel-Animation (nur index.html)
│
├── img/
│   └── Hintergrund.jpg ← Hintergrundbild für den Hero-Bereich
│
└── assets/             ← Reserviert für zukünftige Medien (aktuell leer)

Dateibeschreibungen

HTML-Seiten

`index.html` – Startseite

Einstiegspunkt der Website
Enthält einen Hero-Bereich mit Hintergrundbild und animiertem Partikel-Canvas
Begrüßungstext mit Button-Link zu ueber_mich.html
Drei Info-Cards: Über mich, Projekte, Kontakt (nur Textelemente, keine Links)
Footer mit Links zu impressum.html und kontakt.html
Einzige Seite, die script.js einbindet (Canvas-Animation)

`ueber_mich.html` – Über mich

Persönliche Vorstellungsseite (Inhaberin: Mara)
Kurze Bio-Texte als Platzhalter
Auflistung von Kenntnissen als Skill-Badges: HTML, CSS, JavaScript, Python, Webdesign, Linux
Footer mit Links zu impressum.html und kontakt.html

`eis_projekt.html` – Projektseite

Präsentation des Glück Auf Lernprojekts
Inhalt noch in Vorbereitung ()
Footer mit Links zu impressum.html und kontakt.html

`kontakt.html` – Kontakt

Kontaktformular mit den Feldern: Name, E-Mail, Nachricht
Absenden-Button (aktuell ohne Backend-Anbindung)
Footer mit Links zu impressum.html und kontakt.html

`impressum.html` – Impressum

Pflichtangaben gemäß § 5 TMG (Musterdaten als Platzhalter)
Abschnitte: Angaben zum Betreiber, Kontakt (E-Mail), Haftungsausschlüsse, Urheberrecht
Footer mit Links zu impressum.html und kontakt.html

Stylesheet

`css/style.css` – Zentrales Stylesheet

Wird von allen fünf HTML-Seiten eingebunden
Definiert CSS-Variablen (Custom Properties) für die Farbpalette:
- --royal --royal-light --royal-dark → Blautöne
- --white → Helles Weiß
- --muted → Halbtransparentes Weiß für Nebentext
Stile für: Navigation (nav), Hero-Bereich, Cards, Buttons, Footer
Einbindung der Google Fonts: Bebas Neue (Überschriften) und Barlow (Fließtext)
@keyframes fadeUp – Einblende-Animation für den Hero-Inhalt

JavaScript

`js/script.js` – Partikel-Animation

Wird ausschließlich von index.html eingebunden (am Ende von <body>)
Zeichnet einen animierten Hintergrund auf ein <canvas>-Element (id="bg")
Funktionen:
- resize() – Passt Canvas-Größe ans Fenster an
- createParticles() – Generiert Partikel zufällig, Anzahl abhängig von der Fenstergröße
- drawBg() – Zeichnet radialen Verlaufshintergrund in Blautönen
- animate() – Animationsschleife: bewegt Partikel, zeichnet Verbindungslinien bei Nähe < 120px
Reagiert auf resize-Events des Fensters
Gibt "Meine Seite läuft!" in der Browser-Konsole aus

Medien

`img/Hintergrund.jpg` – Hintergrundbild

Verwendet im Hero-Bereich von index.html
Eingebunden via CSS in style.css als background-image der .hero-Klasse
Wird durch einen halbtransparenten Dunkel-Overlay überlagert

Verlinkungsübersicht

Diese Tabelle zeigt, welche Datei wo verlinkt ist und warum.

Verlinkte Datei	Verlinkt in	Zweck
`index.html`	Allen Seiten (Navigation)	Rückkehr zur Startseite
`ueber_mich.html`	Allen Seiten (Navigation), `index.html` (Hero-Button)	Vorstellungsseite erreichbar machen
`eis_projekt.html`	Allen Seiten (Navigation)	Projektseite erreichbar machen
`kontakt.html`	Allen Seiten (Navigation + Footer)	Kontaktformular erreichbar machen
`impressum.html`	Allen Seiten (Navigation + Footer)	Rechtliche Pflichtangabe erreichbar machen
`css/style.css`	Allen fünf HTML-Seiten (`<link rel="stylesheet">` im `<head>`)	Einheitliches Design auf allen Seiten
`js/script.js`	Nur `index.html` (am Ende von `<body>`, nach dem Canvas-Element)	Partikel-Animation nur auf der Startseite
`img/Hintergrund.jpg`	`css/style.css` (`.hero`-Klasse)	Hero-Hintergrundbild der Startseite
Google Fonts (CDN)	Allen fünf HTML-Seiten (`<link>` im `<head>`)	Schriftarten Bebas Neue & Barlow laden

Technologien

HTML5
CSS3 (Custom Properties, Grid, Flexbox, Animationen)
JavaScript (Canvas API, requestAnimationFrame)
Google Fonts (Bebas Neue, Barlow)

Hinweise

Das Kontaktformular sendet aktuell keine Daten ab – es fehlt eine Backend-Anbindung.
Der Inhalt von eis_projekt.html ist noch nicht befüllt.
Die Angaben im Impressum sind Platzhalterdaten und müssen vor Veröffentlichung ersetzt werden.
Der assets/-Ordner ist aktuell leer und für zukünftige Ressourcen vorgesehen.

README.md Unescape Escape