HexaHost.de - Hosting Website
Eine moderne und umfangreiche Website für das Hosting-Unternehmen HexaHost.de aus Niederbayern.
🚀 Features
- Moderne Glasmorphism-Optik mit lila/violetten Farbschema
- Responsive Design für alle Geräte
- Vollständige Produktpräsentation für alle Hosting-Lösungen
- Interaktive Kontaktformulare mit Validierung
- SEO-optimiert mit Meta-Tags, Sitemap und robots.txt
- Accessibility-Features für bessere Nutzbarkeit
📦 Produkte
Virtual Private Container (VPC)
- Effiziente LXC-Container auf Proxmox-Basis
- 4 verschiedene Pakete (Starter bis Enterprise)
- Ab 4,99€/Monat
Virtual Private Server (VPS)
- Vollwertige KVM-Virtualisierung
- Alle Betriebssysteme unterstützt
- 4 verschiedene Pakete (Basic bis Enterprise)
- Ab 9,99€/Monat
Mail Gateway
- Professioneller E-Mail-Schutz
- Spam-, Viren- und Phishing-Filter
- 4 verschiedene Pakete (Starter bis Enterprise)
- Ab 2,99€/Monat
Webhosting
- Klassisches Hosting mit PHP, MySQL & SSL
- WordPress-ready mit cPanel
- 4 verschiedene Pakete (Starter bis Enterprise)
- Ab 1,99€/Monat
🛠️ Technologie-Stack
- HTML5 - Semantisches Markup
- CSS3 - Moderne Styles mit Custom Properties
- Vanilla JavaScript - Keine Framework-Dependencies
- Glassmorphism Design - Moderne Glaseffekte
- CSS Grid & Flexbox - Responsive Layouts
- Inter Font - Moderne Typografie
📁 Projektstruktur
HexaHost/
├── public/
│ ├── index.html # Startseite
│ ├── vpc.html # Virtual Private Container
│ ├── vps.html # Virtual Private Server
│ ├── mail-gateway.html # Mail Gateway
│ ├── webhosting.html # Webhosting
│ ├── about.html # Über uns
│ ├── contact.html # Kontakt
│ ├── robots.txt # SEO Robots
│ ├── sitemap.xml # SEO Sitemap
│ ├── favicon.svg # Website Icon
│ └── assets/
│ ├── css/
│ │ └── style.css # Hauptstyles
│ └── js/
│ ├── main.js # Haupt-JavaScript
│ └── contact.js # Kontaktformular-Logik
├── .cursorrules # Entwicklungsrichtlinien
├── .gitignore # Git Ignore Rules
└── README.md # Diese Datei
🎨 Design-System
Farben
- Background:
#0d0821(Dunkelviolett/Navy) - Primary:
#ff51f9(Neonpink) - Accent 1:
#a348ff(Lila) - Accent 2:
#3978ff(Blau)
Typografie
- Logo Font: Russo One
- Slogan Font: Source Sans Pro
- Body Font: Inter
- Weights: 300, 400, 500, 600, 700
Effekte
- Glassmorphism:
backdrop-filter: blur(10px) - Transitions:
0.3s ease-in-out - Border Radius:
0.75rem - 1.5rem - Neon Effects: Neonpink und Lila-Gradienten
🚀 Installation & Verwendung
-
Repository klonen
git clone <repository-url> cd HexaHost -
Lokaler Development Server
# Mit Python python -m http.server 8000 # Mit Node.js npx serve public # Mit PHP php -S localhost:8000 -t public -
Website öffnen
http://localhost:8000
📱 Responsive Breakpoints
- Desktop: > 768px
- Tablet: 768px - 480px
- Mobile: < 480px
✨ Features im Detail
Navigation
- Sticky Header mit Glaseffekt
- Dropdown-Menü für Produkte
- Mobile Navigation Toggle
- Smooth Scrolling
Produktseiten
- Detaillierte Paketvergleiche
- Technische Spezifikationen
- Anwendungsbereiche
- Call-to-Action Buttons
Kontaktformular
- Validierung in Echtzeit
- Auto-Fill basierend auf URL-Parametern
- FAQ-Sektion mit Accordion
- Multiple Kontaktoptionen
Interaktivität
- Hover-Effekte auf Karten
- Parallax Hero-Section
- Smooth Animations
- Loading States
🔧 Anpassungen
Farben ändern
CSS Custom Properties in :root anpassen:
:root {
--background-color: #0d0821;
--primary-color: #ff51f9;
--accent-color-1: #a348ff;
--accent-color-2: #3978ff;
/* ... weitere Farben */
}
Inhalte anpassen
Texte und Preise direkt in den HTML-Dateien ändern.
Neue Pakete hinzufügen
Paket-Cards in den entsprechenden Produktseiten duplizieren und anpassen.
📈 SEO & Performance
- Meta Tags für alle Seiten
- Structured Data ready
- Optimierte Bilder (SVG Icons)
- Lazy Loading für Bilder
- Minifizierte Assets (optional)
🌐 Browser-Unterstützung
- Chrome/Edge 88+
- Firefox 78+
- Safari 14+
- Mobile Browser (iOS Safari, Chrome Mobile)
📄 Lizenz
Alle Rechte vorbehalten HexaHost.de
🤝 Beitragen
Für Verbesserungsvorschläge oder Bug-Reports bitte ein Issue erstellen.
HexaHost.de - Zuverlässiges Hosting aus Niederbayern 🚀