markus/AMPERION_Webpage
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Index + Über uns

Browse source
This commit is contained in:
astosic 2025-08-11 18:55:52 +02:00
parent 0533ad4ea3
commit 6cd592a3ff
37 changed files with 1296 additions and 1705 deletions
Download patch file Download diff file Expand all files Collapse all files

65
layouts/partials/page-title.html
View file

@ -1,12 +1,34 @@
<section class="page-title gif-background">
<!-- page-title.html - Optimierte Version mit Wiederverwendung -->
<section class="page-title">
<!-- Animierter Grid-Hintergrund (nutzt CTA-Klassen) -->
<div class="cta__bg page-title__bg" aria-hidden="true">
<!-- Grid Pattern -->
<div class="cta__grid"></div>
<!-- Energie-Linien (nur wenige für dezenten Effekt) -->
<div class="cta__energy-lines">
<!-- Nur 2 horizontale Linien -->
<div class="energy-line-h energy-line-h1"></div>
<div class="energy-line-h energy-line-h3"></div>
<!-- Nur 2 vertikale Linien -->
<div class="energy-line-v energy-line-v1"></div>
<div class="energy-line-v energy-line-v3"></div>
<!-- Nur 3 Knoten -->
<div class="energy-node energy-node1"></div>
<div class="energy-node energy-node3"></div>
<div class="energy-node energy-node5"></div>
</div>
</div>
<!-- Content -->
<div class="container1">
<div class="row">
<div class="col-md-12 text-center">
<div class="servie-title fade-in">
<div class="service-title fade-in">
<h1>{{ .Title }}</h1>
</div>
{{ with .Params.description }}
</div>
<p class="page-title-desc">{{ . }}</p>
{{ end }}
</div>
</div>
@ -14,29 +36,22 @@
</section>
<style>
/* Page Title spezifische Styles */
.page-title{position:relative;padding:80px 0;background:#fff;overflow:hidden;}
.container1{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 20px;}
.service-title h1{color:#046e6e;font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;margin:0;}
.page-title-desc{color:#666;font-size:1.25rem;margin:1rem auto 0;max-width:700px;}
.fade-in{animation:fadeInUp 1s ease-out;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0)}}
/* Variablen – werden von CTA-CSS verwendet */
.page-title{--cta-primary:#046e6e;--cta-accent:#F5A623;}
.fade-in {
animation: fadeInUp 1s ease-out
}
.container1 {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
/* Mobile: noch reduzierter */
@media (max-width:768px){
.page-title .energy-line-h3,
.page-title .energy-line-v3,
.page-title .energy-node5{display:none;}
}
</style>