add impressum page with enhanced layout, styles, and responsive design
This commit is contained in:
parent
ef9fbcb26a
commit
96495cd9d0
349
impressum.php
349
impressum.php
@ -1,12 +1,349 @@
|
|||||||
<?php include 'header.php'; ?>
|
<?php include 'header.php'; ?>
|
||||||
|
|
||||||
<main style="padding: 2rem 1rem; max-width: 800px; margin: 0 auto; animation: fadeInUp 0.5s ease both;">
|
<style>
|
||||||
<div class="auth__card" style="width: 100%; max-width: 100%;">
|
/* ─── Impressum Styles ─── */
|
||||||
<header class="auth__header" style="grid-template-columns: 1fr;">
|
.impressum {
|
||||||
<h1 class="auth__title">Impressum</h1>
|
padding: 3rem 1.5rem 4rem;
|
||||||
</header>
|
max-width: 900px;
|
||||||
<p style="color: var(--text-secondary); line-height: 1.8; font-size: 0.95rem;">Impressum 123</p>
|
margin: 0 auto;
|
||||||
|
animation: fadeInUp 0.6s ease both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__hero {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__hero-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
background: linear-gradient(135deg, var(--color-primary-soft), rgba(16, 185, 129, 0.08));
|
||||||
|
border: 1px solid var(--border-default);
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__hero h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
font-weight: 800;
|
||||||
|
background: linear-gradient(135deg, var(--text-primary), var(--color-primary));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__hero p {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 1rem;
|
||||||
|
max-width: 520px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-default);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 2rem;
|
||||||
|
transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-smooth);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card:hover {
|
||||||
|
border-color: var(--border-glow);
|
||||||
|
box-shadow: var(--shadow-glow-blue);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card--full {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card-icon--blue {
|
||||||
|
background: var(--color-primary-soft);
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card-icon--green {
|
||||||
|
background: var(--color-accent-soft);
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card-icon--orange {
|
||||||
|
background: rgba(245, 158, 11, 0.1);
|
||||||
|
border: 1px solid rgba(245, 158, 11, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card-icon--purple {
|
||||||
|
background: rgba(139, 92, 246, 0.1);
|
||||||
|
border: 1px solid rgba(139, 92, 246, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card-icon--red {
|
||||||
|
background: var(--color-danger-soft);
|
||||||
|
border: 1px solid rgba(239, 68, 68, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card h2 {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card p,
|
||||||
|
.impressum__card li {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.92rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card ul li {
|
||||||
|
padding: 0.3rem 0;
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card ul li::before {
|
||||||
|
content: "›";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__value {
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__divider {
|
||||||
|
border: none;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border-default);
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__footer-note {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__footer-note p {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Responsive ─── */
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.impressum__grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__hero h1 {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum {
|
||||||
|
padding: 2rem 1rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum__card--full div[style*="grid-template-columns"] {
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<main class="impressum">
|
||||||
|
|
||||||
|
<!-- ═══ Hero ═══ -->
|
||||||
|
<div class="impressum__hero">
|
||||||
|
<div class="impressum__hero-icon">⚖️</div>
|
||||||
|
<h1>Impressum</h1>
|
||||||
|
<p>Angaben gemäß § 5 TMG und § 25 MedienG – Informationen über die Betreiber dieser Website.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ═══ Karten-Grid ═══ -->
|
||||||
|
<div class="impressum__grid">
|
||||||
|
|
||||||
|
<!-- Karte 1 – Website-Inhaber (volle Breite) -->
|
||||||
|
<div class="impressum__card impressum__card--full">
|
||||||
|
<div class="impressum__card-icon impressum__card-icon--green">🌐</div>
|
||||||
|
<h2>Website-Inhaber</h2>
|
||||||
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="impressum__label">Name</span>
|
||||||
|
<span class="impressum__value">Fabian Schieder</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="impressum__label">Rolle</span>
|
||||||
|
Website-Inhaber & Server-Betreiber
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="impressum__label">Kontakt</span>
|
||||||
|
fabian@geizkragen.at
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="impressum__label">Name</span>
|
||||||
|
<span class="impressum__value">Paul Eisenbock</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="impressum__label">Rolle</span>
|
||||||
|
Website-Inhaber
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="impressum__label">Kontakt</span>
|
||||||
|
paul@geizkragen.at
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Karte 2 – Server-Betreiber -->
|
||||||
|
<div class="impressum__card impressum__card--full">
|
||||||
|
<div class="impressum__card-icon impressum__card-icon--blue">🖥️</div>
|
||||||
|
<h2>Server-Betreiber</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="impressum__label">Verantwortlich</span>
|
||||||
|
<span class="impressum__value">Fabian Schieder</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="impressum__label">Aufgaben</span>
|
||||||
|
Technische Bereitstellung, Hosting, Serverbetrieb & Wartung
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Karte 3 – Projektinfo (volle Breite) -->
|
||||||
|
<div class="impressum__card impressum__card--full">
|
||||||
|
<div class="impressum__card-icon impressum__card-icon--purple">🚀</div>
|
||||||
|
<h2>Über das Projekt</h2>
|
||||||
|
<p>
|
||||||
|
<strong>Geizkragen</strong> ist eine Preisvergleichsplattform, die es Nutzern ermöglicht, die besten
|
||||||
|
Angebote verschiedener Online-Shops auf einen Blick zu vergleichen. Das Projekt wird als Schulprojekt
|
||||||
|
von Fabian Schieder und Paul Eisenbock entwickelt und betrieben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Karte 4 – Haftungsausschluss -->
|
||||||
|
<div class="impressum__card">
|
||||||
|
<div class="impressum__card-icon impressum__card-icon--orange">⚠️</div>
|
||||||
|
<h2>Haftungsausschluss</h2>
|
||||||
|
<p>
|
||||||
|
Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. Der Anbieter übernimmt jedoch
|
||||||
|
keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte.
|
||||||
|
</p>
|
||||||
|
<hr class="impressum__divider">
|
||||||
|
<p>
|
||||||
|
Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links.
|
||||||
|
Für den Inhalt verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Karte 5 – Urheberrecht -->
|
||||||
|
<div class="impressum__card">
|
||||||
|
<div class="impressum__card-icon impressum__card-icon--red">©</div>
|
||||||
|
<h2>Urheberrecht</h2>
|
||||||
|
<p>
|
||||||
|
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem
|
||||||
|
österreichischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der
|
||||||
|
Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
|
||||||
|
jeweiligen Autors bzw. Erstellers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Karte 6 – Datenschutz (volle Breite) -->
|
||||||
|
<div class="impressum__card impressum__card--full">
|
||||||
|
<div class="impressum__card-icon impressum__card-icon--blue">🔒</div>
|
||||||
|
<h2>Datenschutzhinweis</h2>
|
||||||
|
<p>
|
||||||
|
Die Nutzung unserer Website ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf
|
||||||
|
unseren Seiten personenbezogene Daten (z. B. Name, E-Mail-Adresse) erhoben werden, erfolgt dies
|
||||||
|
stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte
|
||||||
|
weitergegeben. Wir weisen darauf hin, dass die Datenübertragung im Internet (z. B. bei der
|
||||||
|
Kommunikation per E-Mail) Sicherheitslücken aufweisen kann.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ═══ Footer-Note ═══ -->
|
||||||
|
<div class="impressum__footer-note">
|
||||||
|
<p>
|
||||||
|
Stand: <?= date('F Y') ?> · Dieses Impressum wurde nach bestem Wissen und Gewissen erstellt.<br>
|
||||||
|
Bei Fragen wenden Sie sich bitte an die oben genannten Ansprechpartner.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<?php include 'footer.php'; ?>
|
<?php include 'footer.php'; ?>
|
||||||
Loading…
Reference in New Issue
Block a user