markus/AMPERION_Webpage
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update300820252359

Browse source
This commit is contained in:
astosic 2025-08-31 00:22:16 +02:00
parent af6021b9cf
commit 4055e3ae54
17 changed files with 293 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

32
layouts/_default/about.html
View file

@ -23,39 +23,38 @@
<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="200">
<div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
<video id="aboutVideo"
class="intro-video"
muted
loop
playsinline
preload="none"
poster='{{ "images/brand_poster.jpg" | relURL }}'>
<!-- Quellen werden per JS gesetzt -->
</video>
class="intro-video"
autoplay
muted
loop
playsinline
preload="none"
poster='{{ "images/brand_poster.jpg" | relURL }}'>
<!-- Quellen werden per JS gesetzt -->
</video>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const vid = document.getElementById("aboutVideo");
if (!vid) return;
const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
const srcMp4 = '{{ "images/Imagevideo_Short.mp4" | relURL }}';
const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
vid.innerHTML = `
<source src="${srcWebm}" type="video/webm">
<source src="${srcMp4}" type="video/mp4">
<source src="${srcWebm}" type="video/webm">
`;
vid.play().catch(() => {});
observer.disconnect();
}
});
}, { rootMargin: "200px" });
observer.observe(vid);
});
</script>
@ -142,7 +141,7 @@ document.addEventListener("DOMContentLoaded", () => {
{{ $step := 100 }}
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3">
<h4 class="service-card-title">Staatlich geprüft & konessioniert</h4>
<p class="service-card-description">
<strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
@ -150,7 +149,7 @@ document.addEventListener("DOMContentLoaded", () => {
</article>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3">
<h4 class="service-card-title">Erfahrung &amp; Innovation</h4>
<p class="service-card-description">
<strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
@ -158,15 +157,16 @@ document.addEventListener("DOMContentLoaded", () => {
</article>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3">
<h4 class="service-card-title">Ganzheitlicher Ansatz</h4>
<p class="service-card-description">
<strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
</p>
</article>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3">
<h4 class="service-card-title">Unabhängige Beratung</h4>
<p class="service-card-description">
<strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.