Statische Website / eigenes Theme
Snippet kopieren und direkt vor dem schließenden </footer> in die HTML-Datei einfügen. Mehr braucht es nicht, weder eine CSS-Datei noch ein Skript.
Signatur
Made with ♥ by MG WEB & SYSTEMS.
Das Herz besteht aus den drei Ebenen meiner Marke (Infrastruktur, Anwendung, Web). Zum Einbinden in Projekte, die ich gebaut habe.
Vorschau · dunkler Footer
Vorschau · heller Footer
<!-- MG WEB & SYSTEMS · Signatur -->
<a href="https://mgws.cloud" target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:6px;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:currentColor;text-decoration:none">
<span style="opacity:.75">Made with</span>
<svg width="17" height="16" viewBox="0 0 24 22" aria-hidden="true" style="flex:none">
<clipPath id="mgws-heart"><path d="M12 21.4S1.2 14.9 1.2 7.6A6.4 6.4 0 0 1 12 3.4 6.4 6.4 0 0 1 22.8 7.6c0 7.3-10.8 13.8-10.8 13.8Z"/></clipPath>
<g clip-path="url(#mgws-heart)">
<rect width="24" height="5.6" y="0" fill="#0085CA"/>
<rect width="24" height="5.6" y="7.4" fill="currentColor" opacity=".75"/>
<rect width="24" height="5.6" y="14.8" fill="currentColor" opacity=".75"/>
</g>
</svg>
<span style="opacity:.75;color:inherit">by <strong style="font-weight:600;color:inherit">MG WEB & SYSTEMS</strong></span>
<svg width="15" height="16" viewBox="0 0 20 22" aria-hidden="true" style="flex:none">
<rect x="4" y="8" width="12" height="10" rx="2" fill="currentColor" opacity=".2"/>
<rect x="4" y="8" width="12" height="2.6" rx="1.3" fill="#0085CA"/>
<rect x="6" y="2" width="8" height="5.4" rx="1.8" fill="currentColor" opacity=".2"/>
<rect x="7.4" y="4" width="3.4" height="1.8" rx=".9" fill="#0085CA"/>
<path d="M10 2V.6" stroke="currentColor" stroke-width="1" opacity=".45"/>
<circle cx="10" cy=".4" r=".9" fill="#0085CA"/>
<circle cx="6.5" cy="19.4" r="1.4" fill="currentColor" opacity=".3"/>
<circle cx="10" cy="19.4" r="1.4" fill="currentColor" opacity=".3"/>
<circle cx="13.5" cy="19.4" r="1.4" fill="currentColor" opacity=".3"/>
</svg>
</a>Eigenständiges HTML mit Inline-SVG, alles Nötige steckt im Snippet selbst. Das Herz übernimmt die Textfarbe des Footers, nur die obere Ebene bleibt im Markenblau. Vor dem schließenden </footer> einfügen.
So baust du es ein.
WordPress
Ohne Code: Design → Widgets → Footer-Bereich → Block „Eigenes HTML" einfügen und Snippet einsetzen.
Mit Child-Theme: ins footer.php vorwp_footer().
Baukästen (Wix, Jimdo, Webflow, Shopify)
Element „HTML einbetten" / „Custom Code" in den Footer ziehen und das Snippet einfügen. In Webflow: Embed-Element, in Shopify ins Footer-Section-Template.
Astro, React, Vue & Co.
Als eigene Komponente ablegen (z. B. MadeBy.astro) und im Footer-Layout einbinden. In React die style-Attribute in Objekt-Schreibweise übersetzen, oder das SVG in eine Datei auslagern.
Farben: Text und die unteren zwei Herz-Ebenen übernehmen automatisch die Schriftfarbe des Footers. Das Badge passt sich damit hellen wie dunklen Seiten an. Nur das Markenblau #0085CA steht fest. Auf sehr hellen Hintergründen darfst du es gern auf #00679F abdunkeln, das gibt etwas mehr Kontrast.
Kontakt
Website bauen lassen
Das Badge gehört zu Websites, die ich gebaut habe. Wenn du eine brauchst, melde dich, dann sprechen wir über dein Vorhaben.