forked from markus/AMPERION_Webpage
layouts/_default/index1.html aktualisiert
This commit is contained in:
parent
46247f3a8d
commit
2685e9763d
1 changed files with 0 additions and 0 deletions
|
|
@ -1,280 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<header>
|
||||
<!-- banner -->
|
||||
{{ with .Params.banner }}
|
||||
{{ if .enable }}
|
||||
<section class="slider {{ if .bg_overlay }}overly{{ end }}" style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Scroll-Button unten -->
|
||||
<div class="scrolldown" style="position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%);">
|
||||
<a href="#about" class="btn btn-secondary" style="cursor: pointer;">
|
||||
<div class="chevrons">
|
||||
<div class='chevrondown'></div>
|
||||
<div class='chevrondown'></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /banner -->
|
||||
</header>
|
||||
|
||||
<!-- about -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section id="about" class="about section"> <!-- Add id="about" here -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="block">
|
||||
<div class="section-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .description }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
</div>
|
||||
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 col-sm-12">
|
||||
<div class="block">
|
||||
<img src="{{ .image | relURL }}" class="img-responsive" alt="Img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /about -->
|
||||
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="about section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="about-img">
|
||||
<img class="img-responsive" src="{{ .image | relURL }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{{ with .title }}<h2 class="mt-40">{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a href="{{ .link | relURL }}" class="btn btn-small mt-20">{{ .label }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row counter-box text-center mt-50">
|
||||
{{ range .funfacts }}
|
||||
<div class="col-md-2">
|
||||
<div class="counter-item">
|
||||
{{ with .icon }}<i class="{{ . }}"></i>{{ end }}
|
||||
{{ with .count }}<h4 class="count" data-count="{{ . }}">0</h4>{{ end }}
|
||||
{{ with .name }}<span>{{ . }}</span>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="text-and-image-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- Bild auf der linken Seite -->
|
||||
<div class="image-section">
|
||||
<img src="images/module_reflection_2.webp" alt="Bildbeschreibung" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- Text auf der rechten Seite -->
|
||||
<div class="text-section" style="max-width: 100%;">
|
||||
<h2>Unser Angebot</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
|
||||
</div>
|
||||
<!-- Bild auf der linken Seite -->
|
||||
<div class="image-section">
|
||||
<img src="images/module_reflection_2.webp" alt="Bildbeschreibung" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- Text auf der rechten Seite -->
|
||||
<div class="text-section" style="max-width: 100%;">
|
||||
<h2>Unser Angebot</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- portfolio -->
|
||||
{{ with .Params.portfolio }}
|
||||
{{ if .enable }}
|
||||
<section class="feature bg-2" style="background-image: url('{{ .bg_image | relURL }}')">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-6">
|
||||
{{ with .title }}<h2 class="section-subtitle">{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a href="{{ .link | relLangURL }}" class="btn btn-view-works">{{ .label }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /portfolio -->
|
||||
|
||||
<!-- service -->
|
||||
{{ if .Params.service.enable }}
|
||||
{{ partial "service.html" . }}
|
||||
{{ end }}
|
||||
<!-- /service -->
|
||||
|
||||
<!-- call to action -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
<!-- /call to action -->
|
||||
|
||||
<!-- funfacts -->
|
||||
{{ with .Params.funfacts }}
|
||||
{{ if .enable }}
|
||||
<section class="testimonial">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="section-title text-center">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .description }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="block">
|
||||
<ul class="counter-box clearfix">
|
||||
{{ range .funfact_item }}
|
||||
<li class="counter-item">
|
||||
<!-- Anstelle eines Icons, das Bild einbinden -->
|
||||
<img src="{{ .image | relURL }}" alt="{{ .name }}" style="width: 50px; height: auto;"> <!-- Stil nach Bedarf anpassen -->
|
||||
<h4 class="count" data-count="{{ .count }}">0</h4>
|
||||
<span>{{ .name | markdownify }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 col-md-offset-1">
|
||||
<div class="testimonial-carousel text-center">
|
||||
<div class="testimonial-slider owl-carousel">
|
||||
{{ range .testimonial_slider }}
|
||||
<div>
|
||||
|
||||
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
|
||||
<div class="user">
|
||||
<img src="{{ .image | relURL }}" alt="client">
|
||||
<p><span>{{ .name | markdownify }}</span> {{ .designation | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<script>
|
||||
const canvas = document.getElementById('sinusCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const wave = {
|
||||
y: canvas.height / 2,
|
||||
length: 0.004,
|
||||
amplitude: 160,
|
||||
amplitudeVariation: 60,
|
||||
frequency: 0.007
|
||||
};
|
||||
|
||||
let increment = wave.frequency;
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Setzt den Hintergrundfarbe, um den Kontrast zu erhöhen und die weiße Welle sichtbar zu machen
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; // Leichter Trail-Effekt mit dunklem Hintergrund
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-330, wave.y);
|
||||
|
||||
ctx.lineWidth = 1 + Math.abs(Math.sin(increment) * 10); // Dynamische Anpassung der Linienstärke
|
||||
|
||||
for (let i = 0; i < canvas.width; i++) {
|
||||
ctx.lineTo(
|
||||
i,
|
||||
wave.y +
|
||||
Math.sin(i * wave.length + increment) *
|
||||
wave.amplitude *
|
||||
Math.sin(increment)
|
||||
);
|
||||
}
|
||||
|
||||
ctx.strokeStyle = 'white'; // Stellt die Linienfarbe auf Weiß ein
|
||||
|
||||
ctx.stroke();
|
||||
increment += wave.frequency;
|
||||
}
|
||||
|
||||
animate();
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var scrollDownButton = document.querySelector('.scroll-down-button');
|
||||
scrollDownButton.addEventListener('click', function() {
|
||||
document.querySelector('#about').scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{{ end }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue