mirror of
https://git.hexahost.dev/smueller/HexaHost-Frontend.git
synced 2026-06-02 06:58:43 +00:00
initial commit
This commit is contained in:
Samuel Müller
409
public/about.html
Normal file
409
public/about.html
Normal file
@@ -0,0 +1,409 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Über uns - HexaHost.de | Hosting aus Niederbayern</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<meta name="description" content="Erfahren Sie mehr über HexaHost.de - Ihr zuverlässiger Hosting-Partner aus Niederbayern. Moderne Technologie mit persönlichem Service.">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">HexaHost</span>
|
||||
<span class="logo-tld">.de</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="nav-link">Home</a></li>
|
||||
<li class="nav-dropdown">
|
||||
<a href="#" class="nav-link">Produkte</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html" class="nav-link active">Über uns</a></li>
|
||||
<li><a href="contact.html" class="nav-link">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- About Hero -->
|
||||
<section class="about-hero">
|
||||
<div class="container">
|
||||
<div class="about-hero-content">
|
||||
<div class="breadcrumb">
|
||||
<a href="index.html">Home</a>
|
||||
<span>/</span>
|
||||
<span>Über uns</span>
|
||||
</div>
|
||||
<h1 class="about-hero-title">
|
||||
Über <span class="highlight">HexaHost.de</span>
|
||||
</h1>
|
||||
<p class="about-hero-description">
|
||||
Wir sind Ihr zuverlässiger Partner für Hosting-Lösungen aus Niederbayern.
|
||||
Mit modernster Technologie und persönlichem Service sorgen wir dafür,
|
||||
dass Ihre Online-Projekte erfolgreich sind.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Company Story -->
|
||||
<section class="company-story">
|
||||
<div class="container">
|
||||
<div class="story-content">
|
||||
<div class="story-text">
|
||||
<h2 class="section-title">Unsere Geschichte</h2>
|
||||
<p>
|
||||
HexaHost.de wurde mit der Vision gegründet, zuverlässiges und preiswertes
|
||||
Hosting direkt aus Deutschland anzubieten. Als regionales Unternehmen aus
|
||||
Niederbayern verstehen wir die Bedürfnisse unserer Kunden und bieten
|
||||
persönlichen Support in deutscher Sprache.
|
||||
</p>
|
||||
<p>
|
||||
Unsere Expertise liegt in der Bereitstellung moderner Hosting-Lösungen
|
||||
auf Basis von Proxmox-Technologie. Von Virtual Private Containern bis
|
||||
hin zu klassischem Webhosting - wir haben für jeden Bedarf die passende
|
||||
Lösung.
|
||||
</p>
|
||||
<p>
|
||||
Vertrauen, Zuverlässigkeit und faire Preise sind die Grundpfeiler unseres
|
||||
Unternehmens. Wir setzen auf transparente Kommunikation und ehrliche
|
||||
Beratung, damit Sie die beste Lösung für Ihre Anforderungen erhalten.
|
||||
</p>
|
||||
</div>
|
||||
<div class="story-visual glass-card">
|
||||
<div class="location-info">
|
||||
<div class="location-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Standort Niederbayern</h3>
|
||||
<p>Hosting mit regionaler Verbundenheit</p>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">99.9%</span>
|
||||
<span class="stat-label">Uptime</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">24/7</span>
|
||||
<span class="stat-label">Support</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">100%</span>
|
||||
<span class="stat-label">Deutschland</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Our Mission -->
|
||||
<section class="mission">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Unsere Mission</h2>
|
||||
<p class="section-description">
|
||||
Wir möchten Hosting einfach, zuverlässig und bezahlbar machen
|
||||
</p>
|
||||
</div>
|
||||
<div class="mission-grid">
|
||||
<div class="mission-item glass-card">
|
||||
<div class="mission-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Zuverlässigkeit</h3>
|
||||
<p>Maximale Verfügbarkeit durch redundante Systeme und proaktive Überwachung. Ihre Online-Präsenz ist bei uns in sicheren Händen.</p>
|
||||
</div>
|
||||
<div class="mission-item glass-card">
|
||||
<div class="mission-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Persönlicher Support</h3>
|
||||
<p>Direkter Kontakt zu echten Menschen, die Ihnen schnell und kompetent helfen. Support in deutscher Sprache aus Niederbayern.</p>
|
||||
</div>
|
||||
<div class="mission-item glass-card">
|
||||
<div class="mission-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2v20M17 7l-5-5-5 5M17 17l-5 5-5-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Faire Preise</h3>
|
||||
<p>Transparente Preisgestaltung ohne versteckte Kosten. Qualität muss nicht teuer sein - das beweisen wir täglich.</p>
|
||||
</div>
|
||||
<div class="mission-item glass-card">
|
||||
<div class="mission-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Innovation</h3>
|
||||
<p>Modernste Technologien wie Proxmox LXC und KVM für optimale Performance und Flexibilität.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Our Values -->
|
||||
<section class="values">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Unsere Werte</h2>
|
||||
<p class="section-description">
|
||||
Was uns antreibt und leitet
|
||||
</p>
|
||||
</div>
|
||||
<div class="values-content">
|
||||
<div class="values-list">
|
||||
<div class="value-item glass-card">
|
||||
<div class="value-number">01</div>
|
||||
<div class="value-content">
|
||||
<h3>Vertrauen</h3>
|
||||
<p>Wir bauen langfristige Beziehungen zu unseren Kunden auf, basierend auf Vertrauen und Transparenz.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-item glass-card">
|
||||
<div class="value-number">02</div>
|
||||
<div class="value-content">
|
||||
<h3>Qualität</h3>
|
||||
<p>Höchste Standards bei Hardware, Software und Service - Kompromisse bei der Qualität gibt es nicht.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-item glass-card">
|
||||
<div class="value-number">03</div>
|
||||
<div class="value-content">
|
||||
<h3>Nachhaltigkeit</h3>
|
||||
<p>Energieeffiziente Rechenzentren und verantwortungsvoller Umgang mit Ressourcen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-item glass-card">
|
||||
<div class="value-number">04</div>
|
||||
<div class="value-content">
|
||||
<h3>Kundenorientierung</h3>
|
||||
<p>Ihre Bedürfnisse stehen im Mittelpunkt. Wir hören zu und finden gemeinsam die beste Lösung.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technology Stack -->
|
||||
<section class="technology-stack">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Unsere Technologie</h2>
|
||||
<p class="section-description">
|
||||
Modernste Infrastruktur für maximale Performance
|
||||
</p>
|
||||
</div>
|
||||
<div class="tech-stack-grid">
|
||||
<div class="tech-stack-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Proxmox VE</h3>
|
||||
<p>Enterprise-Virtualisierung mit KVM und LXC für maximale Flexibilität und Performance.</p>
|
||||
</div>
|
||||
<div class="tech-stack-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
</div>
|
||||
<h3>NVMe SSD</h3>
|
||||
<p>Modernste NVMe SSD-Speicher für blitzschnelle Zugriffs- und Ladezeiten.</p>
|
||||
</div>
|
||||
<div class="tech-stack-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 1v6m0 6v6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Enterprise Hardware</h3>
|
||||
<p>Professionelle Server-Hardware von Intel und AMD mit ECC-RAM und Redundanz.</p>
|
||||
</div>
|
||||
<div class="tech-stack-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Monitoring & Backup</h3>
|
||||
<p>24/7 Überwachung und automatische Backups für maximale Datensicherheit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="why-choose-us">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Warum HexaHost.de?</h2>
|
||||
<p class="section-description">
|
||||
Die Vorteile einer Zusammenarbeit mit uns
|
||||
</p>
|
||||
</div>
|
||||
<div class="advantages-grid">
|
||||
<div class="advantage-item glass-card">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Regionale Nähe</h3>
|
||||
<p>Als Unternehmen aus Niederbayern sind wir nah bei unseren Kunden und verstehen regionale Bedürfnisse.</p>
|
||||
</div>
|
||||
<div class="advantage-item glass-card">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 12l2 2 4-4"/>
|
||||
<path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
|
||||
<path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>DSGVO-konform</h3>
|
||||
<p>Alle Server stehen in Deutschland. Vollständige DSGVO-Konformität und deutsche Datenschutzstandards.</p>
|
||||
</div>
|
||||
<div class="advantage-item glass-card">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12,6 12,12 16,14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Schnelle Reaktion</h3>
|
||||
<p>Kurze Wege bedeuten schnelle Hilfe. Unser Support reagiert prompt auf Ihre Anfragen.</p>
|
||||
</div>
|
||||
<div class="advantage-item glass-card">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Persönliche Betreuung</h3>
|
||||
<p>Jeder Kunde erhält eine persönliche Betreuung - Sie sind nicht nur eine Nummer.</p>
|
||||
</div>
|
||||
<div class="advantage-item glass-card">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2v20M17 7l-5-5-5 5M17 17l-5 5-5-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Transparent & Fair</h3>
|
||||
<p>Keine versteckten Kosten, keine Kleingedruckten Überraschungen. Faire Preise für alle.</p>
|
||||
</div>
|
||||
<div class="advantage-item glass-card">
|
||||
<div class="advantage-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Skalierbar</h3>
|
||||
<p>Wachsen Sie mit uns. Unsere Lösungen sind flexibel skalierbar und wachsen mit Ihren Anforderungen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content glass-card">
|
||||
<h2>Überzeugt? Lassen Sie uns sprechen!</h2>
|
||||
<p>Kontaktieren Sie uns für eine kostenlose und unverbindliche Beratung</p>
|
||||
<div class="cta-actions">
|
||||
<a href="contact.html" class="btn btn-primary">Kontakt aufnehmen</a>
|
||||
<a href="index.html#products" class="btn btn-secondary">Produkte ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>HexaHost.de</h4>
|
||||
<p>Zuverlässiges Hosting aus Niederbayern</p>
|
||||
<div class="footer-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>Niederbayern, Deutschland</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Produkte</h4>
|
||||
<ul>
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Unternehmen</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">Über uns</a></li>
|
||||
<li><a href="contact.html">Kontakt</a></li>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Support</h4>
|
||||
<ul>
|
||||
<li><a href="#">Hilfe-Center</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
<li><a href="contact.html">Support-Ticket</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 HexaHost.de - Alle Rechte vorbehalten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1474
public/assets/css/style.css
Normal file
1474
public/assets/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
290
public/assets/js/contact.js
Normal file
290
public/assets/js/contact.js
Normal file
@@ -0,0 +1,290 @@
|
||||
// Contact page specific JavaScript
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// FAQ Accordion functionality
|
||||
function initFAQ() {
|
||||
const faqItems = document.querySelectorAll('.faq-item');
|
||||
|
||||
faqItems.forEach(item => {
|
||||
const question = item.querySelector('.faq-question');
|
||||
const answer = item.querySelector('.faq-answer');
|
||||
const toggle = item.querySelector('.faq-toggle');
|
||||
|
||||
question.addEventListener('click', function() {
|
||||
const isOpen = item.classList.contains('open');
|
||||
|
||||
// Close all other FAQ items
|
||||
faqItems.forEach(otherItem => {
|
||||
if (otherItem !== item) {
|
||||
otherItem.classList.remove('open');
|
||||
const otherAnswer = otherItem.querySelector('.faq-answer');
|
||||
const otherToggle = otherItem.querySelector('.faq-toggle');
|
||||
otherAnswer.style.maxHeight = null;
|
||||
otherToggle.textContent = '+';
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current item
|
||||
if (isOpen) {
|
||||
item.classList.remove('open');
|
||||
answer.style.maxHeight = null;
|
||||
toggle.textContent = '+';
|
||||
} else {
|
||||
item.classList.add('open');
|
||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
toggle.textContent = '−';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Contact form handling
|
||||
function initContactForm() {
|
||||
const form = document.getElementById('contactForm');
|
||||
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form data
|
||||
const formData = new FormData(form);
|
||||
const data = {};
|
||||
for (let [key, value] of formData.entries()) {
|
||||
data[key] = value;
|
||||
}
|
||||
|
||||
// Basic validation
|
||||
if (!validateForm(data)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = 'Wird gesendet...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Simulate form submission (replace with actual endpoint)
|
||||
setTimeout(() => {
|
||||
// Reset form
|
||||
form.reset();
|
||||
|
||||
// Show success message
|
||||
showNotification('Ihre Nachricht wurde erfolgreich gesendet! Wir melden uns in Kürze bei Ihnen.', 'success');
|
||||
|
||||
// Reset button
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
|
||||
// Scroll to top
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Form validation
|
||||
function validateForm(data) {
|
||||
const requiredFields = ['firstName', 'lastName', 'email', 'subject', 'message'];
|
||||
const errors = [];
|
||||
|
||||
// Check required fields
|
||||
requiredFields.forEach(field => {
|
||||
if (!data[field] || data[field].trim() === '') {
|
||||
errors.push(`Das Feld "${getFieldLabel(field)}" ist erforderlich.`);
|
||||
}
|
||||
});
|
||||
|
||||
// Email validation
|
||||
if (data.email && !isValidEmail(data.email)) {
|
||||
errors.push('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
|
||||
}
|
||||
|
||||
// Privacy checkbox
|
||||
if (!data.privacy) {
|
||||
errors.push('Sie müssen der Datenschutzerklärung zustimmen.');
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
showNotification(errors.join('\n'), 'error');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Helper function to get field labels
|
||||
function getFieldLabel(fieldName) {
|
||||
const labels = {
|
||||
firstName: 'Vorname',
|
||||
lastName: 'Nachname',
|
||||
email: 'E-Mail-Adresse',
|
||||
subject: 'Betreff',
|
||||
message: 'Nachricht'
|
||||
};
|
||||
return labels[fieldName] || fieldName;
|
||||
}
|
||||
|
||||
// Email validation
|
||||
function isValidEmail(email) {
|
||||
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
// Notification system (using the global one from main.js)
|
||||
function showNotification(message, type = 'info') {
|
||||
if (window.HexaHost && window.HexaHost.showNotification) {
|
||||
window.HexaHost.showNotification(message, type);
|
||||
} else {
|
||||
// Fallback
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
// Live chat placeholder function
|
||||
window.openLiveChat = function() {
|
||||
showNotification('Live Chat wird geöffnet... (Demo-Funktion)', 'info');
|
||||
// Here you would integrate with your actual live chat service
|
||||
// For example: Tawk.to, Intercom, Zendesk Chat, etc.
|
||||
};
|
||||
|
||||
// Auto-fill form based on URL parameters
|
||||
function autofillForm() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const packageParam = urlParams.get('package');
|
||||
const productParam = urlParams.get('product');
|
||||
|
||||
if (packageParam || productParam) {
|
||||
const subjectSelect = document.getElementById('subject');
|
||||
const messageTextarea = document.getElementById('message');
|
||||
|
||||
if (packageParam) {
|
||||
// Set subject based on package
|
||||
const packageNames = {
|
||||
'vpc-starter': 'Virtual Private Container - Starter Paket',
|
||||
'vpc-business': 'Virtual Private Container - Business Paket',
|
||||
'vpc-professional': 'Virtual Private Container - Professional Paket',
|
||||
'vpc-enterprise': 'Virtual Private Container - Enterprise Paket',
|
||||
'vps-basic': 'Virtual Private Server - Basic Paket',
|
||||
'vps-standard': 'Virtual Private Server - Standard Paket',
|
||||
'vps-premium': 'Virtual Private Server - Premium Paket',
|
||||
'vps-enterprise': 'Virtual Private Server - Enterprise Paket',
|
||||
'mail-starter': 'Mail Gateway - Starter Paket',
|
||||
'mail-business': 'Mail Gateway - Business Paket',
|
||||
'mail-professional': 'Mail Gateway - Professional Paket',
|
||||
'mail-enterprise': 'Mail Gateway - Enterprise Paket',
|
||||
'web-starter': 'Webhosting - Starter Paket',
|
||||
'web-business': 'Webhosting - Business Paket',
|
||||
'web-professional': 'Webhosting - Professional Paket',
|
||||
'web-enterprise': 'Webhosting - Enterprise Paket'
|
||||
};
|
||||
|
||||
if (packageNames[packageParam]) {
|
||||
messageTextarea.value = `Hallo,\n\nich interessiere mich für das ${packageNames[packageParam]}.\n\nBitte senden Sie mir weitere Informationen und ein individuelles Angebot.\n\nVielen Dank!`;
|
||||
|
||||
// Set appropriate subject
|
||||
if (packageParam.startsWith('vpc-')) {
|
||||
subjectSelect.value = 'vpc-anfrage';
|
||||
} else if (packageParam.startsWith('vps-')) {
|
||||
subjectSelect.value = 'vps-anfrage';
|
||||
} else if (packageParam.startsWith('mail-')) {
|
||||
subjectSelect.value = 'mail-gateway-anfrage';
|
||||
} else if (packageParam.startsWith('web-')) {
|
||||
subjectSelect.value = 'webhosting-anfrage';
|
||||
}
|
||||
}
|
||||
} else if (productParam) {
|
||||
// Set subject based on product
|
||||
const productSubjects = {
|
||||
'vpc': 'vpc-anfrage',
|
||||
'vps': 'vps-anfrage',
|
||||
'mail-gateway': 'mail-gateway-anfrage',
|
||||
'webhosting': 'webhosting-anfrage'
|
||||
};
|
||||
|
||||
if (productSubjects[productParam]) {
|
||||
subjectSelect.value = productSubjects[productParam];
|
||||
messageTextarea.value = `Hallo,\n\nich interessiere mich für Ihre ${productParam.replace('-', ' ')} Lösungen.\n\nBitte kontaktieren Sie mich für eine persönliche Beratung.\n\nVielen Dank!`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form field enhancements
|
||||
function enhanceFormFields() {
|
||||
const inputs = document.querySelectorAll('input, select, textarea');
|
||||
|
||||
inputs.forEach(input => {
|
||||
// Add focus/blur effects
|
||||
input.addEventListener('focus', function() {
|
||||
this.parentElement.classList.add('focused');
|
||||
});
|
||||
|
||||
input.addEventListener('blur', function() {
|
||||
if (!this.value) {
|
||||
this.parentElement.classList.remove('focused');
|
||||
}
|
||||
});
|
||||
|
||||
// Check if field already has value (for autofilled forms)
|
||||
if (input.value) {
|
||||
input.parentElement.classList.add('focused');
|
||||
}
|
||||
});
|
||||
|
||||
// Phone number formatting
|
||||
const phoneInput = document.getElementById('phone');
|
||||
if (phoneInput) {
|
||||
phoneInput.addEventListener('input', function() {
|
||||
// Simple German phone number formatting
|
||||
let value = this.value.replace(/\D/g, '');
|
||||
if (value.startsWith('49')) {
|
||||
value = '+' + value;
|
||||
} else if (value.startsWith('0')) {
|
||||
value = '+49' + value.substring(1);
|
||||
}
|
||||
this.value = value;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Accessibility improvements
|
||||
function improveAccessibility() {
|
||||
// Add ARIA labels to form elements
|
||||
const requiredFields = document.querySelectorAll('input[required], select[required], textarea[required]');
|
||||
requiredFields.forEach(field => {
|
||||
field.setAttribute('aria-required', 'true');
|
||||
});
|
||||
|
||||
// Add keyboard navigation for FAQ
|
||||
const faqQuestions = document.querySelectorAll('.faq-question');
|
||||
faqQuestions.forEach(question => {
|
||||
question.setAttribute('tabindex', '0');
|
||||
question.setAttribute('role', 'button');
|
||||
question.setAttribute('aria-expanded', 'false');
|
||||
|
||||
question.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
this.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize everything when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initFAQ();
|
||||
initContactForm();
|
||||
autofillForm();
|
||||
enhanceFormFields();
|
||||
improveAccessibility();
|
||||
|
||||
// Show a welcome message for contact page
|
||||
setTimeout(() => {
|
||||
showNotification('💬 Haben Sie Fragen? Wir helfen gerne!', 'info');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
})();
|
||||
265
public/assets/js/main.js
Normal file
265
public/assets/js/main.js
Normal file
@@ -0,0 +1,265 @@
|
||||
// Main JavaScript for HexaHost.de
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// DOM Elements
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const glassCards = document.querySelectorAll('.glass-card');
|
||||
const productCards = document.querySelectorAll('.product-card');
|
||||
|
||||
// Mobile Navigation Toggle
|
||||
if (navToggle && navMenu) {
|
||||
navToggle.addEventListener('click', function() {
|
||||
navMenu.classList.toggle('active');
|
||||
navToggle.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking on a link
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
navMenu.classList.remove('active');
|
||||
navToggle.classList.remove('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scrolling for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Enhanced glass card hover effects
|
||||
glassCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-8px) scale(1.02)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Product card interactive effects
|
||||
productCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
if (!this.classList.contains('featured')) {
|
||||
this.style.transform = 'translateY(-10px) scale(1.03)';
|
||||
}
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
if (!this.classList.contains('featured')) {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Intersection Observer for animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
const animateElements = document.querySelectorAll('.glass-card, .feature-item, .product-card');
|
||||
animateElements.forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Header scroll effect - always visible with transparency change
|
||||
const header = document.querySelector('.header');
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
if (scrollTop > 50) {
|
||||
// Scrolled down - make header more opaque
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
// At top - make header more transparent
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
|
||||
// Add parallax effect to hero section
|
||||
const hero = document.querySelector('.hero');
|
||||
if (hero) {
|
||||
window.addEventListener('scroll', function() {
|
||||
const scrolled = window.pageYOffset;
|
||||
const rate = scrolled * -0.5;
|
||||
hero.style.transform = `translateY(${rate}px)`;
|
||||
});
|
||||
}
|
||||
|
||||
// Form validation (for contact forms)
|
||||
const forms = document.querySelectorAll('form');
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
const requiredFields = form.querySelectorAll('[required]');
|
||||
let isValid = true;
|
||||
|
||||
requiredFields.forEach(field => {
|
||||
if (!field.value.trim()) {
|
||||
isValid = false;
|
||||
field.classList.add('error');
|
||||
|
||||
// Remove error class on focus
|
||||
field.addEventListener('focus', function() {
|
||||
this.classList.remove('error');
|
||||
}, { once: true });
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
e.preventDefault();
|
||||
showNotification('Bitte füllen Sie alle Pflichtfelder aus.', 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Notification system
|
||||
function showNotification(message, type = 'info') {
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `notification notification-${type}`;
|
||||
notification.textContent = message;
|
||||
|
||||
notification.style.position = 'fixed';
|
||||
notification.style.top = '20px';
|
||||
notification.style.right = '20px';
|
||||
notification.style.padding = '15px 20px';
|
||||
notification.style.borderRadius = '8px';
|
||||
notification.style.color = 'white';
|
||||
notification.style.fontWeight = '500';
|
||||
notification.style.zIndex = '9999';
|
||||
notification.style.transform = 'translateX(400px)';
|
||||
notification.style.transition = 'transform 0.3s ease-in-out';
|
||||
|
||||
if (type === 'error') {
|
||||
notification.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)';
|
||||
} else if (type === 'success') {
|
||||
notification.style.background = 'linear-gradient(135deg, #10b981, #059669)';
|
||||
} else {
|
||||
notification.style.background = 'linear-gradient(135deg, #3b82f6, #2563eb)';
|
||||
}
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
notification.style.transform = 'translateX(0)';
|
||||
}, 100);
|
||||
|
||||
// Remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
notification.style.transform = 'translateX(400px)';
|
||||
setTimeout(() => {
|
||||
if (notification.parentNode) {
|
||||
notification.parentNode.removeChild(notification);
|
||||
}
|
||||
}, 300);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Lazy loading for images
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.remove('lazy');
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
|
||||
// Performance optimization: Debounce scroll events
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// Apply debounce to scroll events
|
||||
const debouncedScrollHandler = debounce(function() {
|
||||
// Any scroll-based animations or calculations
|
||||
updateScrollProgress();
|
||||
}, 16); // ~60fps
|
||||
|
||||
window.addEventListener('scroll', debouncedScrollHandler);
|
||||
|
||||
// Scroll progress indicator
|
||||
function updateScrollProgress() {
|
||||
const scrollTop = window.pageYOffset;
|
||||
const docHeight = document.body.scrollHeight - window.innerHeight;
|
||||
const scrollPercent = (scrollTop / docHeight) * 100;
|
||||
|
||||
// You can use this to show a progress bar
|
||||
document.documentElement.style.setProperty('--scroll-progress', scrollPercent + '%');
|
||||
}
|
||||
|
||||
// Dark mode toggle (future feature)
|
||||
function initDarkMode() {
|
||||
const darkModeToggle = document.querySelector('.dark-mode-toggle');
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.addEventListener('click', function() {
|
||||
document.body.classList.toggle('dark-mode');
|
||||
localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
|
||||
});
|
||||
|
||||
// Check for saved dark mode preference
|
||||
if (localStorage.getItem('darkMode') === 'true') {
|
||||
document.body.classList.add('dark-mode');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize all features when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initDarkMode();
|
||||
|
||||
// Add loading animation complete class
|
||||
document.body.classList.add('loaded');
|
||||
|
||||
// Show welcome message on first visit
|
||||
if (!localStorage.getItem('hasVisited')) {
|
||||
setTimeout(() => {
|
||||
showNotification('Willkommen bei HexaHost.de! 🚀', 'success');
|
||||
localStorage.setItem('hasVisited', 'true');
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
// Export functions for global access if needed
|
||||
window.HexaHost = {
|
||||
showNotification: showNotification
|
||||
};
|
||||
|
||||
})();
|
||||
343
public/contact.html
Normal file
343
public/contact.html
Normal file
@@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kontakt - HexaHost.de | Hosting aus Niederbayern</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<meta name="description" content="Kontaktieren Sie HexaHost.de - Ihr Hosting-Partner aus Niederbayern. Persönlicher Support und kompetente Beratung.">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">HexaHost</span>
|
||||
<span class="logo-tld">.de</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="nav-link">Home</a></li>
|
||||
<li class="nav-dropdown">
|
||||
<a href="#" class="nav-link">Produkte</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html" class="nav-link">Über uns</a></li>
|
||||
<li><a href="contact.html" class="nav-link active">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Contact Hero -->
|
||||
<section class="contact-hero">
|
||||
<div class="container">
|
||||
<div class="contact-hero-content">
|
||||
<div class="breadcrumb">
|
||||
<a href="index.html">Home</a>
|
||||
<span>/</span>
|
||||
<span>Kontakt</span>
|
||||
</div>
|
||||
<h1 class="contact-hero-title">
|
||||
Kontakt zu <span class="highlight">HexaHost.de</span>
|
||||
</h1>
|
||||
<p class="contact-hero-description">
|
||||
Haben Sie Fragen zu unseren Hosting-Lösungen? Benötigen Sie Beratung oder
|
||||
Support? Unser Team aus Niederbayern steht Ihnen gerne zur Verfügung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Options -->
|
||||
<section class="contact-options">
|
||||
<div class="container">
|
||||
<div class="contact-grid">
|
||||
<div class="contact-item glass-card">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>E-Mail</h3>
|
||||
<p>Schreiben Sie uns eine E-Mail - wir antworten schnell und kompetent.</p>
|
||||
<a href="mailto:info@hexahost.de" class="contact-link">info@hexahost.de</a>
|
||||
</div>
|
||||
<div class="contact-item glass-card">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Telefon</h3>
|
||||
<p>Für dringende Anliegen erreichen Sie uns auch telefonisch.</p>
|
||||
<a href="tel:+4985119999999" class="contact-link">+49 851 1999 9999</a>
|
||||
<p class="contact-hours">Mo-Fr: 9:00-18:00 Uhr</p>
|
||||
</div>
|
||||
<div class="contact-item glass-card">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Live Chat</h3>
|
||||
<p>Direkter Support über unseren Live Chat für schnelle Hilfe.</p>
|
||||
<button class="contact-link chat-btn" onclick="openLiveChat()">Chat starten</button>
|
||||
<p class="contact-hours">Mo-Fr: 9:00-18:00 Uhr</p>
|
||||
</div>
|
||||
<div class="contact-item glass-card">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Unser Standort</h3>
|
||||
<p>HexaHost.de<br>Niederbayern<br>Deutschland</p>
|
||||
<p class="contact-hours">Regional verwurzelt</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section class="contact-form-section">
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<div class="form-header">
|
||||
<h2 class="section-title">Kontaktformular</h2>
|
||||
<p class="section-description">
|
||||
Senden Sie uns eine Nachricht - wir melden uns schnellstmöglich bei Ihnen
|
||||
</p>
|
||||
</div>
|
||||
<form class="contact-form glass-card" id="contactForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="firstName">Vorname *</label>
|
||||
<input type="text" id="firstName" name="firstName" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">Nachname *</label>
|
||||
<input type="text" id="lastName" name="lastName" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail-Adresse *</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Telefon</label>
|
||||
<input type="tel" id="phone" name="phone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company">Unternehmen</label>
|
||||
<input type="text" id="company" name="company">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="subject">Betreff *</label>
|
||||
<select id="subject" name="subject" required>
|
||||
<option value="">Bitte wählen...</option>
|
||||
<option value="allgemeine-anfrage">Allgemeine Anfrage</option>
|
||||
<option value="vpc-anfrage">Virtual Private Container</option>
|
||||
<option value="vps-anfrage">Virtual Private Server</option>
|
||||
<option value="mail-gateway-anfrage">Mail Gateway</option>
|
||||
<option value="webhosting-anfrage">Webhosting</option>
|
||||
<option value="support">Technischer Support</option>
|
||||
<option value="beratung">Persönliche Beratung</option>
|
||||
<option value="migration">Migration/Umzug</option>
|
||||
<option value="sonstiges">Sonstiges</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Ihre Nachricht *</label>
|
||||
<textarea id="message" name="message" rows="6" required placeholder="Beschreiben Sie Ihr Anliegen..."></textarea>
|
||||
</div>
|
||||
<div class="form-group checkbox-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="privacy" name="privacy" required>
|
||||
<span class="checkmark"></span>
|
||||
Ich habe die <a href="#" target="_blank">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zu. *
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group checkbox-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="newsletter" name="newsletter">
|
||||
<span class="checkmark"></span>
|
||||
Ich möchte den HexaHost.de Newsletter mit Informationen zu neuen Produkten und Angeboten erhalten.
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Nachricht senden</button>
|
||||
<button type="reset" class="btn btn-secondary">Formular zurücksetzen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="faq-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Häufig gestellte Fragen</h2>
|
||||
<p class="section-description">
|
||||
Schnelle Antworten auf die wichtigsten Fragen
|
||||
</p>
|
||||
</div>
|
||||
<div class="faq-grid">
|
||||
<div class="faq-item glass-card">
|
||||
<div class="faq-question">
|
||||
<h3>Wie schnell erhalte ich eine Antwort?</h3>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<p>Wir antworten in der Regel innerhalb von 2-4 Stunden auf E-Mail-Anfragen. Bei dringenden Anliegen nutzen Sie bitte unseren Live Chat oder rufen Sie uns an.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item glass-card">
|
||||
<div class="faq-question">
|
||||
<h3>Bieten Sie kostenlose Beratung an?</h3>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<p>Ja, unsere Beratung ist völlig kostenfrei und unverbindlich. Wir helfen Ihnen gerne bei der Auswahl der richtigen Hosting-Lösung für Ihre Bedürfnisse.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item glass-card">
|
||||
<div class="faq-question">
|
||||
<h3>Können Sie bei der Migration helfen?</h3>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<p>Selbstverständlich! Wir unterstützen Sie beim Umzug von Ihrem bisherigen Hosting-Anbieter zu uns. Unser Migrations-Service ist in vielen Fällen kostenlos.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item glass-card">
|
||||
<div class="faq-question">
|
||||
<h3>Gibt es eine Geld-zurück-Garantie?</h3>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<p>Ja, wir bieten eine 30-Tage Geld-zurück-Garantie. Wenn Sie nicht zufrieden sind, erhalten Sie Ihr Geld ohne Wenn und Aber zurück.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item glass-card">
|
||||
<div class="faq-question">
|
||||
<h3>Wo stehen Ihre Server?</h3>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<p>Alle unsere Server stehen in deutschen Rechenzentren. Das gewährleistet DSGVO-Konformität und niedrige Latenzzeiten für deutsche Nutzer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item glass-card">
|
||||
<div class="faq-question">
|
||||
<h3>Bieten Sie 24/7 Support?</h3>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<p>Unser direkter Support ist Mo-Fr von 9:00-18:00 Uhr verfügbar. Außerhalb dieser Zeiten überwachen automatische Systeme die Infrastruktur und bei kritischen Problemen sind wir auch außerhalb der Geschäftszeiten erreichbar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Response Time -->
|
||||
<section class="response-time">
|
||||
<div class="container">
|
||||
<div class="response-content glass-card">
|
||||
<div class="response-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">< 2h</span>
|
||||
<span class="stat-label">Durchschnittliche Antwortzeit</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">98%</span>
|
||||
<span class="stat-label">Kundenzufriedenheit</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">24/7</span>
|
||||
<span class="stat-label">Monitoring</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="response-text">
|
||||
<h3>Schnelle Hilfe garantiert</h3>
|
||||
<p>Unser Support-Team ist darauf spezialisiert, Ihnen schnell und effektiv zu helfen. Die meisten Anfragen werden innerhalb von 2 Stunden beantwortet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>HexaHost.de</h4>
|
||||
<p>Zuverlässiges Hosting aus Niederbayern</p>
|
||||
<div class="footer-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>Niederbayern, Deutschland</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Produkte</h4>
|
||||
<ul>
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Unternehmen</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">Über uns</a></li>
|
||||
<li><a href="contact.html">Kontakt</a></li>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Support</h4>
|
||||
<ul>
|
||||
<li><a href="#">Hilfe-Center</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
<li><a href="contact.html">Support-Ticket</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 HexaHost.de - Alle Rechte vorbehalten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
<script src="assets/js/contact.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
22
public/favicon.svg
Normal file
22
public/favicon.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff51f9;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#a348ff;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Hexagon shape -->
|
||||
<polygon points="50,10 85,30 85,70 50,90 15,70 15,30"
|
||||
fill="url(#grad)"
|
||||
stroke="#3978ff"
|
||||
stroke-width="2"/>
|
||||
|
||||
<!-- Letter H -->
|
||||
<text x="50" y="60"
|
||||
text-anchor="middle"
|
||||
font-family="Arial, sans-serif"
|
||||
font-size="40"
|
||||
font-weight="bold"
|
||||
fill="white">H</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 690 B |
311
public/index.html
Normal file
311
public/index.html
Normal file
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HexaHost.de - Zuverlässiges Hosting aus Niederbayern</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<meta name="description" content="HexaHost.de - Zuverlässiges und preiswertes Hosting aus Niederbayern. VPS, VPC, Mail Gateway und Webhosting Lösungen.">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">HexaHost</span>
|
||||
<span class="logo-tld">.de</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="nav-link active">Home</a></li>
|
||||
<li class="nav-dropdown">
|
||||
<a href="#" class="nav-link">Produkte</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html" class="nav-link">Über uns</a></li>
|
||||
<li><a href="contact.html" class="nav-link">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">
|
||||
Zuverlässiges Hosting aus <span class="highlight">Niederbayern</span>
|
||||
</h1>
|
||||
<p class="hero-description">
|
||||
Entdecken Sie unsere preiswerten und zuverlässigen Hosting-Lösungen.
|
||||
Von Virtual Private Servern bis hin zu Webhosting - wir haben die
|
||||
perfekte Lösung für Ihre Bedürfnisse.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#products" class="btn btn-primary">Produkte entdecken</a>
|
||||
<a href="contact.html" class="btn btn-secondary">Kontakt aufnehmen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-card glass-card">
|
||||
<div class="server-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>99.9% Uptime</h3>
|
||||
<p>Zuverlässige Infrastruktur</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Products Section -->
|
||||
<section id="products" class="products">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Unsere Hosting-Lösungen</h2>
|
||||
<p class="section-description">
|
||||
Modernste Technologie auf Proxmox-Basis für maximale Performance und Zuverlässigkeit
|
||||
</p>
|
||||
</div>
|
||||
<div class="products-grid">
|
||||
<div class="product-card glass-card">
|
||||
<div class="product-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 7V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3"/>
|
||||
<path d="M4 7h16"/>
|
||||
<path d="M4 7v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7"/>
|
||||
<circle cx="9" cy="11" r="2"/>
|
||||
<path d="m13 13 4 4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="product-title">Virtual Private Container</h3>
|
||||
<p class="product-description">
|
||||
Effiziente LXC-Container auf Proxmox-Basis für optimale Ressourcennutzung
|
||||
</p>
|
||||
<div class="product-features">
|
||||
<span class="feature">• Proxmox LXC</span>
|
||||
<span class="feature">• Hohe Performance</span>
|
||||
<span class="feature">• Skalierbar</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
ab <span class="price">4,99€</span> /Monat
|
||||
</div>
|
||||
<a href="vpc.html" class="btn btn-primary">Mehr erfahren</a>
|
||||
</div>
|
||||
|
||||
<div class="product-card glass-card featured">
|
||||
<div class="featured-badge">Beliebt</div>
|
||||
<div class="product-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="product-title">Virtual Private Server</h3>
|
||||
<p class="product-description">
|
||||
Vollwertige KVM-Virtualisierung mit maximaler Flexibilität und Kontrolle
|
||||
</p>
|
||||
<div class="product-features">
|
||||
<span class="feature">• Proxmox KVM</span>
|
||||
<span class="feature">• Vollzugriff</span>
|
||||
<span class="feature">• Alle OS</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
ab <span class="price">9,99€</span> /Monat
|
||||
</div>
|
||||
<a href="vps.html" class="btn btn-primary">Mehr erfahren</a>
|
||||
</div>
|
||||
|
||||
<div class="product-card glass-card">
|
||||
<div class="product-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="product-title">Mail Gateway</h3>
|
||||
<p class="product-description">
|
||||
Professioneller E-Mail-Schutz mit Spam- und Virenfilterung
|
||||
</p>
|
||||
<div class="product-features">
|
||||
<span class="feature">• Spam-Schutz</span>
|
||||
<span class="feature">• Viren-Filter</span>
|
||||
<span class="feature">• Einfache Verwaltung</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
ab <span class="price">2,99€</span> /Monat
|
||||
</div>
|
||||
<a href="mail-gateway.html" class="btn btn-primary">Mehr erfahren</a>
|
||||
</div>
|
||||
|
||||
<div class="product-card glass-card">
|
||||
<div class="product-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M2 12h20"/>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="product-title">Webhosting</h3>
|
||||
<p class="product-description">
|
||||
Klassisches Webhosting mit allem was Sie für Ihre Website benötigen
|
||||
</p>
|
||||
<div class="product-features">
|
||||
<span class="feature">• PHP & MySQL</span>
|
||||
<span class="feature">• SSL-Zertifikate</span>
|
||||
<span class="feature">• E-Mail inklusive</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
ab <span class="price">1,99€</span> /Monat
|
||||
</div>
|
||||
<a href="webhosting.html" class="btn btn-primary">Mehr erfahren</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Warum HexaHost?</h2>
|
||||
<p class="section-description">
|
||||
Überzeugen Sie sich von unseren Vorteilen
|
||||
</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Zuverlässigkeit</h3>
|
||||
<p>99.9% Uptime-Garantie und redundante Infrastruktur für maximale Verfügbarkeit</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="1"/>
|
||||
<path d="M12 1v6"/>
|
||||
<path d="M12 17v6"/>
|
||||
<path d="M3.75 6.75l4.5 4.5"/>
|
||||
<path d="M15.75 15.75l4.5 4.5"/>
|
||||
<path d="M1 12h6"/>
|
||||
<path d="M17 12h6"/>
|
||||
<path d="M3.75 17.25l4.5-4.5"/>
|
||||
<path d="M15.75 8.25l4.5-4.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Performance</h3>
|
||||
<p>Modernste Hardware und optimierte Konfigurationen für beste Leistung</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2v20M17 7l-5-5-5 5M17 17l-5 5-5-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Faire Preise</h3>
|
||||
<p>Transparent kalkulierte Preise ohne versteckte Kosten</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Support aus Bayern</h3>
|
||||
<p>Persönlicher Support direkt aus Niederbayern in deutscher Sprache</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content glass-card">
|
||||
<h2>Bereit für zuverlässiges Hosting?</h2>
|
||||
<p>Starten Sie noch heute mit HexaHost und erleben Sie den Unterschied</p>
|
||||
<div class="cta-actions">
|
||||
<a href="contact.html" class="btn btn-primary">Jetzt starten</a>
|
||||
<a href="about.html" class="btn btn-secondary">Mehr über uns</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>HexaHost.de</h4>
|
||||
<p>Zuverlässiges Hosting aus Niederbayern</p>
|
||||
<div class="footer-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>Niederbayern, Deutschland</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Produkte</h4>
|
||||
<ul>
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Unternehmen</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">Über uns</a></li>
|
||||
<li><a href="contact.html">Kontakt</a></li>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Support</h4>
|
||||
<ul>
|
||||
<li><a href="#">Hilfe-Center</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
<li><a href="contact.html">Support-Ticket</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 HexaHost.de - Alle Rechte vorbehalten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
517
public/mail-gateway.html
Normal file
517
public/mail-gateway.html
Normal file
@@ -0,0 +1,517 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mail Gateway - Professioneller E-Mail-Schutz | HexaHost.de</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<meta name="description" content="Mail Gateway mit Spam- und Virenfilterung. Professioneller E-Mail-Schutz ab 2,99€/Monat bei HexaHost.de">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">HexaHost</span>
|
||||
<span class="logo-tld">.de</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="nav-link">Home</a></li>
|
||||
<li class="nav-dropdown">
|
||||
<a href="#" class="nav-link active">Produkte</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html" class="nav-link">Über uns</a></li>
|
||||
<li><a href="contact.html" class="nav-link">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Product Hero -->
|
||||
<section class="product-hero">
|
||||
<div class="container">
|
||||
<div class="product-hero-content">
|
||||
<div class="breadcrumb">
|
||||
<a href="index.html">Home</a>
|
||||
<span>/</span>
|
||||
<span>Mail Gateway</span>
|
||||
</div>
|
||||
<h1 class="product-hero-title">
|
||||
Mail Gateway
|
||||
<span class="highlight">Professioneller E-Mail-Schutz</span>
|
||||
</h1>
|
||||
<p class="product-hero-description">
|
||||
Schützen Sie Ihr Unternehmen vor Spam, Viren und Phishing-Attacken.
|
||||
Unser Mail Gateway filtert unerwünschte E-Mails heraus, bevor sie
|
||||
Ihren Server erreichen.
|
||||
</p>
|
||||
<div class="product-hero-features">
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
<span>99,9% Spam-Schutz</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 12l2 2 4-4"/>
|
||||
<path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
|
||||
<path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
|
||||
</svg>
|
||||
<span>Viren-Filter</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
<span>E-Mail-Archivierung</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mail Gateway Packages -->
|
||||
<section class="packages">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Mail Gateway Pakete</h2>
|
||||
<p class="section-description">
|
||||
Professioneller E-Mail-Schutz für jede Unternehmensgröße
|
||||
</p>
|
||||
</div>
|
||||
<div class="packages-grid">
|
||||
<!-- Starter Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">Mail Gateway Starter</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">2,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mail-Adressen:</span>
|
||||
<span class="spec-value">bis 10</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Domains:</span>
|
||||
<span class="spec-value">1</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Speicher/Archiv:</span>
|
||||
<span class="spec-value">5 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mails/Tag:</span>
|
||||
<span class="spec-value">1.000</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Quarantäne:</span>
|
||||
<span class="spec-value">7 Tage</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ Spam-Filter</div>
|
||||
<div class="feature">✓ Viren-Schutz</div>
|
||||
<div class="feature">✓ Quarantäne-Management</div>
|
||||
<div class="feature">✓ Web-Interface</div>
|
||||
<div class="feature">✓ E-Mail-Support</div>
|
||||
</div>
|
||||
<a href="contact.html?package=mail-starter" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Business Package -->
|
||||
<div class="package-card glass-card featured">
|
||||
<div class="featured-badge">Beliebt</div>
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">Mail Gateway Business</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">9,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mail-Adressen:</span>
|
||||
<span class="spec-value">bis 50</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Domains:</span>
|
||||
<span class="spec-value">3</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Speicher/Archiv:</span>
|
||||
<span class="spec-value">25 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mails/Tag:</span>
|
||||
<span class="spec-value">5.000</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Quarantäne:</span>
|
||||
<span class="spec-value">14 Tage</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ Spam-Filter</div>
|
||||
<div class="feature">✓ Viren-Schutz</div>
|
||||
<div class="feature">✓ Phishing-Schutz</div>
|
||||
<div class="feature">✓ Quarantäne-Management</div>
|
||||
<div class="feature">✓ Web-Interface</div>
|
||||
<div class="feature">✓ E-Mail-Archivierung</div>
|
||||
<div class="feature">✓ Reporting</div>
|
||||
</div>
|
||||
<a href="contact.html?package=mail-business" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Professional Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">Mail Gateway Professional</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">19,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mail-Adressen:</span>
|
||||
<span class="spec-value">bis 150</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Domains:</span>
|
||||
<span class="spec-value">10</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Speicher/Archiv:</span>
|
||||
<span class="spec-value">100 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mails/Tag:</span>
|
||||
<span class="spec-value">15.000</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Quarantäne:</span>
|
||||
<span class="spec-value">30 Tage</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ Spam-Filter</div>
|
||||
<div class="feature">✓ Viren-Schutz</div>
|
||||
<div class="feature">✓ Phishing-Schutz</div>
|
||||
<div class="feature">✓ Advanced Threat Protection</div>
|
||||
<div class="feature">✓ Quarantäne-Management</div>
|
||||
<div class="feature">✓ Web-Interface</div>
|
||||
<div class="feature">✓ E-Mail-Archivierung</div>
|
||||
<div class="feature">✓ Erweiterte Reports</div>
|
||||
<div class="feature">✓ API-Zugang</div>
|
||||
</div>
|
||||
<a href="contact.html?package=mail-professional" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">Mail Gateway Enterprise</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">49,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mail-Adressen:</span>
|
||||
<span class="spec-value">unbegrenzt</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Domains:</span>
|
||||
<span class="spec-value">unbegrenzt</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Speicher/Archiv:</span>
|
||||
<span class="spec-value">500 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mails/Tag:</span>
|
||||
<span class="spec-value">unbegrenzt</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Quarantäne:</span>
|
||||
<span class="spec-value">90 Tage</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ Spam-Filter</div>
|
||||
<div class="feature">✓ Viren-Schutz</div>
|
||||
<div class="feature">✓ Phishing-Schutz</div>
|
||||
<div class="feature">✓ Advanced Threat Protection</div>
|
||||
<div class="feature">✓ Quarantäne-Management</div>
|
||||
<div class="feature">✓ Web-Interface</div>
|
||||
<div class="feature">✓ E-Mail-Archivierung</div>
|
||||
<div class="feature">✓ Custom Reports</div>
|
||||
<div class="feature">✓ API-Zugang</div>
|
||||
<div class="feature">✓ Priority Support</div>
|
||||
<div class="feature">✓ Dedizierte Instanz</div>
|
||||
</div>
|
||||
<a href="contact.html?package=mail-enterprise" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mail Gateway Features -->
|
||||
<section class="mail-features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Mail Gateway Features</h2>
|
||||
<p class="section-description">
|
||||
Umfassender Schutz für Ihre E-Mail-Kommunikation
|
||||
</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Spam-Filter</h3>
|
||||
<p>Intelligente Spam-Erkennung mit Machine Learning blockiert 99,9% aller unerwünschten E-Mails.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 12l2 2 4-4"/>
|
||||
<path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
|
||||
<path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Viren-Schutz</h3>
|
||||
<p>Mehrschichtiger Virenschutz mit aktuellsten Signaturen und Heuristik-Analyse.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Phishing-Schutz</h3>
|
||||
<p>Erkennung und Blockierung von Phishing-Versuchen und betrügerischen E-Mails.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Quarantäne</h3>
|
||||
<p>Sichere Quarantäne für verdächtige E-Mails mit einfacher Verwaltung über Web-Interface.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14,2 14,8 20,8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
<polyline points="10,9 9,9 8,9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>E-Mail-Archivierung</h3>
|
||||
<p>Automatische Archivierung aller E-Mails für Compliance und rechtliche Anforderungen.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 20V10"/>
|
||||
<path d="M12 20V4"/>
|
||||
<path d="M6 20v-6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Reporting</h3>
|
||||
<p>Detaillierte Berichte über E-Mail-Traffic, blockierte Bedrohungen und System-Performance.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How it Works -->
|
||||
<section class="how-it-works">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">So funktioniert's</h2>
|
||||
<p class="section-description">
|
||||
Einfache Integration in Ihre bestehende E-Mail-Infrastruktur
|
||||
</p>
|
||||
</div>
|
||||
<div class="steps-grid">
|
||||
<div class="step-item glass-card">
|
||||
<div class="step-number">1</div>
|
||||
<h3>MX-Record anpassen</h3>
|
||||
<p>Ändern Sie den MX-Record Ihrer Domain, um E-Mails über unser Gateway zu leiten.</p>
|
||||
</div>
|
||||
<div class="step-item glass-card">
|
||||
<div class="step-number">2</div>
|
||||
<h3>Filterung</h3>
|
||||
<p>Eingehende E-Mails werden automatisch auf Spam, Viren und Phishing geprüft.</p>
|
||||
</div>
|
||||
<div class="step-item glass-card">
|
||||
<div class="step-number">3</div>
|
||||
<h3>Weiterleitung</h3>
|
||||
<p>Saubere E-Mails werden an Ihren Mail-Server weitergeleitet, schädliche blockiert.</p>
|
||||
</div>
|
||||
<div class="step-item glass-card">
|
||||
<div class="step-number">4</div>
|
||||
<h3>Verwaltung</h3>
|
||||
<p>Überwachen und verwalten Sie alles über unser benutzerfreundliches Web-Interface.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits -->
|
||||
<section class="benefits">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Vorteile für Ihr Unternehmen</h2>
|
||||
<p class="section-description">
|
||||
Warum ein Mail Gateway unverzichtbar ist
|
||||
</p>
|
||||
</div>
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-item glass-card">
|
||||
<div class="benefit-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12,6 12,12 16,14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Produktivität steigern</h3>
|
||||
<p>Mitarbeiter verbringen weniger Zeit mit dem Löschen von Spam-E-Mails.</p>
|
||||
</div>
|
||||
<div class="benefit-item glass-card">
|
||||
<div class="benefit-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Server entlasten</h3>
|
||||
<p>Weniger Last auf Ihrem E-Mail-Server durch Vorfilterung schädlicher E-Mails.</p>
|
||||
</div>
|
||||
<div class="benefit-item glass-card">
|
||||
<div class="benefit-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Sicherheit erhöhen</h3>
|
||||
<p>Schutz vor Ransomware, Trojanern und anderen E-Mail-basierten Bedrohungen.</p>
|
||||
</div>
|
||||
<div class="benefit-item glass-card">
|
||||
<div class="benefit-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14,2 14,8 20,8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Compliance erfüllen</h3>
|
||||
<p>E-Mail-Archivierung für gesetzliche Aufbewahrungspflichten und Compliance.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content glass-card">
|
||||
<h2>Schützen Sie Ihre E-Mails jetzt!</h2>
|
||||
<p>Starten Sie noch heute mit professionellem E-Mail-Schutz</p>
|
||||
<div class="cta-actions">
|
||||
<a href="contact.html?product=mail-gateway" class="btn btn-primary">Jetzt bestellen</a>
|
||||
<a href="contact.html" class="btn btn-secondary">Kostenlose Beratung</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>HexaHost.de</h4>
|
||||
<p>Zuverlässiges Hosting aus Niederbayern</p>
|
||||
<div class="footer-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>Niederbayern, Deutschland</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Produkte</h4>
|
||||
<ul>
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Unternehmen</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">Über uns</a></li>
|
||||
<li><a href="contact.html">Kontakt</a></li>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Support</h4>
|
||||
<ul>
|
||||
<li><a href="#">Hilfe-Center</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
<li><a href="contact.html">Support-Ticket</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 HexaHost.de - Alle Rechte vorbehalten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
17
public/robots.txt
Normal file
17
public/robots.txt
Normal file
@@ -0,0 +1,17 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
# Block access to private files
|
||||
Disallow: /assets/js/
|
||||
Disallow: /assets/css/
|
||||
|
||||
# Allow CSS and JS files for better SEO
|
||||
Allow: /assets/css/style.css
|
||||
Allow: /assets/js/main.js
|
||||
Allow: /assets/js/contact.js
|
||||
|
||||
# Sitemap location
|
||||
Sitemap: https://hexahost.de/sitemap.xml
|
||||
|
||||
# Crawl delay (optional, adjust as needed)
|
||||
Crawl-delay: 1
|
||||
45
public/sitemap.xml
Normal file
45
public/sitemap.xml
Normal file
@@ -0,0 +1,45 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://hexahost.de/</loc>
|
||||
<lastmod>2024-01-01</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://hexahost.de/vpc.html</loc>
|
||||
<lastmod>2024-01-01</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://hexahost.de/vps.html</loc>
|
||||
<lastmod>2024-01-01</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://hexahost.de/mail-gateway.html</loc>
|
||||
<lastmod>2024-01-01</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://hexahost.de/webhosting.html</loc>
|
||||
<lastmod>2024-01-01</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://hexahost.de/about.html</loc>
|
||||
<lastmod>2024-01-01</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://hexahost.de/contact.html</loc>
|
||||
<lastmod>2024-01-01</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
426
public/vpc.html
Normal file
426
public/vpc.html
Normal file
@@ -0,0 +1,426 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Virtual Private Container - Effiziente LXC Container | HexaHost.de</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<meta name="description" content="Virtual Private Container auf Proxmox LXC-Basis. Effiziente und preiswerte Container-Lösungen ab 4,99€/Monat bei HexaHost.de">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">HexaHost</span>
|
||||
<span class="logo-tld">.de</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="nav-link">Home</a></li>
|
||||
<li class="nav-dropdown">
|
||||
<a href="#" class="nav-link active">Produkte</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html" class="nav-link">Über uns</a></li>
|
||||
<li><a href="contact.html" class="nav-link">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Product Hero -->
|
||||
<section class="product-hero">
|
||||
<div class="container">
|
||||
<div class="product-hero-content">
|
||||
<div class="breadcrumb">
|
||||
<a href="index.html">Home</a>
|
||||
<span>/</span>
|
||||
<span>Virtual Private Container</span>
|
||||
</div>
|
||||
<h1 class="product-hero-title">
|
||||
Virtual Private Container
|
||||
<span class="highlight">auf Proxmox LXC</span>
|
||||
</h1>
|
||||
<p class="product-hero-description">
|
||||
Erleben Sie die Effizienz von Linux-Containern mit der Zuverlässigkeit
|
||||
von Proxmox. Unsere VPC-Lösungen bieten optimale Performance bei
|
||||
minimalem Ressourcenverbrauch.
|
||||
</p>
|
||||
<div class="product-hero-features">
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12,6 12,12 16,14"/>
|
||||
</svg>
|
||||
<span>Sofortige Bereitstellung</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
<span>99.9% Uptime</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
<span>Maximale Performance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VPC Packages -->
|
||||
<section class="packages">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">VPC Pakete</h2>
|
||||
<p class="section-description">
|
||||
Wählen Sie das perfekte Container-Paket für Ihre Anforderungen
|
||||
</p>
|
||||
</div>
|
||||
<div class="packages-grid">
|
||||
<!-- Starter Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">VPC Starter</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">4,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU Kerne:</span>
|
||||
<span class="spec-value">1 vCore</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">RAM:</span>
|
||||
<span class="spec-value">1 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">SSD Speicher:</span>
|
||||
<span class="spec-value">20 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">1 TB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">IPv4 Adressen:</span>
|
||||
<span class="spec-value">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ Proxmox LXC Container</div>
|
||||
<div class="feature">✓ Root-Zugriff</div>
|
||||
<div class="feature">✓ SSH-Zugang</div>
|
||||
<div class="feature">✓ Backup inklusive</div>
|
||||
<div class="feature">✓ 24/7 Monitoring</div>
|
||||
</div>
|
||||
<a href="contact.html?package=vpc-starter" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Business Package -->
|
||||
<div class="package-card glass-card featured">
|
||||
<div class="featured-badge">Beliebt</div>
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">VPC Business</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">9,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU Kerne:</span>
|
||||
<span class="spec-value">2 vCores</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">RAM:</span>
|
||||
<span class="spec-value">4 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">SSD Speicher:</span>
|
||||
<span class="spec-value">80 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">3 TB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">IPv4 Adressen:</span>
|
||||
<span class="spec-value">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ Proxmox LXC Container</div>
|
||||
<div class="feature">✓ Root-Zugriff</div>
|
||||
<div class="feature">✓ SSH-Zugang</div>
|
||||
<div class="feature">✓ Tägliches Backup</div>
|
||||
<div class="feature">✓ 24/7 Monitoring</div>
|
||||
<div class="feature">✓ Snapshot-Funktion</div>
|
||||
</div>
|
||||
<a href="contact.html?package=vpc-business" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Professional Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">VPC Professional</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">19,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU Kerne:</span>
|
||||
<span class="spec-value">4 vCores</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">RAM:</span>
|
||||
<span class="spec-value">8 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">SSD Speicher:</span>
|
||||
<span class="spec-value">160 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">5 TB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">IPv4 Adressen:</span>
|
||||
<span class="spec-value">2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ Proxmox LXC Container</div>
|
||||
<div class="feature">✓ Root-Zugriff</div>
|
||||
<div class="feature">✓ SSH-Zugang</div>
|
||||
<div class="feature">✓ Stündliches Backup</div>
|
||||
<div class="feature">✓ 24/7 Monitoring</div>
|
||||
<div class="feature">✓ Snapshot-Funktion</div>
|
||||
<div class="feature">✓ Priority Support</div>
|
||||
</div>
|
||||
<a href="contact.html?package=vpc-professional" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">VPC Enterprise</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">39,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU Kerne:</span>
|
||||
<span class="spec-value">8 vCores</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">RAM:</span>
|
||||
<span class="spec-value">16 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">SSD Speicher:</span>
|
||||
<span class="spec-value">320 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">10 TB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">IPv4 Adressen:</span>
|
||||
<span class="spec-value">3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ Proxmox LXC Container</div>
|
||||
<div class="feature">✓ Root-Zugriff</div>
|
||||
<div class="feature">✓ SSH-Zugang</div>
|
||||
<div class="feature">✓ Stündliches Backup</div>
|
||||
<div class="feature">✓ 24/7 Monitoring</div>
|
||||
<div class="feature">✓ Snapshot-Funktion</div>
|
||||
<div class="feature">✓ Priority Support</div>
|
||||
<div class="feature">✓ Individuelle Konfiguration</div>
|
||||
</div>
|
||||
<a href="contact.html?package=vpc-enterprise" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Details -->
|
||||
<section class="technical-details">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Technische Details</h2>
|
||||
<p class="section-description">
|
||||
Erfahren Sie mehr über unsere Container-Technologie
|
||||
</p>
|
||||
</div>
|
||||
<div class="details-grid">
|
||||
<div class="detail-card glass-card">
|
||||
<div class="detail-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 7V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3"/>
|
||||
<path d="M4 7h16"/>
|
||||
<path d="M4 7v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Proxmox LXC</h3>
|
||||
<p>Modernste Container-Virtualisierung auf Basis von Linux Containers (LXC) mit Proxmox-Management für maximale Effizienz.</p>
|
||||
</div>
|
||||
<div class="detail-card glass-card">
|
||||
<div class="detail-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 1v6m0 6v6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>High Performance</h3>
|
||||
<p>Enterprise-Hardware mit NVMe SSD-Speicher und modernen Intel/AMD Prozessoren für beste Performance.</p>
|
||||
</div>
|
||||
<div class="detail-card glass-card">
|
||||
<div class="detail-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
<polyline points="7.5,4.21 12,6.81 16.5,4.21"/>
|
||||
<polyline points="7.5,19.79 7.5,14.6 3,12"/>
|
||||
<polyline points="21,12 16.5,14.6 16.5,19.79"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Skalierbarkeit</h3>
|
||||
<p>Einfache Anpassung der Ressourcen je nach Bedarf - CPU, RAM und Speicher können flexibel skaliert werden.</p>
|
||||
</div>
|
||||
<div class="detail-card glass-card">
|
||||
<div class="detail-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Sicherheit</h3>
|
||||
<p>Isolierte Container-Umgebung mit automatischen Sicherheitsupdates und regelmäßigen Backups.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Use Cases -->
|
||||
<section class="use-cases">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Anwendungsbereiche</h2>
|
||||
<p class="section-description">
|
||||
Perfekt geeignet für verschiedene Szenarien
|
||||
</p>
|
||||
</div>
|
||||
<div class="use-cases-grid">
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>Web-Entwicklung</h3>
|
||||
<p>Ideale Testumgebung für Entwickler mit schneller Bereitstellung und flexibler Konfiguration.</p>
|
||||
</div>
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>Microservices</h3>
|
||||
<p>Effiziente Containerisierung von Microservices mit optimaler Ressourcennutzung.</p>
|
||||
</div>
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>CI/CD Pipelines</h3>
|
||||
<p>Automatisierte Build- und Deployment-Prozesse in isolierten Container-Umgebungen.</p>
|
||||
</div>
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>Backup-Server</h3>
|
||||
<p>Zuverlässige Backup-Lösungen mit redundanter Speicherung und automatischer Überwachung.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content glass-card">
|
||||
<h2>Bereit für Ihren VPC?</h2>
|
||||
<p>Starten Sie noch heute mit einem Virtual Private Container</p>
|
||||
<div class="cta-actions">
|
||||
<a href="contact.html?product=vpc" class="btn btn-primary">Jetzt bestellen</a>
|
||||
<a href="contact.html" class="btn btn-secondary">Beratung anfordern</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>HexaHost.de</h4>
|
||||
<p>Zuverlässiges Hosting aus Niederbayern</p>
|
||||
<div class="footer-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>Niederbayern, Deutschland</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Produkte</h4>
|
||||
<ul>
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Unternehmen</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">Über uns</a></li>
|
||||
<li><a href="contact.html">Kontakt</a></li>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Support</h4>
|
||||
<ul>
|
||||
<li><a href="#">Hilfe-Center</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
<li><a href="contact.html">Support-Ticket</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 HexaHost.de - Alle Rechte vorbehalten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
530
public/vps.html
Normal file
530
public/vps.html
Normal file
@@ -0,0 +1,530 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Virtual Private Server - KVM Virtualisierung | HexaHost.de</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<meta name="description" content="Virtual Private Server auf Proxmox KVM-Basis. Vollwertige Virtualisierung mit Root-Zugriff ab 9,99€/Monat bei HexaHost.de">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">HexaHost</span>
|
||||
<span class="logo-tld">.de</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="nav-link">Home</a></li>
|
||||
<li class="nav-dropdown">
|
||||
<a href="#" class="nav-link active">Produkte</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html" class="nav-link">Über uns</a></li>
|
||||
<li><a href="contact.html" class="nav-link">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Product Hero -->
|
||||
<section class="product-hero">
|
||||
<div class="container">
|
||||
<div class="product-hero-content">
|
||||
<div class="breadcrumb">
|
||||
<a href="index.html">Home</a>
|
||||
<span>/</span>
|
||||
<span>Virtual Private Server</span>
|
||||
</div>
|
||||
<h1 class="product-hero-title">
|
||||
Virtual Private Server
|
||||
<span class="highlight">auf Proxmox KVM</span>
|
||||
</h1>
|
||||
<p class="product-hero-description">
|
||||
Maximale Flexibilität und Kontrolle mit vollwertiger KVM-Virtualisierung.
|
||||
Installieren Sie jedes Betriebssystem und genießen Sie vollständigen Root-Zugriff.
|
||||
</p>
|
||||
<div class="product-hero-features">
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
</svg>
|
||||
<span>Vollwertiger Server</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
<span>Alle Betriebssysteme</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 12l2 2 4-4"/>
|
||||
<path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
|
||||
<path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
|
||||
</svg>
|
||||
<span>Root-Zugriff</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VPS Packages -->
|
||||
<section class="packages">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">VPS Pakete</h2>
|
||||
<p class="section-description">
|
||||
Leistungsstarke Virtual Private Server für jeden Bedarf
|
||||
</p>
|
||||
</div>
|
||||
<div class="packages-grid">
|
||||
<!-- Basic Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">VPS Basic</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">9,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU Kerne:</span>
|
||||
<span class="spec-value">2 vCores</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">RAM:</span>
|
||||
<span class="spec-value">4 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">SSD Speicher:</span>
|
||||
<span class="spec-value">50 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">2 TB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">IPv4 Adressen:</span>
|
||||
<span class="spec-value">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ KVM Virtualisierung</div>
|
||||
<div class="feature">✓ Vollzugriff (Root)</div>
|
||||
<div class="feature">✓ Alle Betriebssysteme</div>
|
||||
<div class="feature">✓ Backup inklusive</div>
|
||||
<div class="feature">✓ 24/7 Monitoring</div>
|
||||
<div class="feature">✓ Rescue-System</div>
|
||||
</div>
|
||||
<a href="contact.html?package=vps-basic" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Standard Package -->
|
||||
<div class="package-card glass-card featured">
|
||||
<div class="featured-badge">Beliebt</div>
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">VPS Standard</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">19,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU Kerne:</span>
|
||||
<span class="spec-value">4 vCores</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">RAM:</span>
|
||||
<span class="spec-value">8 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">SSD Speicher:</span>
|
||||
<span class="spec-value">100 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">4 TB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">IPv4 Adressen:</span>
|
||||
<span class="spec-value">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ KVM Virtualisierung</div>
|
||||
<div class="feature">✓ Vollzugriff (Root)</div>
|
||||
<div class="feature">✓ Alle Betriebssysteme</div>
|
||||
<div class="feature">✓ Tägliches Backup</div>
|
||||
<div class="feature">✓ 24/7 Monitoring</div>
|
||||
<div class="feature">✓ Rescue-System</div>
|
||||
<div class="feature">✓ Snapshot-Funktion</div>
|
||||
</div>
|
||||
<a href="contact.html?package=vps-standard" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Premium Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">VPS Premium</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">39,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU Kerne:</span>
|
||||
<span class="spec-value">6 vCores</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">RAM:</span>
|
||||
<span class="spec-value">16 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">SSD Speicher:</span>
|
||||
<span class="spec-value">200 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">8 TB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">IPv4 Adressen:</span>
|
||||
<span class="spec-value">2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ KVM Virtualisierung</div>
|
||||
<div class="feature">✓ Vollzugriff (Root)</div>
|
||||
<div class="feature">✓ Alle Betriebssysteme</div>
|
||||
<div class="feature">✓ Stündliches Backup</div>
|
||||
<div class="feature">✓ 24/7 Monitoring</div>
|
||||
<div class="feature">✓ Rescue-System</div>
|
||||
<div class="feature">✓ Snapshot-Funktion</div>
|
||||
<div class="feature">✓ Priority Support</div>
|
||||
</div>
|
||||
<a href="contact.html?package=vps-premium" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">VPS Enterprise</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">79,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU Kerne:</span>
|
||||
<span class="spec-value">12 vCores</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">RAM:</span>
|
||||
<span class="spec-value">32 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">SSD Speicher:</span>
|
||||
<span class="spec-value">500 GB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">15 TB</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">IPv4 Adressen:</span>
|
||||
<span class="spec-value">4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ KVM Virtualisierung</div>
|
||||
<div class="feature">✓ Vollzugriff (Root)</div>
|
||||
<div class="feature">✓ Alle Betriebssysteme</div>
|
||||
<div class="feature">✓ Stündliches Backup</div>
|
||||
<div class="feature">✓ 24/7 Monitoring</div>
|
||||
<div class="feature">✓ Rescue-System</div>
|
||||
<div class="feature">✓ Snapshot-Funktion</div>
|
||||
<div class="feature">✓ Priority Support</div>
|
||||
<div class="feature">✓ Dedizierte CPU</div>
|
||||
</div>
|
||||
<a href="contact.html?package=vps-enterprise" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Operating Systems -->
|
||||
<section class="operating-systems">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Betriebssysteme</h2>
|
||||
<p class="section-description">
|
||||
Wählen Sie aus einer Vielzahl von Betriebssystemen
|
||||
</p>
|
||||
</div>
|
||||
<div class="os-grid">
|
||||
<div class="os-item glass-card">
|
||||
<div class="os-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Ubuntu</h3>
|
||||
<p>20.04 LTS, 22.04 LTS, 24.04 LTS</p>
|
||||
</div>
|
||||
<div class="os-item glass-card">
|
||||
<div class="os-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Debian</h3>
|
||||
<p>11 (Bullseye), 12 (Bookworm)</p>
|
||||
</div>
|
||||
<div class="os-item glass-card">
|
||||
<div class="os-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>CentOS</h3>
|
||||
<p>Stream 8, Stream 9</p>
|
||||
</div>
|
||||
<div class="os-item glass-card">
|
||||
<div class="os-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Rocky Linux</h3>
|
||||
<p>8.x, 9.x</p>
|
||||
</div>
|
||||
<div class="os-item glass-card">
|
||||
<div class="os-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Windows Server</h3>
|
||||
<p>2019, 2022 (auf Anfrage)</p>
|
||||
</div>
|
||||
<div class="os-item glass-card">
|
||||
<div class="os-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Weitere</h3>
|
||||
<p>Fedora, openSUSE, FreeBSD</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VPS Features -->
|
||||
<section class="vps-features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">VPS Vorteile</h2>
|
||||
<p class="section-description">
|
||||
Warum unsere Virtual Private Server die beste Wahl sind
|
||||
</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>KVM Virtualisierung</h3>
|
||||
<p>Vollwertige Hardware-Virtualisierung mit garantierten Ressourcen und maximaler Isolation.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Flexible Betriebssysteme</h3>
|
||||
<p>Installieren Sie jedes Betriebssystem Ihrer Wahl - von Linux bis Windows Server.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 7V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3"/>
|
||||
<path d="M4 7h16"/>
|
||||
<path d="M4 7v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7"/>
|
||||
<circle cx="9" cy="11" r="2"/>
|
||||
<path d="m13 13 4 4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Vollzugriff</h3>
|
||||
<p>Root-Zugriff und administrative Rechte für maximale Konfigurationsfreiheit.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Skalierbarkeit</h3>
|
||||
<p>Erweitern Sie CPU, RAM und Speicher jederzeit nach Ihren Anforderungen.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Sicherheit</h3>
|
||||
<p>Isolierte Umgebung mit DDoS-Schutz und regelmäßigen Sicherheitsupdates.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Management-Tools</h3>
|
||||
<p>Intuitive Verwaltung über Proxmox-Interface mit Konsolen-Zugriff und Monitoring.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Use Cases for VPS -->
|
||||
<section class="use-cases">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Anwendungsbereiche</h2>
|
||||
<p class="section-description">
|
||||
Ideal für professionelle Anwendungen
|
||||
</p>
|
||||
</div>
|
||||
<div class="use-cases-grid">
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>Web-Server</h3>
|
||||
<p>Hosting von Websites und Web-Anwendungen mit vollständiger Kontrolle über die Server-Konfiguration.</p>
|
||||
</div>
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>Datenbank-Server</h3>
|
||||
<p>MySQL, PostgreSQL, MongoDB und andere Datenbanken mit optimierter Performance.</p>
|
||||
</div>
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>Entwicklungsumgebung</h3>
|
||||
<p>Isolierte Entwicklungs- und Testumgebungen für komplexe Projekte.</p>
|
||||
</div>
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>Game-Server</h3>
|
||||
<p>Hosting von Minecraft, CS:GO und anderen Game-Servern mit garantierter Performance.</p>
|
||||
</div>
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>VPN-Server</h3>
|
||||
<p>Private VPN-Lösungen für sichere Verbindungen und anonymes Surfen.</p>
|
||||
</div>
|
||||
<div class="use-case-item glass-card">
|
||||
<h3>Cloud-Storage</h3>
|
||||
<p>Private Cloud-Lösungen mit Nextcloud, ownCloud oder anderen Plattformen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content glass-card">
|
||||
<h2>Bereit für maximale Kontrolle?</h2>
|
||||
<p>Starten Sie noch heute mit einem leistungsstarken VPS</p>
|
||||
<div class="cta-actions">
|
||||
<a href="contact.html?product=vps" class="btn btn-primary">Jetzt bestellen</a>
|
||||
<a href="contact.html" class="btn btn-secondary">Beratung anfordern</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>HexaHost.de</h4>
|
||||
<p>Zuverlässiges Hosting aus Niederbayern</p>
|
||||
<div class="footer-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>Niederbayern, Deutschland</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Produkte</h4>
|
||||
<ul>
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Unternehmen</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">Über uns</a></li>
|
||||
<li><a href="contact.html">Kontakt</a></li>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Support</h4>
|
||||
<ul>
|
||||
<li><a href="#">Hilfe-Center</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
<li><a href="contact.html">Support-Ticket</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 HexaHost.de - Alle Rechte vorbehalten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
589
public/webhosting.html
Normal file
589
public/webhosting.html
Normal file
@@ -0,0 +1,589 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Webhosting - Klassisches Hosting für Websites | HexaHost.de</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<meta name="description" content="Webhosting mit PHP, MySQL und SSL-Zertifikaten. Klassisches Hosting für Websites ab 1,99€/Monat bei HexaHost.de">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">HexaHost</span>
|
||||
<span class="logo-tld">.de</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="nav-link">Home</a></li>
|
||||
<li class="nav-dropdown">
|
||||
<a href="#" class="nav-link active">Produkte</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html" class="nav-link">Über uns</a></li>
|
||||
<li><a href="contact.html" class="nav-link">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Product Hero -->
|
||||
<section class="product-hero">
|
||||
<div class="container">
|
||||
<div class="product-hero-content">
|
||||
<div class="breadcrumb">
|
||||
<a href="index.html">Home</a>
|
||||
<span>/</span>
|
||||
<span>Webhosting</span>
|
||||
</div>
|
||||
<h1 class="product-hero-title">
|
||||
Webhosting
|
||||
<span class="highlight">Alles für Ihre Website</span>
|
||||
</h1>
|
||||
<p class="product-hero-description">
|
||||
Klassisches Webhosting mit allem, was Sie für eine erfolgreiche Website benötigen.
|
||||
PHP, MySQL, SSL-Zertifikate und E-Mail-Postfächer - alles inklusive.
|
||||
</p>
|
||||
<div class="product-hero-features">
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M2 12h20"/>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||
</svg>
|
||||
<span>Domain inklusive</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
<span>SSL-Zertifikate</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
<span>E-Mail inklusive</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Webhosting Packages -->
|
||||
<section class="packages">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Webhosting Pakete</h2>
|
||||
<p class="section-description">
|
||||
Von der ersten Website bis zum professionellen Online-Shop
|
||||
</p>
|
||||
</div>
|
||||
<div class="packages-grid">
|
||||
<!-- Starter Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">Web Starter</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">1,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Webspace:</span>
|
||||
<span class="spec-value">5 GB SSD</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Domains:</span>
|
||||
<span class="spec-value">1 inklusive</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mail-Postfächer:</span>
|
||||
<span class="spec-value">5</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">MySQL Datenbanken:</span>
|
||||
<span class="spec-value">2</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">100 GB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ PHP 8.2 Support</div>
|
||||
<div class="feature">✓ MySQL 8.0</div>
|
||||
<div class="feature">✓ SSL-Zertifikat</div>
|
||||
<div class="feature">✓ WordPress Ready</div>
|
||||
<div class="feature">✓ cPanel</div>
|
||||
<div class="feature">✓ Tägliches Backup</div>
|
||||
</div>
|
||||
<a href="contact.html?package=web-starter" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Business Package -->
|
||||
<div class="package-card glass-card featured">
|
||||
<div class="featured-badge">Beliebt</div>
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">Web Business</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">4,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Webspace:</span>
|
||||
<span class="spec-value">25 GB SSD</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Domains:</span>
|
||||
<span class="spec-value">3 inklusive</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mail-Postfächer:</span>
|
||||
<span class="spec-value">25</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">MySQL Datenbanken:</span>
|
||||
<span class="spec-value">10</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">500 GB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ PHP 8.2 Support</div>
|
||||
<div class="feature">✓ MySQL 8.0</div>
|
||||
<div class="feature">✓ SSL-Zertifikat</div>
|
||||
<div class="feature">✓ WordPress Ready</div>
|
||||
<div class="feature">✓ cPanel</div>
|
||||
<div class="feature">✓ Tägliches Backup</div>
|
||||
<div class="feature">✓ Subdomain Support</div>
|
||||
<div class="feature">✓ FTP-Zugänge</div>
|
||||
</div>
|
||||
<a href="contact.html?package=web-business" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Professional Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">Web Professional</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">9,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Webspace:</span>
|
||||
<span class="spec-value">100 GB SSD</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Domains:</span>
|
||||
<span class="spec-value">10 inklusive</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mail-Postfächer:</span>
|
||||
<span class="spec-value">100</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">MySQL Datenbanken:</span>
|
||||
<span class="spec-value">25</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">2 TB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ PHP 8.2 Support</div>
|
||||
<div class="feature">✓ MySQL 8.0</div>
|
||||
<div class="feature">✓ SSL-Zertifikat</div>
|
||||
<div class="feature">✓ WordPress Ready</div>
|
||||
<div class="feature">✓ cPanel</div>
|
||||
<div class="feature">✓ Stündliches Backup</div>
|
||||
<div class="feature">✓ Subdomain Support</div>
|
||||
<div class="feature">✓ FTP-Zugänge</div>
|
||||
<div class="feature">✓ Cron Jobs</div>
|
||||
<div class="feature">✓ Shell-Zugang</div>
|
||||
</div>
|
||||
<a href="contact.html?package=web-professional" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Package -->
|
||||
<div class="package-card glass-card">
|
||||
<div class="package-header">
|
||||
<h3 class="package-name">Web Enterprise</h3>
|
||||
<div class="package-price">
|
||||
<span class="price">19,99€</span>
|
||||
<span class="period">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-specs">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Webspace:</span>
|
||||
<span class="spec-value">500 GB SSD</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Domains:</span>
|
||||
<span class="spec-value">unbegrenzt</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">E-Mail-Postfächer:</span>
|
||||
<span class="spec-value">unbegrenzt</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">MySQL Datenbanken:</span>
|
||||
<span class="spec-value">unbegrenzt</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">Traffic:</span>
|
||||
<span class="spec-value">10 TB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-features">
|
||||
<div class="feature">✓ PHP 8.2 Support</div>
|
||||
<div class="feature">✓ MySQL 8.0</div>
|
||||
<div class="feature">✓ SSL-Zertifikat</div>
|
||||
<div class="feature">✓ WordPress Ready</div>
|
||||
<div class="feature">✓ cPanel</div>
|
||||
<div class="feature">✓ Stündliches Backup</div>
|
||||
<div class="feature">✓ Subdomain Support</div>
|
||||
<div class="feature">✓ FTP-Zugänge</div>
|
||||
<div class="feature">✓ Cron Jobs</div>
|
||||
<div class="feature">✓ Shell-Zugang</div>
|
||||
<div class="feature">✓ Priority Support</div>
|
||||
<div class="feature">✓ Staging-Umgebung</div>
|
||||
</div>
|
||||
<a href="contact.html?package=web-enterprise" class="btn btn-primary">Jetzt bestellen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technologies -->
|
||||
<section class="technologies">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Unterstützte Technologien</h2>
|
||||
<p class="section-description">
|
||||
Moderne Web-Technologien für Ihre Projekte
|
||||
</p>
|
||||
</div>
|
||||
<div class="tech-grid">
|
||||
<div class="tech-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 2C7.589 4 4 7.589 4 12s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>PHP</h3>
|
||||
<p>Version 7.4, 8.0, 8.1, 8.2</p>
|
||||
</div>
|
||||
<div class="tech-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 2C7.589 4 4 7.589 4 12s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>MySQL</h3>
|
||||
<p>Version 8.0 mit InnoDB</p>
|
||||
</div>
|
||||
<div class="tech-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 2C7.589 4 4 7.589 4 12s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>WordPress</h3>
|
||||
<p>One-Click Installation</p>
|
||||
</div>
|
||||
<div class="tech-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 2C7.589 4 4 7.589 4 12s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Node.js</h3>
|
||||
<p>Moderne JavaScript-Runtime</p>
|
||||
</div>
|
||||
<div class="tech-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 2C7.589 4 4 7.589 4 12s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Python</h3>
|
||||
<p>Version 3.9, 3.10, 3.11</p>
|
||||
</div>
|
||||
<div class="tech-item glass-card">
|
||||
<div class="tech-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 2C7.589 4 4 7.589 4 12s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>SSL/TLS</h3>
|
||||
<p>Let's Encrypt & Premium</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="web-features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Webhosting Features</h2>
|
||||
<p class="section-description">
|
||||
Alles was Sie für eine erfolgreiche Website benötigen
|
||||
</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M2 12h20"/>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Domain inklusive</h3>
|
||||
<p>Eine .de Domain ist in jedem Paket kostenfrei enthalten. Weitere Domains zu günstigen Preisen.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>SSL-Zertifikate</h3>
|
||||
<p>Kostenlose Let's Encrypt SSL-Zertifikate für sichere HTTPS-Verbindungen.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>E-Mail-Postfächer</h3>
|
||||
<p>Professionelle E-Mail-Adressen mit Ihrer Domain inklusive Webmail-Interface.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Automatische Backups</h3>
|
||||
<p>Tägliche Sicherungen Ihrer Website und Datenbanken für maximale Sicherheit.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>cPanel</h3>
|
||||
<p>Benutzerfreundliches Control Panel für einfache Verwaltung Ihres Hostings.</p>
|
||||
</div>
|
||||
<div class="feature-item glass-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>SSD-Speicher</h3>
|
||||
<p>Schnelle SSD-Festplatten für optimale Performance und kurze Ladezeiten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CMS Support -->
|
||||
<section class="cms-support">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Content Management Systeme</h2>
|
||||
<p class="section-description">
|
||||
One-Click Installation der beliebtesten CMS
|
||||
</p>
|
||||
</div>
|
||||
<div class="cms-grid">
|
||||
<div class="cms-item glass-card">
|
||||
<div class="cms-logo">WP</div>
|
||||
<h3>WordPress</h3>
|
||||
<p>Das beliebteste CMS der Welt mit tausenden Themes und Plugins.</p>
|
||||
</div>
|
||||
<div class="cms-item glass-card">
|
||||
<div class="cms-logo">J!</div>
|
||||
<h3>Joomla!</h3>
|
||||
<p>Flexibles CMS für komplexe Websites und Web-Anwendungen.</p>
|
||||
</div>
|
||||
<div class="cms-item glass-card">
|
||||
<div class="cms-logo">D</div>
|
||||
<h3>Drupal</h3>
|
||||
<p>Mächtiges CMS für anspruchsvolle und skalierbare Projekte.</p>
|
||||
</div>
|
||||
<div class="cms-item glass-card">
|
||||
<div class="cms-logo">M</div>
|
||||
<h3>Magento</h3>
|
||||
<p>Professionelle E-Commerce-Lösung für Online-Shops.</p>
|
||||
</div>
|
||||
<div class="cms-item glass-card">
|
||||
<div class="cms-logo">PS</div>
|
||||
<h3>PrestaShop</h3>
|
||||
<p>Benutzerfreundliche Shop-Software für den Einstieg.</p>
|
||||
</div>
|
||||
<div class="cms-item glass-card">
|
||||
<div class="cms-logo">MW</div>
|
||||
<h3>MediaWiki</h3>
|
||||
<p>Wiki-Software für Dokumentation und Wissensmanagement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Performance & Security -->
|
||||
<section class="performance-security">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Performance & Sicherheit</h2>
|
||||
<p class="section-description">
|
||||
Optimiert für Geschwindigkeit und Sicherheit
|
||||
</p>
|
||||
</div>
|
||||
<div class="perf-sec-grid">
|
||||
<div class="perf-sec-item glass-card">
|
||||
<div class="perf-sec-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>CDN Integration</h3>
|
||||
<p>Globales Content Delivery Network für schnelle Ladezeiten weltweit.</p>
|
||||
</div>
|
||||
<div class="perf-sec-item glass-card">
|
||||
<div class="perf-sec-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>DDoS-Schutz</h3>
|
||||
<p>Automatischer Schutz vor DDoS-Attacken und anderen Bedrohungen.</p>
|
||||
</div>
|
||||
<div class="perf-sec-item glass-card">
|
||||
<div class="perf-sec-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 1v6m0 6v6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Caching</h3>
|
||||
<p>Intelligentes Caching für optimale Performance Ihrer Website.</p>
|
||||
</div>
|
||||
<div class="perf-sec-item glass-card">
|
||||
<div class="perf-sec-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Monitoring</h3>
|
||||
<p>24/7 Überwachung Ihrer Website mit sofortiger Benachrichtigung bei Problemen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content glass-card">
|
||||
<h2>Starten Sie Ihre Website heute!</h2>
|
||||
<p>Alles was Sie brauchen für eine erfolgreiche Online-Präsenz</p>
|
||||
<div class="cta-actions">
|
||||
<a href="contact.html?product=webhosting" class="btn btn-primary">Jetzt bestellen</a>
|
||||
<a href="contact.html" class="btn btn-secondary">Kostenlose Beratung</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>HexaHost.de</h4>
|
||||
<p>Zuverlässiges Hosting aus Niederbayern</p>
|
||||
<div class="footer-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>Niederbayern, Deutschland</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Produkte</h4>
|
||||
<ul>
|
||||
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||
<li><a href="webhosting.html">Webhosting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Unternehmen</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">Über uns</a></li>
|
||||
<li><a href="contact.html">Kontakt</a></li>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Support</h4>
|
||||
<ul>
|
||||
<li><a href="#">Hilfe-Center</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
<li><a href="contact.html">Support-Ticket</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 HexaHost.de - Alle Rechte vorbehalten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user