Files
web-development/zoesch.de/index.html
Felix Zösch 07c290a453 Initial commit: Backup der Webseiten
- zoesch.de
- blitzkiste.net
- gruene-hassberge (norbert.zoesch.de)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-13 01:17:15 +01:00

362 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZOESCH.ART</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom -->
<link href='http://fonts.googleapis.com/css?family=Oswald|Roboto|Open+Sans|PT+Sans' rel='stylesheet' type='text/css'>
<link href="css/custom.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
<!-- js -->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.inview.min.js"></script>
<!--script src="js/control.js"></script-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="js/main.js"></script>
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- navbar margin -->
<script>
var shiftWindow = function() { scrollBy(0, -110) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-102067762-2', 'auto');
ga('send', 'pageview');
</script>
<!-- pinterest verification -->
<meta name="p:domain_verify" content="42633d2dd0047870cec3ce9d3f28c749"/>
<!-- reCaptcha -->
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<!-- Navbar -->
<nav class="animated fadeInDown navbar navbar-default navbar-fixed-top">
<div class="container-fluid navb">
<div class="nav-container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navb_logo">
<a class="navbar-brand" href="http://zoesch.de">
<div class="logo"></div>
</a>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="list-icon"><i class="fa fa-bars"></i></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about" class="hidden-xs">Portfolio</a></li>
<li ><a href="#about" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Portfolio</a></li>
<li><a href="#offers" class="hidden-xs">Angebot</a></li>
<li><a href="#offers" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Angebot</a></li>
<li><a href="#gallery" class="hidden-xs">Galerie</a></li>
<li><a href="#gallery" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Galerie</a></li>
<!--li><a href="#clients" class="hidden-xs">Kunden</a></li>
<li><a href="#clients" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Kunden</a></li-->
<li><a href="#contact" class="hidden-xs">Kontakt</a></li>
<li><a href="#contact" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Kontakt</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.nav-container -->
</div><!-- /.container -->
</nav><!-- /Navbar -->
<!-- Header -->
<header class="container-fluid">
<div class="animated fadeInUp row header-content">
<span class="welcome"><h2>WILLKOMMEN AUF<br>ZOESCH.ART</h2></span>
</div>
</header>
<!-- /Header -->
<!-- About me -->
<div class="about container-fluid">
<div class="row about-content">
<h3 id="about">Portfolio</h3>
<h4>Felix Zösch <small>Est 1989</small></h4>
<p>Geboren und aufgewachsen bin ich in Haßfurt, im schönen Unterfranken. Nach dem Abitur am Regiomontanus Gymnasium Haßfurt, habe ich 2010 ein Studium zum Diplom Wirtschaftsingenieur an der Hochschule für angewandte Wissenschaft Würzburg-Schweinfurt (FHWS) begonnen. Die Schwerpunkte setzte ich dabei in den Fachgebieten Elektrotechnik und Supply-Chain-Management.<br><br>
Im Jahr 2014 begann ich nach dem erfolgreichen Abschluss meines Studiums als Projektleiter in der Stadtwerk Haßfurt GmbH. Zu meinen Projekten zählen unter anderem die Integration des Solarplaners in das PlusService Portal, die Entwicklung eines Börsenpreis-Stromtarifs <a href="https://eex.stwhas.de"><i class="fa fa-external-link"></i></a> und die Einführung des Smart-Home Systems Rabbithome
.<br><br>
Im März 2015 schrieb ich mich erneut an der Hochschule Schweinfurt für den Masterstudiengang Elektro- und Informationstechnik ein. Die Masterarbeit über Smart-Grids habe ich im März 2016 abgeben können.<br><br>
Anschließend war ich bei BAURCONSULT - Architekten Ingenieure in Haßfurt als Fachplaner TGA Elekrotechnik tätig, ehe ich im Februar 2017 wieder zum Stadtwerk Haßfurt zurückgekehrt bin. Dort wurde ich als Projektmanager angestellt und betreute die Bereiche digitale Medien und war für Marketing und diverse Forschungsprojekte zuständig. Seit Dezember 2020 bin ich der Technische Leiter und für die Sparten Strom, Gas und Wasser verantwortlich.<br><br>
Nach dem Bau meiner ersten Fotobox, die ich BLITZKISTE <a href="http://www.blitzkiste.net"><i class="fa fa-external-link"></i></a> getauft habe, gründete ich am 28.August 2015 die Firma ZOESCH.ART. Seitdem vermiete ich die Fotobox und biete auch andere kreative Dienstleistungen. Zu meinem Angebot zählt Fotographie, Bildbearbeitung, Grafik-Design, Web-Design und das Programmieren von Webseiten.</p>
</div>
</div>
<!-- /About me -->
<!-- Offers -->
<div class="offers container-fluid">
<div class="row offers-content">
<h3 id="offers">Angebot</h3>
<div class="col-md-6 col-sm-6 thumb">
<i class="fa fa-bolt"></i><br>
<h4>Blitzkiste</h4>
<p>Die Blitzkiste ist eine Fotobox (Photo Booth), die garantiert das Highlight auf jeder Hochzeit, Firmenfeier, Party und jedem Event oder Geburtstag ist! Nach dem Betätigen eines Auslösers, schießt die integrierte Kamera ein Foto und zeigt dieses direkt auf einem Monitor an. Gleichzeitig wird das Bild auf einen internen Webserver hochgeladen und ist für die Gäste innerhalb eines bereitgestellten Wlan-Netzwerks über ein Smartphone oder Tablet sofort abrufbar.</p>
<a href="http://www.blitzkiste.net" target="_blank" class="btn btn-primary btn-lg" role="button">Zur Blitzkiste</a>
</div>
<div class="col-md-6 col-sm-6 thumb">
<i class="fa fa-camera" aria-hidden="true"></i><br>
<h4>Luftaufnahmen</h4>
<p>Auch hier hat mich die Verbindung von Fotografie und Technik zu diesem Thema gebracht. Seit Oktober 2017 ist es möglich Luftaufnahmen aller Art zu buchen. Ob Architektur, Immobilien, Baudokumentation, Stadt - Land & Fluss im Tourismussektor, bis hin zu Panoramen oder Gruppenbildern vieles ist mit meiner Drohne möglich. Um eine optimale Bildqualität zu erhalten, habe ich mich für eine DJI Mavic Pro Platinum entschieden, die optimal für professionelle Luftaufnahmen ausgerüstet ist.</p>
<a href="http://zoesch.de/index.html#contact" class="btn btn-primary btn-lg" role="button">Anfrage stellen</a>
</div>
<div class="col-md-6 col-sm-6 thumb">
<i class="fa fa-rocket"></i><br>
<h4>Grafik-Design</h4>
<p>Meine Begeisterung für Kunst und Technik, haben mich sehr früh zu den Grafikprogrammen von Adobe geführt. Seit über 8 Jahren arbeite ich nun mit Photoshop und Illustartor. Ich habe mich haupsächlich auf das Entwerfen von Logos und Icons spezialisiert, jedoch biete ich auch noch weitere grafische Arbeiten an. Dazu zählt die klassische Bildbearbeitung, das Entwerfen von Flyern und Postern, bis hin zum Web-Design. Gerne können Sie eine unverbindliche Anfrage stellen.</p>
<a href="http://zoesch.de/index.html#contact" class="btn btn-primary btn-lg" role="button">Anfrage stellen</a>
</div>
<div class="col-md-6 col-sm-6 thumb">
<i class="fa fa-code"></i><br>
<h4>Web-Design</h4>
<p>Mit 16 Jahren habe ich schon meine erste Webseite erstellt. Damals habe ich noch mit Microsoft Frontpage und Drag & Drop gearbeitet. Heute kann ich Ihnen das Programmieren von Webseiten mit HTML, CSS, PHP, JAVA und jQuery anbieten. Durch Ihre Wünsche und Vorgaben, erstellen wir gemeinsam Ihre eigene Webseite nach den aktuellen Web-Trends. Falls Sie Interesse haben oder weitere Informationen benötigen, können Sie mich gerne kontaktieren.</p>
<a href="http://zoesch.de/index.html#contact" class="btn btn-primary btn-lg" role="button">Anfrage stellen</a>
</div>
</div>
</div>
<!-- /Offers -->
<!-- Bildergalerie -->
<div class="gallery container-fluid">
<div class="row gallery-content">
<h3 id="gallery">Galerie</h3>
</div>
</div>
<div class="blue-gal">
<div id="links">
<a href="gallery/blitzkiste/img2.jpg" title="Blitzkiste"></a>
<a href="gallery/blitzkiste/img8.jpg" title="Blitzkiste"></a>
<a href="gallery/blitzkiste/img9.jpg" title="Blitzkiste"></a>
<a href="gallery/artworks/hero_desktop.jpg" title="Grafik-Design - Hero-Image im Flat-Design"></a>
<a href="gallery/artworks/desk_macbook.jpg" title="Grafik-Design - Hero-Image im Flat-Design"></a>
<a href="gallery/artworks/gallery_icons.jpg" title="Grafik-Design - Icons im Flat-Design"></a>
<a href="gallery/projects/stw_icons.png" title="Grafik-Design - Icons im Flat-Design"></a>
<a href="gallery/artworks/MacBookPro_Black.jpg" title="Grafik-Design - MacBook Pro Vektor-Grafik"></a>
<a href="gallery/photos/Porto_di_Bolsena_HDR2.png" title="Grafik-Design - Porto di Bolsena HDR"></a>
<a href="gallery/photos/raindrops.jpg" title="Grafik-Design - Regentropfen"></a>
<a href="gallery/photos/zoeschart_back.jpg" title="Grafik-Design - Makro-Aufnahme"></a>
<a href="gallery/projects/blitzkiste_website.jpg" title="Web-Design - blitzkiste.net"></a>
<a href="gallery/projects/bb-folientechnik.jpg" title="Web-Design - bb-folientechnik.de"></a>
<a href="gallery/projects/rabbithome_website.jpg" title="Web-Design - rabbithome.de"></a>
</div>
<!-- blueimp Gallery lightbox -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev"></a>
<a class="next"></a>
<a class="play-pause"></a>
</div><!-- /blueimp Gallery lightbox -->
<div class="gallery container-fluid">
<div class="row gallery-content">
</div>
</div>
<!-- /Bildergallerie -->
<!--
<div class="clients container-fluid">
<div class="row clients-content">
<h3 id="clients">Kunden</h3>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail-clients">
<a href="http://www.bb-folientechnik.de" target="_blank"><img src="img/bb_logo.png" class="img-responsive first-img" alt="BB-FOLIENTECHNIK"></a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail-clients">
<a href="http://www.stadtwerkhassfurt.de" target="_blank"><img src="img/stw_logo.png" class="img-responsive" alt="Stadtwerk Hassfurt GmbH"></a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail-clients">
<a href="http://www.rzhas.de" target="_blank"><img src="img/rzhas_logo.png" class="img-responsive" alt="Rechenzentrum Hassfurt"></a>
</div>
</div>
</div>
</div>
</div>
-->
<!-- Kontakt-->
<div class="contact container-fluid">
<div class="row contact-content">
<h3 id="contact">Kontakt</h3>
<div class="col-md-12 adr">
<a href="http://www.zoesch.net" target="_blank"><img class="zlogo" src="img/Zoesch_Logo_black.png"><h4>ZOESCH.ART</h4></a>
<table>
<tr>
<td class="first"><i class="fa fa-user"></i></td>
<td><a href="http://www.zoesch.de" target="_blank">Felix Zösch</a></td>
</tr>
<tr>
<td class="first"><i class="fa fa-desktop"></i></td>
<td><a href="http://www.zoesch.de">www.zoesch.de</a></td>
</tr>
<tr>
<td class="first"><i class="fa fa-envelope-o"></i></td>
<td><a href="mailto:info@zoesch.de">info@zoesch.de</a></td>
</tr>
</table>
</div>
</div>
</div><!-- /Kontakt -->
<!-- Dialogboxen Impressum & Datenschutz -->
<div id="impressum_dialog"></div>
<div id="datenschutz_dialog"></div>
<!-- Footer -->
<footer>
<div class="footer1">
<div class="container foot1">
<div class="row">
<div class="col-md-6 col-xs-6 foot1-left">
<div class="blzk"><a role="button" class="btn btn-primary btn-lg blue-button" href="http://blitzkiste.net">Zur Blitzkiste</a></div>
</div>
<div class="col-md-6 col-xs-6 foot1-right">
<a href="https://www.xing.com/profile/Felix_Zoesch/" target="_blank"><i class="fa fa-xing-square"></i></a>
<a href="https://www.linkedin.com/profile/view?id=406370374" target="_blank"><i class="fa fa-linkedin-square"></i></a>
<a href="https://www.facebook.com/blitzkiste" target="_blank"><i class="fa fa-facebook-square"></i></a>
<a href="https://instagram.com/blitzkiste_net" target="_blank"><i class="fa fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="footer2">
<div class="container foot2">
<div class="row">
<div class="col-md-4 col-xs-4 foot2-left">
<a class="imp_dialog" href="impressum.html">Impressum</a> |
<a class="daten_dialog" href="datenschutz.html">Datenschutz</a>
</div>
<div class="col-md-8 col-xs-8 foot2-right">
<p>Handcrafted with <i class="fa fa-heart fa-fw"></i> | © 2015-2022 ZOESCH.ART</p>
</div>
</div>
</div><!-- /container -->
</div>
</footer>
<!-- /Footer -->
<a href="#0" class="cd-top">Top</a>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/blueimp-gallery.js"></script>
<script src="js/formControl.js"></script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
</script>
<script>
$(function() {
$("#impressum_dialog").dialog({
autoOpen: false,
modal: true,
width: 350,
height: 500,
resizable: false,
draggable: false,
show: { effect: "clip", direction: "vertical", duration: 600},
hide: { effect: "clip", direction: "vertical", duration: 600 },
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$(".imp_dialog").on("click", function(e) {
e.preventDefault();
$("#impressum_dialog").html("");
$("#impressum_dialog").dialog("option", "title", "Lädt...").dialog("open");
$("#impressum_dialog").load(this.href, function() {
$(this).dialog("option", "title", $(this).find("h1").text());
$(this).find("h1").remove();
});
});
});
</script>
<script>
$(function() {
$("#datenschutz_dialog").dialog({
autoOpen: false,
modal: true,
width: 350,
height: 500,
resizable: false,
draggable: false,
show: { effect: "clip", direction: "vertical", duration: 600},
hide: { effect: "clip", direction: "vertical", duration: 600 },
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$(".daten_dialog").on("click", function(e) {
e.preventDefault();
$("#datenschutz_dialog").html("");
$("#datenschutz_dialog").dialog("option", "title", "Lädt...").dialog("open");
$("#datenschutz_dialog").load(this.href, function() {
$(this).dialog("option", "title", $(this).find("h1").text());
$(this).find("h1").remove();
});
});
});
</script>
</body>
</html>