forked from markus/AMPERION_Webpage
Update: Abschluss 29.07.2025
This commit is contained in:
Alexander-Stosic
parent
0db3bb9207
commit
4f1e5eddac
13 changed files with 698 additions and 760 deletions
|
|
@ -2,48 +2,76 @@
|
|||
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
<!-- Intro Section: Wir sind AMPERION -->
|
||||
<!-- Intro + Mission/Vision Section -->
|
||||
{{ with .Params.intro_section }}
|
||||
{{ if .enable }}
|
||||
<section id="about-intro" class="section py-5">
|
||||
<div class="my-container">
|
||||
|
||||
<!-- Zentrale Unterüberschrift mit reduziertem Abstand -->
|
||||
<div class="text-center" style="margin-top: -25px; margin-bottom: 20px;">
|
||||
<h3 class="services-description" style="margin-top: 0; font-weight: 400;">
|
||||
Technik mit Verantwortung. Planung mit Weitblick.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center">
|
||||
|
||||
<!-- TEXT (links, mobil oben) -->
|
||||
<div class="col-md-6 col-sm-12 text-left">
|
||||
<div class="content">
|
||||
<div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);">
|
||||
|
||||
<!-- ROW 1: TEXT + BILD -->
|
||||
<div class="row align-items-center gx-5 gy-4 mb-5">
|
||||
|
||||
<!-- TEXT -->
|
||||
<div class="col-lg-6 order-2 order-lg-1 text-left">
|
||||
<div class="intro-text px-2 px-md-4" data-aos="fade-up" data-aos-delay="100">
|
||||
{{ .text | markdownify }}
|
||||
</div>
|
||||
|
||||
<!-- Visual Tags -->
|
||||
<div class="mb-4 mt-3" data-aos="fade-up" data-aos-delay="200">
|
||||
{{ $icons := dict "Unabhängig" "✅" "Technisch fundiert" "⚡" "Zukunftsorientiert" "🌍" }}
|
||||
{{ range .tags }}
|
||||
<span class="badge rounded-pill me-2" style="font-size:1.5rem; padding:0.45em 0.9em; background:#006464; border-radius:999px;">
|
||||
{{ index $icons . }} {{ . }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BILD (rechts, mobil unten) -->
|
||||
<div class="col-md-6 col-sm-12 text-center">
|
||||
<!-- BILD -->
|
||||
<div class="col-lg-6 order-1 order-lg-2 d-flex justify-content-center" data-aos="zoom-out" data-aos-delay="200">
|
||||
<img
|
||||
src="{{ .image | relURL }}"
|
||||
alt="AMPERION Intro"
|
||||
class="img-responsive"
|
||||
style="max-width:420px; width:100%; height:auto; margin:0 auto;">
|
||||
alt="AMPERION – Erneuerbare Energie"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="img-fluid"
|
||||
style="width:100%; max-width:600px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08);">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ROW 2: MISSION / VISION / ZIEL -->
|
||||
{{ with $.Params.mission_vision }}
|
||||
{{ if .enable }}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="tabCommon">
|
||||
<ul class="nav nav-tabs">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
||||
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="tab-content pt-3">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
|
||||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
|
||||
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
|
||||
<div class="container text-center mb-5">
|
||||
|
|
@ -93,34 +121,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mission, Vision, Ziel -->
|
||||
<div class="container py-5" style="padding-top: 6rem;">
|
||||
<div class="row">
|
||||
{{ with .Params.mission_vision }}
|
||||
{{ if .enable }}
|
||||
<div class="col-md-12">
|
||||
<div class="tabCommon">
|
||||
<ul class="nav nav-tabs">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
||||
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
|
||||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section (Gründerteam) -->
|
||||
{{ with .Params.about }}
|
||||
|
|
|
|||
|
|
@ -1,180 +1,117 @@
|
|||
{{ define "main" }}
|
||||
<header id="mainHeader">
|
||||
|
||||
|
||||
{{ with .Params.banner }}
|
||||
{{ if .enable }}
|
||||
<section
|
||||
class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
|
||||
style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;"
|
||||
>
|
||||
<div class="my-container" style="position: relative; z-index: 2;">
|
||||
<!-- Logo-Container mit 2 Frames (40% / 60%), 10% Rand links & rechts -->
|
||||
<div class="logo-container">
|
||||
<!-- Frame 1 -->
|
||||
<div class="frame1">
|
||||
<img
|
||||
src="{{ .logo_image1 | relURL }}"
|
||||
alt="Logo Frame 1"
|
||||
class="banner-logo"
|
||||
>
|
||||
</div>
|
||||
<!-- Frame 2 -->
|
||||
<div class="frame2">
|
||||
<img
|
||||
src="{{ .logo_image2 | relURL }}"
|
||||
alt="Logo Frame 2"
|
||||
class="banner-logo"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{{ if .enable }}
|
||||
<!-- HERO / SLIDER -->
|
||||
<section class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
|
||||
style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
|
||||
<div class="my-container" style="position: relative; z-index: 2;">
|
||||
|
||||
<!-- *Logo-Zeile mit zwei Frames* -->
|
||||
<div class="logo-container">
|
||||
<div class="frame1">
|
||||
<img src="{{ .logo_image1 | relURL }}" alt="Logo Frame 1" class="banner-logo">
|
||||
</div>
|
||||
<div class="frame2">
|
||||
<img src="{{ .logo_image2 | relURL }}" alt="Logo Frame 2" class="banner-logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- *Haupttitel + Button* -->
|
||||
<div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box;">
|
||||
{{ with .title }}
|
||||
<h1 class="title-custom title-custom-margin fade-in-title">{{ . | markdownify }}</h1>
|
||||
{{ end }}
|
||||
|
||||
<!-- Titel / Content / Button -->
|
||||
<div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box; overflow-wrap: break-word;">
|
||||
{{ with .title }}
|
||||
<h1 class="title-custom title-custom-margin fade-in-title">
|
||||
{{ . | markdownify }}
|
||||
</h1>
|
||||
{{ end }}
|
||||
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<div
|
||||
class='scrolldown'
|
||||
onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
|
||||
style="--color: rgb(0, 0, 0); cursor: pointer;"
|
||||
>
|
||||
<div class="chevrons">
|
||||
<div class='chevrondown'></div>
|
||||
<div class='chevrondown'></div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<div class="scrolldown" onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
|
||||
style="--color: rgb(0, 0, 0); cursor: pointer;">
|
||||
<div class="chevrons">
|
||||
<div class='chevrondown'></div>
|
||||
<div class='chevrondown'></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Scroll/Hide Header -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var scrolldown = document.querySelector('.scrolldown');
|
||||
scrolldown.addEventListener('click', function() {
|
||||
scrolldown?.addEventListener('click', function () {
|
||||
const serviceSection = document.getElementById('service');
|
||||
const offset = 100; // Der Offset in Pixeln
|
||||
|
||||
// Berechne die Position, zu der gescrollt werden soll
|
||||
const offset = 100;
|
||||
const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth' // Sanftes Scrollen
|
||||
});
|
||||
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", function() {
|
||||
window.addEventListener("scroll", function () {
|
||||
if (window.scrollY > 100) {
|
||||
scrolldown.classList.add('hide');
|
||||
scrolldown?.classList.add('hide');
|
||||
} else {
|
||||
scrolldown.classList.remove('hide');
|
||||
scrolldown?.classList.remove('hide');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var header = document.getElementById('mainHeader');
|
||||
var lastScrollPosition = window.scrollY;
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
window.addEventListener('scroll', function () {
|
||||
var currentScrollPosition = window.scrollY;
|
||||
|
||||
// Wenn der Benutzer nach unten scrollt, verstecke den Header
|
||||
if (currentScrollPosition > lastScrollPosition) {
|
||||
header.style.top = '-100vh'; // Passe diesen Wert an die Höhe deines Headers an
|
||||
}
|
||||
// Wenn der Benutzer nach oben scrollt, zeige den Header wieder an
|
||||
else {
|
||||
header.style.top = '0';
|
||||
}
|
||||
|
||||
// Wenn der Benutzer ganz nach oben scrollt, zeige den Header an
|
||||
if (currentScrollPosition === 0) {
|
||||
header.style.top = '0';
|
||||
}
|
||||
|
||||
header.style.top = (currentScrollPosition > lastScrollPosition) ? '-100vh' : '0';
|
||||
if (currentScrollPosition === 0) header.style.top = '0';
|
||||
lastScrollPosition = currentScrollPosition;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div style="height: 200px;"></div>
|
||||
|
||||
<!-- whyamperion -->
|
||||
{{ if .Params.whyamperion.enable }}
|
||||
{{ partial "whyamperion.html" . }}
|
||||
{{ end }}
|
||||
<!-- /whyamperion -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- services -->
|
||||
{{ with site.GetPage "/service" }}
|
||||
<!-- WHY AMPERION (Kompakte Version) -->
|
||||
{{ with site.GetPage "/whyamperion" }}
|
||||
{{ with .Params.service }}
|
||||
<section id="service" class="service">
|
||||
<!-- container-fluid + my-container => um beides kombinieren zu können -->
|
||||
<div class="container-fluid my-container">
|
||||
<!-- Block mit Titel und Beschreibung -->
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
<section class="whyamperion section">
|
||||
<div class="container my-container">
|
||||
<div class="row">
|
||||
<div class="section-title text-center">
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
</div>
|
||||
<!-- CSS-Grid/Flexbox-Bereich mit den Bildern -->
|
||||
<div class="service-grid">
|
||||
{{ range first 3 .service_item }} <!-- Hier nur die ersten 3 Elemente nehmen -->
|
||||
<div class="service-item-fixed">
|
||||
<div class="zoom-wrap">
|
||||
<a href="{{ .link | relURL }}">
|
||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
||||
<div class="overlay-text">
|
||||
{{ .name }}
|
||||
</div>
|
||||
<div class="overlay"></div>
|
||||
</a>
|
||||
<div class="row">
|
||||
{{ range .service_item }}
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="service-item text-center">
|
||||
<i class="{{ .icon }}" aria-hidden="true" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
|
||||
<h3>{{ .name | markdownify }}</h3>
|
||||
<p>{{ .content | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div><!-- /service-grid -->
|
||||
</div><!-- /container-fluid.my-container -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /services -->
|
||||
|
||||
<!-- focustopics -->
|
||||
{{ with site.GetPage "/focustopic" }} <!-- Hier den Pfad zur service2.md anpassen -->
|
||||
<!-- SERVICES -->
|
||||
{{ with site.GetPage "/service" }}
|
||||
{{ with .Params.service }}
|
||||
<section id="service" class="service">
|
||||
<div class="container-fluid my-container">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
<div class="service-grid">
|
||||
{{ range first 3 .service_item }}
|
||||
|
|
@ -182,9 +119,7 @@
|
|||
<div class="zoom-wrap">
|
||||
<a href="{{ .link | relURL }}">
|
||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
||||
<div class="overlay-text">
|
||||
{{ .name }}
|
||||
</div>
|
||||
<div class="overlay-text">{{ .name }}</div>
|
||||
<div class="overlay"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -195,41 +130,104 @@
|
|||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /focustopics -->
|
||||
|
||||
<div style="height: 100px;"></div>
|
||||
|
||||
<!-- why amperion -->
|
||||
{{ with site.GetPage "/why-amperion" }}
|
||||
<section class="services-section">
|
||||
<h2 class="services-title">{{ .Params.service.title | default "OUR SERVICES" }}</h2>
|
||||
<h3 class="services-description">{{ .Params.service.description | default "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts." | markdownify }}</h3>
|
||||
<div class="services-grid">
|
||||
{{ range first 6 .Params.featured_service.service_item }}
|
||||
<div class="service-card">
|
||||
<img src="{{ .image | relURL }}" alt="{{ .name }}" class="service-icon">
|
||||
<h3 class="service-card-title">{{ .name }}</h3>
|
||||
<p class="service-card-description"><strong>{{ .content1 | markdownify }}</strong> {{ .content | markdownify }}</p>
|
||||
<!-- FOCUSTOPICS -->
|
||||
{{ with site.GetPage "/focustopic" }}
|
||||
{{ with .Params.service }}
|
||||
<section id="focustopic" class="service">
|
||||
<div class="container-fluid my-container">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
<div class="service-grid">
|
||||
{{ range first 3 .service_item }}
|
||||
<div class="service-item-fixed">
|
||||
<div class="zoom-wrap">
|
||||
<a href="{{ .link | relURL }}">
|
||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
||||
<div class="overlay-text">{{ .name }}</div>
|
||||
<div class="overlay"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<!-- /why amperion -->
|
||||
|
||||
<div style="height: 100px;"></div>
|
||||
|
||||
|
||||
|
||||
{{ if .Params.contact.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<!-- WHY AMPERION – kompakt & detailliert (Hardcoded Version) -->
|
||||
<section class="whyamperion section" style="background-color:#f3f3f3">
|
||||
<div class="container my-container">
|
||||
|
||||
<!-- Titelblock – eigener Wrapper statt .section-title -->
|
||||
<div class="row">
|
||||
<div class="why-title text-center">
|
||||
<h1>Darum AMPERION</h1>
|
||||
<h2 class="why-sub"><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karten -->
|
||||
<div class="why-grid mt-5">
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Technische Planungskompetenz</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient & zukunftssicher.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Intelligente Energiesysteme</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Persönliche Betreuung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Reibungslose Projektabwicklung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Vernetzte Energiezukunft</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Präzise Systemplanung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- about -->
|
||||
<!-- ABOUT (unverändert) -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section id="about" class="about section">
|
||||
|
|
@ -237,21 +235,20 @@
|
|||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-sm-12">
|
||||
<div class="text-left">
|
||||
{{ with .content }}{{ . | markdownify }}{{ end }}</div>
|
||||
<div class="hover-link">
|
||||
{{ with .link_text }}
|
||||
<a href="{{ "/about/" | relURL }}">{{ . }}</a>
|
||||
{{ end }}
|
||||
{{ with .content }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<div class="hover-link">
|
||||
{{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
|
|
@ -264,17 +261,13 @@
|
|||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /about -->
|
||||
|
||||
|
||||
<div style="height: 100px;"></div>
|
||||
<!-- call to action -->
|
||||
<!-- CALL TO ACTION -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
<!-- /call to action -->
|
||||
<div style="height: 100px;"></div>
|
||||
<!-- facts -->
|
||||
|
||||
<!-- FACTS -->
|
||||
{{ with .Params.facts }}
|
||||
{{ if .enable }}
|
||||
<section class="facts">
|
||||
|
|
@ -293,59 +286,4 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<style>
|
||||
.testimonial-item .images-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px; /* Abstand zwischen den Bildern */
|
||||
}
|
||||
|
||||
.testimonial-item .testimonial-image {
|
||||
width: 10px; /* Anpassen der Breite nach Bedarf */
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div style="height: 100px;"></div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var scrollDownButton = document.querySelector('.scroll-down-button');
|
||||
scrollDownButton.addEventListener('click', function() {
|
||||
document.querySelector('#about').scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var scrolled = false;
|
||||
var initialScrollListener = function() {
|
||||
if (!scrolled) {
|
||||
window.removeEventListener('scroll', initialScrollListener);
|
||||
document.getElementById('welcome').scrollIntoView({ behavior: 'smooth' });
|
||||
scrolled = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', initialScrollListener);
|
||||
});
|
||||
|
||||
document.addEventListener("scroll", function() {
|
||||
var scrolldown = document.querySelector('.scrolldown');
|
||||
if (window.scrollY > 100) { // Adjust this value based on when you want to hide the icon
|
||||
scrolldown.classList.add('hide');
|
||||
} else {
|
||||
scrolldown.classList.remove('hide');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,3 +15,11 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- AOS JS -->
|
||||
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -66,4 +66,6 @@
|
|||
|
||||
{{ template "_internal/opengraph.html" . }}
|
||||
|
||||
<!-- AOS Animation CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
<section class="page-title" style="background-image: url('{{ .Params.bg_image | relURL }}');">
|
||||
<section class="page-title"
|
||||
style="background-image: url('{{ .Params.bg_image | relURL }}'); padding: 28px 0 12px;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="block">
|
||||
<h2 class="custom-title">{{ .Title }}</h2>
|
||||
{{ with .Params.description }}
|
||||
<h3>{{ . }}</h3>
|
||||
{{ end }}
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="services-title">
|
||||
<h2 style="margin:0 0 6px 0; font-weight:600;">{{ .Title }}</h2>
|
||||
</div>
|
||||
{{ with .Params.description }}
|
||||
<div class="services-description">
|
||||
<h3 style="margin:0; font-weight:400;">{{ . | markdownify }}</h3>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
{{ with site.GetPage "/whyamperion" }}
|
||||
{{ with .Params.service }}
|
||||
<section class="whyamperion">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="section-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .description }}<p>{{ . | markdownify }}</p>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ range .service_item }}
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="service-item">
|
||||
<i class="{{ .icon }}"></i>
|
||||
<h4>{{ .name | markdownify }}</h4>
|
||||
<p>{{ .content | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue