# Das EIS-Projekt

Innovative Webentwicklung mit modernem Tech-Stack & magischem Design ✨

## 💻 Technologie-Stack

### Frontend

- HTML5
- CSS3 (Responsive Design)
- JavaScript (ES6+)
- DOM-Manipulation

### Backend

- Python 3
- Flask
- RESTful APIs
- SQL-Datenbanken

### Infrastruktur

- Linux Server (Ubuntu)
- SSH-Zugang
- Dateiserver (public_html)
- SFTP/SCP

## 📁 Projektstruktur

Die Website folgt einer klaren, wartbaren Verzeichnisstruktur:

    ~/public_html/
    ├── index.html
    ├── kontakt.html
    ├── ueber_uns.html
    ├── eis_projekt.html
    ├── impressum.html
    ├── css/
    │   └── style.css
    ├── js/
    │   └── script.js
    ├── img/
    │   ├── logo.svg
    │   └── favicon.png
    └── assets/
        └── projektinfo.pdf

## 🎨 Design-Prinzipien

- Responsives Design: Optimiert für Mobile, Tablet und Desktop
- Semantisches HTML: Barrierefreiheit und SEO
- Clean Code: Lesbare und wartbare Struktur
- Konsistentes Styling: Zentralisierte CSS-Verwaltung
- User Experience: Interaktive Elemente und angenehme Navigation

## ⚙️ Funktionen

### Navigation

Einheitliche Navigation auf allen Seiten mit aktiv-Zustand

### Responsive Layout

CSS Grid und Flexbox für flexible Layouts auf allen Geräten

### Lightbox-Galerie

Interaktive Bildergalerie mit Modal-Ansicht (JavaScript)

### Kontaktformular

Frontend-Validierung und Backend-Integration (kommend)

## 🌐 Deployment

Die Website ist live unter:

Live-URL: isa##.edumake.de

(## wird durch die Benutzernummer ersetzt)

Alle Änderungen im Verzeichnis sind sofort live – so geht moderne Web-Entwicklung! 🚀

## 📝 Projektressourcen

Folgende Materialien unterstützen die Entwicklung:

📄 Projektinfo herunterladen (PDF)

## 🚀 Entwicklungsschritte

1. U1: Website-Struktur und erste HTML-Seite
2. U2: Styling mit CSS und interaktive JavaScript-Elemente
3. U3: Mehrseitige Website mit Navigation und Inhaltsstruktur (aktuell)
4. U4: Backend mit Python und Flask hinzufügen
5. U5+: Datenbankanbindung, APIs, erweiterte Funktionen

## 📸 Bildergalerie

Hier können später Screenshots und Bilder des Projekts eingefügt werden:

Bildergalerie wird nach dem Hochladen von Bildern gefüllt.