316 lines
16 KiB
HTML
316 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="7SYS - Professionelle IT-Beratung und Sicherheitslösungen für kleine Unternehmen">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>">
|
|
|
|
<!-- Preload Critical Assets -->
|
|
<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@400;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Social Media Meta Tags -->
|
|
<meta property="og:title" content="7SYS - IT-Beratung & Sicherheitslösungen">
|
|
<meta property="og:description" content="Zukunftssichere IT-Lösungen für Ihr Unternehmen">
|
|
<meta property="og:image" content="https://7sys.de/images/og-image.jpg">
|
|
<meta property="og:url" content="https://7sys.de">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
|
<title>7SYS - IT-Beratung & Sicherheitslösungen</title>
|
|
|
|
<!-- CSS Files -->
|
|
<link rel="stylesheet" href="css/variables.css">
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/accessibility.css">
|
|
<link rel="stylesheet" href="css/animations.css">
|
|
<link rel="stylesheet" href="css/header.css">
|
|
<link rel="stylesheet" href="css/hero.css">
|
|
<link rel="stylesheet" href="css/buttons.css">
|
|
<link rel="stylesheet" href="css/services.css">
|
|
<link rel="stylesheet" href="css/vision.css">
|
|
<link rel="stylesheet" href="css/contact.css">
|
|
<link rel="stylesheet" href="css/footer.css">
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body class="dark-theme">
|
|
<!-- Skip to main content -->
|
|
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="scroll-progress" aria-hidden="true"></div>
|
|
|
|
<header>
|
|
<nav class="main-nav">
|
|
<div class="logo" role="banner">
|
|
<a href="index.html">
|
|
<span class="logo-text">7</span>
|
|
<span class="logo-sys">SYS</span>
|
|
</a>
|
|
</div>
|
|
<div class="nav-controls">
|
|
<button id="theme-toggle" class="icon-button" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
|
|
<i class="fas fa-moon"></i>
|
|
<span class="sr-only">Theme wechseln</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section class="hero" role="banner">
|
|
<div class="stars"></div>
|
|
<div class="shooting-star"></div>
|
|
<div class="container">
|
|
<h1 class="animate-in">IT-Beratung und Sicherheitslösungen</h1>
|
|
<p class="animate-in delay-1">Zukunftssichere IT-Lösungen für Ihr Unternehmen</p>
|
|
<div class="cta-container animate-in delay-2">
|
|
<a href="#contact" class="cta-button" role="button">
|
|
<span>Kontakt aufnehmen</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="services" class="services" role="region" aria-labelledby="services-title">
|
|
<div class="container">
|
|
<h2 id="services-title" class="section-title">Unsere Dienstleistungen</h2>
|
|
|
|
<div class="service-grid">
|
|
<article class="service-card" role="article">
|
|
<div class="service-icon">
|
|
<i class="fas fa-laptop-code" aria-hidden="true"></i>
|
|
</div>
|
|
<h3>IT-Beratung und Sicherheitslösungen</h3>
|
|
<ul>
|
|
<li><i class="fas fa-check"></i> Fokus auf kleine Unternehmen</li>
|
|
<li><i class="fas fa-check"></i> IT-Infrastruktur Beratung</li>
|
|
<li><i class="fas fa-check"></i> Hardware-Empfehlungen</li>
|
|
<li><i class="fas fa-check"></i> Netzwerkoptimierung</li>
|
|
<li><i class="fas fa-check"></i> Firewall-Management</li>
|
|
<li><i class="fas fa-check"></i> Datenschutz und Zertifizierung</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="service-card" role="article">
|
|
<div class="service-icon">
|
|
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
|
</div>
|
|
<h3>Netzwerk- und Datensicherheit</h3>
|
|
<ul>
|
|
<li><i class="fas fa-check"></i> Sichere Netzwerkkonfiguration</li>
|
|
<li><i class="fas fa-check"></i> VPN-Einrichtung</li>
|
|
<li><i class="fas fa-check"></i> Zugriffskontrolle</li>
|
|
<li><i class="fas fa-check"></i> Firewall-Management</li>
|
|
<li><i class="fas fa-check"></i> NIS-2-Regelung Implementation</li>
|
|
<li><i class="fas fa-check"></i> Bedrohungsschutz</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="service-card" role="article">
|
|
<div class="service-icon">
|
|
<i class="fas fa-chart-line" aria-hidden="true"></i>
|
|
</div>
|
|
<h3>Proaktives Monitoring</h3>
|
|
<ul>
|
|
<li><i class="fas fa-check"></i> System-Überwachung</li>
|
|
<li><i class="fas fa-check"></i> Automatisierte Backups</li>
|
|
<li><i class="fas fa-check"></i> Systemupdates</li>
|
|
<li><i class="fas fa-check"></i> Frühwarnsystem</li>
|
|
<li><i class="fas fa-check"></i> Ausfallsicherheit</li>
|
|
<li><i class="fas fa-check"></i> Verfügbarkeitsoptimierung</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="vision" class="vision" role="region" aria-labelledby="vision-title">
|
|
<div class="container">
|
|
<h2 id="vision-title" class="section-title">Unsere Zukunftsvision</h2>
|
|
<div class="vision-grid">
|
|
<div class="vision-item">
|
|
<div class="vision-icon">
|
|
<i class="fas fa-server" aria-hidden="true"></i>
|
|
</div>
|
|
<h3>Desaster Recovery Rechenzentrum</h3>
|
|
<p>Maximale Ausfallsicherheit für Ihre geschäftskritischen Systeme</p>
|
|
<div class="vision-details">
|
|
<ul>
|
|
<li>24/7 Verfügbarkeit</li>
|
|
<li>Redundante Systeme</li>
|
|
<li>Automatische Failover</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="vision-item">
|
|
<div class="vision-icon">
|
|
<i class="fas fa-leaf" aria-hidden="true"></i>
|
|
</div>
|
|
<h3>Sustainable & Renewable IT-Infrastructure</h3>
|
|
<p>Nachhaltige IT-Lösungen für eine grünere Zukunft</p>
|
|
<div class="vision-details">
|
|
<ul>
|
|
<li>Energieeffiziente Hardware</li>
|
|
<li>CO2-neutrale Rechenzentren</li>
|
|
<li>Nachhaltige Beschaffung</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact" role="region" aria-labelledby="contact-title">
|
|
<div class="container">
|
|
<h2 id="contact-title" class="section-title">Kontakt</h2>
|
|
<div class="contact-grid">
|
|
<form class="contact-form" role="form" aria-label="Kontaktformular">
|
|
<p class="field-hint">* Pflichtfelder</p>
|
|
|
|
<div class="form-group">
|
|
<label for="name" class="required-field">Name</label>
|
|
<div class="input-wrapper">
|
|
<input type="text" id="name" name="name" required
|
|
aria-required="true" minlength="2"
|
|
pattern="[A-Za-zÄäÖöÜüß\s]+"
|
|
title="Bitte geben Sie Ihren Namen ein (nur Buchstaben und Leerzeichen)"
|
|
placeholder="Max Mustermann">
|
|
<i class="fas fa-user" aria-hidden="true"></i>
|
|
</div>
|
|
<p class="field-hint">Mindestens 2 Zeichen, nur Buchstaben erlaubt</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email" class="required-field">E-Mail</label>
|
|
<div class="input-wrapper">
|
|
<input type="email" id="email" name="email" required
|
|
aria-required="true"
|
|
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
|
|
title="Bitte geben Sie eine gültige E-Mail-Adresse ein"
|
|
placeholder="ihre.email@beispiel.de">
|
|
<i class="fas fa-envelope" aria-hidden="true"></i>
|
|
</div>
|
|
<p class="field-hint">Beispiel: name@domain.de</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone">Telefon (optional)</label>
|
|
<div class="input-wrapper">
|
|
<input type="tel" id="phone" name="phone"
|
|
pattern="[0-9\s\-\+]+"
|
|
title="Bitte geben Sie eine gültige Telefonnummer ein"
|
|
placeholder="+49 123 45678900">
|
|
<i class="fas fa-phone" aria-hidden="true"></i>
|
|
</div>
|
|
<p class="field-hint">Format: +49 123 45678900</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="message" class="required-field">Nachricht</label>
|
|
<div class="input-wrapper">
|
|
<textarea id="message" name="message" required
|
|
aria-required="true" minlength="10"
|
|
maxlength="1000"
|
|
placeholder="Ihre Nachricht an uns..."
|
|
title="Bitte geben Sie Ihre Nachricht ein (mindestens 10 Zeichen)"></textarea>
|
|
<i class="fas fa-comment" aria-hidden="true"></i>
|
|
</div>
|
|
<span class="char-counter" aria-live="polite">0 / 1000</span>
|
|
<p class="field-hint">Mindestens 10 Zeichen, maximal 1000 Zeichen</p>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-button">
|
|
<span class="button-text">Nachricht senden</span>
|
|
<span class="loading-spinner" aria-hidden="true"></span>
|
|
</button>
|
|
<div class="form-feedback" role="alert" aria-live="polite"></div>
|
|
</form>
|
|
|
|
<div class="contact-info">
|
|
<h3>Geschäftsdaten</h3>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<i class="fas fa-building" aria-hidden="true"></i>
|
|
<div class="info-content">
|
|
<p>7SYS GmbH</p>
|
|
<p class="info-subtitle">IT-Sicherheit & Beratung</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-map-marker-alt" aria-hidden="true"></i>
|
|
<div class="info-content">
|
|
<p>Musterstraße 123</p>
|
|
<p>12345 Stadt</p>
|
|
<p>Deutschland</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-clock" aria-hidden="true"></i>
|
|
<div class="info-content">
|
|
<p>Geschäftszeiten:</p>
|
|
<p>Mo-Fr: 09:00 - 17:00 Uhr</p>
|
|
<p>24/7 Support für Bestandskunden</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-phone" aria-hidden="true"></i>
|
|
<div class="info-content">
|
|
<p>Tel: <a href="tel:+49123456789">+49 123 456789</a></p>
|
|
<p>Fax: +49 123 456788</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-envelope" aria-hidden="true"></i>
|
|
<div class="info-content">
|
|
<p>E-Mail: <a href="mailto:info@7sys.de">info@7sys.de</a></p>
|
|
<p>Support: <a href="mailto:support@7sys.de">support@7sys.de</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
|
<div class="info-content">
|
|
<p>Handelsregister: HRB 12345</p>
|
|
<p>USt-IdNr: DE123456789</p>
|
|
<p>Geschäftsführer: Max Mustermann</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-left">
|
|
<p>© 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
|
|
</div>
|
|
<div class="footer-right">
|
|
<a href="impressum.html" class="footer-link">Impressum</a>
|
|
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Cookie Consent -->
|
|
<div id="cookie-consent" class="cookie-consent" role="alert" aria-live="polite">
|
|
<p>Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.</p>
|
|
<div class="cookie-buttons">
|
|
<button id="accept-cookies" class="cookie-button accept">Akzeptieren</button>
|
|
<button id="reject-cookies" class="cookie-button reject">Ablehnen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|