ac328d8b3e
Changed header height to be explicitly set using CSS variable --header-height instead of being determined by padding Set responsive header heights: Default: 100px Mobile (480px): 80px Small Mobile (320px): 60px Ensured scroll-margin-top on headings uses the same --header-height variable Main content padding-top uses the same --header-height variable These changes ensure consistent header heights across all screen sizes and proper scroll positioning for anchor links.
7SYS Website
Eine professionelle Website für IT-Lösungen und digitale Souveränität.
Projektbeschreibung
Diese Website dient als digitale Präsenz von 7SYS, einem spezialisierten IT-Dienstleister mit Fokus auf maßgeschneiderte IT-Lösungen und digitale Souveränität. Die Plattform präsentiert das Leistungsportfolio und die Expertise im Bereich IT-Infrastruktur, Systemadministration und Automatisierung.
Hauptfunktionen
- Responsive Single-Page Design
- Dynamisches Theme-System (Hell/Dunkel)
- Interaktive Service-Cards mit detaillierten Informationen
- Modulare Komponenten-Architektur
- Optimierte Performance durch CSS-Animationen
- Barrierefreie Benutzeroberfläche
Technologien
-
Frontend:
- HTML5
- CSS3 (modulare Struktur mit separaten Dateien für bessere Wartbarkeit)
- Vanilla JavaScript (components.js, theme.js)
- Font Awesome Icons
- Google Fonts (Montserrat, Open Sans)
-
Architektur:
- Komponenten-basierte Struktur
- Modulares CSS-System
- Responsive Design mit CSS Variables
- Progressive Enhancement
Setup/Installation
- Repository klonen:
git clone [repository-url]
- Projektverzeichnis öffnen:
cd web7syspub
- Einen lokalen Webserver starten, zum Beispiel mit Python:
# Python 3
python -m http.server 8000
- Website im Browser öffnen:
http://localhost:8000/public
Projektstruktur
public/
├── components/ # Wiederverwendbare HTML-Komponenten
├── css/ # Modulare CSS-Dateien
│ ├── animations.css
│ ├── base.css
│ ├── components.css
│ ├── layout.css
│ └── variables.css
├── js/ # JavaScript-Module
│ ├── components.js
│ └── theme.js
└── index.html # Hauptseite
Features im Detail
- Responsive Design: Optimierte Darstellung auf allen Geräten
- Themensystem: Automatische Anpassung an Systemeinstellungen
- Modulare CSS-Struktur: Verbesserte Wartbarkeit und Performance
- Barrierefreiheit: Semantische HTML-Struktur und ARIA-Attribute
- Performance: Optimierte Ladezeiten durch modulare Ressourcen
Kontakt
- E-Mail: info@7sys.de
- Signal: Verfügbar über Website-Link