<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ca/pen/gabLWN?limit=all&page=61&q=service" />
<style class="cp-pen-styles">.services {
background-color: #e6e6e6;
padding-bottom: 400px;
}
.service-container {
position: relative;
max-width: 900px;
margin: 0 auto;
opacity: 0;
}
.sc1 {
animation: triangle-slide-in 1.5s ease forwards;
}
.sc2 {
animation: triangle-slide-in 1.5s ease forwards 3s;
}
.sc3 {
animation: triangle-slide-in 1.5s ease forwards 6s;
}
.sc4 {
animation: triangle-slide-in 1.5s ease forwards 9s;
}
.sc5 {
animation: triangle-slide-in 1.5s ease forwards 12s;
}
.sc6 {
animation: triangle-slide-in 1.5s ease forwards 15s;
}
.service-icons {
position: absolute;
width: 600px;
top: -50px;
left: -400px;
}
.h1-strategie, .h1-marketing, .h1-design, .h1-ux, .h1-acc, .h1-dev {
position: relative;
top: 215px;
left: 150px;
font-family: 'Open sans', sans-serif;
font-weight: 300;
font-size: 45px;
text-transform: uppercase;
color: #000000;
}
.p-strategie, .p-marketing, .p-design, .p-ux, .p-acc, .p-dev {
position: relative;
top: 200px;
left: 150px;
padding-right: 200px;
font-family: 'Open sans', sans-serif;
font-weight: 300;
font-size: 20px;
color: #000000;
}
.svg-strategie, .svg-marketing, .svg-design, .svg-ux, .svg-acc, .svg-dev {
position: absolute;
z-index: 10;
transform-origin: 50% 50%;
top: 285px;
left: 415px;
}
.diamond-narrow {
width: 0;
height: 0;
border: 500px solid transparent;
border-bottom: 751px solid #ffffff;
position: relative;
left: -500px;
top: -950px;
opacity: 0.7;
z-index: 0;
}
.diamond-narrow:after {
content: '';
position: absolute;
left: -500px;
top: 750px;
width: 0;
height: 0;
border: 500px solid transparent;
border-top: 750px solid #ffffff;
z-index: 0;
}
.arrow-right {
position: absolute;
z-index: 1;
width: 62px;
height: 184px;
top: 209px;
left: 439px;
}
.ar1 {
stroke-dasharray: 260;
stroke-dashoffset: 280;
animation: dash 1s linear forwards 1s;
}
.ar2 {
stroke-dasharray: 260;
stroke-dashoffset: 280;
animation: dash 1s linear forwards 4s;
}
.ar3 {
stroke-dasharray: 260;
stroke-dashoffset: 280;
animation: dash 1s linear forwards 7s;
}
.ar4 {
stroke-dasharray: 260;
stroke-dashoffset: 280;
animation: dash 1s linear forwards 10s;
}
.ar5 {
stroke-dasharray: 260;
stroke-dashoffset: 280;
animation: dash 1s linear forwards 13s;
}
.ar6 {
stroke-dasharray: 260;
stroke-dashoffset: 280;
animation: dash 1s linear forwards 16s;
}
@keyframes triangle-slide-in {
from {
opacity: 0;
transform: translate(-1000px, 0);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
.str-path2 {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: dash 0.5s linear forwards 1.5s;
}
.str-path3 {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: dash 0.5s linear forwards 1.5s;
}
.str-path4 {
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: dash 0.5s linear forwards 1.5s;
}
.str-path1 {
stroke-dasharray: 50;
stroke-dashoffset: -50;
animation: dash 0.5s linear forwards 2s;
}
.str-path5 {
stroke-dasharray: 20;
stroke-dashoffset: 20;
animation: dash 0.5s linear forwards 2.5s;
}
.ma-path1 {
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: dash 1s linear forwards 4.5s;
}
.ma-path2 {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: dash 1s linear forwards 5s;
}
.ma-path3 {
stroke-dasharray: 10;
stroke-dashoffset: 10;
animation: dash 0.5s linear forwards 5.5s;
}
.de-path1 {
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: dash 1s linear forwards 8s;
}
.ux-path1 {
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: dash 1s linear forwards 10.5s;
}
.ux-path2 {
stroke-dasharray: 20;
stroke-dashoffset: 20;
animation: dash 0.5s linear forwards 11s;
}
.acc-path1 {
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: dash 1s linear forwards 13.5s;
}
.acc-path2 {
stroke-dasharray: 20;
stroke-dashoffset: 20;
animation: dash 0.5s linear forwards 14s;
}
.dev-path1 {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: dash 0.8s linear forwards 16.5s;
}
.dev-path5 {
stroke-dasharray: 20;
stroke-dashoffset: -20;
animation: dash 0.5s linear forwards 16.9s;
}
.dev-path2 {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: dash 0.8s linear forwards 17.3s;
}
.dev-path4 {
stroke-dasharray: 20;
stroke-dashoffset: 20;
animation: dash 0.5s linear forwards 17.7s;
}
.dev-path3 {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: dash 0.8s linear forwards 18.1s;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes wp-dash {
to {
stroke-dashoffset: 0;
}
}
</style></head><body>
<!--------------------------------------------------------------->
<!---------------------- SERVICE: LINE ICON --------------------->
<!--------------------------------------------------------------->
<div class="services">
<!--------------- STRATEGIE ------------->
<div class="service-container sc1">
<div class="service-icons">
<svg class="svg-strategie">
<path class="str-path1" fill="none" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M18.5,5.8c-7.7,0-14.4,5.6-15.9,13.2"></path>
<path class="str-path2" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M25.2,28.8h-5.6c-0.3,0-0.5-0.2-0.5-0.5V11.5c0-0.3,0.2-0.5,0.5-0.5 h5.6c0.3,0,0.5,0.2,0.5,0.5v16.8C25.7,28.6,25.5,28.8,25.2,28.8L25.2,28.8z"></path>
<path class="str-path3" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M16,28.8h-5.6c-0.3,0-0.5-0.2-0.5-0.5v-9.6c0-0.3,0.2-0.5,0.5-0.5H16 c0.3,0,0.5,0.2,0.5,0.5v9.6C16.5,28.6,16.3,28.8,16,28.8L16,28.8z"></path>
<path class="str-path4" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M6.8,28.8H1.2c-0.3,0-0.5-0.2-0.5-0.5v-4.4c0-0.3,0.2-0.5,0.5-0.5h5.6 c0.3,0,0.5,0.2,0.5,0.5v4.4C7.4,28.6,7.1,28.8,6.8,28.8L6.8,28.8z"></path>
<path class="str-path5" fill="none" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M15.3,1.4l4.1,4.1c0.2,0.2,0.2,0.5,0,0.7 l-4.1,4.1"></path>
</svg>
<svg class="arrow-right ar1" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd" stroke-width="1.5" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0.5,0l60,91.3L0.5,182"></path>
</svg>
<div class="diamond-narrow"></div>
</div>
<h1 class="h1-strategie">Strategie</h1>
<p class="p-strategie">Langfristige Strategieentwicklung anstelle von kurzzeitigem Aktionismus ist der Eckpfeiler auf dem erfolgreiche Projekte aufbauen. Wir beraten Sie schonungslos ehrlich und und haben dabei das große Ganze und die kleinen Details, die Erfolg bestimmen, im Blick.</p>
</div>
<!--------------- MARKETING ------------->
<div class="service-container sc2">
<div class="service-icons">
<svg class="svg-marketing">
<path class="ma-path1" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M22.7,35.6H1.4c-0.4,0-0.8-0.3-0.8-0.8V1.4c0-0.4,0.3-0.8,0.8-0.8 h21.3c0.4,0,0.8,0.3,0.8,0.8v33.5C23.5,35.3,23.1,35.6,22.7,35.6L22.7,35.6z"></path>
<path class="ma-path2" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M19.7,26.5H4.4c-0.4,0-0.8-0.3-0.8-0.8V6.4C3.7,6,4,5.7,4.4,5.7h15.2 c0.4,0,0.8,0.3,0.8,0.8v19.3C20.4,26.1,20.1,26.5,19.7,26.5L19.7,26.5z"></path>
<circle class="ma-path3" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" cx="12.1" cy="31" r="1.8"></circle>
</svg>
<svg class="arrow-right ar2" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd" stroke-width="1.5" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0.5,0l60,91.3L0.5,182"></path>
</svg>
<div class="diamond-narrow"></div>
</div>
<h1 class="h1-marketing">Digital Marketing</h1>
<p class="p-marketing">Clickbaiting und Fans sammeln war gestern, heute geht es um die nahtlose Vernetzung von Kommunikation und Marketing. Überzeugen Sie durch nachhaltiges Inbound-Marketing und begleiten Sie Ihre Kunden über die gesamte Customer Journey und sämtliche Touchpoints hinweg. </p>
</div>
<!--------------- DESIGN ------------->
<div class="service-container sc3">
<div class="service-icons">
<svg class="svg-design">
<path class="de-path1" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M35.3,1.1L33,1.5c-0.2,0-0.4,0.1-0.5,0.3L15.4,18.1 c-0.2,0.2-0.3,0.4-0.3,0.7c0,0,0,0,0,0c0,0,0,0-0.1,0c-0.3,0-0.6,0.2-0.7,0.4l-6,6.8c-0.2,0.2-0.2,0.5-0.2,0.7 c-0.4-0.2-0.9-0.3-1.4-0.3c-1.1,0-2.5,0.5-3.3,1.3c-1.2,1.2-1.1,4.4-2.4,6.8c-0.2,0.3,0,0.7,0.3,0.9c0.2,0.2,0.4,0.3,0.7,0.3 c0.1,0,0.1,0,0.2,0l3-0.9c0.7-0.2,3-0.8,3.8-1.6c1.2-1.2,1.4-3.2,1-4.7c0.1,0,0.1,0,0.2,0c0.2,0,0.4-0.1,0.6-0.2l6.8-5.8 c0.2-0.2,0.4-0.4,0.4-0.7c0,0,0,0,0-0.1c0,0,0,0,0,0h0c0.3,0,0.5-0.1,0.7-0.3L35.3,4.5c0.1-0.1,0.2-0.3,0.3-0.5L36,1.7 C36.1,1.4,35.7,1,35.3,1.1z"></path>
</svg>
<svg class="arrow-right ar3" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd" stroke-width="1.5" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0.5,0l60,91.3L0.5,182"></path>
</svg>
<div class="diamond-narrow"></div>
</div>
<h1 class="h1-design">Design & Grafik</h1>
<p class="p-design">Der erste Eindruck zählt. Wir verhelfen Ihrer Marke im Gedächtnis zu bleiben, verpassen Ihrer Website einen neuen Anstrich oder übernehmen die Entwickung des gesamten Corporate Designs. In jedem Fall positionieren wir Sie im besten Licht. </p>
</div>
<!--------------- USER EXPERIENCE ------------->
<div class="service-container sc4">
<div class="service-icons">
<svg class="svg-ux">
<path class="ux-path1" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M21.3,35.8c-0.1,0-0.3,0-0.4-0.1c0,0-0.1-0.1-0.1-0.1 c-0.1,0-0.3-0.2-0.6-0.4c-1.3-0.9-4.4-3.1-6.5-4.7C6,24.5,2,20.1,1.2,17c-0.4-1.1-0.6-2.4-0.6-3.7c0-3.4,1.2-6.7,3.5-9.1 C6.3,2.2,9,1,11.9,1h0c3.6,0,6.9,1.6,9,4.4c2.1-2.9,5.3-4.6,8.9-4.7l0.2,0c6.1,0,11.2,5.4,11.3,12.1c0,1.3-0.2,2.5-0.5,3.7 c-0.6,3.1-4.7,7.7-12,13.8c-2.9,2.4-5.3,4.2-7,5.3C21.6,35.7,21.4,35.8,21.3,35.8L21.3,35.8z"></path>
<path class="ux-path2" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M29.9,6.2L29.9,6.2c3.3,0,6,3,6,6.7c0,0.7-0.1,1.5-0.3,2.2"></path>
</svg>
<svg class="arrow-right ar4" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd" stroke-width="1.5" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0.5,0l60,91.3L0.5,182"></path>
</svg>
<div class="diamond-narrow"></div>
</div>
<h1 class="h1-ux">User Experience</h1>
<p class="p-ux">Großartiges Interface-Design ist keine Frage des Geschmacks. Wir halten uns lieber an vier kleine Worte, die über den Erfolg entscheiden: Usability, Accessibility, Performance und Ästhetik. </p>
</div>
<!--------------- ACCESSIBILITY ------------->
<div class="service-container sc5">
<div class="service-icons">
<svg class="svg-acc">
<path class="acc-path1" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M12.5,24C6.1,24,0.8,18.8,0.8,12.4C0.8,6,6.1,0.7,12.5,0.7 c4.3,0,8.2,2.4,10.3,6.2h16.6c3,0,5.5,2.5,5.5,5.5c0,2.7-2,5-4.7,5.4l-0.4,0.1l-0.3-0.3l-1.7-1.9l-2.2,2.5l-2.2-2.5l-1.9,2.1 L31,17.9h-8.3C20.7,21.6,16.7,24,12.5,24L12.5,24z"></path>
<path class="acc-path2" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M9.4,14.9c-1.4,0-2.5-1.1-2.5-2.5S8,9.8,9.4,9.8 c1.4,0,2.5,1.1,2.5,2.5S10.8,14.9,9.4,14.9L9.4,14.9z"></path>
</svg>
<svg class="arrow-right ar5" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd" stroke-width="1.5" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0.5,0l60,91.3L0.5,182"></path>
</svg>
<div class="diamond-narrow"></div>
</div>
<h1 class="h1-acc">Accessibility</h1>
<p class="p-acc">Jeder Mensch hat ein Anrecht auf Information. Intuitive Navigation, responsive Design und semantisch korrekt erstellte Inhalte sind die Zutaten für Accessibility. Wir kennen uns mit Barrierefreiheit aus und garantieren, dass alle Inhalte Ihrer Website optimal erreichbar sind.</p>
</div>
<!--------------- DEVELOPMENT ------------->
<div class="service-container sc6">
<div class="service-icons">
<svg class="svg-dev">
<circle class="dev-path1" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" cx="6" cy="27.5" r="4.9"></circle>
<circle class="dev-path2" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" cx="20.3" cy="6" r="4.9"></circle>
<circle class="dev-path3" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" cx="34.6" cy="27.5" r="4.9"></circle>
<line class="dev-path4" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" x1="22.9" y1="10.3" x2="32" y2="23.1"></line>
<line class="dev-path5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" x1="17.7" y1="10.3" x2="8.5" y2="23.2"></line>
</svg>
<svg class="arrow-right ar6" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd" stroke-width="1.5" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0.5,0l60,91.3L0.5,182"></path>
</svg>
<div class="diamond-narrow"></div>
</div>
<h1 class="h1-dev">Development</h1>
<p class="p-dev">Wir sind eine der führenden Drupal-Agenturen des Landes. Und stolz darauf. Wir setzen auf Open Source Lösungen, lieben es mit neuen Technologien zu arbeiten und reizen dabei das mögliche unter Einhaltung höchster Usability, aus. So wird jedes Projekt zum Masterpiece. </p> </div>
</div>
</body></html>
