fte-Homepage/public/products/index.html

<!DOCTYPE html>
<html lang="ja">

<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8">
<title>DJ &amp; Eventservice Fabian Ecke | Verleih</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href='/apple-touch-icon.png'>
<link rel="icon" type="image/png" sizes="32x32" href='/favicon-32x32.png'>
<link rel="icon" type="image/png" sizes="16x16" href='/favicon-16x16.png'>
<link rel="manifest" href='/site.webmanifest'>

<link href='/css/fa6.min.css' rel="stylesheet" type="text/css">



<link rel="stylesheet" href="/css/style.css">


<link href='/css/style.min.css' rel="stylesheet" type="text/css">
<link rel="stylesheet" href='/css/custom.css'>

<script>
    var _paq = window._paq = window._paq || [];
     
    _paq.push(["disableCampaignParameters"]);
    _paq.push(["setDoNotTrack", true]);
    _paq.push(["disableCookies"]);
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
      var u="//matomo.ftecke.de/";
      _paq.push(['setTrackerUrl', u+'matomo.php']);
      _paq.push(['setSiteId', '3']);
      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
  </script>
  
  
    
</head>

<body class="flex flex-col min-h-screen">
  <main class="flex-grow"><header>
    <div id="overlay">
        <ul class="text-center list-none text-white text-3xl">
            
            <li class="p-2">
                <a href="/">
                    <span>Startseite</span>
                </a>
            </li>
            
            <li class="p-2">
                <a href="/blog/">
                    <span>Referenzen</span>
                </a>
            </li>
            
            <li class="p-2">
                <a href="/products/">
                    <span>Verleih</span>
                </a>
            </li>
            
            <li class="p-2">
                <a href="/about/">
                    <span>Über mich</span>
                </a>
            </li>
            
            <li class="p-2">
                <a href="/contact/">
                    <span>Kontakt</span>
                </a>
            </li>
            
        </ul>
    </div>
    <nav class="flex items-center justify-between flex-wrap bg-opacity-100 p-8">
        <div class="flex items-center flex-shrink-0 text-xl text-grey-900 mr-6">
            <a href="http://localhost:1313/"><img alt="FTE Logo"
                    class="h-14 mr-3" src="/img/logo/fte-logo.png"></a>
        </div>
        <div class="block lg:hidden">
            <div id="hamburgerbtn" class="flex cursor-pointer items-center w-14 h-10 py-2 rounded mopen">
                <span class="top"></span>
                <span class="middle"></span>
                <span class="bottom"></span>
            </div>
        </div>
        <div class="hidden w-full block flex-grow lg:flex lg:items-center lg:w-auto" id="mobileMenu">
            <div class="text-lg lg:flex-grow">
            </div>
            <div class="text-lg">
                
                <a href="/"
                    class="navbar-link duration-200 block mt-4 lg:inline-block lg:mt-0 text-black hover:opacity-60 mr-8">
                    Startseite
                </a>
                
                <a href="/blog/"
                    class="navbar-link duration-200 block mt-4 lg:inline-block lg:mt-0 text-black hover:opacity-60 mr-8">
                    Referenzen
                </a>
                
                <a href="/products/"
                    class="navbar-link duration-200 block mt-4 lg:inline-block lg:mt-0 text-black hover:opacity-60 mr-8">
                    Verleih
                </a>
                
                <a href="/about/"
                    class="navbar-link duration-200 block mt-4 lg:inline-block lg:mt-0 text-black hover:opacity-60 mr-8">
                    Über mich
                </a>
                
                <a href="/contact/"
                    class="navbar-link duration-200 block mt-4 lg:inline-block lg:mt-0 text-black hover:opacity-60 mr-8">
                    Kontakt
                </a>
                
            </div>
        </div>
    </nav>
</header>
<div class="scroll-top rounded-full">
      <span class="icon-keyboard_arrow_up text-2xl"></span>
    </div>
<div class="mx-auto my-10 max-w-6xl">
    <div class="mx-3 col-span-3 lg:col-span-2 px-2">
        <h1 class="title text-5xl mb-4 text-white-custom">Verleih</h1>
        <hr style="border-color: #00ad8e;">
        <br>
        <div class="content py-1"><p>Sie brauchen für Ihr Event noch ein wenig Ausstattung?
Hier werden Sie fündig!</p>
<p>Der Auf- und Abbauservice ist im Verleih mit inbegriffen.</p>
<br></div>
        <div class="grid grid-cols-1 md:grid-cols-2 mb-2 gap-2">
        
        <style media="screen">
  .title-product-summary{
    margin-bottom: 3%;
  }
  .description-product-summary{
    margin-top: 2%;
  }

  .product-image-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

 .product-image-custom img {
  width: 100%;
  height: 270px;
  overflow: hidden;
  }
</style>

<a href="http://localhost:1313/products/example/" class="transform hover:-translate-y-1 hover:shadow-md duration-500">
    <div class="summary border p-3 border-green-custom">
        <h2 class="text-3xl title-product-summary text-white-custom">
            Example Project
        </h2>
        <div class="product-image-custom">
          <img src="/img/products/test1/main.webp" alt="-product-image-">
        </div>
        <p class="description-product-summary text-white-custom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan dapibus purus, vel maximus erat facilisis vel.</p>
    </div>
</a>

        
        <style media="screen">
  .title-product-summary{
    margin-bottom: 3%;
  }
  .description-product-summary{
    margin-top: 2%;
  }

  .product-image-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

 .product-image-custom img {
  width: 100%;
  height: 270px;
  overflow: hidden;
  }
</style>

<a href="http://localhost:1313/products/example2/" class="transform hover:-translate-y-1 hover:shadow-md duration-500">
    <div class="summary border p-3 border-green-custom">
        <h2 class="text-3xl title-product-summary text-white-custom">
            Example Project 2
        </h2>
        <div class="product-image-custom">
          <img src="/img/products/test2/main.webp" alt="-product-image-">
        </div>
        <p class="description-product-summary text-white-custom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan dapibus purus, vel maximus erat facilisis vel.</p>
    </div>
</a>

        
        <style media="screen">
  .title-product-summary{
    margin-bottom: 3%;
  }
  .description-product-summary{
    margin-top: 2%;
  }

  .product-image-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

 .product-image-custom img {
  width: 100%;
  height: 270px;
  overflow: hidden;
  }
</style>

<a href="http://localhost:1313/products/example3/" class="transform hover:-translate-y-1 hover:shadow-md duration-500">
    <div class="summary border p-3 border-green-custom">
        <h2 class="text-3xl title-product-summary text-white-custom">
            Example Project 3
        </h2>
        <div class="product-image-custom">
          <img src="/img/products/test3/main.webp" alt="-product-image-">
        </div>
        <p class="description-product-summary text-white-custom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan dapibus purus, vel maximus erat facilisis vel.</p>
    </div>
</a>

        
        </div>
    </div>
</div>

  </main><footer class="bg-tlgray-100">
  
  <script src='/js/clipboard.min.js'></script>
  <script src='/js/highlight.min.js'></script>
  <script src='/js/highlightjs-line-numbers.min.js'></script>
  <script src='/js/sweetalert2.min.js'></script>
  <script>
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
    new ClipboardJS('.url');

    function OnClickURL() {
      Swal.fire({
        icon: 'success',
        title: 'Copied!',
        text: 'Copied the URL and title.'
      })
    }
  </script>
  
  <script>
    function toggleNav() {
      var hamburger = document.getElementById("hamburgerbtn");
      var overlay = document.getElementById("overlay");
      var body = document.body;

      hamburger.addEventListener("click", function () {
        overlay.classList.toggle("open");
        hamburger.classList.toggle("is-open");
        body.classList.toggle("scroll-lock");
      });
    }
    toggleNav();

    document.querySelector('.scroll-top').addEventListener('click', () => {
      document.documentElement.scrollTop = 0;
    });
  </script>
  
  <link href='/css/webfonts.min.css' rel="stylesheet" />
  
  <div class="flex items-center justify-between flex-wrap bg-darkergrey-custom p-8 text-white">
    <div class="items-center text-xl text-grey-900 mr-6">
      &copy; DJ &amp; Eventservice Fabian Ecke 2026 &nbsp; &nbsp; Alle Rechte Vorbehalten.
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto" id="mobileMenu">
      <div class="text-lg lg:flex-grow">
      </div>
      <div class="flex flex-row items-center text-lg">
        
        <a href="/impressum-datenschutzerklaerung" class="block mt-4 lg:inline-block lg:mt-0 text-gray-300 hover:text-white mr-8">
          
          Impressum &amp; Datenschutzerklärung
          
        </a>
        
      </div>
    </div>
  </div>
</footer>
</body>

</html>