https://lutzkasper.de/portf-web-haartrix.html

1<!doctype html>
2<html class="no-js" lang="de"><!-- InstanceBegin template="/Templates/03a-portf.dwt" codeOutsideHTMLIsLocked="false" -->
3<head>
4<!-- Originalname: index-animated-mp.html -->
5<meta name="robots" content="index, follow">
6<meta charset="utf-8">
7<meta http-equiv="X-UA-Compatible" content="IE=edge">
8<!-- InstanceBeginEditable name="doctitle" -->
9<title>Lutz Kasper, Webdesign Haartrix</title>
10<!-- InstanceEndEditable -->
11<meta name="description" content="Lutz Kasper, Grafikdesigner im Kölner Süden - Kasper Grafik-Design: Gestaltung von Printmedien, Websites">
12<meta name="keywords" content="Grafikdesign, Logos, Visitenkarten, Briefbögen, Broschüren, Webdesign, Köln, CMS, Content Management System, Wordpress-Websites, Homepages, Gestaltung von Websites, Kölner Süden, Rondorf" />
13
14<meta name="viewport" content="width=device-width, initial-scale=1">
15
16<!-- Favicon -->
17<link rel="shortcut icon" href="favicon.ico">
18<!-- Bootstrap -->
19<link rel="stylesheet" href="assets/styles/vendor/bootstrap.min.css">
20<!-- Fonts -->
21<link rel="stylesheet" href="assets/fonts/et-lineicons/css/style.css">
22<link rel="stylesheet" href="assets/fonts/linea-font/css/linea-font.css">
23<link rel="stylesheet" href="assets/fonts/fontawesome/css/font-awesome.min.css">
24<!-- Slider -->
25<link rel="stylesheet" href="assets/styles/vendor/slick.css">
26<!-- Lightbox -->
27<link rel="stylesheet" href="assets/styles/vendor/magnific-popup.css">
28<!-- Animate.css -->
29<link rel="stylesheet" href="assets/styles/vendor/animate.css">
30<!-- Animated Headings -->
31<link rel="stylesheet" href="assets/styles/vendor/animated-heading.css">
32
33
34<!-- Definity CSS -->
35<link rel="stylesheet" href="assets/styles/main.css">
36<link rel="stylesheet" href="assets/styles/responsive.css">
37
38<!-- Kasper Custom CSS -->
39<link href="assets/styles/kasper-custom.css" rel="stylesheet" type="text/css">
40
41<!-- JS -->

42<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>

42
43
44<!-- Adressen verstecken -->

45<script src="assets/js/VersteckeAdressen.js"></script>

45
46
47
48
49<!-- InstanceBeginEditable name="head" -->
50<!-- InstanceEndEditable -->
51
52
53</head>
54<body id="page-top">
55
56<!--[if lt IE 8]>
57<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
58<![endif]-->
59
60
61
62<!-- ========== Preloader ========== -->
63
64<div class="preloader">
65<img src="assets/images/loader.svg" alt="Loading...">
66</div>
67
68
69
70<!-- ========== Navigation ========== -->
71<nav class="navbar navbar-default navbar-static-top mega">
72
73<!-- Nav.Menü ersetzen: erst ab hier - div.container: -->
74<div class="container">
75<div class="navbar-header">
76<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
77<!-- Logo -->
78<a class="navbar-brand" href="https://lutzkasper.de/index.html"><img class="navbar-logo" src="assets/images/logo.png" alt="Definity - Logo"></a> </div>
79<!-- / .navbar-header -->
80<!-- Navbar Links -->
81<!-- Nav.Menü in abhäng. Vorl. ersetzen: erst ab hier - div#navbar -->
82<div id="navbar" class="navbar-collapse collapse">
83<ul class="nav navbar-nav">
84<!-- Home -->
85<li> <a href="https://lutzkasper.de/index.html">Home</a> </li>
86<!-- / Home -->
87<!-- Über mich -->
88<li> <a href="https://lutzkasper.de/index.html#freelancer">Über mich</a> </li>
89<!-- / Über mich -->
90<!-- Kontakt -->
91<li> <a href="https://lutzkasper.de/index.html#contact">Kontakt</a> </li>
92<!-- / Kontakt -->
93<!-- Portfolio -->
94<li class="dropdown mega-fw"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="350" role="button" aria-haspopup="true" aria-expanded="false">Portfolio <span class="caret"></span></a>
95<ul class="dropdown-menu">
96<div class="row">
97<!-- Websites -->
98<div class="col-lg-3 mb-sm-30">
99<li class="dropdown-header">Websites</li>
100<li role="separator" class="divider"></li>
101<li><a href="https://lutzkasper.de/portf-web-haartrix.html">HAARTRIX</a></li>
102<li><a href="https://lutzkasper.de/portf-web-moderatorinnen.html">Website Moderatorinnen</a></li>
103<li><a href="https://lutzkasper.de/portf-web-fbk.html">Friedensbildungswerk Köln</a></li>
104<li><a href="https://lutzkasper.de/portf-web-hdf.html">Haus der Familie</a></li>
105</div>
106<!-- Print -->
107<div class="col-lg-3 mb-sm-30">
108<li class="dropdown-header">Print</li>
109<li role="separator" class="divider"></li>
110<li><a href="https://lutzkasper.de/portf-print-festival.html">Tonträger</a></li>
111<li><a href="https://lutzkasper.de/portf-print-banner-link.html">Banner</a></li>
112<li><a href="https://lutzkasper.de/portf-print-lasercut.html">Lasercut</a></li>
113<li><a href="https://lutzkasper.de/portf-print-flyer.html">Flyer</a></li>
114</div>
115<!-- Corporate -->
116<div class="col-lg-3 mb-sm-30">
117<li class="dropdown-header">Corporate</li>
118<li role="separator" class="divider"></li>
119<li><a href="https://lutzkasper.de/portf-cd-broschuere.html">Preisliste</a></li>
120<li><a href="https://lutzkasper.de/portf-cd-hof-der-familie.html">Geschäfts-Ausstattung</a></li>
121<li><a href="https://lutzkasper.de/portf-cd-logo-flyer.html">Fitness</a></li>
122<li><a href="https://lutzkasper.de/portf-cd-logoentwicklung.html">Logodesign</a></li>
123</div>
124<!-- Illustration -->
125<div class="col-lg-3 mb-sm-30">
126<li class="dropdown-header">Illustration</li>
127<li role="separator" class="divider"></li>
128<li><a href="https://lutzkasper.de/portf-illu-giz.html">Powerpoint</a></li>
129<li><a href="https://lutzkasper.de/portf-illu-giz-bilanz.html">Jahresbericht</a></li>
130<li><a href="https://lutzkasper.de/portf-illu-blattwerk-ukd.html">Architektur</a></li>
131<li><a href="https://lutzkasper.de/portf-illu-beitragsservice.html">Corona-Cartoons</a></li>
132</div>
133</div>
134<!-- / .row -->
135</ul>
136<!-- / .dropdown-menu -->
137</li>
138<!-- / Portfolio -->
139
140<!-- Rechtliches -->
141<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="350" role="button" aria-haspopup="true" aria-expanded="false">Rechtliches <span class="caret"></span></a>
142<ul class="dropdown-menu">
143<li><a href="https://lutzkasper.de/datenschutz.html">Impressum</a></li>
144<li><a href="https://lutzkasper.de/datenschutz.html#datenschutz">Datenschutzerklärung</a></li>
145</ul>
146</li>
147<!-- / Rechtliches -->
148</ul>
149<!-- / .nav .navbar-nav -->
150<!-- Navbar Links Right -->
151<!-- / .nav .navbar-nav .navbar-right -->
152</div>
153<!--/.navbar-collapse --><!-- InstanceBeginEditable name="proforma02b" -->
154<div></div>
155<!-- InstanceEndEditable --></div>
156<!-- / .container -->
157
158</nav>
159<!-- / .navbar -->
160
161
162<!-- ========== hier endet Template ========== -->
163
164
165<!-- ========== Portfolio Page Title ========== -->
166<header class="page-title pt-large pt-light pt-parallax pt-plax-lg-light" data-stellar-background-ratio="0.4">
167<div class="container">
168<div class="row">
169<div class="col-sm-6"><!-- InstanceBeginEditable name="portfHead" -->
170<h1>Haartrix</h1>
171<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="portfSubhead" --><span class="subheading">Friseurstudio in Köln</span><!-- InstanceEndEditable --></div>
172<ol class="col-sm-6 text-right breadcrumb">
173<li><a href="index.html">Home</a></li>
174<li class="active"><a href="index.html#Portfolio-Anker">Portfolio</a></li>
175</ol>
176</div>
177</div>
178</header>
179<!-- ========== START Content ========== --><!-- InstanceBeginEditable name="content" -->
180
181<section class="section container pfolio-single">
182          <div class="row">
183
184            <div class="col-md-8">
185              <!-- Image 1 -->
186              <div class="project-item">
187                <img src="assets/images/Portf-Web-HAARTRIX-750x450.jpg" alt="Image Description" class="img-responsive">
188                <h5>Responsive Webdesign</h5>
189                <p>Je nach Bildschirmgröße des Seitenbesuchers  sendet die Website automatisch das passende Layout für Desktops, Smartphones, Tablets und Laptops.</p>
190              </div><!-- / .project-item -->
191
192              <!-- Image 2 -->
193              <div class="project-item wow fadeInUp" data-wow-duration="1.3s">
194                <img src="assets/images/Portf-Web-HAARTRIX-750x450-Starts.jpg" alt="Image Description" class="img-responsive">
195                <h5>Die Startseite</h5>
196                <p>Die Menübuttons schweben beim Aufruf der Website über der Bühne. Beim Klick auf einen Button slidet dieser auf und gibt den Blick frei auf den jeweiligen Inhalt.</p>
197              </div>
198              <!-- / .project-item -->
199        
200            </div><!-- / .col-md-8 -->
201
202
203
204            <!-- Project Info -->
205            <aside class="col-md-4">
206              <div class="project-info p-info-gray">
207                <h5>Haartrix Köln</h5>
208                <ul>
209                  <li><h6>Date:</h6>

210                  <span>2021</span></li>
211                  <li><h6>Link:</h6><a href="https://haartrix.de/">https://haartrix.de/</a></li>
212                  <li><h6>Type:</h6>
213                    <span>Redesign Branding, Konzept, Webdesign, technische Anpassungen</span></li>
214                </ul>
215              </div>
216
217              <!-- Challenge -->
218              <div class="p-info">
219                <h5 class="h-alt">Die Aufgabe</h5>
220                <p>HAARTRIX Friseure Köln benötigten einen neuen Webauftritt. Die Website sollte die Seitenbesucher einerseits über das Angebot informieren. Andererseits war auch wichtig, dass der Inhalt stilsicher präsentiert wird und eine übersichtliche Struktur erhält.</p>
221              </div>
222
223              <!-- Solution -->
224              <div class="p-info">
225                <h5 class="h-alt">Die Lösung</h5>
226                <p>Auf der Basis eines Templates entwickelte ich ein Layout, das für alle Geräte funktioniert. Trotz umfangreicher Technik, die im Hintergrund läuft, erreicht die Website gute Ladezeiten. Die Fotografin Nina Schöner setzte das handwerkliche Können der HAARTRIX Frisöre professionell in Szene.</p>
227              </div>
228
229              <!-- Testimonials -->
230              <blockquote class="project-testimonial">
231                <span class="et-quote p-t-icon"></span>
232                Lutz Kasper hat unser Haarstudio perfekt in Szene gesetzt.
233                <footer>
234                <cite><span>Haartrix,</span><br> 
235Stephan Schmidt</cite>
236                </footer>
237              </blockquote>
238            </aside><!-- / .col-md-4 -->
239
240          </div><!-- / .row -->
241
242        </section><!-- / .container -->
243        
244<!-- InstanceEndEditable --><!-- / .container - END Content -->
245
246
247
248
249
250<!-- ========== Beginn Template: ========== -->
251
252<!-- eigentlicher footer -->
253
254<footer id="" class="footer-contact">
255
256<!-- Social Links -->
257<div class="dark-bg">
258<div class="container footer-social-links">
259<div class="row">
260
261<ul>
262<li><a href="datenschutz.html">Impressum</a></li>
263<li><a href="datenschutz.html#datenschutz">Datenschutz</a></li>
264<li>

264<script>document.write(placeMailAdr(1));</script>

264</li>
265</ul>
266
267</div>
268</div><!-- / .container -->
269</div><!-- / .dark-bg -->
270
271
272<!-- Copyright -->
273<div class="copyright">
274<div class="container">
275<div class="row">
276
277<div class="col-md-6">
278<small>&copy; 2022 Lutz Kasper, based on <a class="no-style-link" href="http://themeforest.net/user/octarinethemes">OctarineThemes</a></small>
279</div>
280
281<div class="col-md-6">
282<small><a href="#page-top" class="pull-right to-the-top">To the top<i class="fa fa-angle-up"></i></a></small>
283</div>
284
285</div><!-- / .row -->
286</div><!-- / .container -->
287</div><!-- / .copyright -->
288</footer><!-- / .footer-contact -->
289
290<!-- / footer -->
291
292
293
294<!-- ========== Scripts ========== -->
295

296<script src="assets/js/vendor/jquery-2.1.4.min.js"></script>

296
297<!--

297<script src="../assets/js/vendor/google-fonts.js"></script>

297-->

298<script src="assets/js/vendor/jquery.easing.js"></script>

298

299<script src="assets/js/vendor/jquery.waypoints.min.js"></script>

299

300<script src="assets/js/vendor/bootstrap.min.js"></script>

300

301<script src="assets/js/vendor/bootstrap-hover-dropdown.min.js"></script>

301

302<script src="assets/js/vendor/smoothscroll.js"></script>

302

303<script src="assets/js/vendor/jquery.localScroll.min.js"></script>

303

304<script src="assets/js/vendor/jquery.scrollTo.min.js"></script>

304

305<script src="assets/js/vendor/jquery.stellar.min.js"></script>

305

306<script src="assets/js/vendor/jquery.parallax.js"></script>

306

307<script src="assets/js/vendor/slick.min.js"></script>

307

308<script src="assets/js/vendor/jquery.easypiechart.min.js"></script>

308

309<script src="assets/js/vendor/countup.min.js"></script>

309

310<script src="assets/js/vendor/isotope.min.js"></script>

310

311<script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>

311

312<script src="assets/js/vendor/wow.min.js"></script>

312

313<script src="assets/js/vendor/animated-heading.js"></script>

313

314<script src="assets/js/vendor/jquery.ajaxchimp.js"></script>

314
315
316<!-- animated dots -->

317<script src="assets/js/vendor/animDots.js"></script>

317
318<!-- /. animated dots -->
319
320<!-- TobiBattenberg -->

321<script type="text/javascript" src="assets/js/map-replace-b.js"></script>

321

322<script type="text/javascript" src="assets/js/video-replace-b.js"></script>

322
323
324<!-- Google Maps Original -->
325
326<!--

326<script src="../assets/js/gmap.js"></script>

326-->
327
328<!-- Google Maps Original + API LK . wenn folgendes auskommentiert, funzen nicht mehr:
329- mobiles Menü auf iPhone
330- client logo slider
331-->
332<!--

332<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDd2XqYudSlHu4Dwy8GOtqxsqBNlVfPYVU"></script>

332-->
333
334
335<!-- Definity JS -->

336<script src="assets/js/main.js"></script>

336
337
338<!--Lutz animated scrolling to hyperlinks -->

339<script>
340$('.scroll').on('click', function(e){
341var href = $(this).attr('href');
342$('html, body').animate({
343scrollTop:$(href).offset().top
344},1000);
345e.preventDefault();
346});
347</script>

347
348
349<!-- additional scripts -->
350<!-- InstanceBeginEditable name="addScripts" --><!-- InstanceEndEditable -->
351
352</body>
353<!-- InstanceEnd --></html>