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

Zwischenstand 1354

Browse source
This commit is contained in:
astosic 2025-07-31 13:54:18 +02:00
parent 9ade80d024
commit ba53804650
1 changed files with 17 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,114 +1,21 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title mit GIF</title>
<style>
.page-title {
position: relative;
padding: 80px 0 60px;
background: white;
overflow: hidden;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
<section class="page-title gif-background" style="position: relative; padding: 64px 0 40px;">
.gif-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/images/hero-wave.gif'); /* Hier deine GIF-URL einfügen */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.15; /* Macht das GIF dezent sichtbar */
z-index: 1;
}
<!-- Transparenter Overlay für bessere Lesbarkeit -->
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4); z-index: 1;"></div>
.container {
position: relative;
z-index: 3;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.title-custom {
color: #333;
font-size: 3.5rem;
font-weight: 700;
margin: 0 0 20px 0;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
animation: fadeInUp 1s ease-out;
}
.subtitle-custom {
color: #666;
font-size: 1.4rem;
font-weight: 400;
margin: 0;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
animation: fadeInUp 1s ease-out 0.3s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.title-custom {
font-size: 2.5rem;
}
.subtitle-custom {
font-size: 1.2rem;
}
.page-title {
padding: 60px 0 40px;
}
}
@media (max-width: 480px) {
.title-custom {
font-size: 2rem;
}
.subtitle-custom {
font-size: 1rem;
}
}
</style>
</head>
<body>
<section class="page-title gif-background">
<div class="container">
<div class="container" style="position: relative; z-index: 2;">
<div class="row">
<div class="col-md-12">
<div class="services-title">
<h1 class="title-custom">Dein Seitentitel</h1>
</div>
<div class="services-description">
<h2 class="subtitle-custom">Deine Beschreibung hier</h2>
</div>
<div class="col-md-12 text-center">
<h1 style="color: white; font-weight: 600; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin-bottom: 0;">
{{ .Title }}
</h1>
{{ with .Params.description }}
<h2 style="color: white; font-weight: 400; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); margin-top: 0;">
{{ . | markdownify }}
</h2>
{{ end }}
</div>
</div>
</div>
</section>
</body>
</html>