179 lines
9.2 KiB
HTML
179 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Ruckert Utikal IT-Solutions</title>
|
||
|
||
<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=Allerta+Stencil&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet">
|
||
|
||
<link rel="stylesheet" href="templatemo-parallax-starter.css">
|
||
<!--
|
||
|
||
TemplateMo 612 Parallax Starter
|
||
|
||
https://templatemo.com/tm-612-parallax-starter
|
||
|
||
-->
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Navigation -->
|
||
<nav id="templatemo-nav">
|
||
<div class="nav-container">
|
||
<a href="#home" class="nav-logo">Ruckert Utikal ITS</a>
|
||
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
<ul class="nav-links" id="navLinks">
|
||
<li><a href="#home" class="active">HOME</a></li>
|
||
<li><a href="#about">Über uns</a></li>
|
||
<li><a href="#services">Services</a></li>
|
||
<li><a href="#gallery">Bisherige Arbeit</a></li>
|
||
<li><a href="#contact">Kontakt</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Section 1: Home / Hero -->
|
||
<section id="home" class="parallax-section">
|
||
<div class="parallax-bg" data-speed="0.5" style="background-image: url('images/parallax-bg-01.jpg')"></div>
|
||
<div class="parallax-overlay"></div>
|
||
<div class="section-content">
|
||
<h1 class="section-title hero-title">Ruckert Utikal IT-Solutions</h1>
|
||
<p class="section-subtitle caps">Individuelle Software · Digitale Lösungen · Dorfapp</p>
|
||
<a href="#about" class="btn-scroll">Entdecken</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 2: About -->
|
||
<section id="about" class="parallax-section">
|
||
<div class="parallax-bg" data-speed="0.45" style="background-image: url('images/parallax-bg-02.jpg')"></div>
|
||
<div class="parallax-overlay"></div>
|
||
<div class="section-content">
|
||
<h2 class="section-title">Über uns</h2>
|
||
<div class="about-cols">
|
||
<div class="about-col">
|
||
<div class="about-thumb thumb-top-left">
|
||
<img src="images/about-01.jpg" alt="Unser Team">
|
||
</div>
|
||
<p>Wir sind Ruckert Utikal IT-Solutions GbR – ein kleines, engagiertes Softwareunternehmen aus der Region. Mit Leidenschaft für Technologie entwickeln wir maßgeschneiderte Softwarelösungen, die exakt auf die Bedürfnisse unserer Kunden zugeschnitten sind.</p>
|
||
<p>Von der ersten Idee bis zum fertigen Produkt begleiten wir unsere Kunden durch den gesamten Entwicklungsprozess – transparent, zuverlässig und auf Augenhöhe.</p>
|
||
</div>
|
||
<div class="about-col">
|
||
<div class="about-thumb-wide">
|
||
<img src="images/about-02.jpg" alt="Unsere Arbeit">
|
||
</div>
|
||
<p>Neben individueller Softwareentwicklung vertreiben wir die <strong>Dorfapp</strong> – eine digitale Plattform, die das Leben in Gemeinden und Dörfern vernetzt. Vereine, Bürger und lokale Institutionen finden hier eine gemeinsame digitale Heimat.</p>
|
||
<p>Unser Anspruch: moderne Technologie einfach und zugänglich machen – für Unternehmen jeder Größe und für jede Gemeinde.</p>
|
||
</div>
|
||
</div>
|
||
<p class="unsplash-credit">Images courtesy of <a href="https://unsplash.com" target="_blank">Unsplash</a></p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 3: Services -->
|
||
<section id="services" class="parallax-section">
|
||
<div class="parallax-bg" data-speed="0.55" style="background-image: url('images/parallax-bg-03.jpg')"></div>
|
||
<div class="parallax-overlay overlay-dark"></div>
|
||
<div class="section-content">
|
||
<h2 class="section-title">WAS WIR TUN</h2>
|
||
<p class="section-subtitle caps">ANALYSIEREN · ENTWICKELN · BETREUEN</p>
|
||
<div class="services-grid">
|
||
<div class="service-item">
|
||
<div class="service-icon">
|
||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
|
||
<rect x="4" y="4" width="32" height="32" rx="2" stroke="white" stroke-width="1.5"/>
|
||
<line x1="4" y1="14" x2="36" y2="14" stroke="white" stroke-width="1.5"/>
|
||
<circle cx="10" cy="9" r="2" fill="white"/>
|
||
<circle cx="16" cy="9" r="2" fill="white"/>
|
||
</svg>
|
||
</div>
|
||
<h3>INDIVIDUALSOFTWARE</h3>
|
||
<p class="caps">Maßgeschneiderte Lösungen für Ihre individuellen Anforderungen</p>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="service-icon">
|
||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
|
||
<path d="M20 4L36 12V28L20 36L4 28V12L20 4Z" stroke="white" stroke-width="1.5"/>
|
||
<path d="M20 36V20" stroke="white" stroke-width="1.5"/>
|
||
<path d="M36 12L20 20" stroke="white" stroke-width="1.5"/>
|
||
<path d="M4 12L20 20" stroke="white" stroke-width="1.5"/>
|
||
</svg>
|
||
</div>
|
||
<h3>DORFAPP</h3>
|
||
<p class="caps">Digitale Vernetzung für Gemeinden, Vereine und Bürger</p>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="service-icon">
|
||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
|
||
<rect x="8" y="2" width="24" height="36" rx="3" stroke="white" stroke-width="1.5"/>
|
||
<line x1="8" y1="8" x2="32" y2="8" stroke="white" stroke-width="1.5"/>
|
||
<line x1="8" y1="32" x2="32" y2="32" stroke="white" stroke-width="1.5"/>
|
||
<circle cx="20" cy="35" r="1.5" fill="white"/>
|
||
</svg>
|
||
</div>
|
||
<h3>BERATUNG & SUPPORT</h3>
|
||
<p class="caps">Persönliche Betreuung vom ersten Konzept bis zum laufenden Betrieb</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 4: Gallery -->
|
||
<section id="gallery" class="parallax-section">
|
||
<div class="parallax-bg" data-speed="0.5" style="background-image: url('images/parallax-bg-04.jpg')"></div>
|
||
<div class="parallax-overlay"></div>
|
||
<div class="section-content">
|
||
<h2 class="section-title">UNSERE ARBEIT</h2>
|
||
<div class="content-block">
|
||
<p>Von kleinen Betrieben bis hin zu kommunalen Einrichtungen – unsere Projekte spiegeln unseren Anspruch an Qualität, Verlässlichkeit und praxisnahe Lösungen wider. Jedes Projekt ist einzigartig, jede Lösung passt genau.</p>
|
||
<div class="stats-row">
|
||
<div class="stat-item">
|
||
<span class="stat-number">20+</span>
|
||
<span class="stat-label caps">Abgeschlossene Projekte</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">15+</span>
|
||
<span class="stat-label caps">Zufriedene Kunden</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">5+</span>
|
||
<span class="stat-label caps">Jahre Erfahrung</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 5: Contact -->
|
||
<section id="contact" class="parallax-section">
|
||
<div class="parallax-bg" data-speed="0.5" style="background-image: url('images/parallax-bg-05.jpg')"></div>
|
||
<div class="parallax-overlay overlay-medium"></div>
|
||
<div class="section-content">
|
||
<h2 class="section-title">KONTAKT</h2>
|
||
<p class="section-subtitle caps">Sprechen Sie uns an – wir freuen uns auf Ihr Projekt</p>
|
||
<div class="contact-form-wrap">
|
||
<form id="contactForm" class="contact-form">
|
||
<div class="form-row">
|
||
<input type="text" placeholder="Ihr Name" required>
|
||
<input type="email" placeholder="Ihre E-Mail" required>
|
||
</div>
|
||
<textarea placeholder="Ihre Nachricht" rows="5" required></textarea>
|
||
<button type="submit" class="btn-submit">NACHRICHT SENDEN</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer id="templatemo-footer">
|
||
<p>Copyright © 2026 Ruckert Utikal IT-Solutions GbR</p>
|
||
</footer>
|
||
<script src="templatemo-parallax-script.js"></script>
|
||
</body>
|
||
</html> |