forked from markus/AMPERION_Webpage
new
This commit is contained in:
commit
1d8da2b6dd
824 changed files with 76366 additions and 0 deletions
299
layouts/index.html
Normal file
299
layouts/index.html
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
{{ define "main" }}
|
||||
<header>
|
||||
|
||||
|
||||
{{ 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("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>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- CSS-Grid/Flexbox-Bereich mit den Bildern -->
|
||||
<div class="service-grid">
|
||||
{{ range first 9 .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><!-- /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>
|
||||
{{ 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 -->
|
||||
</section>
|
||||
{{ end }}
|
||||
<!-- /why-amperion -->
|
||||
|
||||
<div style="height: 100px;"></div>
|
||||
|
||||
<!-- 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="section-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
</div>
|
||||
<div style="height: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-sm-12">
|
||||
<div class="block">
|
||||
{{ with .content }}{{ . | markdownify }}{{ 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 }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue