maraz/Glueck-Auf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
41 commits 1 branch 0 tags 1.2 MiB
HTML 43.4%
CSS 35.9%
JavaScript 20.7%
Find a file
Mara Zöllner dc16f9479e anpassung style notenrechner
2026-05-20 21:28:43 +02:00
css integration drop down übungen 2026-05-20 21:22:33 +02:00
img logo eingefügt 2026-05-20 20:10:54 +02:00
js anpassung style notenrechner 2026-05-20 21:28:43 +02:00
uebungen anpassung style notenrechner 2026-05-20 21:28:43 +02:00
.gitignore initialer commit 2026-05-06 22:05:16 +00:00
eis_projekt.html neue verankerung dropdown übungen 2026-05-20 21:16:35 +02:00
impressum.html neue verankerung dropdown übungen 2026-05-20 21:16:35 +02:00
index.html neue verankerung dropdown übungen 2026-05-20 21:16:35 +02:00
kontakt.html neue verankerung dropdown übungen 2026-05-20 21:16:35 +02:00
README.md Erstellung der Readme Datei 2026-05-20 13:04:48 +00:00
ueber_mich.html neue verankerung dropdown übungen 2026-05-20 21:16:35 +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 (<!-- Projektinhalt hier einfügen -->)
  • 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.