forked from markus/AMPERION_Webpage
351 lines
9.8 KiB
HTML
351 lines
9.8 KiB
HTML
{{ 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>
|
|
|
|
|
|
|
|
<!-- 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 }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
{{ end }}
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var scrolldown = document.querySelector('.scrolldown');
|
|
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>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var header = document.getElementById('mainHeader');
|
|
var lastScrollPosition = window.scrollY;
|
|
|
|
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';
|
|
}
|
|
|
|
lastScrollPosition = currentScrollPosition;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<div style="height: 200px;"></div>
|
|
|
|
<!-- whyamperion -->
|
|
{{ if .Params.whyamperion.enable }}
|
|
{{ partial "whyamperion.html" . }}
|
|
{{ end }}
|
|
<!-- /whyamperion -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- services -->
|
|
{{ 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="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 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>
|
|
</div>
|
|
{{ end }}
|
|
</div><!-- /service-grid -->
|
|
</div><!-- /container-fluid.my-container -->
|
|
</section>
|
|
{{ end }}
|
|
{{ end }}
|
|
<!-- /services -->
|
|
|
|
<!-- focustopics -->
|
|
{{ 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>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
|
|
<!-- /why amperion -->
|
|
|
|
<div style="height: 100px;"></div>
|
|
|
|
|
|
|
|
{{ if .Params.contact.enable }}
|
|
{{ partial "cta.html" . }}
|
|
{{ end }}
|
|
|
|
|
|
|
|
|
|
<!-- about -->
|
|
{{ with .Params.about }}
|
|
{{ if .enable }}
|
|
<section id="about" class="about section">
|
|
<div class="my-container">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<div class="services-title">
|
|
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
|
</div>
|
|
<div class="services-description">
|
|
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ 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 }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-12">
|
|
<div class="block">
|
|
<img src="{{ .image | relURL }}" class="custom-image" alt="Img">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
{{ end }}
|
|
<!-- /about -->
|
|
|
|
|
|
<div style="height: 100px;"></div>
|
|
<!-- call to action -->
|
|
{{ if .Params.cta.enable }}
|
|
{{ partial "cta.html" . }}
|
|
{{ end }}
|
|
<!-- /call to action -->
|
|
<div style="height: 100px;"></div>
|
|
<!-- facts -->
|
|
{{ with .Params.facts }}
|
|
{{ if .enable }}
|
|
<section class="facts">
|
|
<div class="container">
|
|
<div class="row">
|
|
{{ range .fact_item }}
|
|
<div class="col-md-6">
|
|
<div class="fact-item text-center">
|
|
<img src="{{ .image | relURL }}" alt="{{ .name }}" class="fact-image">
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ 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 }}
|
|
|