👨‍👩‍👧‍👦 Familien-Design-Guide

Erstellen Sie einheitliche digitale Visitenkarten für die ganze Familie

✨ Das Konzept

Mit diesem System können Sie für jedes Familienmitglied eine eigene digitale Visitenkarte erstellen, die sich optisch ähnelt, aber individuell ist. Ein gemeinsames Farbschema sorgt für Wiedererkennung, während jeder seine persönlichen Kontaktdaten hat.

🎨 Ihre Familien-Farbpalette

Basierend auf Ihren Lieblingsfarben #c31924 (Rot) und passenden Grautönen haben wir ein Farbsystem entwickelt:

👨
Arno (Sie)
Rot dominant mit Grau
Gradient:
#c31924 → #4b5563
👩
Ihre Frau
Grau dominant mit Rot-Akzent
Gradient:
#6b7280 → #c31924
👧
Kind 1 (Variante A)
Rot zu Dunkelgrau
Gradient:
#c31924 → #374151
👦
Kind 2 (Variante B)
Hellgrau mit Rot
Gradient:
#9ca3af → #c31924
👴
Weitere (Grautöne)
Nur Grautöne, dezent
Gradient:
#374151 → #6b7280
💼
Geschäftlich
Rot zu Schwarz, seriös
Gradient:
#c31924 → #1f2937

🌟 Vorteile des einheitlichen Designs

Wiedererkennungswert

Alle Visitenkarten der Familie haben das gleiche Erscheinungsbild - professionell und einheitlich.

Individualität

Trotz einheitlichem Design hat jeder seine eigene Farbvariante und eigene Kontaktdaten.

Professioneller Eindruck

Ein durchdachtes Design-System wirkt organisiert und modern.

Familienidentität

Zeigt Zusammengehörigkeit und ein gemeinsames visuelles Konzept.

Einfache Verwaltung

Nur die Farben anpassen, Rest bleibt gleich. Einfach zu erstellen und zu pflegen.

Skalierbar

Beliebig viele Familienmitglieder können hinzugefügt werden.

📋 Schritt-für-Schritt Anleitung

1 Universelle Vorlage kopieren

Öffnen Sie die Datei card-vorlage-universal.html und speichern Sie sie mehrfach mit unterschiedlichen Namen:

  • • card-arno.html
  • • card-maria.html (Ihre Frau)
  • • card-kind1.html
  • • card-kind2.html
  • • usw.
2 Farben für jedes Mitglied anpassen

In jeder Datei die Gradients ändern (2 Stellen):

Beispiel für Ihre Frau (Grau zu Rot):
/* Stelle 1: Body Background (~Zeile 46) */ background: linear-gradient(135deg, #6b7280 0%, #c31924 100%); /* Stelle 2: Card Header (~Zeile 77) */ background: linear-gradient(135deg, #6b7280 0%, #c31924 100%);
Beispiel für Kind (Rot zu Dunkelgrau):
background: linear-gradient(135deg, #c31924 0%, #374151 100%);
3 Kontaktdaten eintragen

In jeder Datei alle mit ✏️ markierten Stellen anpassen:

  • • Name und Ort
  • • Telefonnummern
  • • E-Mail-Adresse
  • • Adresse
  • • Social Media Links
  • • vCard-Daten (im JavaScript-Bereich)
4 Fotos hinzufügen

Erstellen Sie für jedes Familienmitglied ein Foto (400x400 px) und speichern Sie es im images/ Ordner:

  • • images/arno.jpg
  • • images/maria.jpg
  • • images/kind1.jpg
  • • usw.

Dann in jeder HTML-Datei den Pfad anpassen:

<img src="images/arno.jpg" alt="Arno Cremanns">
5 Auf Server hochladen

Laden Sie alle Dateien auf Ihren Server hoch. Struktur:

📁 /visitenkarte/ ├── card-arno.html ├── card-maria.html ├── card-kind1.html ├── card-kind2.html └── images/ ├── arno.jpg ├── maria.jpg ├── kind1.jpg └── kind2.jpg
6 Links verteilen

Jedes Familienmitglied bekommt seinen eigenen Link:

  • • https://ihre-domain.de/visitenkarte/card-arno.html
  • • https://ihre-domain.de/visitenkarte/card-maria.html
  • • usw.

🎯 Ihre vorbereiteten Dateien

Bereits für Sie erstellt:
Profi-Tipp:

Erstellen Sie eine Familien-Übersichtsseite, die alle Visitenkarten verlinkt! So kann jeder auf einen Blick alle Familienmitglieder erreichen. Ideal für Weihnachtskarten oder als gemeinsamer Link.

🎨 Farbvariationen-Übersicht

Hier sind alle Gradient-Codes für Copy & Paste:

🔴 Rot dominant (Sie/Hauptperson):
background: linear-gradient(135deg, #c31924 0%, #4b5563 100%);
⚪ Grau dominant (Partner):
background: linear-gradient(135deg, #6b7280 0%, #c31924 100%);
🔴 Rot zu Dunkelgrau (Kind/Variante A):
background: linear-gradient(135deg, #c31924 0%, #374151 100%);
⚪ Hellgrau zu Rot (Kind/Variante B):
background: linear-gradient(135deg, #9ca3af 0%, #c31924 100%);
⚫ Nur Grautöne (dezent):
background: linear-gradient(135deg, #374151 0%, #6b7280 100%);
💼 Business (Rot zu Schwarz):
background: linear-gradient(135deg, #c31924 0%, #1f2937 100%);

📞 Support

Bei Fragen oder Problemen schauen Sie in die Datei ANLEITUNG.html oder README-Visitenkarte.md. Dort finden Sie ausführliche Erklärungen zu allen Funktionen.

🎉 Viel Erfolg!

Mit diesem System können Sie eine komplette digitale Visitenkarten-Familie erstellen!
Einheitlich, professionell und individuell zugleich.