170 lines
8.2 KiB
HTML
170 lines
8.2 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">
|
|
|
|
<!-- 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">
|
|
<header>
|
|
<nav class="main-nav">
|
|
<div class="logo" role="banner">7SYS</div>
|
|
<button id="theme-toggle" 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>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero" role="banner">
|
|
<div class="stars"></div>
|
|
<div class="container">
|
|
<h1>IT-Beratung und Sicherheitslösungen</h1>
|
|
<p>Zukunftssichere IT-Lösungen für Ihr Unternehmen</p>
|
|
<a href="#contact" class="cta-button" role="button">Kontakt aufnehmen</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="services" class="services" role="region" aria-labelledby="services-title">
|
|
<div class="container">
|
|
<h2 id="services-title">Unsere Dienstleistungen</h2>
|
|
|
|
<div class="service-grid">
|
|
<article class="service-card" role="article">
|
|
<i class="fas fa-laptop-code" aria-hidden="true"></i>
|
|
<h3>IT-Beratung und Sicherheitslösungen</h3>
|
|
<ul>
|
|
<li>Fokus auf kleine Unternehmen</li>
|
|
<li>IT-Infrastruktur Beratung</li>
|
|
<li>Hardware-Empfehlungen</li>
|
|
<li>Netzwerkoptimierung</li>
|
|
<li>Firewall-Management</li>
|
|
<li>Datenschutz und Zertifizierung</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="service-card" role="article">
|
|
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
|
<h3>Netzwerk- und Datensicherheit</h3>
|
|
<ul>
|
|
<li>Sichere Netzwerkkonfiguration</li>
|
|
<li>VPN-Einrichtung</li>
|
|
<li>Zugriffskontrolle</li>
|
|
<li>Firewall-Management</li>
|
|
<li>NIS-2-Regelung Implementation</li>
|
|
<li>Bedrohungsschutz</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="service-card" role="article">
|
|
<i class="fas fa-chart-line" aria-hidden="true"></i>
|
|
<h3>Proaktives Monitoring</h3>
|
|
<ul>
|
|
<li>System-Überwachung</li>
|
|
<li>Automatisierte Backups</li>
|
|
<li>Systemupdates</li>
|
|
<li>Frühwarnsystem</li>
|
|
<li>Ausfallsicherheit</li>
|
|
<li>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">Unsere Zukunftsvision</h2>
|
|
<div class="vision-grid">
|
|
<div class="vision-item">
|
|
<i class="fas fa-server" aria-hidden="true"></i>
|
|
<h3>Desaster Recovery Rechenzentrum</h3>
|
|
<p>Maximale Ausfallsicherheit für Ihre geschäftskritischen Systeme</p>
|
|
</div>
|
|
<div class="vision-item">
|
|
<i class="fas fa-leaf" aria-hidden="true"></i>
|
|
<h3>Sustainable & Renewable IT-Infrastructure</h3>
|
|
<p>Nachhaltige IT-Lösungen für eine grünere Zukunft</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact" role="region" aria-labelledby="contact-title">
|
|
<div class="container">
|
|
<h2 id="contact-title">Kontakt</h2>
|
|
<div class="contact-grid">
|
|
<form class="contact-form" role="form" aria-label="Kontaktformular">
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<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)">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">E-Mail</label>
|
|
<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">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Nachricht</label>
|
|
<textarea id="message" name="message" required
|
|
aria-required="true" minlength="10"
|
|
title="Bitte geben Sie Ihre Nachricht ein (mindestens 10 Zeichen)"></textarea>
|
|
</div>
|
|
<button type="submit" class="submit-button">
|
|
<span class="button-text">Absenden</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>
|
|
<p><i class="fas fa-building" aria-hidden="true"></i> 7SYS GmbH</p>
|
|
<p><i class="fas fa-map-marker-alt" aria-hidden="true"></i> Musterstraße 123, 12345 Stadt</p>
|
|
<p><i class="fas fa-phone" aria-hidden="true"></i> <a href="tel:+49123456789">+49 123 456789</a></p>
|
|
<p><i class="fas fa-envelope" aria-hidden="true"></i> <a href="mailto:info@7sys.de">info@7sys.de</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer role="contentinfo">
|
|
<div class="container">
|
|
<p>© 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
|
|
<a href="#" class="impressum">Impressum</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|