website/index.html

302 lines
25 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!--
kumi.systems
Design by Stefan Blagojevic
Version 1.0
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>kumi systems - IT Lösungen</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
<link rel="stylesheet" href="assets/css/Features-Clean.css">
<link rel="stylesheet" href="assets/css/Navigation-with-Button.css">
<link rel="stylesheet" href="assets/css/stylesheet.css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
</head>
<body id="page-top" style="color: rgb(87,87,87);">
<div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" style="background-color: rgba(255,255,255,1)!important;">
<div class="container"><a class="navbar-brand" href="#" style="min-width: 130px;min-height: 50px;background-image: url(&quot;assets/img/schrift_logo.png&quot;);background-size: contain;background-repeat: no-repeat;"></a><button class="navbar-toggler" data-toggle="collapse"
data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item js-scroll-trigger" role="presentation"><a class="nav-link cust-nav" href="#services">Services</a></li>
<li class="nav-item js-scroll-trigger" role="presentation"><a class="nav-link cust-nav" href="#cloud">Cloud</a></li>
<li class="nav-item js-scroll-trigger" role="presentation"><a class="nav-link cust-nav" href="#hosting">Hosting</a></li>
<li class="nav-item js-scroll-trigger" role="presentation"><a class="nav-link cust-nav" href="#entwicklung">Entwicklung</a></li>
<li class="nav-item js-scroll-trigger" role="presentation"><a class="nav-link cust-nav" href="#contact">Kontakt</a></li>
</ul><span class="navbar-text actions"> <a class="btn btn-light action-button" role="button" href="https://whmcs.kumi.systems/" style="background-color: rgb(88,208,98);color: rgb(255,255,255) !important;font-size: 11px;">Webshop</a></span></div>
</div>
</nav>
</div>
<header class="masthead" style="background-color: #e4e4e4;background-image: url(&quot;assets/img/oben-header.jpg&quot;);background-position: center;">
<div class="container">
<div class="intro-text" style="padding-top: 250px;">
<div class="intro-heading text-uppercase" style="margin-bottom: 5px;line-height: 48px;"><span style="color: #ffffff;max-height: 100px;line-height: 44px;">it-lösungen<br></span><span style="color: #ffffff;max-height: 100px;font-size: 26px;line-height: 0px;letter-spacing: 1px;margin-bottom: 0px;">für sie und ihr unternEHMEN<br></span>
<span
style="color: #ffffff;max-height: 100px;font-size: 26px;line-height: 1px;letter-spacing: 1px;margin-bottom: 0px;">vom blog bis zum server<br></span>
</div>
</div>
</div>
</header>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="text-uppercase section-heading" style="margin-bottom: -2px;">unsere Services</h2>
<h3 class="text-muted section-subheading" style="font-style: normal;font-family: 'Roboto Slab', serif;color: rgb(88,208,98) !important;">maßgeschneidert für Ihren Bedarf</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4"><span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fas fa-cloud fa-stack-1x fa-inverse"></i></span>
<h4 class="section-heading">Cloud</h4>
<p class="text-muted">Wir bieten Ihnen sicheren Webspace und Speicherplatz für Ihre Daten in Rechenzentren in Österreich und der Schweiz. Ob Urlaubsfotos oder sensible Firmendaten - bei uns sind sie gut aufgehoben.<br><a href="#cloud">mehr erfahren</a></p>
</div>
<div class="col-md-4"><span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fas fa-server fa-stack-1x fa-inverse"></i></span>
<h4 class="section-heading">Webhosting</h4>
<p class="text-muted">Falls Sie größere und umfangreichere Projekte planen, bieten wir Ihnen auch dafür sicheren Webspace mit allem drum und dran - damit Sie erfolgreich starten können.<br><a href="#hosting">mehr erfahren</a></p>
</div>
<div class="col-md-4"><span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-codepen fa-stack-1x fa-inverse"></i></span>
<h4 class="section-heading">Entwicklung</h4>
<p class="text-muted">Sie benötigen eine maßgeschneiderte Web-, Desktop- oder Mobilanwendung? Wir freuen uns darauf, Ihre Ideen gemeinsam mit Ihnen Wirklichkeit werden zu lassen!<br><a href="#entwicklung">mehr erfahren</a></p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4" style="min-width: 80%;max-width: 80%;margin-right: auto;margin-left: auto;"><span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="icon-directions fa-stack-1x fa-inverse" style="height: 128px;margin-top: 32px;"></i></span>
<h4 class="section-heading">Beratung</h4>
<p class="text-muted">Wir beraten und unterstützen Sie gerne bei all Ihren Fragen zu Soft- und Hardware, Prozessmanagement und IT-Infrastruktur - gerne auch bei ihnen vor Ort!<br>Falls unsere Pakete Ihren Ansprüchen nicht genügen oder eigene Lösungen brauchen,
freuen wir uns darauf, Ihnen eine Lösung anzubieten!<br><a href="#kontakt">kontakt aufnehmen</a><br></p>
</div>
</div>
</div>
</section>
<section id="cloud" class="bg-light">
<div class="container" style="padding-right: 30px;padding-left: 30px;">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="text-capitalize section-heading" style="text-transform: none;margin-bottom: -2px;">cloud</h2>
<h3 class="section-subheading text-muted" style="font-style: normal;font-family: 'Roboto Slab', serif;color: rgb(88,208,98) !important;margin-bottom: 0px;font-weight: normal;">Ihre Daten - überall, auf jedem Gerät</h3>
</div>
<div class="col beschr" style="width: 80%;"><span>Die Cloud ermöglicht es, Daten effizient bereitzustellen. Dabei ist es egal, welche Plattform Sie benutzen - Ihre Daten sind von überall abrufbar!<br>Mit Sharing-Optionen können Sie Daten auch an andere Personen übermitteln - ob Fotos mit Familien und Freunden, Dokumente an KundInnen oder effiziente Teamkommunikation - unsere Cloud vereinfacht Ihren Alltag!<br></span></div>
</div>
<div class="row d-flex flex-row justify-content-center align-items-center" style="margin-top: 3%;">
<div class="col col-prod">
<div class="div-prod">
<h1 style="font-size: 26px;margin-bottom: -6px;width: auto;color: #575757;">Cloud S<br></h1>
<p style="color: rgb(88,208,98);width: autp;margin-right: auto;margin-left: auto;margin-bottom: 8px;">für kleine Projekte</p>
<p style="color: #575757;width: autp;margin-right: auto;margin-left: auto;font-size: 19px;margin-bottom: 8px;">20 GB / unl. Traffic*</p><span style="font-size: 40px;color: #575757;">12 €</span><span style="color: #575757;">&nbsp;mtl.</span>
<p><button class="btn btn-outline-success btn-sm" type="button">Jetzt bestellen</button></p>
</div>
</div>
<div class="col col-prod">
<div class="div-prod">
<h1 style="font-size: 26px;margin-bottom: -6px;width: auto;color: #575757;">Cloud M<br></h1>
<p style="color: rgb(88,208,98);width: autp;margin-right: auto;margin-left: auto;margin-bottom: 8px;">der Allrounder</p>
<p style="color: #575757;width: autp;margin-right: auto;margin-left: auto;font-size: 19px;margin-bottom: 8px;">50 GB / unl. Traffic*</p><span style="font-size: 40px;color: #575757;">25 €</span><span style="color: #575757;">&nbsp;mtl.</span>
<p><button class="btn btn-outline-success btn-sm" type="button">Jetzt bestellen</button></p>
</div>
</div>
<div class="col col-prod">
<div class="div-prod">
<h1 style="font-size: 26px;margin-bottom: -6px;width: auto;color: #575757;">Cloud L<br></h1>
<p style="color: rgb(88,208,98);width: autp;margin-right: auto;margin-left: auto;margin-bottom: 8px;">für das große Ganze</p>
<p style="color: #575757;width: autp;margin-right: auto;margin-left: auto;font-size: 19px;margin-bottom: 8px;">100 GB / unl. Traffic*</p><span style="font-size: 40px;color: #575757;">50 €</span><span style="color: #575757;">&nbsp;mtl.</span>
<p><button class="btn btn-outline-success btn-sm" type="button">Jetzt bestellen</button></p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted" style="font-style: normal;font-family: Montserrat, sans-serif;color: rgb(87,87,87) !important;margin-bottom: 0px;font-weight: bold;margin-top: 15px;font-size: 21px;">Ihre Vorteile</h3>
</div>
</div>
<div class="row justify-content-center features">
<div class="col-sm-6 col-lg-4 item feature-obj"><i class="fa fa-lock icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Sicher</h3>
<p class="description" style="color: rgb(87,87,87);">Unsere Server sind SSL-gesichtert und bieten Schutz gegen Angriffe.</p>
</div>
<div class="col-sm-6 col-lg-4 item feature-obj"><i class="fa fa-magic icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Einfach</h3>
<p class="description" style="color: rgb(87,87,87);">Ihr Account ist bereits eingerichtet. Sie müssen sich nur noch anmelden - fertig!</p>
</div>
<div class="col-sm-6 col-lg-4 item feature-obj" style="max-width: 25%;"><i class="fab fa-medapps icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Umfangreich</h3>
<p class="description" style="color: rgb(87,87,87);">Viele Funktionen sind bereits am Bord - z.B. Sharing, Webdav, Kalendar, Kontakte.</p>
</div>
</div>
</div>
</section>
<section id="hosting" style="background-color: rgb(255,255,255);">
<div class="container" style="padding-right: 30px;padding-left: 30px;">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="text-capitalize section-heading" style="text-transform: none;margin-bottom: -2px;">Webhosting</h2>
<h3 class="section-subheading text-muted" style="font-style: normal;font-family: 'Roboto Slab', serif;color: rgb(88,208,98) !important;margin-bottom: 0px;font-weight: normal;">Ihr Projekt in sicheren Händen</h3>
</div>
<div class="col beschr" style="width: 80%;"><span>Eine Cloud reicht Ihnen nicht - Sie möchten eigene Software installieren, einen Blog oder eine Website betreiben? Wir sind der richtige Anbieter! Denn bei uns bekommen Sie alles aus einer Hand - Domain, Webspace, Mailserver, DNS-Verwaltung und mehr! Wir freuen uns schon, Ihr Projekt zu hosten.<br></span></div>
</div>
<div class="row d-flex flex-row justify-content-center align-items-center" style="margin-top: 3%;">
<div class="col col-prod">
<div class="div-prod">
<h1 style="font-size: 26px;margin-bottom: -6px;width: auto;color: #575757;">Hosting S<br></h1>
<p style="color: rgb(88,208,98);width: autp;margin-right: auto;margin-left: auto;margin-bottom: 8px;">klein, aber fein</p>
<p style="color: #575757;width: auto;margin-right: auto;margin-left: auto;font-size: 19px;margin-bottom: 8px;">20 GB</p><span style="font-size: 40px;color: #575757;">12 €</span><span style="color: #575757;">&nbsp;mtl.</span>
<p><button class="btn btn-outline-success btn-sm" type="button">Jetzt bestellen</button></p>
</div>
</div>
<div class="col col-prod">
<div class="div-prod">
<h1 style="font-size: 26px;margin-bottom: -6px;width: auto;color: #575757;">Hosting M<br></h1>
<p style="color: rgb(88,208,98);width: autp;margin-right: auto;margin-left: auto;margin-bottom: 8px;">falls es doch mehr ist</p>
<p style="color: #575757;width: auto;margin-right: auto;margin-left: auto;font-size: 19px;margin-bottom: 8px;">50 GB</p><span style="font-size: 40px;color: #575757;">25 €</span><span style="color: #575757;">&nbsp;mtl.</span>
<p><button class="btn btn-outline-success btn-sm" type="button">Jetzt bestellen</button></p>
</div>
</div>
<div class="col col-prod">
<div class="div-prod">
<h1 style="font-size: 26px;margin-bottom: -6px;width: auto;color: #575757;">Hosting L<br></h1>
<p style="color: rgb(88,208,98);width: autp;margin-right: auto;margin-left: auto;margin-bottom: 8px;">für Großprojekte</p>
<p style="color: #575757;width: auto;margin-right: auto;margin-left: auto;font-size: 19px;margin-bottom: 8px;">100 GB</p><span style="font-size: 40px;color: #575757;">50 €</span><span style="color: #575757;">&nbsp;mtl.</span>
<p><button class="btn btn-outline-success btn-sm" type="button">Jetzt bestellen</button></p>
</div>
</div>
</div>
<div class="row d-flex flex-row justify-content-center align-items-center" style="margin-top: 3%;">
<div class="col" style="width: 200px;min-width: 200px;max-width: 500px;margin-bottom: 15px;">
<div style="background-color: #f4f4f4;padding: 8px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;margin-left: 0px;margin-right: 0px;">
<h1 style="font-size: 26px;margin-bottom: -6px;width: auto;color: #575757;">In jedem Paket enthalten:<br></h1>
<p class="p-enthalten">Unlimitierter Traffic*</p>
<p class="p-enthalten">100 Subdomains</p>
<p class="p-enthalten">50 Mail-Accounts</p>
<p class="p-enthalten">Let's Encrypt - SSL</p>
<p class="p-enthalten">1 Domain inkludiert - unendlich dazuschaltbar</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted" style="font-style: normal;font-family: Montserrat, sans-serif;color: rgb(87,87,87) !important;margin-bottom: 0px;font-weight: bold;margin-top: 15px;font-size: 21px;">Ihre Vorteile</h3>
</div>
</div>
<div class="row justify-content-center features">
<div class="col-sm-6 col-lg-4 item feature-obj"><i class="fa fa-lock icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Sicher</h3>
<p class="description" style="color: rgb(87,87,87);">Wir sichern Ihre Website kostenlos mit SSL und bieten Schutz gegen Angriffe.</p>
</div>
<div class="col-sm-6 col-lg-4 item feature-obj"><i class="fa fa-magic icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Alles aus einer Hand</h3>
<p class="description" style="color: rgb(87,87,87);">Domain, Webspace, DNS, Nameserver, Mail - bei uns bekommen Sie alles, um Ihr Projek zu starten.</p>
</div>
<div class="col-sm-6 col-lg-4 item feature-obj"><i class="fab fa-medapps icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Einfache Verwaltung</h3>
<p class="description" style="color: rgb(87,87,87);">Steuern Sie Ihre Webseiten mit cPanel - eines der meistbenutzten Panels!</p>
</div>
</div>
</div>
</section>
<section id="entwicklung" class="bg-light">
<div class="container" style="padding-right: 30px;padding-left: 30px;">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="text-capitalize section-heading" style="text-transform: none;margin-bottom: -2px;">Entwicklung</h2>
<h3 class="section-subheading text-muted statement" style="font-family: 'Roboto Slab', serif;font-style: normal;margin-bottom: 0px !important;">Sie benötigen eine auf Sie zugeschnittene Lösung?</h3>
</div>
<div class="col beschr" style="width: 80%;"><span>Nicht immer reichen fertige Lösungen aus - manchmal werden auf den Alltag zugeschnittene Applikationen benötigt. Sie sparen Zeit, Geld, sind effizienter und vereinfachen die Verwaltung.&nbsp;<br>Wir freuen uns darauf, Ihre Projekte zu verwirklichen!<br></span></div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted" style="font-style: normal;font-family: Montserrat, sans-serif;color: rgb(87,87,87) !important;margin-bottom: 0px;font-weight: bold;margin-top: 15px;font-size: 21px;">Ihre Vorteile</h3>
</div>
</div>
<div class="row justify-content-center features">
<div class="col-sm-6 col-lg-4 item feature-obj"><i class="fa fa-lock icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Sicher</h3>
<p class="description" style="color: rgb(87,87,87);">Ihr Projekt wird nach höchsten Standards verwirklicht - auch hinsichtlich Verschlüsselung und Schutz vor Attacken.</p>
</div>
<div class="col-sm-6 col-lg-4 item feature-obj"><i class="fa fa-flask icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Erfahrung</h3>
<p class="description" style="color: rgb(87,87,87);">Wir bauen auf langjährige Erfahrung mit KundInnen und nutzen diese - aber beziehen auch neue Erkenntnisse und Neuerungen ein.</p>
</div>
<div class="col-sm-6 col-lg-4 item feature-obj" style="max-width: 25%;"><i class="fab fa-codepen icon" style="color: rgb(87,87,87);"></i>
<h3 class="name" style="color: rgb(87,87,87);">Alles dabei</h3>
<p class="description" style="color: rgb(87,87,87);">Ihr Projekt wird von der Idee über die Umsetzung bis zum fertigen Produkt und Hosting von uns verwaltet - Sie haben eine Ansprechsperson für Alles!</p>
</div>
</div>
<div class="row" style="margin-left: 0px;margin-right: 0px;padding: 5px;">
<div class="col-lg-12 text-center"><a class="btn btn-outline-success action-button" role="button" href="#contact" style="/*background-color: rgb(88,208,98);*//*color: rgb(255,255,255) !important;*/font-size: 11px;">Kontaktieren Sie uns</a></div>
</div>
</div>
</section>
<section id="contact" style="background-color: rgb(255,255,255);padding-top: 0px;">
<header id="header-notebook" class="masthead" style="background-color: #e4e4e4;background-image: url(&quot;assets/img/notebook.jpg&quot;);background-size: cover;padding-top: 0px;background-position: 50% 50%;min-height: 607px;"></header>
<div class="row" style="margin-top: 10px;margin-bottom: 10px;">
<div class="col-lg-12 text-center">
<h2 class="text-capitalize" style="text-transform: none;margin-bottom: -2px;">Kontaktieren Sie uns</h2>
<h3 class="section-subheading text-muted statement" style="font-family: 'Roboto Slab', serif;font-style: normal;margin-bottom: 0px !important;">Wir helfen Ihnen gerne weiter.</h3>
</div>
</div>
<div class="container" style="width: 100%;margin-top: 20px;">
<div class="row">
<div class="col-lg-12">
<form id="contactForm" name="contactForm" novalidate="novalidate">
<div class="form-row">
<div class="col col-md-6">
<div class="form-group"><input class="form-control" type="text" required="" id="name" placeholder="Ihr Name / Firma *"><small class="form-text text-danger flex-grow-1 help-block lead"></small></div>
<div class="form-group"><input class="form-control" type="email" required="" id="email" placeholder="Ihre E-Mail-Adresse *"><small class="form-text text-danger help-block lead"></small></div>
<div class="form-group"><input class="form-control" type="tel" required="" placeholder="Ihre Telefonnummer *"><small class="form-text text-danger help-block lead"></small></div>
</div>
<div class="col-md-6">
<div class="form-group"><textarea class="form-control" required="" id="message" placeholder="Wie können wir helfen? *"></textarea><small class="form-text text-danger help-block lead"></small></div>
</div>
<div class="col-lg-12 text-center"><button class="btn btn-outline-success action-button" type="submit" style="/*background-color: rgb(88,208,98);*//*color: rgb(255,255,255) !important;*/font-size: 20px;">Absenden</button></div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4"><span class="copyright">© kumi systems 2018</span></div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item"><a href="https://twitter.com/KumiSystems"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://www.facebook.com/kumisystems/"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item"><a href="impressum.html">Datenschutzerklärung &amp; Impressum</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4" style="max-width: 100%;min-width: 100%;"><span class="copyright">*Unlimitierter Traffic: "Fair-Use"-Policy</span></div>
</div>
</div>
</footer>
<script src="assets/js/script.js"></script>
</body>
</html>