Inital commit
This commit is contained in:
𝓜𝓪𝓬𝓮™
100
BRANDING-GUIDE.md
Normal file
100
BRANDING-GUIDE.md
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
# HexaHost Branding Guide
|
||||||
|
|
||||||
|
Dieser Guide basiert auf dem bestehenden Design aus `HexaHost-Frontend` und `HexaHost-Backend`.
|
||||||
|
Nutze ihn als Standard für neue Projekte, damit Optik, Struktur und Tonalität konsistent bleiben.
|
||||||
|
|
||||||
|
## 1) Markenidentität
|
||||||
|
|
||||||
|
- Positionierung: Zuverlässiges Hosting mit persönlichem Support aus Deutschland.
|
||||||
|
- Tonalität: Klar, direkt, professionell, vertrauensvoll.
|
||||||
|
- Bildsprache: Modern, technisch, leicht futuristisch (Glassmorphism + Neon-Akzente).
|
||||||
|
|
||||||
|
## 2) Farben
|
||||||
|
|
||||||
|
Primäre Farben:
|
||||||
|
|
||||||
|
- Hintergrund: `#0d0821`
|
||||||
|
- Primary: `#ff51f9`
|
||||||
|
- Accent Violet: `#a348ff`
|
||||||
|
- Accent Blue: `#3978ff`
|
||||||
|
- Highlight: `#f093ff`
|
||||||
|
|
||||||
|
Weitere Farben:
|
||||||
|
|
||||||
|
- Success: `#32fba2`
|
||||||
|
- Warning: `#ffcc00`
|
||||||
|
- Error: `#ff4d6d`
|
||||||
|
- Text Primary: `#ffffff`
|
||||||
|
- Text Secondary: `#cfc9dd`
|
||||||
|
|
||||||
|
Designprinzip:
|
||||||
|
|
||||||
|
- Dunkler Hintergrund + leuchtende Akzente.
|
||||||
|
- Gradient-Buttons für wichtige CTAs.
|
||||||
|
- Transparente Karten mit Blur für Tiefe.
|
||||||
|
|
||||||
|
## 3) Typografie
|
||||||
|
|
||||||
|
- Hauptschrift: `Inter` (Body, Navigation, UI)
|
||||||
|
- Logo/Brand: `Russo One` (nur sparsam nutzen)
|
||||||
|
- Sekundär: `Source Sans Pro` (optional für Slogans)
|
||||||
|
|
||||||
|
Empfohlene Größen:
|
||||||
|
|
||||||
|
- H1: `3rem`
|
||||||
|
- H2: `2.25rem`
|
||||||
|
- H3: `1.5rem`
|
||||||
|
- Body: `1rem`
|
||||||
|
- Small: `0.875rem`
|
||||||
|
|
||||||
|
## 4) Layout und Spacing
|
||||||
|
|
||||||
|
- Container-Breite: `1200px`
|
||||||
|
- Standard-Abstand horizontal: `1.5rem`
|
||||||
|
- Sektionen: `3rem` bis `4rem` vertikales Padding
|
||||||
|
- Radius: `0.75rem` bis `1.5rem`
|
||||||
|
|
||||||
|
## 5) Komponenten
|
||||||
|
|
||||||
|
- Header: Fixiert mit Blur-Hintergrund.
|
||||||
|
- Buttons:
|
||||||
|
- Primary: Pink/Violett-Gradient
|
||||||
|
- Secondary: Glas-Look mit Border
|
||||||
|
- Cards: `.glass-card` mit Blur, Border und Shadow.
|
||||||
|
- Footer: 3-4 Spalten mit Produkt-, Firmen- und Support-Links.
|
||||||
|
|
||||||
|
## 6) Inhaltsstruktur (Seiten)
|
||||||
|
|
||||||
|
Jede neue Marketing-Seite sollte diese Reihenfolge nutzen:
|
||||||
|
|
||||||
|
1. Hero (Claim + CTA)
|
||||||
|
2. Leistungs- oder Produktsektion
|
||||||
|
3. Vorteilsektion
|
||||||
|
4. Vertrauens-/Support-Sektion
|
||||||
|
5. Abschließende CTA
|
||||||
|
6. Footer
|
||||||
|
|
||||||
|
## 7) Text- und CTA-Regeln
|
||||||
|
|
||||||
|
- CTAs immer aktiv formulieren:
|
||||||
|
- "Jetzt starten"
|
||||||
|
- "Produkte entdecken"
|
||||||
|
- "Kontakt aufnehmen"
|
||||||
|
- Pro Abschnitt ein klares Ziel.
|
||||||
|
- Kurze, konkrete Nutzenargumente statt technischer Überladung.
|
||||||
|
|
||||||
|
## 8) Technische Standards
|
||||||
|
|
||||||
|
- Wiederverwendbare Includes für Header/Footer nutzen.
|
||||||
|
- Styles zentral in `assets/css/style.css`.
|
||||||
|
- JS nur für Interaktion (Navigation, Accordions, Form-Hinweise).
|
||||||
|
- Performance: Preconnect für Fonts/CDN und CSS früh laden.
|
||||||
|
|
||||||
|
## 9) Template-Nutzung
|
||||||
|
|
||||||
|
Verwende den Ordner `HexaHost-Template-Website` als Startpunkt:
|
||||||
|
|
||||||
|
- `public/index.php` als Basisseite
|
||||||
|
- `includes/header.php` und `includes/footer.php` für einheitliches Layout
|
||||||
|
- `assets/css/style.css` für Designsystem und Komponenten
|
||||||
|
|
||||||
198
assets/css/style.css
Normal file
198
assets/css/style.css
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
:root {
|
||||||
|
--background-color: #0d0821;
|
||||||
|
--primary-color: #ff51f9;
|
||||||
|
--accent-color-1: #a348ff;
|
||||||
|
--accent-color-2: #3978ff;
|
||||||
|
--highlight-color: #f093ff;
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #cfc9dd;
|
||||||
|
--glass-bg: rgba(255, 255, 255, 0.05);
|
||||||
|
--glass-border: rgba(255, 255, 255, 0.12);
|
||||||
|
--radius-lg: 0.75rem;
|
||||||
|
--radius-xl: 1rem;
|
||||||
|
--space-1: 0.5rem;
|
||||||
|
--space-2: 1rem;
|
||||||
|
--space-3: 1.5rem;
|
||||||
|
--space-4: 2rem;
|
||||||
|
--space-5: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: linear-gradient(135deg, #0d0821 0%, #1a1230 100%);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
background: rgba(13, 8, 33, 0.6);
|
||||||
|
border-bottom: 1px solid var(--glass-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
min-height: 72px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
font-family: "Russo One", sans-serif;
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.45rem 0.7rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover,
|
||||||
|
.nav-link.active {
|
||||||
|
background: var(--glass-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: var(--space-5) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.2fr 0.8fr;
|
||||||
|
gap: var(--space-4);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2rem, 4vw, 3rem);
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
margin-top: var(--space-3);
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 0.75rem 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: linear-gradient(135deg, var(--primary-color), var(--accent-color-1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: var(--glass-bg);
|
||||||
|
border-color: var(--glass-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card {
|
||||||
|
background: var(--glass-bg);
|
||||||
|
border: 1px solid var(--glass-border);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 8px 32px rgba(255, 81, 249, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
padding: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: var(--space-5) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-box {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
border-top: 1px solid var(--glass-border);
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
padding: var(--space-4) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hero-grid,
|
||||||
|
.cards,
|
||||||
|
.footer-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
20
assets/js/main.js
Normal file
20
assets/js/main.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const links = document.querySelectorAll('a[href^="#"]');
|
||||||
|
links.forEach((link) => {
|
||||||
|
link.addEventListener("click", (event) => {
|
||||||
|
const targetId = link.getAttribute("href");
|
||||||
|
if (!targetId || targetId === "#") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const target = document.querySelector(targetId);
|
||||||
|
if (!target) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
target.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
29
includes/footer.php
Normal file
29
includes/footer.php
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<footer class="footer" id="kontakt">
|
||||||
|
<div class="container footer-grid">
|
||||||
|
<div>
|
||||||
|
<h4>HexaHost</h4>
|
||||||
|
<p>Zuverlässiges Hosting aus Deutschland.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Produkte</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">VPS</a></li>
|
||||||
|
<li><a href="#">VPC</a></li>
|
||||||
|
<li><a href="#">Webhosting</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Kontakt</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="mailto:info@example.de">info@example.de</a></li>
|
||||||
|
<li><a href="#">Impressum</a></li>
|
||||||
|
<li><a href="#">Datenschutz</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../assets/js/main.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
13
includes/functions.php
Normal file
13
includes/functions.php
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
function includeHeader(string $pageTitle, string $pageDescription, string $currentPage = 'home'): void
|
||||||
|
{
|
||||||
|
include __DIR__ . '/header.php';
|
||||||
|
}
|
||||||
|
|
||||||
|
function includeFooter(): void
|
||||||
|
{
|
||||||
|
include __DIR__ . '/footer.php';
|
||||||
|
}
|
||||||
|
|
||||||
28
includes/header.php
Normal file
28
includes/header.php
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title><?php echo htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8'); ?></title>
|
||||||
|
<meta name="description" content="<?php echo htmlspecialchars($pageDescription, ENT_QUOTES, 'UTF-8'); ?>">
|
||||||
|
<meta name="theme-color" content="#0d0821">
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="container nav-container">
|
||||||
|
<a href="./index.php" class="brand">HexaHost</a>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a class="nav-link <?php echo $currentPage === 'home' ? 'active' : ''; ?>" href="./index.php">Home</a></li>
|
||||||
|
<li><a class="nav-link" href="#leistungen">Leistungen</a></li>
|
||||||
|
<li><a class="nav-link" href="#kontakt">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
62
public/index.php
Normal file
62
public/index.php
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<?php
|
||||||
|
require_once __DIR__ . '/../includes/functions.php';
|
||||||
|
|
||||||
|
$pageTitle = 'HexaHost Template - Einheitliches Webdesign';
|
||||||
|
$pageDescription = 'Template-Seite mit einheitlichem HexaHost Branding.';
|
||||||
|
$currentPage = 'home';
|
||||||
|
|
||||||
|
includeHeader($pageTitle, $pageDescription, $currentPage);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container hero-grid">
|
||||||
|
<div>
|
||||||
|
<h1>Einheitliches Webdesign für alle neuen Projekte</h1>
|
||||||
|
<p>
|
||||||
|
Diese Vorlage nutzt dieselbe visuelle Sprache wie Frontend und Backend:
|
||||||
|
klare Typografie, Neon-Akzente und konsistente CTA-Führung.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a href="#leistungen" class="btn btn-primary">Template nutzen</a>
|
||||||
|
<a href="#kontakt" class="btn btn-secondary">Kontakt aufnehmen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<aside class="glass-card info-card">
|
||||||
|
<h3>Designsystem aktiv</h3>
|
||||||
|
<p>Farben, Typografie und Komponenten sind zentral standardisiert.</p>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="leistungen" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Bausteine der Vorlage</h2>
|
||||||
|
<div class="cards">
|
||||||
|
<article class="glass-card card">
|
||||||
|
<h3>Header + Footer</h3>
|
||||||
|
<p>Wiederverwendbare Includes für konsistente Navigation und Abschluss.</p>
|
||||||
|
</article>
|
||||||
|
<article class="glass-card card">
|
||||||
|
<h3>Komponenten</h3>
|
||||||
|
<p>Buttons, Karten und Sektionen folgen festen Designregeln.</p>
|
||||||
|
</article>
|
||||||
|
<article class="glass-card card">
|
||||||
|
<h3>Branding Guide</h3>
|
||||||
|
<p>Im Guide sind Farbwerte, Tonalität und Content-Regeln dokumentiert.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section cta">
|
||||||
|
<div class="container glass-card cta-box">
|
||||||
|
<h2>Neue Website in Minuten starten</h2>
|
||||||
|
<p>Kopiere diesen Ordner, passe Inhalte an und behalte überall denselben Look.</p>
|
||||||
|
<a href="#" class="btn btn-primary">Projekt starten</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php includeFooter(); ?>
|
||||||
|
|
||||||
Reference in New Issue
Block a user