astosic/AMPERION_Webpage
1
0
Fork 0
forked from markus/AMPERION_Webpage
Code Pull requests Activity

juli25

Browse source
This commit is contained in:
Markus 2025-07-23 16:46:21 +02:00
parent 861bb178f1
commit 9df489d983
33 changed files with 1067 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

177
layouts/index.html
View file

@ -29,6 +29,8 @@
</div>
</div>
<!-- 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 }}
@ -62,38 +64,59 @@
<script>
document.addEventListener("scroll", function() {
document.addEventListener('DOMContentLoaded', 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');
}
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 targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({
top: targetPosition,
behavior: 'smooth' // Sanftes Scrollen
});
});
window.addEventListener("scroll", function() {
if (window.scrollY > 100) {
scrolldown.classList.add('hide');
} else {
scrolldown.classList.remove('hide');
}
});
});
</script>
<div style="height: 200px;"></div>
<!-- whyamperion -->
{{ if .Params.whyamperion.enable }}
{{ partial "whyamperion.html" . }}
{{ end }}
<!-- /whyamperion -->
<!-- service -->
{{ with site.GetPage "/service" }}
{{ 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="service-header">
<div class="services-title">
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
</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 9 .service_item }}
{{ 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 }}">
@ -107,83 +130,77 @@
</div>
{{ end }}
</div><!-- /service-grid -->
</div><!-- /container-fluid.my-container -->
</section>
{{ end }}
{{ end }}
<!-- /service -->
<div style="height: 100px;"></div>
<!-- why-amperion -->
{{ with site.GetPage "/why-amperion" }}
<section id="why-amperion" class="why-amperion">
<div class="my-container">
<!-- Überschriften (zentriert) -->
<div class="section-title1 text-center">
{{ with .Params.icon }}
<img src="{{ . | relURL }}" alt="Icon" class="title-icon1">
{{ end }}
{{ with .Title }}
<h2 class="why-title1">{{ . | markdownify }}</h2>
<!-- service -->
{{ with site.GetPage "/focustopic" }} <!-- Hier den Pfad zur service2.md anpassen -->
{{ with .Params.service }}
<section id="service" class="service">
<div class="container-fluid my-container">
<div class="services-title">
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
</div>
<div class="services-description">
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ 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>
{{ with .Params.subtitle }}
<h3 class="why-subtitle text-center">{{ . | markdownify }}</h3>
{{ end }}
<div style="height: 50px;"></div>
<div class="row align-items-center">
<!-- Linke Spalte: drei Themen-Blocks -->
<div class="col-md-4">
{{ range .Params.left_blocks }}
<div class="why-block text-right">
<div class="row icon-heading">
<div class="col-md-10">
<h4 class="text-right">{{ .heading | markdownify }}</h4>
</div>
<div class="col-md-2">
<img src="{{ .icon | relURL }}" alt="{{ .heading }}" class="why-icon1">
</div>
</div>
<p>{{ .content | markdownify }}</p>
</div>
{{ end }}
</div>
<!-- Mittlere Spalte: Logo -->
<div class="col-md-4 text-center">
<img src="{{ .Params.middle_image | relURL }}" alt="Amperion Logo" class="why-logo">
</div>
<!-- Rechte Spalte: drei Themen-Blocks -->
<div class="col-md-4 text-left">
{{ range .Params.right_blocks }}
<div class="why-block text-left">
<div class="row icon-heading">
<div class="col-md-2">
<img src="{{ .icon | relURL }}" alt="{{ .heading }}" class="why-icon1">
</div>
<div class="col-md-10">
<h4 class="text-left">{{ .heading | markdownify }}</h4>
</div>
</div>
<p>{{ .content | markdownify }}</p>
</div>
{{ end }}
</div>
</div> <!-- /row -->
</div> <!-- /my-container -->
</div>
</section>
{{ end }}
<!-- /why-amperion -->
{{ end }}
<!-- /service -->
<div style="height: 100px;"></div>
<!-- Include the new services section -->
{{ 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>
</div>
{{ end }}
</div>
</section>
{{ end }}
<div style="height: 100px;"></div>
{{ if .Params.contact.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- about -->
{{ with .Params.about }}
{{ if .enable }}
@ -191,10 +208,13 @@
<div class="my-container">
<div class="row">
<div class="col-12 text-center">
<div class="section-title">
<div class="services-title">
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
</div>
<div class="services-description">
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
</div>
<div style="height: 20px;"></div>
</div>
</div>
@ -296,9 +316,4 @@
</script>
{{ end }}