forked from markus/AMPERION_Webpage
Update: Abschluss 29.07.2025
This commit is contained in:
Alexander-Stosic
parent
0db3bb9207
commit
4f1e5eddac
13 changed files with 698 additions and 760 deletions
|
|
@ -1,77 +1,95 @@
|
|||
// Fonts
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OpenSans-SemiboldItalic.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans Semibold';
|
||||
src: local('Open Sans Semibold'), local('OpenSansSemibold'), url('/static/fonts/OpenSans-Semibold.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Using Variables for Font Families
|
||||
$font-primary: 'Open Sans', sans-serif;
|
||||
$font-secondary: 'Open Sans Semibold', sans-serif;
|
||||
$color-heading-h2: #046e6e; // Türkis für h2
|
||||
// ===========================
|
||||
// TYPOGRAPHY – Schriftarten & Textstile
|
||||
// ===========================
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-family: $font-primary;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #222;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-secondary;
|
||||
font-weight: 400;
|
||||
// keine Farbe, Standardfarbe übernehmen
|
||||
// ---------------------------
|
||||
// Überschriften-Stile
|
||||
// ---------------------------
|
||||
|
||||
h1 {
|
||||
font-size: 3rem; // Größere Hauptüberschrift
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
color: #046e6e;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $font-secondary;
|
||||
font-size: 2rem; // Deutlich kleiner als H1
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: $color-heading-h2; // Nur h2 in Türkis
|
||||
font-size: $h2;
|
||||
|
||||
@include mobile {
|
||||
font-size: $h2-sm;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1;
|
||||
|
||||
@include tablet {
|
||||
font-size: $h1-md;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
font-size: $h2;
|
||||
}
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: $h2-md;
|
||||
}
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1rem;
|
||||
color: #222; // Normale Textfarbe
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $h3;
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
color: inherit; // wie Fließtext
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $h4;
|
||||
// ---------------------------
|
||||
// Textausrichtung
|
||||
// ---------------------------
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
|
||||
// ---------------------------
|
||||
// Text-Elemente
|
||||
// ---------------------------
|
||||
|
||||
strong, b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
p {
|
||||
color: black;
|
||||
font-size: $font-size;
|
||||
font-family: $font-secondary;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
// ---------------------------
|
||||
// Listen
|
||||
// ---------------------------
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// ---------------------------
|
||||
// Links
|
||||
// ---------------------------
|
||||
|
||||
a {
|
||||
color: #046e6e;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #F5A623;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* ========== Typografie & Basis ========== */
|
||||
.title-custom {
|
||||
color: #046e6e;
|
||||
}
|
||||
|
|
@ -11,14 +12,17 @@
|
|||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#welcome.section, #service.section {
|
||||
/* ========== Sektionen Padding (Intro etc.) ========== */
|
||||
#welcome.section,
|
||||
#service.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
/* ========== Beschreibung ========== */
|
||||
.description {
|
||||
font-size: 22px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -36,6 +40,7 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
/* ========== Fakten ========== */
|
||||
.facts .fact-item {
|
||||
padding: 15px;
|
||||
}
|
||||
|
|
@ -48,12 +53,29 @@ section {
|
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* ========== Hintergründe ========== */
|
||||
.custom-background {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.gif-background {
|
||||
background-image: url('/images/BackgroundAnimation.svg');
|
||||
background-size: cover;
|
||||
background-position: center -220px;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Service-Layout (Kacheln / Pfeile) ========== */
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -67,7 +89,8 @@ section {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.service-icon, .service-image {
|
||||
.service-icon,
|
||||
.service-image {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -77,32 +100,22 @@ section {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.bg-service1, .bg-service3, .bg-service5, .bg-service7 {
|
||||
/* Farbvarianten für Services */
|
||||
.bg-service1,
|
||||
.bg-service3,
|
||||
.bg-service5,
|
||||
.bg-service7 {
|
||||
background-color: #8bcfd6;
|
||||
}
|
||||
|
||||
.bg-service2, .bg-service4, .bg-service6, .bg-service8 {
|
||||
.bg-service2,
|
||||
.bg-service4,
|
||||
.bg-service6,
|
||||
.bg-service8 {
|
||||
background-color: #6baeb5;
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.fixed-text {
|
||||
width: 600px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Service-Gitter */
|
||||
.service-grid {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
|
|
@ -129,30 +142,30 @@ section {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-item-fixed:hover .zoom-wrap {
|
||||
&:hover {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-wrap img {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-wrap a {
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-wrap .overlay {
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-text {
|
||||
|
|
@ -166,26 +179,96 @@ section {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
|
||||
/* Desktop: 3 Spalten => 3×2 */
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
|
||||
/* Jede Zeile passt sich der höchsten Karte an */
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Tablet: 2 Spalten => 2×3 */
|
||||
@media (max-width: 991.98px) {
|
||||
.why-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobil: 1 Spalte => 1×6 */
|
||||
@media (max-width: 575.98px) {
|
||||
.why-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Karten sollen die Zellen voll ausfüllen */
|
||||
.service-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%; /* gleiche Höhe pro Zeile */
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,.05);
|
||||
transition: transform .25s ease, box-shadow .25s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Icon einheitlich */
|
||||
.service-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: contain;
|
||||
margin: 0 auto .75rem auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
|
||||
.service-card-title {
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
margin: .25rem 0 .5rem;
|
||||
color: #0f2f2f;
|
||||
}
|
||||
|
||||
.service-card-description {
|
||||
font: inherit;
|
||||
color: #444;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ========== Container & Layout-Hilfen ========== */
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gif-background {
|
||||
background-image: url('/images/BackgroundAnimation.svg');
|
||||
background-size: cover;
|
||||
background-position: center -220px;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
.fixed-width {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gif-background::after {
|
||||
.fixed-text {
|
||||
max-width: 600px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* ========== Titel mit Hintergrund ========== */
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* ========== Bildkomponenten & Icons ========== */
|
||||
.custom-image {
|
||||
width: 100px;
|
||||
max-width: 70%;
|
||||
|
|
@ -196,15 +279,16 @@ section {
|
|||
color: #046e6e;
|
||||
}
|
||||
|
||||
/* ========== Hover Links ========== */
|
||||
.hover-link {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-link:hover {
|
||||
&:hover {
|
||||
color: #F5A623;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mehrwert */
|
||||
/* ========== Mehrwerte ========== */
|
||||
.mehrwerte-grid {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
|
|
@ -219,7 +303,6 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.mehrwerte-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -233,25 +316,43 @@ section {
|
|||
background-color: lighten(#004d4d, 10%);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
h4, p {
|
||||
color: #000 !important;
|
||||
}
|
||||
h4,
|
||||
p {
|
||||
}
|
||||
|
||||
h4, p {
|
||||
color: #000 !important;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
&:hover h4,
|
||||
&:hover p {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mehrwert-icon {
|
||||
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);
|
||||
}
|
||||
|
||||
/* Gründerteam Styling */
|
||||
/* ========== Gründerteam & Intro-Text ========== */
|
||||
.container-fluid {
|
||||
max-width: 100%;
|
||||
padding-left: 5vw;
|
||||
padding-right: 5vw;
|
||||
}
|
||||
|
||||
#about-intro .intro-text {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.85;
|
||||
max-width: 200ch;
|
||||
hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
overflow-wrap: anywhere;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
p, li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
/* 1) Container, z. B. 80% Seitenbreite */
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 40px 0; /* Abstand oben & unten */
|
||||
}
|
||||
|
||||
/* 2) Überschriften zentrieren, falls du kein .text-center in Bootstrap verwendest */
|
||||
.why-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.why-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* 3) Warum-Blocks (linke + rechte Spalte) */
|
||||
.why-block p {
|
||||
text-align: justify;
|
||||
margin-bottom: 40px; /* Abstand zwischen einzelnen Blöcken */
|
||||
}
|
||||
|
||||
.why-block h4 {
|
||||
margin: 100px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 4) Icon + Logo-Größen anpassen */
|
||||
.why-icon {
|
||||
width: 50px; /* Iconbreite */
|
||||
height: auto;
|
||||
|
||||
margin: 200px;
|
||||
}
|
||||
|
||||
.why-logo {
|
||||
max-width: 500px; /* Logo in der Mitte */
|
||||
height: auto;
|
||||
margin-top: 100px; /* Verschiebt das Logo um 100px nach unten */
|
||||
|
||||
}
|
||||
|
||||
/* 5) Optional: Falls du Bootstrap .text-center nicht verwendest, kannst du hier:
|
||||
.why-title, .why-subtitle, .why-block, .why-logo {
|
||||
text-align: center;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
.section-title1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px; /* Abstand zwischen Icon und Titel */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.why-title1 {
|
||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
||||
}
|
||||
|
||||
.icon-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.col-icon {
|
||||
width: 10px;
|
||||
flex: 0 0 10px;
|
||||
max-width: 10px;
|
||||
}
|
||||
|
||||
.col-heading {
|
||||
width: 100px; /* Beispiel: 100px für die Überschrift */
|
||||
flex: 0 0 100px;
|
||||
max-width: 100px;
|
||||
|
||||
white-space: nowrap; /* verhindert Zeilenumbruch */
|
||||
|
||||
}
|
||||
|
||||
|
||||
.why-icon1 {
|
||||
width: 10px; /* Breite des Icons */
|
||||
height: auto; /* Höhe automatisch anpassen */
|
||||
}
|
||||
|
||||
.heading-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.why-block h4 {
|
||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
||||
}
|
||||
|
||||
.section-title1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px; /* Abstand zwischen Icon und Titel */
|
||||
}
|
||||
|
||||
.title-icon1 {
|
||||
width: 30px; /* Breite des Icons */
|
||||
height: auto; /* Höhe automatisch anpassen */
|
||||
}
|
||||
|
||||
.why-title1 {
|
||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.col-md-4.text-center .why-logo {
|
||||
margin-top: 100px !important; /* Erzwingt die Anwendung der Verschiebung */
|
||||
}
|
||||
|
||||
|
||||
/* Fügt einen Abstand unterhalb des "Why Amperion"-Abschnitts hinzu */
|
||||
.why-amperion {
|
||||
margin-bottom: 400px; /* Passen Sie den Wert nach Bedarf an */
|
||||
}
|
||||
|
||||
/* Alternativ: Fügt einen Abstand oberhalb des "About"-Abschnitts hinzu */
|
||||
.about {
|
||||
margin-top: 800px; /* Passen Sie den Wert nach Bedarf an */
|
||||
}
|
||||
|
||||
.col-fixed {
|
||||
width: 10px;
|
||||
flex: 0 0 10px;
|
||||
max-width: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -24,8 +24,7 @@ about:
|
|||
enable: true
|
||||
title: "ÜBER AMPERION"
|
||||
description: "Technik mit Verantwortung. Planung mit Weitblick."
|
||||
content: "<b> AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. </b> <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br> <b> Systemisch. Unabhängig. Zukunftsfähig. </b> <br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. Mehr über uns </p>"
|
||||
link_text: "Mehr über uns."
|
||||
content: "<b> AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. </b> <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br> <b> Systemisch. Unabhängig. Zukunftsfähig. </b> <br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. [Mehr über uns.](/about/) </p>"
|
||||
image: "images/ingenieurbuero.webp"
|
||||
|
||||
############################# About #################################
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
title: "Wir sind AMPERION"
|
||||
subtitle: "Technik mit Verantwortung. Planung mit Weitblick."
|
||||
bg_image: ""
|
||||
layout: "about"
|
||||
draft: false
|
||||
|
|
@ -8,10 +7,19 @@ draft: false
|
|||
intro_section:
|
||||
enable: true
|
||||
text: >
|
||||
**AMPERION GmbH** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich.
|
||||
Wir entwickeln nachhaltige Energielösungen für Unternehmen, Gemeinden, Bauträger – und auch Privatpersonen, die auf Qualität und Zukunftssicherheit setzen.
|
||||
Dabei begleiten wir Projekte von der Idee bis zur Inbetriebnahme – **unabhängig**, **technisch fundiert** und **zukunftsorientiert**.
|
||||
**AMPERION** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessionierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich. <br>
|
||||
|
||||
<br>Wir unterstützen Unternehmen, Gemeinden, Bauträger und Privatpersonen bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit klarem Fokus auf **Photovoltaik**, **Speicherlösungen**, **Ladeinfrastruktur** und **smarte Gebäudetechnik**.<br>
|
||||
|
||||
Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br>
|
||||
<br> Mit **Know‑how** und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zum Betrieb.<br><br>
|
||||
image: "images/amperion_intro.webp"
|
||||
tags:
|
||||
- Unabhängig
|
||||
- Technisch fundiert
|
||||
- Zukunftsorientiert
|
||||
|
||||
|
||||
|
||||
################################## About #####################################
|
||||
about:
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
---
|
||||
title: "Leistungen"
|
||||
description: "Beschreibung der angebotenen Dienstleistungen"
|
||||
bg_image: "images/module_reflection_2.webp"
|
||||
layout: "service"
|
||||
draft: false
|
||||
|
||||
########################### About Service #############################
|
||||
about:
|
||||
enable: true
|
||||
title: "Als führendes Ingenieurbüro bieten wir eine breite Palette von Dienstleistungen an, die darauf abzielen, die Effizienz, Nachhaltigkeit und Rentabilität Ihrer Energieinfrastruktur zu verbessern."
|
||||
|
||||
########################## Featured Service ############################
|
||||
featured_service:
|
||||
enable: true
|
||||
service_item:
|
||||
- name: "Technische Planungskompetenz"
|
||||
image: "icons/file-badge.svg"
|
||||
|
||||
content: "Langjährige Erfahrung mit komplexer Energieplanung – normgerecht, effizient & zukunftssicher."
|
||||
|
||||
- name: "Intelligente Energiesysteme"
|
||||
image: "icons/plug-zap.svg"
|
||||
|
||||
content: "Von PV bis Speicher und Lastmanagement – für maximale Eigenversorgung und Netzverträglichkeit."
|
||||
|
||||
- name: "Persönliche Betreuung"
|
||||
image: "icons/headset.svg"
|
||||
|
||||
content: "Kurze Wege, schnelle Antworten, direkte Ansprechpartner – auch nach Projektabschluss."
|
||||
|
||||
- name: " Reibungslose Projektabwicklung"
|
||||
image: "icons/hard-hat.svg"
|
||||
|
||||
content: "Wir übernehmen die technische Koordination – von Einreichung bis Ausschreibung."
|
||||
|
||||
- name: " Vernetzte Energiezukunft"
|
||||
image: "icons/network.svg"
|
||||
|
||||
content: "Wir denken Energie ganzheitlich – modular, digital und wachstumsfähig geplant."
|
||||
|
||||
- name: "Präzise Systemplanung"
|
||||
image: "icons/circuit-board.svg"
|
||||
|
||||
content: "Alle Komponenten exakt aufeinander abgestimmt – wirtschaftlich und regelkonform."
|
||||
|
||||
############################# Service ###############################
|
||||
service:
|
||||
title: "Darum AMPERION"
|
||||
description: "Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme."
|
||||
service_item:
|
||||
- picture: "images/services_main/energiekonzepte.webp"
|
||||
name: "Energiekonzepte"
|
||||
link: "/service/energiekonzepte"
|
||||
|
||||
- picture: "images/services_main/projektmanagement.webp"
|
||||
name: "Projektmanagement"
|
||||
link: "/service/projektmanagement"
|
||||
|
||||
- picture: "images/services_main/elektromobilitaet.webp"
|
||||
name: "Elektromobilität"
|
||||
link: "/service/elektromobilitaet"
|
||||
|
||||
############################# Call to Action #################################
|
||||
cta:
|
||||
enable: true
|
||||
---
|
||||
|
|
@ -2,48 +2,76 @@
|
|||
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
<!-- Intro Section: Wir sind AMPERION -->
|
||||
<!-- Intro + Mission/Vision Section -->
|
||||
{{ with .Params.intro_section }}
|
||||
{{ if .enable }}
|
||||
<section id="about-intro" class="section py-5">
|
||||
<div class="my-container">
|
||||
|
||||
<!-- Zentrale Unterüberschrift mit reduziertem Abstand -->
|
||||
<div class="text-center" style="margin-top: -25px; margin-bottom: 20px;">
|
||||
<h3 class="services-description" style="margin-top: 0; font-weight: 400;">
|
||||
Technik mit Verantwortung. Planung mit Weitblick.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<!-- ROW 1: TEXT + BILD -->
|
||||
<div class="row align-items-center gx-5 gy-4 mb-5">
|
||||
|
||||
<!-- TEXT (links, mobil oben) -->
|
||||
<div class="col-md-6 col-sm-12 text-left">
|
||||
<div class="content">
|
||||
<!-- TEXT -->
|
||||
<div class="col-lg-6 order-2 order-lg-1 text-left">
|
||||
<div class="intro-text px-2 px-md-4" data-aos="fade-up" data-aos-delay="100">
|
||||
{{ .text | markdownify }}
|
||||
</div>
|
||||
|
||||
<!-- Visual Tags -->
|
||||
<div class="mb-4 mt-3" data-aos="fade-up" data-aos-delay="200">
|
||||
{{ $icons := dict "Unabhängig" "✅" "Technisch fundiert" "⚡" "Zukunftsorientiert" "🌍" }}
|
||||
{{ range .tags }}
|
||||
<span class="badge rounded-pill me-2" style="font-size:1.5rem; padding:0.45em 0.9em; background:#006464; border-radius:999px;">
|
||||
{{ index $icons . }} {{ . }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BILD (rechts, mobil unten) -->
|
||||
<div class="col-md-6 col-sm-12 text-center">
|
||||
<!-- BILD -->
|
||||
<div class="col-lg-6 order-1 order-lg-2 d-flex justify-content-center" data-aos="zoom-out" data-aos-delay="200">
|
||||
<img
|
||||
src="{{ .image | relURL }}"
|
||||
alt="AMPERION Intro"
|
||||
class="img-responsive"
|
||||
style="max-width:420px; width:100%; height:auto; margin:0 auto;">
|
||||
alt="AMPERION – Erneuerbare Energie"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="img-fluid"
|
||||
style="width:100%; max-width:600px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ROW 2: MISSION / VISION / ZIEL -->
|
||||
{{ with $.Params.mission_vision }}
|
||||
{{ if .enable }}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="tabCommon">
|
||||
<ul class="nav nav-tabs">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
||||
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="tab-content pt-3">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
|
||||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
|
||||
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
|
||||
<div class="container text-center mb-5">
|
||||
|
|
@ -93,34 +121,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mission, Vision, Ziel -->
|
||||
<div class="container py-5" style="padding-top: 6rem;">
|
||||
<div class="row">
|
||||
{{ with .Params.mission_vision }}
|
||||
{{ if .enable }}
|
||||
<div class="col-md-12">
|
||||
<div class="tabCommon">
|
||||
<ul class="nav nav-tabs">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
||||
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
{{ range $index, $elements := .tabs }}
|
||||
<div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
|
||||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section (Gründerteam) -->
|
||||
{{ with .Params.about }}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,33 @@
|
|||
{{ 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;"
|
||||
>
|
||||
<!-- HERO / SLIDER -->
|
||||
<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 -->
|
||||
|
||||
<!-- *Logo-Zeile mit zwei Frames* -->
|
||||
<div class="logo-container">
|
||||
<!-- Frame 1 -->
|
||||
<div class="frame1">
|
||||
<img
|
||||
src="{{ .logo_image1 | relURL }}"
|
||||
alt="Logo Frame 1"
|
||||
class="banner-logo"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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;">
|
||||
<!-- *Haupttitel + Button* -->
|
||||
<div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box;">
|
||||
{{ with .title }}
|
||||
<h1 class="title-custom title-custom-margin fade-in-title">
|
||||
{{ . | markdownify }}
|
||||
</h1>
|
||||
<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="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>
|
||||
|
|
@ -60,121 +42,76 @@
|
|||
{{ end }}
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Scroll/Hide Header -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var scrolldown = document.querySelector('.scrolldown');
|
||||
scrolldown.addEventListener('click', function() {
|
||||
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 offset = 100;
|
||||
const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth' // Sanftes Scrollen
|
||||
});
|
||||
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", function() {
|
||||
window.addEventListener("scroll", function () {
|
||||
if (window.scrollY > 100) {
|
||||
scrolldown.classList.add('hide');
|
||||
scrolldown?.classList.add('hide');
|
||||
} else {
|
||||
scrolldown.classList.remove('hide');
|
||||
scrolldown?.classList.remove('hide');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var header = document.getElementById('mainHeader');
|
||||
var lastScrollPosition = window.scrollY;
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
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';
|
||||
}
|
||||
|
||||
header.style.top = (currentScrollPosition > lastScrollPosition) ? '-100vh' : '0';
|
||||
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" }}
|
||||
<!-- WHY AMPERION (Kompakte Version) -->
|
||||
{{ with site.GetPage "/whyamperion" }}
|
||||
{{ 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 }}
|
||||
<section class="whyamperion section">
|
||||
<div class="container my-container">
|
||||
<div class="row">
|
||||
<div class="section-title text-center">
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></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 class="row">
|
||||
{{ range .service_item }}
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="service-item text-center">
|
||||
<i class="{{ .icon }}" aria-hidden="true" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
|
||||
<h3>{{ .name | markdownify }}</h3>
|
||||
<p>{{ .content | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div><!-- /service-grid -->
|
||||
</div><!-- /container-fluid.my-container -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /services -->
|
||||
|
||||
<!-- focustopics -->
|
||||
{{ with site.GetPage "/focustopic" }} <!-- Hier den Pfad zur service2.md anpassen -->
|
||||
<!-- SERVICES -->
|
||||
{{ with site.GetPage "/service" }}
|
||||
{{ with .Params.service }}
|
||||
<section id="service" class="service">
|
||||
<div class="container-fluid my-container">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
<div class="service-grid">
|
||||
{{ range first 3 .service_item }}
|
||||
|
|
@ -182,9 +119,7 @@
|
|||
<div class="zoom-wrap">
|
||||
<a href="{{ .link | relURL }}">
|
||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
||||
<div class="overlay-text">
|
||||
{{ .name }}
|
||||
</div>
|
||||
<div class="overlay-text">{{ .name }}</div>
|
||||
<div class="overlay"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -195,41 +130,104 @@
|
|||
</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>
|
||||
<!-- FOCUSTOPICS -->
|
||||
{{ with site.GetPage "/focustopic" }}
|
||||
{{ with .Params.service }}
|
||||
<section id="focustopic" class="service">
|
||||
<div class="container-fluid my-container">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ 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 }}
|
||||
|
||||
<!-- /why amperion -->
|
||||
|
||||
<div style="height: 100px;"></div>
|
||||
|
||||
|
||||
|
||||
{{ if .Params.contact.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<!-- WHY AMPERION – kompakt & detailliert (Hardcoded Version) -->
|
||||
<section class="whyamperion section" style="background-color:#f3f3f3">
|
||||
<div class="container my-container">
|
||||
|
||||
<!-- Titelblock – eigener Wrapper statt .section-title -->
|
||||
<div class="row">
|
||||
<div class="why-title text-center">
|
||||
<h1>Darum AMPERION</h1>
|
||||
<h2 class="why-sub"><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karten -->
|
||||
<div class="why-grid mt-5">
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Technische Planungskompetenz</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient & zukunftssicher.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Intelligente Energiesysteme</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Persönliche Betreuung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Reibungslose Projektabwicklung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Vernetzte Energiezukunft</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Präzise Systemplanung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- about -->
|
||||
<!-- ABOUT (unverändert) -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section id="about" class="about section">
|
||||
|
|
@ -237,21 +235,20 @@
|
|||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-sm-12">
|
||||
<div class="text-left">
|
||||
{{ with .content }}{{ . | markdownify }}{{ end }}</div>
|
||||
{{ with .content }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<div class="hover-link">
|
||||
{{ with .link_text }}
|
||||
<a href="{{ "/about/" | relURL }}">{{ . }}</a>
|
||||
{{ end }}
|
||||
{{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
|
|
@ -264,17 +261,13 @@
|
|||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /about -->
|
||||
|
||||
|
||||
<div style="height: 100px;"></div>
|
||||
<!-- call to action -->
|
||||
<!-- CALL TO ACTION -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
<!-- /call to action -->
|
||||
<div style="height: 100px;"></div>
|
||||
<!-- facts -->
|
||||
|
||||
<!-- FACTS -->
|
||||
{{ with .Params.facts }}
|
||||
{{ if .enable }}
|
||||
<section class="facts">
|
||||
|
|
@ -293,59 +286,4 @@
|
|||
{{ 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 }}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,3 +15,11 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- AOS JS -->
|
||||
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -66,4 +66,6 @@
|
|||
|
||||
{{ template "_internal/opengraph.html" . }}
|
||||
|
||||
<!-- AOS Animation CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
<section class="page-title" style="background-image: url('{{ .Params.bg_image | relURL }}');">
|
||||
<section class="page-title"
|
||||
style="background-image: url('{{ .Params.bg_image | relURL }}'); padding: 28px 0 12px;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="block">
|
||||
<h2 class="custom-title">{{ .Title }}</h2>
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="services-title">
|
||||
<h2 style="margin:0 0 6px 0; font-weight:600;">{{ .Title }}</h2>
|
||||
</div>
|
||||
{{ with .Params.description }}
|
||||
<h3>{{ . }}</h3>
|
||||
<div class="services-description">
|
||||
<h3 style="margin:0; font-weight:400;">{{ . | markdownify }}</h3>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
{{ with site.GetPage "/whyamperion" }}
|
||||
{{ with .Params.service }}
|
||||
<section class="whyamperion">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="section-title">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .description }}<p>{{ . | markdownify }}</p>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ range .service_item }}
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="service-item">
|
||||
<i class="{{ .icon }}"></i>
|
||||
<h4>{{ .name | markdownify }}</h4>
|
||||
<p>{{ .content | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -1,59 +1,72 @@
|
|||
@charset "UTF-8";
|
||||
/*=== MEDIA QUERY ===*/
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: local("Open Sans"), local("OpenSans"), url("/static/fonts/OpenSans-SemiboldItalic.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans Semibold';
|
||||
src: local("Open Sans Semibold"), local("OpenSansSemibold"), url("/static/fonts/OpenSans-Semibold.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #222;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
h1,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Open Sans Semibold", sans-serif;
|
||||
font-weight: 400; }
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
color: #046e6e; }
|
||||
|
||||
h2 {
|
||||
font-family: "Open Sans Semibold", sans-serif;
|
||||
font-size: 2rem;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #046e6e;
|
||||
font-size: 28px; }
|
||||
@media (max-width: 480px) {
|
||||
h2 {
|
||||
font-size: 22px; } }
|
||||
h1 {
|
||||
font-size: 80px; }
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 34px; } }
|
||||
@media (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 28px; } }
|
||||
@media (max-width: 400px) {
|
||||
h1 {
|
||||
font-size: 26px; } }
|
||||
h3 {
|
||||
font-size: 20px; }
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1rem;
|
||||
color: #222; }
|
||||
|
||||
h4 {
|
||||
font-size: 25px; }
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
color: inherit; }
|
||||
|
||||
.text-left {
|
||||
text-align: left; }
|
||||
|
||||
.text-right {
|
||||
text-align: right; }
|
||||
|
||||
.text-center {
|
||||
text-align: center; }
|
||||
|
||||
.text-justify {
|
||||
text-align: justify; }
|
||||
|
||||
strong, b {
|
||||
font-weight: 700; }
|
||||
|
||||
em, i {
|
||||
font-style: italic; }
|
||||
|
||||
p {
|
||||
color: black;
|
||||
font-size: 15px;
|
||||
font-family: "Open Sans Semibold", sans-serif; }
|
||||
margin-bottom: 1.25rem; }
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1.5rem; }
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.6; }
|
||||
|
||||
a {
|
||||
color: #046e6e;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease; }
|
||||
|
||||
a:hover {
|
||||
color: #F5A623;
|
||||
text-decoration: underline; }
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
|
@ -266,7 +279,7 @@ input[type="tel"] {
|
|||
.section-title p {
|
||||
font-style: italic;
|
||||
color: #626262;
|
||||
font-family: "Open Sans Semibold", sans-serif;
|
||||
font-family: "Open Sans Semibold", serif;
|
||||
font-size: 1em;
|
||||
/* Standard Schriftgröße für p */ }
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -1210,7 +1223,7 @@ h2, h3 {
|
|||
font-size: 35px;
|
||||
margin-bottom: 20px; }
|
||||
.testimonial .testimonial-carousel p {
|
||||
font-family: "Open Sans Semibold", sans-serif;
|
||||
font-family: "Open Sans Semibold", serif;
|
||||
line-height: 28px;
|
||||
padding-bottom: 20px; }
|
||||
.testimonial .testimonial-carousel .user img {
|
||||
|
|
@ -2521,6 +2534,7 @@ h2, h3 {
|
|||
.footer .copyright a {
|
||||
font-weight: 600; }
|
||||
|
||||
/* ========== Typografie & Basis ========== */
|
||||
.title-custom {
|
||||
color: #046e6e; }
|
||||
|
||||
|
|
@ -2531,12 +2545,15 @@ h2, h3 {
|
|||
text-align: justify; }
|
||||
|
||||
section {
|
||||
margin-bottom: 0px; }
|
||||
margin-bottom: 0; }
|
||||
|
||||
#welcome.section, #service.section {
|
||||
/* ========== Sektionen Padding (Intro etc.) ========== */
|
||||
#welcome.section,
|
||||
#service.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 4px; }
|
||||
|
||||
/* ========== Beschreibung ========== */
|
||||
.description {
|
||||
font-size: 22px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -2550,6 +2567,7 @@ section {
|
|||
.description {
|
||||
font-size: 16px;
|
||||
padding-top: 50px; } }
|
||||
/* ========== Fakten ========== */
|
||||
.facts .fact-item {
|
||||
padding: 15px; }
|
||||
|
||||
|
|
@ -2560,11 +2578,28 @@ section {
|
|||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
/* ========== Hintergründe ========== */
|
||||
.custom-background {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat; }
|
||||
|
||||
.gif-background {
|
||||
background-image: url("/images/BackgroundAnimation.svg");
|
||||
background-size: cover;
|
||||
background-position: center -220px;
|
||||
background-repeat: no-repeat;
|
||||
position: relative; }
|
||||
.gif-background::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8); }
|
||||
|
||||
/* ========== Service-Layout (Kacheln / Pfeile) ========== */
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -2576,7 +2611,8 @@ section {
|
|||
.service-content {
|
||||
flex: 1; }
|
||||
|
||||
.service-icon, .service-image {
|
||||
.service-icon,
|
||||
.service-image {
|
||||
margin: 0; }
|
||||
|
||||
.service-image img {
|
||||
|
|
@ -2584,29 +2620,20 @@ section {
|
|||
height: auto;
|
||||
display: block; }
|
||||
|
||||
.bg-service1, .bg-service3, .bg-service5, .bg-service7 {
|
||||
/* Farbvarianten für Services */
|
||||
.bg-service1,
|
||||
.bg-service3,
|
||||
.bg-service5,
|
||||
.bg-service7 {
|
||||
background-color: #8bcfd6; }
|
||||
|
||||
.bg-service2, .bg-service4, .bg-service6, .bg-service8 {
|
||||
.bg-service2,
|
||||
.bg-service4,
|
||||
.bg-service6,
|
||||
.bg-service8 {
|
||||
background-color: #6baeb5; }
|
||||
|
||||
.fixed-width {
|
||||
width: 1200px; }
|
||||
|
||||
.fixed-text {
|
||||
width: 600px;
|
||||
margin-right: 15px; }
|
||||
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: -1; }
|
||||
|
||||
/* Service-Gitter */
|
||||
.service-grid {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
|
|
@ -2628,22 +2655,18 @@ section {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative; }
|
||||
|
||||
.service-item-fixed:hover .zoom-wrap {
|
||||
.zoom-wrap:hover {
|
||||
transform: scale(1.06); }
|
||||
|
||||
.zoom-wrap img {
|
||||
.zoom-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block; }
|
||||
|
||||
.zoom-wrap a {
|
||||
.zoom-wrap a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
|
||||
.zoom-wrap .overlay {
|
||||
.zoom-wrap .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -2663,26 +2686,84 @@ section {
|
|||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
z-index: 2; }
|
||||
|
||||
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
/* Desktop: 3 Spalten => 3×2 */
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
/* Jede Zeile passt sich der höchsten Karte an */
|
||||
align-items: stretch; }
|
||||
|
||||
/* Tablet: 2 Spalten => 2×3 */
|
||||
@media (max-width: 991.98px) {
|
||||
.why-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
|
||||
/* Mobil: 1 Spalte => 1×6 */
|
||||
@media (max-width: 575.98px) {
|
||||
.why-grid {
|
||||
grid-template-columns: 1fr; } }
|
||||
|
||||
/* Karten sollen die Zellen voll ausfüllen */
|
||||
.service-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
/* gleiche Höhe pro Zeile */
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: transform .25s ease, box-shadow .25s ease;
|
||||
text-align: center; }
|
||||
|
||||
/* Icon einheitlich */
|
||||
.service-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: contain;
|
||||
margin: 0 auto .75rem auto;
|
||||
display: block; }
|
||||
|
||||
/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
|
||||
.service-card-title {
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
margin: .25rem 0 .5rem;
|
||||
color: #0f2f2f; }
|
||||
|
||||
.service-card-description {
|
||||
font: inherit;
|
||||
color: #444;
|
||||
line-height: 1.6;
|
||||
margin: 0; }
|
||||
|
||||
/* ========== Container & Layout-Hilfen ========== */
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto; }
|
||||
|
||||
.gif-background {
|
||||
background-image: url("/images/BackgroundAnimation.svg");
|
||||
background-size: cover;
|
||||
background-position: center -220px;
|
||||
background-repeat: no-repeat;
|
||||
position: relative; }
|
||||
.fixed-width {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto; }
|
||||
|
||||
.gif-background::after {
|
||||
.fixed-text {
|
||||
max-width: 600px;
|
||||
margin-right: 15px; }
|
||||
|
||||
/* ========== Titel mit Hintergrund ========== */
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8); }
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: -1; }
|
||||
|
||||
/* ========== Bildkomponenten & Icons ========== */
|
||||
.custom-image {
|
||||
width: 100px;
|
||||
max-width: 70%;
|
||||
|
|
@ -2691,13 +2772,13 @@ section {
|
|||
.custom-title {
|
||||
color: #046e6e; }
|
||||
|
||||
/* ========== Hover Links ========== */
|
||||
.hover-link {
|
||||
transition: color 0.3s ease; }
|
||||
|
||||
.hover-link:hover {
|
||||
.hover-link:hover {
|
||||
color: #F5A623; }
|
||||
|
||||
/* Mehrwert */
|
||||
/* ========== Mehrwerte ========== */
|
||||
.mehrwerte-grid {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
|
|
@ -2720,22 +2801,34 @@ section {
|
|||
background-color: teal;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
|
||||
.mehrwerte-box h4,
|
||||
.mehrwerte-box p {
|
||||
color: #000 !important;
|
||||
transition: color 0.3s ease; }
|
||||
.mehrwerte-box:hover h4, .mehrwerte-box:hover p {
|
||||
color: #000 !important; }
|
||||
.mehrwerte-box h4, .mehrwerte-box p {
|
||||
color: #000 !important;
|
||||
transition: color 0.3s ease; }
|
||||
|
||||
.mehrwert-icon {
|
||||
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); }
|
||||
|
||||
/* Gründerteam Styling */
|
||||
/* ========== Gründerteam & Intro-Text ========== */
|
||||
.container-fluid {
|
||||
max-width: 100%;
|
||||
padding-left: 5vw;
|
||||
padding-right: 5vw; }
|
||||
|
||||
#about-intro .intro-text {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.85;
|
||||
max-width: 200ch;
|
||||
hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
overflow-wrap: anywhere;
|
||||
margin-bottom: 1rem; }
|
||||
#about-intro .intro-text p, #about-intro .intro-text li {
|
||||
margin-bottom: 1rem; }
|
||||
@media (min-width: 992px) {
|
||||
#about-intro .intro-text {
|
||||
font-size: 1.35rem; } }
|
||||
html {
|
||||
scroll-behavior: smooth; }
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue