d596aacfad
Mobile Menu Optimization ✓ Fixed duplicate script loading issue Improved menu closing behavior after item selection Added smooth scroll for anchor links Enhanced touch targets for better mobile usability Added proper ARIA attributes for accessibility Implemented fade animation for menu transitions Responsive Design Improvements ✓ Adjusted menu height to use viewport units Added proper padding for notched phones Improved touch target sizes Enhanced menu item spacing and interaction feedback Fixed menu scrolling on long content Performance & Accessibility Enhancements ✓ Added meta description for SEO Implemented proper aria-expanded states Added smooth animations with performance considerations Improved event listener efficiency Added empty favicon to prevent 404 errors Code Quality Improvements ✓ Removed duplicate code Improved event handling Enhanced error handling Better organization of CSS media queries Added proper touch device detection All changes maintain existing functionality while improving user experience, accessibility, and performance. The mobile menu now behaves more naturally, with proper closing behavior and smooth transitions.
85 lines
5.1 KiB
HTML
85 lines
5.1 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 - Ihr Partner für maßgeschneiderte IT-Lösungen, Systemarchitekturen und digitale Souveränität. Persönliche Betreuung für nachhaltige IT-Infrastruktur.">
|
||
<title>7SYS - Persönliche IT-Lösungen</title>
|
||
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,">
|
||
<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=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
||
<link rel="stylesheet" href="css/variables.css">
|
||
<link rel="stylesheet" href="css/base.css">
|
||
<link rel="stylesheet" href="css/layout.css">
|
||
<link rel="stylesheet" href="css/header.css">
|
||
<link rel="stylesheet" href="css/components.css">
|
||
<link rel="stylesheet" href="css/animations.css">
|
||
<link rel="stylesheet" href="css/footer.css">
|
||
<link rel="stylesheet" href="css/responsive.css">
|
||
<script src="js/components.js" defer></script>
|
||
<script src="js/theme.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<div class="container">
|
||
<section id="intro">
|
||
<h1 class="h1-hero">Ihr Partner für Digitale Souveränität</h1>
|
||
<p class="welcome-quote">Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.</p>
|
||
<span class="logo-sub">Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)</span>
|
||
<div class="mission-vision">
|
||
<div class="tooltip-container">
|
||
<h3>Meine Vision</h3>
|
||
<p>Digitale Souveränität</p>
|
||
<div class="tooltip">
|
||
Wir streben eine Zukunft an, in der Unternehmen die volle Kontrolle über ihre digitalen Ressourcen haben. Digitale Souveränität bedeutet für uns, dass Sie selbstbestimmt und unabhängig über Ihre IT-Infrastruktur entscheiden können, während Sie gleichzeitig von modernsten Technologien profitieren.
|
||
</div>
|
||
</div>
|
||
<div class="tooltip-container">
|
||
<h3>Meine Mission</h3>
|
||
<p>Sichere und nachhaltige IT-Lösungen</p>
|
||
<div class="tooltip">
|
||
Durch maßgeschneiderte IT-Lösungen ermöglichen wir es unseren Kunden, ihre digitale Infrastruktur sicher und zukunftsfähig zu gestalten. Wir setzen dabei auf nachhaltige Technologien, die sowohl ressourceneffizient als auch langfristig wartbar sind. Unser Ziel ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="services">
|
||
<h2>Meine Expertise</h2>
|
||
|
||
<div class="service-card">
|
||
<h3>IT-Beratung</h3>
|
||
<p>Strategische IT-Beratung für Ihren Erfolg: Von der Analyse Ihrer bestehenden Systeme bis zur Entwicklung zukunftssicherer IT-Strategien. Ich begleite Sie persönlich bei jedem Schritt.</p>
|
||
</div>
|
||
|
||
<div class="service-card">
|
||
<h3>Systemadministration</h3>
|
||
<p>Professionelle Verwaltung und Wartung Ihrer IT-Systeme: Server-Management, Netzwerkadministration, Backup-Konzepte und Security-Lösungen für einen reibungslosen Betrieb.</p>
|
||
</div>
|
||
|
||
<div class="service-card">
|
||
<h3>Automatisierung</h3>
|
||
<p>Clevere automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.</p>
|
||
</div>
|
||
|
||
<div class="service-card">
|
||
<h3>Cloud Services</h3>
|
||
<p>Maßgeschneiderte Cloud-Lösungen: Migration, Implementierung und Management Ihrer Cloud-Infrastruktur. Skalierbar, sicher und kosteneffizient – optimal auf Ihre Bedürfnisse abgestimmt.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact">
|
||
<h2>Kontakt</h2>
|
||
<div class="contact-info">
|
||
<p>Ich freue mich darauf, Ihr Projekt kennenzulernen und Ihnen mein Wissen zu vermitteln.</p>
|
||
<a href="mailto:kontakt@7sys.de">E-Mail: info@7sys.de</a>
|
||
<a href="https://signal.me/7sys">Signal: @7sys</a>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
</html>
|