forked from markus/AMPERION_Webpage
Initial commit – lokale Dateien hochgeladen
This commit is contained in:
Alexander-Stosic
parent
5bdf649ce1
commit
0db3bb9207
21 changed files with 907 additions and 616 deletions
|
|
@ -2,52 +2,109 @@
|
|||
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
{{ with .Params.about }}
|
||||
<!-- Intro Section: Wir sind AMPERION -->
|
||||
{{ with .Params.intro_section }}
|
||||
{{ if .enable }}
|
||||
<section class="about section">
|
||||
<div class="custom-container">
|
||||
<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="row align-items-center">
|
||||
<div class="col-md-4">
|
||||
<div class="person-info">
|
||||
{{ with .left_person }}
|
||||
{{ with .name }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}<p>{{ . | $.Page.RenderString (dict "display" "block") }}</p>{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- TEXT (links, mobil oben) -->
|
||||
<div class="col-md-6 col-sm-12 text-left">
|
||||
<div class="content">
|
||||
{{ .text | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="about-img">
|
||||
<img src="{{ .image | relURL }}" alt="Standard Image">
|
||||
<img src="{{ .hover_image | relURL }}" alt="Hover Image" class="hover-img">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="person-info">
|
||||
{{ with .right_person }}
|
||||
{{ with .name }}<h3>{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}<p>{{ . | $.Page.RenderString (dict "display" "block") }}</p>{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- BILD (rechts, mobil unten) -->
|
||||
<div class="col-md-6 col-sm-12 text-center">
|
||||
<img
|
||||
src="{{ .image | relURL }}"
|
||||
alt="AMPERION Intro"
|
||||
class="img-responsive"
|
||||
style="max-width:420px; width:100%; height:auto; margin:0 auto;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<section class="testimonial section-sm">
|
||||
<div class="container">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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">
|
||||
<h3 class="mb-4">
|
||||
Was uns auszeichnet: <strong>AMPERION</strong> bietet <em>echte Mehrwerte</em> für Ihr Projekt
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid px-0;">
|
||||
<div class="mehrwerte-grid">
|
||||
|
||||
<!-- Kachel 1 -->
|
||||
<div class="mehrwerte-box" style="background-color: #006464;">
|
||||
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
|
||||
<img src="/icons/stamp.svg" alt="Staatlich geprüft Icon" class="mehrwert-icon mb-3" width="50" height="50">
|
||||
<h4 class="fw-bold text-black">Staatlich geprüftes Ingenieurbüro</h4>
|
||||
<p class="mb-0">Als konzessionierter Fachbetrieb für Elektrotechnik garantieren wir Fachkompetenz, Qualität und Sicherheit.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kachel 2 -->
|
||||
<div class="mehrwerte-box" style="background-color: #007979;">
|
||||
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
|
||||
<img src="/icons/brain.svg" alt="Innovation Icon" class="mehrwert-icon mb-3" width="50" height="50">
|
||||
<h4 class="fw-bold text-black">Erfahrung & Innovation</h4>
|
||||
<p class="mb-0">Über 10 Jahre Branchenerfahrung vereinen sich bei AMPERION mit frischen Ideen, neuesten Technologien und aktuellen Förderstandards.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kachel 3 -->
|
||||
<div class="mehrwerte-box" style="background-color: #008c8c;">
|
||||
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
|
||||
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz Icon" class="mehrwert-icon mb-3" width="50" height="50">
|
||||
<h4 class="fw-bold text-black">Ganzheitlicher Ansatz</h4>
|
||||
<p class="mb-0">Wir betrachten jedes Projekt technisch, wirtschaftlich und ökologisch – von Beginn an zukunftssicher gedacht.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kachel 4 -->
|
||||
<div class="mehrwerte-box" style="background-color: #009292;">
|
||||
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
|
||||
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung Icon" class="mehrwert-icon mb-3" width="50" height="50">
|
||||
<h4 class="fw-bold text-black">Unabhängige Beratung</h4>
|
||||
<p class="mb-0">Wir schlagen nur Lösungen vor, die zu Ihrem Projekt passen – herstellerneutral und objektiv.</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<li {{ if eq $index 0 }} class="active" {{ end }}>
|
||||
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
|
|
@ -65,10 +122,65 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to action -->
|
||||
<!-- About Section (Gründerteam) -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="about section pt-0">
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- Überschrift -->
|
||||
<p class="lead text-center mb-3" style="margin-top: 40px;">Das AMPERION Gründerteam</p>
|
||||
|
||||
<!-- Zentraler Einleitungstext -->
|
||||
<p class="text-center px-3" style="margin-bottom: 40px;">
|
||||
Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="row gx-5 gy-5 align-items-center">
|
||||
|
||||
<!-- Markus Wimmer (LINKS) -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-1 order-2 d-flex justify-content-center">
|
||||
<div class="w-100">
|
||||
{{ with .left_person }}
|
||||
{{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}
|
||||
<p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bild (MITTE) -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-2 order-1 d-flex justify-content-center">
|
||||
<img src="{{ .image | relURL }}"
|
||||
alt="AMPERION Gründerteam"
|
||||
class="img-fluid founder-img rounded shadow"
|
||||
style="max-width: 100%; height: auto;">
|
||||
</div>
|
||||
|
||||
<!-- Alexander Stosic (RECHTS) -->
|
||||
<div class="col-lg-4 col-md-12 order-lg-3 order-3 d-flex justify-content-center">
|
||||
<div class="w-100">
|
||||
{{ with .right_person }}
|
||||
{{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
|
||||
{{ with .description }}
|
||||
<p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Call to Action -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
<!-- /Call to action -->
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
44
layouts/_default/leistung.html
Normal file
44
layouts/_default/leistung.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ partial "page-title.html" . }}
|
||||
|
||||
<!-- Intro-Abschnitt (optional über Frontmatter "about") -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="service-about section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .content }}
|
||||
<div class="mt-30">{{ . | $.Page.RenderString (dict "display" "block") }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ with .image }}
|
||||
<div class="col-md-6">
|
||||
<img class="img-responsive" src="{{ . | relURL }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Hauptinhalt aus der Markdown-Datei -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call-to-Action (optional, falls in Frontmatter aktiviert) -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,9 +1,4 @@
|
|||
{{ define "main" }}
|
||||
Um den ersten Bereich der Seite beim Scrollen nach unten verschwinden zu lassen und beim Scrollen nach ganz oben wieder erscheinen zu lassen, kannst du JavaScript verwenden, um den Bereich zu verstecken oder anzuzeigen, basierend auf der Scroll-Position. Hier ist, wie du das machen kannst:
|
||||
Schritt 1: Füge eine ID oder Klasse zum Header hinzu
|
||||
|
||||
Füge eine ID oder Klasse zum <header>-Element hinzu, damit du es leicht mit JavaScript ansprechen kannst.
|
||||
|
||||
<header id="mainHeader">
|
||||
|
||||
|
||||
|
|
@ -352,4 +347,5 @@ Füge eine ID oder Klasse zum <header>-Element hinzu, damit du es leicht mit Jav
|
|||
</script>
|
||||
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue