1<!DOCTYPE html><!-- Last Published: Sun Dec 10 2023 22:09:32 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="portfolio-sh23.webflow.io" data-wf-page="64afe45a2daaf57d982d6f66" data-wf-site="64653ddbdd2b114ca9c5d299" lang="de"><head><meta charset="utf-8"/><link href="https://assets-global.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>About Steffen Hirth, UI/UX Designer & Webflow Expert.</title><link rel="alternate" hrefLang="x-default" href="https://portfolio-sh23.webflow.io/about"/><link rel="alternate" hrefLang="de" href="https://portfolio-sh23.webflow.io/about"/><link rel="alternate" hrefLang="en" href="https://portfolio-sh23.webflow.io/en/about"/><meta content="A german digital designer and Webflow professional partner with a skill set that ranges from conceptual thinking to creating and developing high-quality designs." name="description"/><meta content="About Steffen Hirth, UI/UX Designer & Webflow Expert." property="og:title"/><meta content="A german digital designer and Webflow professional partner with a skill set that ranges from conceptual thinking to creating and developing high-quality designs." property="og:description"/><meta content="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/649f0cb1eeff5a9fa315d4a6_Open%20Graph%20Image%402x.png" property="og:image"/><meta content="About Steffen Hirth, UI/UX Designer & Webflow Expert." name="twitter:title"/><meta content="A german digital designer and Webflow professional partner with a skill set that ranges from conceptual thinking to creating and developing high-quality designs." name="twitter:description"/><meta content="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/649f0cb1eeff5a9fa315d4a6_Open%20Graph%20Image%402x.png" name="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/css/portfolio-sh23.21445c631.min.css" rel="stylesheet" type="text/css"/><style>@media (max-width:479px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="f6398f08-e114-37a7-1d95-d2526dc8ed56"] {height:3.7rem;}}</style>
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/6491e04513fcd6b8e5387733_32.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/6491e04a52ac2b535a9f35cd_256.png" rel="apple-touch-icon"/><style> 2* { 3 -webkit-font-smoothing: antialiased; 4} 5 6.menu_link { 7 pointer-events: none; 8} 9 10.fixed { 11 position: fixed; 12 top: 0; 13 left: 0; 14} 15 16.active-flip-item {z-index: 2;} 17 18</style> 19 20<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
21<script async src="https://cdn.splitbee.io/sb.js"></script>
21<!-- [Cards Stacking Animation --> 22<style> 23 .card-container-inner { 24 position: relative; 25 } 26 27 .card-container-inner .card { 28 left: 0; 29 position: absolute; 30 top: 0; 31 -webkit-transition: 0.3s; 32 transition: 0.3s; 33 -webkit-transform-origin: top; 34 transform-origin: top; 35 } 36 37 .card-container-inner .card:nth-child(1) { 38 position: relative; 39 z-index: 10; 40 -webkit-transform: translateY(0px) scale(1); 41 transform: scale(1); 42 opacity: 1; 43 } 44 45 .card-container-inner .card:nth-child(2) { 46 position: absolute; 47 transform: translateY(-15px) scale(0.97); 48 z-index: 9; 49 opacity: 0.8; 50 } 51 52 .card-container-inner .card:nth-child(3) { 53 position: absolute; 54 transform: translateY(-30px) scale(0.94); 55 z-index: 8; 56 opacity: 0.6; 57 } 58 59 .card-container-inner .card:nth-child(4) { 60 position: absolute; 61 transform: translateY(-45px) scale(0.91); 62 z-index: 7; 63 opacity: 0.4; 64 } 65 66 .card-container-inner .card:nth-child(5) { 67 position: absolute; 68 transform: translateY(-60px) scale(0.88); 69 z-index: 6; 70 opacity: 0.2; 71 } 72</style></head><body><div class="page-content"><div class="page-wrapper"><div class="global-styles w-embed"><style> 73 74/* START: Font size settings (customize them at https://wizardry-technique.webflow.io/)*/ 75body { 76 font-size: 1.1111111111111112vw; 77} 78 79/* Select Color */ 80::selection {color: #ec5c29; background: #202126;} 81 82/* Max Font Size */ 83@media screen and (min-width:1440px) { 84 body {font-size: 16px;} 85} 86/* Container Max Width */ 87.container { 88 max-width: 1440px; 89} 90/* Min Font Size */ 91@media screen and (max-width:991px) { 92 body {font-size: 11.011111111111111px;} 93} 94/* END: Font size settings */ 95 96 97.dsg-table>:last-child { 98 border-bottom: 0px; 99} 100 101/* Prevents hover states and clicks on elements */ 102.non-clickable { 103 pointer-events: none; 104} 105 106/* Enables hover states and clicks on elements */ 107.clickable { 108 pointer-events: auto; 109} 110 111/* Aspect ratios for image wrappers */ 112.aspect-ratio-1-1 { 113 aspect-ratio: 1 / 1; 114} 115.aspect-ratio-2-1 { 116 aspect-ratio: 2 / 1; 117} 118.aspect-ratio-4-3 { 119 aspect-ratio: 4 / 3; 120} 121.aspect-ratio-16-9 { 122 aspect-ratio: 16 / 9; 123} 124.aspect-ratio-3-4 { 125 aspect-ratio: 3 / 4; 126} 127 128/* Reset for links and buttons */ 129a { 130 color: inherit; 131 text-decoration: inherit; 132 font-size: inherit; 133} 134
135/* Removes top margin on first element in rich text fields*/ 136.w-richtext>:first-child { 137 margin-top: 0; 138} 139 140/* Removes bottom margin on last element in rich text fields*/ 141.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child { 142 margin-bottom: 0; 143} 144 145/*Cuts text off after 3 lines and adds "..." */ 146.is-txt-cut-3lines { 147 overflow: hidden; 148 display: -webkit-box; 149 -webkit-box-orient: vertical; 150 -webkit-line-clamp: 3; 151} 152 153/*Cuts text off after 2 lines and adds "..." */ 154.is-txt-cut-2lines { 155 overflow: hidden; 156 display: -webkit-box; 157 -webkit-box-orient: vertical; 158 -webkit-line-clamp: 2; 159} 160 161select { 162 appearance: none !important; 163 -webkit-appearance: none !important; 164 -moz-appearance: none !important; 165 } 166 167.project_link { 168 isolation: isolate; 169} 170 171</style></div><div id="w-node-_9a9dbff4-3152-b2dd-7c55-40245d26fae2-5d26fae2" data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="dsg-navbar w-nav"><div class="container-col-12 w-container"><div class="dsg-nav_wrapper"><a href="/" class="dsg-brand-link w-nav-brand"><div class="logo-bar"><div class="logo-txt">Steffen Hirth</div></div><div class="rotate-wrap"><div class="rotatingtext">UI/UX Designer</div><div class="rotatingtext">Webflow Developer</div><div class="rotatingtext">NoCode Tech Lead</div><div class="rotatingtext">Digital Designer</div></div><div class="w-embed"><style> 172.rotatingtext { 173 transform: translate3d(0, 16px, 0); 174 animation: rotate 10s infinite; 175 transition-timing-function: cubic-bezier(0.2,0.5,0.3,1) 176} 177 178.rotatingtext:nth-of-type(2) { 179 animation-delay: 2.5s; 180} 181 182.rotatingtext:nth-of-type(3) { 183 animation-delay: 5s; 184} 185 186.rotatingtext:nth-of-type(4) { 187 animation-delay: 7.5s; 188} 189 190@keyframes rotate { 191/* Text is positioned below the wrap */ 1920% { 193 transform: translate3d(0, 16px, 0); 194 } 195 196/* Move text up and make it visible */ 1972.5% { 198 transform: translate3d(0, 0, 0); 199 } 200 201/* Between 2.5% and 25%, nothing changes (text is visible) */ 20225% { 203 transform: translate3d(0, 0, 0); 204 } 205 206/* Move text up and out of the wrap */ 20727.5% { 208 transform: translate3d(0, -16px, 0); 209 } 210 211/* Between 27.5% and 99%, nothing changes (text is invisible) */ 21299.9999% { 213 transform: translate3d(0, -16px, 0); 214 } 215 216/* Move text to it's original position (loop starts over) */ 217100% { 218 transform: translate3d(0, 16px, 0); 219 } 220} 221</style></div></a><nav role="navigation" class="dsg-nav_menu w-nav-menu"><div class="menu_wrap"><div class="menu"><a href="/" class="menu_link w-inline-block"><p class="menu_link-text">Start</p></a><link rel="prefetch" href="/"/><a href="/cases" class="menu_link w-inline-block"><p class="menu_link-text">Cases</p><div class="menu_link-bg"></div></a><link rel="prefetch" href="/cases"/><a href="/about" aria-current="page" class="menu_link w-inline-block w--current"><p class="menu_link-text">Ãber mich</p><div class="menu_link-bg"></div></a><link rel="prefetch" href="/about"/><div class="menu_shape"><div class="menu_shape-bg"></div></div></div></div><a href="#contact" class="btn-prm--med w-button">Kontakt</a><div class="w-locales-list"><div role="list" class="locales-list w-locales-items"><div role="listitem" class="locale w-locales-item"><a hreflang="de" href="/about" aria-current="page" class="ls-link w--current">de</a></div><div role="listitem" class="locale w-locales-item"><a hreflang="en" href="/en/about" class="ls-link">en</a></div></div></div></nav><div data-w-id="9a9dbff4-3152-b2dd-7c55-40245d26faf1" class="dsg-menu-button w-nav-button"><div data-is-ix2-target="1" class="menu-animation" data-w-id="2f35357e-7743-f624-08c1-9993aeae8a47" data-animation-type="lottie" data-src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/649ea697c96242034515b321_5145-menu-open-and-close.json" data-loop="0" data-direction="1" data-autoplay="0" data-renderer="svg" data-default-duration="2.3333333333333335" data-duration="0" data-loading="eager" data-ix2-initial-state="0"></div></div></div></div></div><main style="-webkit-transform:translate3d(0, -5em, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -5em, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -5em, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -5em, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);filter:blur(5px);opacity:0" class="main-wrapper"><header class="hero-section"><div class="is-pad-tb-152 is-mb-64"><div class="container-col-12 w-container"><div class="w-layout-grid grid--6-6 is-home-hero"><div id="w-node-_75fbfe96-be2a-a489-12e2-9f0767d5b935-67d5b931" class="about_headline-wrap"><p data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b936" class="is-txt-subheadline is-about">Design & Webflow Entwicklung</p><div class="is-margin-b-24"><div data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b939" class="row-1"><h2 data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b93a" class="is-display">Digital Designer &</h2></div><div data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b93c" class="row-2"><h2 data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b93d" class="is-display is-row-2">Webflow </h2><div data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b93f" class="about-im-wrap"><div data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b940" class="about-hero-img"></div></div><h2 data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b941" class="is-display is-row-2">Entwickler</h2></div><div data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b943" class="row-3"><h2 data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b944" class="is-display is-row-3">für deinen digitalen Erfolg!</h2></div></div></div><div id="w-node-_75fbfe96-be2a-a489-12e2-9f0767d5b946-67d5b931" class="about_headline-wrap"><p data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b947" class="is-txt-large">Ich bin Digitaldesigner und Webflow-Experte mit spezialisierung auf Design und Entwicklung von hochwertigen Web Lösungen.</p></div>
221<div id="w-node-_75fbfe96-be2a-a489-12e2-9f0767d5b949-67d5b931" data-w-id="75fbfe96-be2a-a489-12e2-9f0767d5b949" class="button-wrap"><div data-w-id="8dc1bb22-7f65-cd45-7b4b-43f0c9d35def" class="btn-wrap"><div data-w-id="1820ebb6-18d6-0ce6-2f7c-50901ad4f2ca" class="btn-primary-blk"><a href="#contact" class="btn-outer w-inline-block"><div class="glow-border"></div><div class="btn-inner"><div class="btn-text">Jetzt anfragen</div><div class="glow-inner"></div></div></a><div class="btn-icon-wrap"><img src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/649752fcc6b765c5925a8ad5_arrow-right.svg" loading="lazy" alt="" class="icon btn-icon"/></div></div></div></div></div></div></div></header><div class="services-about_section"><section class="services-about_section"><div class="service-scroll-section"><div tr-marquee-scrolldirection="true" tr-marquee-element="component" class="marquee-text_component"><div class="marquee-text_wrapper"><div tr-marquee-element="panel" class="marquee-text_panel"><div class="marquee-text_text">Leistungen - Leistungen - Leistungen - Leistungen -</div></div><div tr-marquee-element="panel" class="marquee-text_panel"><div class="marquee-text_text">Leistungen - Leistungen - Leistungen - Leistungen -</div></div></div></div><div tr-marquee-reverse="true" tr-marquee-element="component" tr-marquee-scrolldirection="true" class="marquee-text_component is-2"><div class="marquee-text_wrapper is-2"><div tr-marquee-element="panel" class="marquee-text_panel"><div class="marquee-text_text">Services - Services - Services - Services - </div></div><div tr-marquee-element="panel" class="marquee-text_panel"><div class="marquee-text_text">Leistungen - Leistungen - Leistungen - Leistungen -</div></div></div></div></div><div class="container-col-10 is-services w-container"><div class="services-content-wrap"><div class="w-layout-grid grid--6-6 is-services"><div id="w-node-d4376536-9f1c-04ff-255b-3f7fc9726765-982d6f66" class="services-wrap _1"><div class="is-pad-b-16"><h1 class="is-h5">Beratung</h1></div><p class="is-txt-small">Ausgefeilte Strategie trifft auf perfektes Design und leistungsstarke Technologie - die perfekte Kombination für ein erfolgreiches Web-Erlebnis.<br/>â</p></div><div id="w-node-_20ee9361-ebf4-7822-3c0e-e5a833a78aa4-982d6f66" class="services-wrap"><div class="is-pad-b-16"><h1 class="is-h5">UI/UX & Digital Design</h1></div><p class="is-txt-small">Design und Funktionalität werden individuell gestaltet, ohne die Benutzerfreundlichkeit zu beeinträchtigen. Meine Websites sind so konzipiert, dass sie Unternehmen helfen, sich abzuheben und mit Ihnen zu wachsen.</p></div><div id="w-node-eade9d4e-62e6-71b4-136c-b2506eb550ed-982d6f66" class="services-wrap"><div class="is-pad-b-16"><h1 class="is-h5">Webflow Entwicklung</h1></div><p class="is-txt-small">Hochwertige Webflow-Entwicklung für digitale Erlebnisse wie B2B Websites, Saas-Anwendungen, Landing Pages, Microsites und andere einzigartige Storytelling-Sites.</p></div><div id="w-node-e201ed1f-0dbd-fda5-981a-f2c40c1f838b-982d6f66" class="services-wrap"><div class="is-pad-b-16"><h1 class="is-h5">Support</h1></div><p class="is-txt-small">Laufende Unterstützung bei der Gestaltung und Entwicklung Ihrer Website. Halten Sie Ihre Website auf dem neuesten Stand und richten Sie sie an Ihren Unternehmenszielen aus.</p></div><a id="w-node-_952b3814-f2c8-41f6-30c4-afbae07a0021-982d6f66" href="https://webflow.com/@steffen-hirth" class="webflow-experts-link w-inline-block"><div id="w-node-_71fa00cb-a56e-9083-351c-348bbfcf3907-982d6f66" class="webflow-expert-wrap"><div class="webflow-partner-logo-wrap"><div class="webflow-logo w-embed">
221<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg"> 222<path d="M11.8679 3.22184C11.8679 3.22184 10.5706 7.26343 10.4649 7.59705C10.4264 7.2539 9.47507 0 9.47507 0C7.26486 0 6.08288 1.56326 5.45826 3.2123C5.45826 3.2123 3.88228 7.26343 3.74775 7.60659C3.73814 7.29203 3.50751 3.25997 3.50751 3.25997C3.37297 1.23917 1.50871 0.00953192 0 0.00953192L1.82583 11C4.14174 10.9905 5.39099 9.43674 6.04444 7.78769C6.04444 7.78769 7.43784 4.21317 7.4955 4.05113C7.50511 4.20364 8.49489 11 8.49489 11C10.8204 11 12.0697 9.54159 12.7423 7.94974L16 0.00953192C13.7033 0.00953192 12.4925 1.56326 11.8679 3.22184Z" fill="currentColor"/> 223</svg></div><div class="is-txt-xsmall">Official Webflow Experte</div></div><div class="is-experts-text">Entwickelt Websites seit 2016</div></div></a></div></div></div></section></div><div class="services-section"><div class="is-pad-tb-96"><div class="container-col-12 w-container"><div class="is-margin-b-24"><div class="_2columns01_content-wrap"><div class="w-layout-grid grid--6-6 is-services"><div id="w-node-_11c7bf43-05a7-3afa-ee0c-e77d3d845f1e-982d6f66" class="is-margin-b-24"><div class="_3columns01_headline-wrap"><p class="is-txt-subheadline">Grundwerte</p><div class="is-pad-b-24"><h2 class="is-h3">Drei wesentliche Elemente für jedes Projekt.</h2></div><div class="is-pad-b-24"><p class="is-txt-small">Vertrauen, Transparenz und Termintreue sind die Eckpfeiler meiner Arbeit. Ich setze auf offene Kommunikation und enge Zusammenarbeit mit meinen Kunden, um ihre Visionen zu verwirklichen.</p></div><div class="button-wrap"><div data-w-id="8dc1bb22-7f65-cd45-7b4b-43f0c9d35def" class="btn-wrap"><div data-w-id="1820ebb6-18d6-0ce6-2f7c-50901ad4f2ca" class="btn-primary-blk"><a href="#contact" class="btn-outer w-inline-block"><div class="glow-border"></div><div class="btn-inner"><div class="btn-text">Jetzt anfragen</div><div class="glow-inner"></div></div></a><div class="btn-icon-wrap"><img src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/649752fcc6b765c5925a8ad5_arrow-right.svg" loading="lazy" alt="" class="icon btn-icon"/></div></div></div></div></div></div><div id="w-node-_365fff0c-2ccd-42c1-36b9-1ebfdc4d02d9-982d6f66" class="card-container"><div class="slider-arrow-wrap"><a id="card-slider-up" href="#" class="arrow-link w-inline-block"><div class="icon up-arrow w-embed"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 224<path fill-rule="evenodd" clip-rule="evenodd" d="M7.48047 13.4805V3.49519H8.98047V13.4805H7.48047Z" fill="currentColor"/> 225<path fill-rule="evenodd" clip-rule="evenodd" d="M3.45703 6.54297L7.34612 2.65388H9.11389L13.003 6.54297L11.9423 7.60363L8.23 3.89132L4.51769 7.60363L3.45703 6.54297Z" fill="currentColor"/> 226</svg></div></a><a id="card-slider-down" href="#" class="arrow-link w-inline-block"><div class="icon up-arrow w-embed"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 227<path fill-rule="evenodd" clip-rule="evenodd" d="M8.51953 2.51953L8.51953 12.5048L7.01953 12.5048L7.01953 2.51953L8.51953 2.51953Z" fill="currentColor"/> 228<path fill-rule="evenodd" clip-rule="evenodd" d="M12.543 9.45703L8.65388 13.3461L6.88611 13.3461L2.99703 9.45703L4.05769 8.39637L7.77 12.1087L11.4823 8.39637L12.543 9.45703Z" fill="currentColor"/> 229</svg></div></a></div><div id="w-node-_491c9f8f-8a1d-e153-cf0c-d7a8ec44361c-982d6f66" class="card-container-inner"><div id="w-node-_466eda80-a94d-7958-9baa-8d5d0445643b-982d6f66" data-w-id="466eda80-a94d-7958-9baa-8d5d0445643b" class="card"><div class="is-pad-b-16"></div><div class="is-pad-b-16"><p class="is-txt-xlarge is-txt-black-100">Vertrauen und Transparenz.<br/></p></div><p class="is-txt-small">Um eine hervorragende Arbeit zu leisten, müssen meine Kunden darauf vertrauen können, dass ich mich wirklich für ihre Interessen einsetze. Ich biete vollständige Transparenz bei meinen Prozessen, der Entscheidungsfindung und den von mir erzielten Ergebnissen.</p></div><div data-w-id="4e495d4f-1920-ddad-6dd0-4a5017ce74e0" class="card"><div class="is-pad-b-16"></div><div class="is-pad-b-16"><p class="is-txt-xlarge is-txt-black-100">Gestalten mit Verstand.<br/></p></div><p class="is-txt-small">Meine kreativen Entscheidungen beruhen auf bewährten Verfahren, Erfahrung, Forschung und einem umfassenden Verständnis der Ziele.</p></div><div data-w-id="790cf741-f7df-b381-0eeb-aa92fec8c483" class="card"><div class="is-pad-b-16"></div><div class="is-pad-b-16"><p class="is-txt-xlarge is-txt-black-100">Pünktlich liefern.<br/></p></div><p class="is-txt-small">Ich lege Wert darauf, pünktlich zu sein und die festgelegten Meilensteine zu erreichen. Falls etwas dazwischen kommt - immer klar kommunizieren!</p></div></div></div></div></div></div></div></div></div><div class="services-section"><div class="is-pad-tb-96 is-stories"><div class="container-col-12 w-container"><div id="w-node-e5102a0f-677f-4e77-bb61-f9f7b35ff388-982d6f66" class="is-margin-b-24"><div class="storie-content-wrap"><div class="w-layout-grid grid--6-6 is-stories"><div class="_3columns01_headline-wrap"><p class="is-txt-subheadline-white">Einblicke</p><div class="is-pad-b-24"><h2 class="is-h3 is-txt-white-100">Ein kleiner Blick hinter die Kulissen.</h2></div><div class="is-pad-b-24"><p class="is-txt-small is-txt-white-150">Wenn ich nicht gerade vor meinem Computer sitze, fahre ich Fahrrad, koche oder lese Bücher zum Thema Wirtschaft und Weiterentwicklung. <br/><br/>Folgen mir für weitere Einblicke:</p></div><div class="insights-links-wrap"><div class="social-link-wrap"><a href="https://www.linkedin.com/in/steffen-hirth/" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">linkedin</div></a><a href="https://twitter.com/Steffen_Hirth" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">X (twitter)</div></a><a href="https://www.instagram.com/steffen.hirth/" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">instagram</div></a></div></div></div><div class="storie-wrap"><div class="tab-wrapper"><div class="cc-stories-slide w-embed"><style> 230.tab-image { 231 border-top-left-radius: 1em; 232 border-top-right-radius: 1em; 233} 234</style></div><div data-current="Tab 1" data-easing="ease" data-duration-in="0" data-duration-out="0" class="tabs-demo-function w-tabs"><div class="tabs-menu-demo w-tab-menu"><a data-w-tab="Tab 1" class="tab-button-demo w-inline-block w-tab-link w--current"><div class="timer-line-demo"></div></a><a data-w-tab="Tab 2" class="tab-button-demo w-inline-block w-tab-link"><div class="timer-line-demo"></div></a><a data-w-tab="Tab 3" class="tab-button-demo w-inline-block w-tab-link"><div class="timer-line-demo"></div></a><a data-w-tab="Tab 4" class="tab-button-demo w-inline-block w-tab-link"><div class="timer-line-demo"></div></a><a data-w-tab="Tab 5" class="tab-button-demo w-inline-block w-tab-link"><div class="timer-line-demo"></div></a><a data-w-tab="Tab 6" class="tab-button-demo w-inline-block w-tab-link"><div class="timer-line-demo"></div></a></div><div class="tabs-content-demo w-tab-content"><div data-w-tab="Tab 1" class="tab-pane-demo w-tab-pane w--tab-active"><img sizes="(max-width: 479px) 69vw, (max-width: 767px) 330.328125px, (max-width: 991px) 75vw, 69vw" srcset="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/648076950a92ccf749854398_storie-1-p-500.jpg 500w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/648076950a92ccf749854398_storie-1.jpg 920w" alt="Workspace Image" src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/648076950a92ccf749854398_storie-1.jpg" loading="eager" class="tab-image"/></div><div data-w-tab="Tab 2" class="tab-pane-demo w-tab-pane"><img sizes="(max-width: 479px) 69vw, (max-width: 767px) 330.328125px, (max-width: 991px) 75vw, 69vw" srcset="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/6496dfe9c6b765c5924217d1_storie-milow%20(1)-p-500.jpg 500w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/6496dfe9c6b765c5924217d1_storie-milow%20(1).jpg 681w" alt="Milow dog image" src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/6496dfe9c6b765c5924217d1_storie-milow%20(1).jpg" loading="eager" class="tab-image"/></div><div data-w-tab="Tab 3" class="tab-pane-demo w-tab-pane"><img sizes="(max-width: 479px) 69vw, (max-width: 767px) 330.328125px, (max-width: 991px) 75vw, 69vw" srcset="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/64807d680c4bfc697c0b139e_storie-3%20(1)-p-500.jpg 500w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/64807d680c4bfc697c0b139e_storie-3%20(1)-p-800.jpg 800w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/64807d680c4bfc697c0b139e_storie-3%20(1)-p-1080.jpg 1080w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/64807d680c4bfc697c0b139e_storie-3%20(1).jpg 1380w" alt="Afterwork drink" src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/64807d680c4bfc697c0b139e_storie-3%20(1).jpg" loading="eager" class="tab-image _3"/></div><div data-w-tab="Tab 4" class="tab-pane-demo w-tab-pane"><div data-poster-url="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/64807a225f5d06bb86ce99bd_IMG_4638-poster-00001.jpg" data-video-urls="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/64807a225f5d06bb86ce99bd_IMG_4638-transcode.mp4,https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/64807a225f5d06bb86ce99bd_IMG_4638-transcode.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="tab-image w-background-video w-background-video-atom"><video id="1dade013-f2a1-a2c4-0663-cb2566dbe558-video" autoplay="" loop="" style="background-image:url("https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/64807a225f5d06bb86ce99bd_IMG_4638-poster-00001.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"><source src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/64807a225f5d06bb86ce99bd_IMG_4638-transcode.mp4" data-wf-ignore="true"/><source src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/64807a225f5d06bb86ce99bd_IMG_4638-transcode.webm" data-wf-ignore="true"/></video></div></div><div data-w-tab="Tab 5" class="tab-pane-demo w-tab-pane"><img sizes="(max-width: 479px) 69vw, (max-width: 767px) 330.328125px, (max-width: 991px) 75vw, 69vw" srcset="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/6480739d10bd504af0063215_DTS_Passion_Economy_Daniel_Faro%25CC%2580_4744-p-500.jpg 500w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/6480739d10bd504af0063215_DTS_Passion_Economy_Daniel_Faro%25CC%2580_4744-p-800.jpg 800w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/6480739d10bd504af0063215_DTS_Passion_Economy_Daniel_Faro%25CC%2580_4744-p-1080.jpg 1080w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/6480739d10bd504af0063215_DTS_Passion_Economy_Daniel_Faro%CC%80_4744.jpg 1280w" src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/6480739d10bd504af0063215_DTS_Passion_Economy_Daniel_Faro%CC%80_4744.jpg" loading="eager" alt="" class="tab-image"/></div><div data-w-tab="Tab 6" class="tab-pane-demo w-tab-pane"><img sizes="(max-width: 479px) 69vw, (max-width: 767px) 330.328125px, (max-width: 991px) 75vw, 69vw" srcset="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/64807ae8b8a3cdbd6ba268f3_storie-2%20(1)-p-500.jpg 500w, https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/64807ae8b8a3cdbd6ba268f3_storie-2%20(1).jpg 908w" alt="Work zoom in
234image" src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/64807ae8b8a3cdbd6ba268f3_storie-2%20(1).jpg" loading="eager" class="tab-image"/></div></div></div><a href="#" class="arrow-2 tab_next w-inline-block"></a><a href="#" class="arrow-2 tab_previous w-inline-block"></a></div></div></div><img src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/6491d74ea98e101ce6b78fed_bg-element-light.svg" loading="lazy" alt="" class="storie-bg-img non-clickable"/></div></div></div></div></div><div class="notes-section"><div class="is-pad-t-96"><div class="container-col-12 w-container"><div id="w-node-_05c52913-d662-8a53-15dd-c4b2afe58949-982d6f66" class="is-margin-b-24"><div class="testimonial-content_wrap"><div class="w-layout-grid grid--6-6 is-notes"><div id="w-node-_05c52913-d662-8a53-15dd-c4b2afe5894c-982d6f66" class="is-margin-b-24"><div class="_3columns01_headline-wrap"><p class="is-txt-subheadline">Testimonials</p><div class="is-pad-b-24"><h2 class="is-h3">Anmerkungen von Freunden und Kunden.</h2></div><div class="is-pad-b-24"><p class="is-txt-small">Was Freunde und Partner über mich, meinen Prozess und unsere Zusammenarbeit sagen.</p></div></div></div><div id="w-node-_05c52913-d662-8a53-15dd-c4b2afe58955-982d6f66" class="notes-wrap"><div class="pattern-bg"></div><div class="note-wrap-1 _1"><div class="note-profile"><div class="icon case-icon w-embed"><svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"> 235<path d="M9.69784 18.7519C3.83343 18.7351 0 14.6063 0 9.35789C0 4.13486 3.84913 0 9.73384 0C15.5815 0 19.3937 4.13486 19.3937 9.35789C19.3937 9.36435 19.3937 9.37081 19.3937 9.37727L16.3957 9.3779C16.3957 9.37123 16.3957 9.36456 16.3957 9.35789C16.3957 5.62193 14.0641 2.53895 9.73384 2.53895C5.36657 2.53895 3.03489 5.62193 3.03489 9.35789C3.03489 13.1197 5.35375 16.196 9.69784 16.2129V18.7519Z" fill="#202126"/> 236<path d="M19.3946 18.794V12.3828H16.3963V16.2621H12.2969V18.7946L19.3946 18.794Z" fill="#202126"/> 237</svg></div></div><p class="is-txt-xsmall">"Die Zusammenarbeit mit Steffen, unserem Webflow-Freelancer, war eine lohnende Erfahrung. Seine klare Kommunikation und seine innovativen Ideen haben unsere Erwartungen stets übertroffen und die Entwicklung der Website zu einem echten Vergnügen gemacht. Steffen liefert nicht nur eine Dienstleistung, er ist ein Partner. <strong class="is-txt-black-125">Patrick Kilian</strong></p></div><div class="note-wrap-2 _2"><div class="note-profile toby"><div class="icon case-icon w-embed"><svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg"> 238<path d="M12.321 12.9493L15.5288 16.2449C14.2606 17.5562 12.6419 18.4509 10.8781 18.8159C9.11428 19.1808 7.28469 18.9993 5.62137 18.2946C3.95801 17.5899 2.5358 16.3936 1.53503 14.8574C0.534253 13.3212 0 11.5143 0 9.66577C0 7.81721 0.534253 6.01032 1.53503 4.47413C2.5358 2.93793 3.95801 1.74164 5.62137 1.03692C7.28469 0.332201 9.11428 0.150794 10.8781 0.515698C12.6419 0.880602 14.2606 1.77538 15.5288 3.0866L12.321 6.38228C11.6876 5.72497 10.8783 5.27587 9.9959 5.09202C9.11357 4.90817 8.19791 4.99786 7.36529 5.34971C6.53261 5.70156 5.82052 6.29969 5.3194 7.06816C4.81827 7.83666 4.55072 8.74077 4.55072 9.66577C4.55072 10.5908 4.81827 11.4949 5.3194 12.2634C5.82052 13.0319 6.53261 13.63 7.36529 13.9818C8.19791 14.3337 9.11357 14.4234 9.9959 14.2395C10.8783 14.0557 11.6876 13.6066 12.321 12.9493Z" fill="#202126"/> 239<path d="M14.6518 12.0808C15.9491 12.0808 17.0008 11.0002 17.0008 9.66731C17.0008 8.33445 15.9491 7.25391 14.6518 7.25391C13.3545 7.25391 12.3027 8.33445 12.3027 9.66731C12.3027 11.0002 13.3545 12.0808 14.6518 12.0808Z" fill="#202126"/> 240</svg></div></div><p class="is-txt-xsmall">"Mit Steffen haben wir einen zuverlässigen Webflow-Entwickler gefunden, der Webseiten strukturiert, zielgerichtet und zeitnah umsetzt. Dabei behält er immer ein Auge für Design, um Projekte nicht nur technisch, sondern auch optisch zum Strahlen zu bringen." <span class="is-txt-black-125">Tobias Linden</span></p></div><div class="note-wrap-5 _5"><div class="note-profile new-partner"><div class="icon case-icon w-embed">
240<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 241<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18934 7.25L6.9394 8.00006L6.18945 8.75L2.25 8.75V7.25H6.18934ZM9.81066 8.75L13.75 8.75V7.25H9.81077L9.06072 8.00006L9.81066 8.75Z" fill="#202126"/> 242<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 6.18945L8.75 2.25H7.25V6.18934L8.00006 6.9394L8.75 6.18945ZM8.75 9.81066L8.00006 9.06072L7.25 9.81077V13.75H8.75L8.75 9.81066Z" fill="#202126"/> 243</svg></div></div><p class="is-txt-xsmall">You wanna become a friend and partner? <a href="mailto:[email protected]" class="is-text-link">Contact me</a><br/></p></div><div class="note-wrap-3 _3"><div class="note-profile justin"><div class="icon case-icon w-embed"><svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg"> 244<path fill-rule="evenodd" clip-rule="evenodd" d="M7.93831 6.91665H9.0605V9.96021e-08L7.93831 0V6.91665ZM5.9838 8.71631L6.55959 7.71651L0.575792 4.25308L0 5.25288L5.9838 8.71631ZM16.4242 14.7586L17 13.7588L11.0162 10.2954L10.4404 11.2952L16.4242 14.7586ZM9.0605 19H7.93831V12.0833H9.0605V19ZM0.575911 14.7585L0.000121993 13.7587L5.9839 10.2953L6.55969 11.2951L0.575911 14.7585ZM10.4393 7.7164L11.015 8.71621L16.9988 5.25278L16.423 4.25297L10.4393 7.7164Z" fill="#202126"/> 245</svg></div></div><p class="is-txt-xsmall">"Für jeden, der einen Webflow-Experten sucht, können wir Steffen nicht genug empfehlen. Deshalb ist er unser Ansprechpartner bei smalltribe für jedes Webflow-Projekt!" <strong class="is-txt-black-125">Justin Schüler</strong><br/></p></div><div class="note-wrap-4 _4"><div class="note-profile bernd"><div class="is-txt-medium is-txt-black-100">BV</div></div><p class="is-txt-xsmall">"... sein ganzheitlicher Ansatz hat mich voll überzeugt. Werte wie Zuverlässigkeit, Pünktlichkeit und Offenheit sind für ihn in der Zusammenarbeit eine Selbstverständlichkeit..." <strong class="is-txt-black-125">Bernd Vollmer</strong></p></div></div></div></div></div></div></div></div><div class="notes-section"><div class="is-pad-tb-96"><div class="container-col-6 w-container"><div id="w-node-_8951c727-6fbf-8279-3a34-d62dbc77dae9-982d6f66" class="is-margin-b-24"><div class="testimonial-content_wrap"><div id="w-node-_8951c727-6fbf-8279-3a34-d62dbc77daec-982d6f66" class="is-margin-b-24"><div class="faq_headline-wrap"><div class="is-pad-b-24"><h2 class="is-h3-faq">Dinge, die ich oft gefragt werade.</h2></div></div></div><div id="w-node-f6398f08-e114-37a7-1d95-d2526dc8ed55-982d6f66" data-current="Tab 1" data-easing="ease-out-quint" data-duration-in="400" data-duration-out="400" class="tabs w-tabs"><div data-w-id="f6398f08-e114-37a7-1d95-d2526dc8ed56" class="tabs-menu-wrapper w-tab-menu"><a data-w-tab="Tab 1" class="tabs-nav-item _03 w-inline-block w-tab-link w--current"><div class="tabs-nav-text">Leistungen & Tools</div></a><a data-w-tab="Tab 2" class="tabs-nav-item _03 w-inline-block w-tab-link"><div class="tabs-nav-text">Preise & Prozess</div></a></div><div class="tabs-content-wrapper w-tab-content"><div data-w-tab="Tab 1" class="tab-content-item w-tab-pane w--tab-active"><div class="tab-content-inner"><div class="accordion-wrapper"><div class="accordion-item"><div id="q3" class="accordion-item-trigger"><div class="icon accordion-icon w-embed"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 246<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18934 7.25L6.9394 8.00006L6.18945 8.75L2.25 8.75V7.25H6.18934ZM9.81066 8.75L13.75 8.75V7.25H9.81077L9.06072 8.00006L9.81066 8.75Z" fill="currentColor"/> 247<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 6.18945L8.75 2.25H7.25V6.18934L8.00006 6.9394L8.75 6.18945ZM8.75 9.81066L8.00006 9.06072L7.25 9.81077V13.75H8.75L8.75 9.81066Z" fill="currentColor"/> 248</svg></div><h3 class="accordion-heading">Welche spezifischen Dienstleistungen bietest du an?</h3></div><div class="accordion-item-content"><p class="is-txt-small is-accordion">Ich habe mich auf hochwertiges Website-Design und -Entwicklung spezialisiert und verwende benutzerdefinierte Co
248de-Integrationen, um die Interaktivität für den Benutzer zu erhöhen. Jedes Projekt, egal wie groà oder klein, beinhaltet auch eine individuelle Beratung.</p></div></div><div class="accordion-item"><div id="q3" class="accordion-item-trigger"><div class="icon accordion-icon w-embed"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 249<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18934 7.25L6.9394 8.00006L6.18945 8.75L2.25 8.75V7.25H6.18934ZM9.81066 8.75L13.75 8.75V7.25H9.81077L9.06072 8.00006L9.81066 8.75Z" fill="currentColor"/> 250<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 6.18945L8.75 2.25H7.25V6.18934L8.00006 6.9394L8.75 6.18945ZM8.75 9.81066L8.00006 9.06072L7.25 9.81077V13.75H8.75L8.75 9.81066Z" fill="currentColor"/> 251</svg></div><h4 class="accordion-heading">Mit welchem CMS arbeitest du?</h4></div><div class="accordion-item-content"><p class="is-txt-small is-accordion">Ich verwende Webflow ausschlieÃlich für Webentwicklungsprojekte, da es branchenführende Stärken in de
251n Bereichen Codeanpassung, SEO, Hosting, Performance und Designautonomie aufweist.<br/></p></div></div><div class="accordion-item is-last"><div id="q3" class="accordion-item-trigger"><div class="icon accordion-icon w-embed"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 252<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18934 7.25L6.9394 8.00006L6.18945 8.75L2.25 8.75V7.25H6.18934ZM9.81066 8.75L13.75 8.75V7.25H9.81077L9.06072 8.00006L9.81066 8.75Z" fill="currentColor"/> 253<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 6.18945L8.75 2.25H7.25V6.18934L8.00006 6.9394L8.75 6.18945ZM8.75 9.81066L8.00006 9.06072L7.25 9.81077V13.75H8.75L8.75 9.81066Z" fill="currentColor"/> 254</svg></div><h4 class="accordion-heading">Welchen Tools verwenden Sie?</h4></div><div class="accordion-item-content"><p class="is-txt-small is-accordion">Strategie und Design mit Figma. Entwicklung mit Webflow. Laufende Aktualisierungen, Walkthroughs und Schulungen mit Loom. Projektkommunikation über Slack und Projektmanagement mit Notion.</p></div></div><div class="accordion-item"><div id="q3" class="accordion-item-trigger"><div class="icon accordion-icon w-embed"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 255<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18934 7.25L6.9394 8.00006L6.18945 8.75L2.25 8.75V7.25H6.18934ZM9.81066 8.75L13.75 8.75V7.25H9.81077L9.06072 8.00006L9.81066 8.75Z" fill="currentColor"/> 256<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 6.18945L8.75 2.25H7.25V6.18934L8.00006 6.9394L8.75 6.18945ZM8.75 9.81066L8.00006 9.06072L7.25 9.81077V13.75H8.75L8.75 9.81066Z" fill="currentColor"/> 257</svg></div><h4 class="accordion-heading">Ich hätte nur das Design und brauche die Entwicklung?</h4></div><div class="accordion-item-content"><p class="is-txt-small is-accordion">Ich biete auch Migrationen von Figma zu Webflow oder von Wordpress zu Webflow an und setze eure sauber gestalteten Layouts um, pixelgenau und responsive für alle Geräte.</p></div></div></div></div></div><div data-w-tab="Tab 2" class="tab-content-item w-tab-pane"><div class="tab-content-inner"><div id="w-node-_59745cab-b57a-f1bc-e09d-b5a5dae6dc9c-982d6f66" class="accordion-wrapper"><div class="accordion-item"><div id="q3" class="accordion-item-trigger"><div class="icon accordion-icon w-embed"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 258<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18934 7.25L6.9394 8.00006L6.18945 8.75L2.25 8.75V7.25H6.18934ZM9.81066 8.75L13.75 8.75V7.25H9.81077L9.06072 8.00006L9.81066 8.75Z" fill="currentColor"/> 259<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 6.18945L8.75 2.25H7.25V6.18934L8.00006 6.9394L8.75 6.18945ZM8.75 9.81066L8.00006 9.06072L7.25 9.81077V13.75H8.75L8.75 9.81066Z" fill="currentColor"/> 260</svg></div><h4 class="accordion-heading">How much does a project cost?<br/></h4></div><div class="accordion-item-content"><p class="is-txt-small is-accordion">Normally project costs vary depending on size, time frame and complexity. My current minimum engagement fee is 5000â¬, with most projects ranging from 6000-15,000â¬. For other independent creative services, I charge 360â¬/680⬠per half/full day.<br/></p></div></div><div class="accordion-item"><div id="q3" class="accordion-item-trigger"><div class="icon accordion-icon w-embed"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 261<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18934 7.25L6.9394 8.00006L6.18945 8.75L2.25 8.75V7.25H6.18934ZM9.81066 8.75L13.75 8.75V7.25H9.81077L9.06072 8.00006L9.81066 8.75Z" fill="currentColor"/> 262<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 6.18945L8.75 2.25H7.25V6.18934L8.00006 6.9394L8.75 6.18945ZM8.75 9.81066L8.00006 9.06072L7.25 9.81077V13.75H8.75L8.75 9.81066Z" fill="currentColor"/> 263</svg></div><h4 class="accordion-heading">How long does a project take?</h4></div><div class="accordion-item-content"><p class="is-txt-small is-accordion">The duration of projects varies, but most of my work so far has taken between 1,5 weeks and 3 months.<br/></p></div></div><div class="accordion-item"><div id="q1" class="accordion-item-trigger"><div class="icon accordion-icon w-embed">
263<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 264<path fill-rule="evenodd" clip-rule="evenodd" d="M6.18934 7.25L6.9394 8.00006L6.18945 8.75L2.25 8.75V7.25H6.18934ZM9.81066 8.75L13.75 8.75V7.25H9.81077L9.06072 8.00006L9.81066 8.75Z" fill="currentColor"/> 265<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 6.18945L8.75 2.25H7.25V6.18934L8.00006 6.9394L8.75 6.18945ZM8.75 9.81066L8.00006 9.06072L7.25 9.81077V13.75H8.75L8.75 9.81066Z" fill="currentColor"/> 266</svg></div><h4 class="accordion-heading">How does payment work for a project?</h4></div><div class="accordion-item-content"><p class="is-txt-small is-accordion">I stick to the industry standard of 50% upfront and 50% after a successful handover and launch.<br/></p></div></div></div></div></div></div></div></div></div></div></div></div><div id="contact" class="cta-section"><div class="is-pad-tb-96"><div class="container-col-12 w-container"><div class="w-layout-grid grid--6-6 is-contact"><div id="w-node-_2df54b07-8b3e-2977-1db7-e58bc56752b8-c56752b4" class="contact_content-wrap"><div class="is-margin-b-24"><p class="is-txt-subheadline">Kontakt</p><h2 class="is-h3">Bereit für ein gemeinsames Projekt?</h2></div><div class="contact-wrap"><div class="is-txt-small">Ortszeit:<br/><span data-clock="CET" class="text-span">00:00:00</span>, CET</div></div></div><div id="w-node-_2df54b07-8b3e-2977-1db7-e58bc56752c9-c56752b4" class="form-wrapper w-form"><form id="wf-form-Portfolio-Formular" name="wf-form-Portfolio-Formular" data-name="Portfolio Formular" method="get" class="form" data-wf-page-id="64afe45a2daaf57d982d6f66" data-wf-element-id="2df54b07-8b3e-2977-1db7-e58bc56752ca"><div class="form-field-row"><div class="form-field-wrapper"><label for="Vorname-2" class="form-label">Name</label><input class="form-input w-input" maxlength="256" name="Vorname-2" data-name="Vorname 2" placeholder="John Doe" type="text" id="Vorname-2" required=""/></div><div class="form-field-wrapper"><label for="E-Mail-2" class="form-label">E-Mail</label><input class="form-input w-input" maxlength="256" name="E-Mail-2" data-name="E Mail 2" placeholder="[email protected]" type="email" id="E-Mail-2" required=""/></div></div><div class="form-field-row"><div class="form-field-wrapper"><label for="Budget-3" class="form-label">Budge in â¬</label><select id="Budget-3" name="Budget-3" data-name="Budget 3" required="" class="form-input is-select-input w-select"><option value="<10k">5 - 10.000 â¬</option><option value="10-20k">10 - 20.000 â¬</option><option value="20-50k">20.000 ⬠+</option></select></div><div class="form-field-wrapper"><label for="Leistung-2" class="form-label">Leistungen</label><select id="Leistung-2" name="Leistung-2" data-name="Leistung 2" required="" class="form-input is-select-input w-select"><option value="Design/ Dev Consulting">Design / Dev Beratung</option><option value="UI/UX Design">UI/UX Design</option><option value="Webflow Entwicklung">Webflow Entwicklung</option><option value="Webflow Retainer">Webflow Retainer</option></select></div></div><div class="form-field-wrapper"><label for="ber-das-Projekt" class="form-label">Projektbeschreibung</label><textarea id="ber-das-Projekt" name="ber-das-Projekt" maxlength="5000" data-name="Ãber das Projekt" placeholder="Hey Steffen, kannst du uns bei ... unterstützen? Die Ziele und Zeitplan sind ... und das ist mein figma Link zum Design: ..." required="" class="form-input is-text-area w-input"></textarea></div><div class="form-field-wrapper"><label class="w-checkbox form-checkbox"><div class="w-checkbox-input w-checkbox-input--inputType-custom form-checkbox-icon"></div><input id="Checkbox-2" type="checkbox" name="Checkbox-2" data-name="Checkbox 2" required="" style="opacity:0;position:absolute;z-index:-1"/><span for="Checkbox-2" class="form-checkbox-label w-form-label">Ich bin mit den <a href="/privacy" class="link-2">Datenschutzbestimmungen </a>einverstanden.</span></label></div><div class="submit-btn-wrap"><input type="submit" data-wait="Einen Moment..." class="btn--prm-med is-form-submit w-button" value="Anfrage absenden. "/><div class="contact-form-mail-wrap"><p class="is-txt-xsmall is-txt-white-125">E-Mail bevorzugt?</p><div class="is-txt-xsmall"><a href="mailto:[email protected]" class="link-3">[email protected]</a></div></div></div></form><div class="form-message-success w-form-done"><div class="success-message">Thank you!</div><p class="is-txt-medium is-txt-small">I will get back to you within the next 24 hours!</p></div><div class="form-message-error w-form-fail"><div>Oops! Something went wrong while submitting the form. Please try again</div></div></div></div></div></div><div class="contact-form-bg"></div></div><footer class="footer-section"><div class="is-pad-tb-56"><div class="container-col-12 w-container"><div class="w-layout-grid grid--4-4-4"><div id="w-node-_395f15ad-7f52-92c4-e1dd-108e4f807d55-4f807d51" class="is-margin-b-16"><div class="is-txt-xsmall"><a href="mailto:[email protected]?subject=Projektanfrage">[email protected]</a></div></div><div id="w-node-_395f15ad-7f52-92c4-e1dd-108e4f807d59-4f807d51" class="card04"><div class="is-margin-b-16"><div class="footer-link-wrap"><div class="is-txt-xsmall">Folge mir</div><a href="https://dribbble.com/steffenhirth" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">dribbble</div></a><a href="https://www.linkedin.com/in/steffen-hirth/" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">linkedin</div></a><a href="https://twitter.com/Steffen_Hirth" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">twitter</div></a><a href="https://www.instagram.com/steffen.hirth/" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">instagram</div></a></div></div></div></div><div class="w-layout-grid grid--4-4-4 is-footer"><div id="w-node-_395f15ad-7f52-92c4-e1dd-108e4f807d6b-4f807d51" class="footer_branding"><div class="is-margin-b-16"><div class="is-txt-xsmall is-txt-white-125">Version 2.1</div></div></div><div id="w-node-_395f15ad-7f52-92c4-e1dd-108e4f807d6f-4f807d51" class="card04"><div class="is-margin-b-16"><div class="footer-link-wrap"><a href="/terms" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">Impressum</div></a><a href="/privacy" class="dsg_footer-link w-inline-block"><div class="is-txt-xsmall">Datenschutz</div></a></div></div></div></div></div></div></footer></main></div></div>
266<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=64653ddbdd2b114ca9c5d299" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
266<script src="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/js/portfolio-sh23.b3138bf18.js" type="text/javascript"></script>
266<script> 267let duration = 400; 268let menuShape = $(".menu_shape"); 269let menuShapeBG = $(".menu_shape-bg"); 270let menuLink = $(".menu_link"); 271let currentLink = $(".menu_link.w--current"); 272 273// On page load 274moveShape(currentLink); 275$(".menu_link-bg").css("opacity", "0"); 276menuShape.css("opacity", "1"); 277menuLink.css("pointer-events", "auto"); 278 279// On click 280menuLink.on("click", function (e) { 281 // Page url 282 e.preventDefault(); 283 setTimeout(() => { 284 window.location = $(this).attr("href"); 285 }, duration); 286 // menuShapeBG Stretch 287 if ($(this).index() > currentLink.index()) { 288 menuShape.css("justify-content", "flex-end"); 289 } 290 if (currentLink.index() !== $(this).index()) { 291 menuShapeBG.css("transition", `width ${duration / 2}ms`); 292 menuShapeBG.css("width", "140%"); 293 setTimeout(() => { 294 menuShapeBG.css("width", "100%"); 295 }, duration / 2); 296 } 297 // menuShape move 298 menuShape.css("transition", `all ${duration}ms`); 299 moveShape($(this)); 300}); 301 302// Snap 303function moveShape(target) { 304 let linkWidth = target.innerWidth(); 305 let linkOffset = target.offset().left; 306 let menuOffset = $(".menu").offset().left; 307 let leftPosition = linkOffset - menuOffset; 308 menuShape.css("left", leftPosition); 309 menuShape.css("width", linkWidth); 310} 311 312// Resize 313window.addEventListener("resize", function () { 314 moveShape(currentLink); 315}); 316 317// Back button safari 318window.onpageshow = function (event) { 319 if (event.persisted) { 320 window.location.reload(); 321 } 322}; 323 324</script>
324 325
326<script> 327 $('.menu_link').click(function (e) { 328 e.preventDefault(); // prevent default anchor behavior 329 var goTo = this.getAttribute("href"); // store anchor href 330 setTimeout(function(){ 331 window.location = goTo; 332 },600); // the duration of the "load out" animation in milliseconds 333 }); 334</script>
334 335 336
337<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
vendor: 1 bytes, line 337
337
338<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
vendor: 1 bytes, line 338
338
339<script> 340// MARQUEE POWER-UP 341window.addEventListener("DOMContentLoaded", (event) => { 342 // attribute value checker 343 function attr(defaultVal, attrVal) { 344 const defaultValType = typeof defaultVal; 345 if (typeof attrVal !== "string" || attrVal.trim() === "") return defaultVal; 346 if (attrVal === "true" && defaultValType === "boolean") return true; 347 if (attrVal === "false" && defaultValType === "boolean") return false; 348 if (isNaN(attrVal) && defaultValType === "string") return attrVal; 349 if (!isNaN(attrVal) && defaultValType === "number") return +attrVal; 350 return defaultVal; 351 } 352 // marquee component 353 $("[tr-marquee-element='component']").each(function (index) { 354 let componentEl = $(this), 355 panelEl = componentEl.find("[tr-marquee-element='panel']"), 356 triggerHoverEl = componentEl.find("[tr-marquee-element='triggerhover']"), 357 triggerClickEl = componentEl.find("[tr-marquee-element='triggerclick']"); 358 let speedSetting = attr(100, componentEl.attr("tr-marquee-speed")), 359 verticalSetting = attr(false, componentEl.attr("tr-marquee-vertical")), 360 reverseSetting = attr(false, componentEl.attr("tr-marquee-reverse")), 361 scrollDirectionSetting = attr(false, componentEl.attr("tr-marquee-scrolldirection")), 362 scrollScrubSetting = attr(false, componentEl.attr("tr-marquee-scrollscrub")), 363 moveDistanceSetting = -100, 364 timeScaleSetting = 1, 365 pausedStateSetting = false; 366 if (reverseSetting) moveDistanceSetting = 100; 367 let marqueeTimeline = gsap.timeline({ repeat: -1, onReverseComplete: () => marqueeTimeline.progress(1) }); 368 if (verticalSetting) { 369 speedSetting = panelEl.first().height() / speedSetting; 370 marqueeTimeline.fromTo(panelEl, { yPercent: 0 }, { yPercent: moveDistanceSetting, ease: "none", duration: speedSetting }); 371 } else { 372 speedSetting = panelEl.first().width() / speedSetting; 373 marqueeTimeline.fromTo(panelEl, { xPercent: 0 }, { xPercent: moveDistanceSetting, ease: "none", duration: speedSetting }); 374 } 375 let scrubObject = { value: 1 }; 376 ScrollTrigger.create({ 377 trigger: "body", 378 start: "top top", 379 end: "bottom bottom", 380 onUpdate: (self) => { 381 if (!pausedStateSetting) { 382 if (scrollDirectionSetting && timeScaleSetting !== self.direction) { 383 timeScaleSetting = self.direction; 384 marqueeTimeline.timeScale(self.direction); 385 } 386 if (scrollScrubSetting) { 387 let v = self.getVelocity() * 0.006; 388 v = gsap.utils.clamp(-60, 60, v); 389 let scrubTimeline = gsap.timeline({ onUpdate: () => marqueeTimeline.timeScale(scrubObject.value) }); 390 scrubTimeline.fromTo(scrubObject, { value: v }, { value: timeScaleSetting, duration: 0.5 }); 391 } 392 } 393 } 394 }); 395 function pauseMarquee(isPausing) { 396 pausedStateSetting = isPausing; 397 let pauseObject = { value: 1 }; 398 let pauseTimeline = gsap.timeline({ onUpdate: () => marqueeTimeline.timeScale(pauseObject.value) }); 399 if (isPausing) { 400 pauseTimeline.fromTo(pauseObject, { value: timeScaleSetting }, { value: 0, duration: 0.5 }); 401 triggerClickEl.addClass("is-paused"); 402 } else { 403 pauseTimeline.fromTo(pauseObject, { value: 0 }, { value: timeScaleSetting, duration: 0.5 }); 404 triggerClickEl.removeClass("is-paused"); 405 } 406 } 407 if (window.matchMedia("(pointer: fine)").matches) { 408 triggerHoverEl.on("mouseenter", () => pauseMarquee(true)); 409 triggerHoverEl.on("mouseleave", () => pauseMarquee(false)); 410 } 411 triggerClickEl.on("click", function () { 412 !$(this).hasClass("is-paused") ? pauseMarquee(true) : pauseMarquee(false); 413 }); 414 }); 415}); 416</script>
416 417<!-- [Cards Stacking Animation -->
418<script> 419 $('.card-container #card-slider-down').click(function() { 420 $('.card:first-child').css({ 421 "opacity": "0", 422 "transform": "translateY(20px) scale(1.02)" 423 }) 424 setTimeout(() => { 425 $('.card:first-child').remove() 426 .insertAfter($(".card:last", $('.card:first-child').parent())) 427 .removeAttr('style') 428 }, 100); 429 }); 430 431 $('.card-container #card-slider-up').click(function() { 432 $('.card:last-child').remove() 433 .insertBefore($(".card:first", $('.card:last-child').parent())) 434 }); 435 436 function resizeCardContainer() { 437 let max_height = 0; 438 $('.card-container-inner .card').each(function() { 439 var height = this.getBoundingClientRect().height 440 max_height = Math.max(max_height, height) 441 }); 442 $('.card-container-inner').height(max_height) 443 } 444 445 $(window).on('load', resizeCardContainer()) 446 $(window).resize(function() { 447 resizeCardContainer() 448 }); 449</script>
449 450
451<script> 452var Webflow = Webflow || []; 453Webflow.push(function() { 454// Fix for Safari 455if (navigator.userAgent.includes("Safari")) { 456document.querySelectorAll(".tab-button-demo").forEach((t)=>(t.focus=function(){const x=window.scrollX,y=window.scrollY;const f=()=>{setTimeout(()=>window.scrollTo(x,y),1);t.removeEventListener("focus",f)};t.addEventListener("focus",f);HTMLElement.prototype.focus.apply(this,arguments)})); 457 } 458 459function nextTab(){ 460 $('.tab_next').trigger("click"); 461} 462 463var loop = setInterval(nextTab,5000); 464 465 $('.tab-wrapper').on('click', '.tab_previous, .tab_next', function() { 466 clearInterval(loop); 467 var direction = $(this).hasClass('tab_previous') ? -1 : 1; 468 var tablinks = $(this).parent().find('.w-tab-menu'); 469 var index = tablinks.find('.w--current').index() + direction; 470 index = index >= tablinks.children().length ? 0 : index; 471 tablinks.find('.w-tab-link').eq(index).trigger('click'); 472 loop = setInterval(nextTab,5000); 473 }); 474 475}); 476</script>
476 477
478<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
478 479
479<script> 480 $(function() { 481 $(".note-wrap-1, .note-wrap-2, .note-wrap-3, .note-wrap-4").draggable({ 482 }); 483 }); 484 </script>
484 485 486<!-- Import via script src, call the class-->
487<script src="https://kmn2x.csb.app/clock.js"></script>
487 488 489 490<!-- Import via script src, call the class-->
491<script src="https://kmn2x.csb.app/clock.js"></script>
491 492
493<script> 494 495new Clock(); // defaults to the first data-clock in the DOM with EST timezone 496 497new Clock({ selector: "data-clock", hasSeconds: false }); // here in the attribute UTC is set plus an offset 498 499</script>
499</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.