Damit der Footer unabhängig von der Auflösung immer wie in deinem Screenshot aussieht, solltest du ihn zentriert und klar strukturiert gestalten. Hier ist eine optimierte Version deines HTML- und CSS-Codes: ### HTML: ```html <div class="ahrtal-footer"> <div class="footer-content"> <div class="footer-text">© Ahrtal-Werke GmbH</div> <div class="footer-social"> <a href="https://www.facebook.com/profile.php?id=100078621652072" title="Facebook" target="_blank"> <i class="fab fa-facebook-f"></i> </a> </div> <nav class="footer-nav"> <ul> <li><a href="https://ahrtal-werke.de/service/rechtliches/stromkennzeichnung/">Stromkennzeichnung</a></li> <li><span>|</span></li> <li><a href="https://ahrtal-werke.de/datenschutz/">Datenschutz</a></li> <li><span>|</span></li> <li><a href="https://ahrtal-werke.de/impressum/">Impressum</a></li> <li><span>|</span></li> <li><a href="https://ahrtal-werke.de/kuendigung/">Verträge kündigen</a></li> </ul> </nav> </div> </div> ``` ### CSS: ```css .ahrtal-footer { background-color: #f8f9fa; /* Heller Hintergrund */ padding: 20px 0; text-align: center; font-family: Arial, sans-serif; font-size: 14px; color: #333; /* Dunkler Text */ } .footer-content { display: flex; flex-direction: column; align-items: center; gap: 10px; /* Abstand zwischen den Elementen */ } .footer-text { font-weight: bold; } .footer-social a { color: #333; font-size: 24px; /* Größe des Facebook-Icons */ text-decoration: none; margin: 0 10px; /* Abstand links und rechts */ } .footer-social a:hover { color: #007bff; /* Farbe bei Hover */ } .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; /* Sorgt für Zeilenumbruch auf kleinen Bildschirmen */ } .footer-nav li { display: inline; } .footer-nav a { color: #333; text-decoration: none; } .footer-nav a:hover { text-decoration: underline; } .footer-nav span { color: #333; /* Farbe der Trennlinien */ } ``` ### Erklärung: 1. **Flexbox für Layout:** Die `footer-content`-Klasse verwendet Flexbox, um die Elemente vertikal zu zentrieren und einen sauberen Abstand zwischen ihnen zu gewährleisten. 2. **Responsive Verhalten:** Durch `flex-wrap: wrap` in der Navigation bricht die Liste bei schmalen Bildschirmen automatisch um. 3. **Hover-Effekte:** Links und das Icon erhalten visuelles Feedback bei Mausüberfahrt. 4. **Trennlinien:** Die Trennlinien `|` sind als einfache `<span>`-Elemente implementiert und stylen sich unabhängig von den Links. Wenn du diesen Code verwendest, sollte dein Footer unabhängig von der Bildschirmauflösung konsistent aussehen.

Kein Problem! Du kannst die Schriftart direkt über CSS einbinden und die Überschrift um 4 Grad nach links drehen. Hier ist der CSS-Code, der deine Anforderungen erfüllt: ### CSS: ```css @font-face { font-family: 'Caveat'; src: url('fonts/Caveat-VariableFont_wght.ttf') format('truetype'); font-weight: normal; font-style: normal; } .catch-phrase { font-family: 'Caveat', sans-serif; font-size: 28px; /* Passe die Schriftgröße nach Bedarf an */ color: #333; /* Textfarbe */ text-align: center; /* Zentriere den Text */ transform: rotate(-4deg); /* Nach links drehen */ display: inline-block; /* Sorgt dafür, dass die Rotation sauber funktioniert */ margin: 20px 0; /* Optional: Abstand um die Überschrift */ } ``` ### Erklärung: 1. **Einbinden der Schriftart:** Mit `@font-face` bindest du die `Caveat-VariableFont_wght.ttf` ein, die im Ordner `fonts` liegt. 2. **Schriftfamilie zuweisen:** Die Klasse `.catch-phrase` verwendet die Schriftart `Caveat`. Als Fallback wird `sans-serif` verwendet, falls die Schriftart nicht geladen werden kann. 3. **Drehung:** Mit `transform: rotate(-4deg);` wird die Überschrift leicht nach links geneigt. 4. **Inline-Block:** Das `display: inline-block` stellt sicher, dass die Rotation sauber angewendet wird, ohne andere Elemente zu beeinflussen. ### Ordnerstruktur: - `fonts/Caveat-VariableFont_wght.ttf` - `external.css` (enthält den obigen CSS-Code) ### Integration in HTML: ```html <h2 class="catch-phrase">Mit den ahrtal-werken rundum versorgt.</h2> ``` Das sollte deine Überschrift mit der gewünschten Schriftart und Drehung darstellen. Lass mich wissen, falls noch etwas fehlt! 😊

Kein Problem! Wenn die Angular-App keine Schriftarten aus externen Quellen lädt, können wir die Schriftart in Base64 umwandeln und direkt in die CSS-Datei einbetten. So umgehen wir das Laden von externen Dateien. ### Vorgehen 1. **Schriftart in Base64 umwandeln:** Es gibt kostenlose Tools, wie [Base64-Online](https://www.base64-image.de/), mit denen du die Datei `Caveat-VariableFont_wght.ttf` in Base64 kodieren kannst. 2. **Schriftart direkt einbetten:** Den Base64-Code integrieren wir im `@font-face` in der CSS-Datei. ### Beispielcode mit Base64 (gekürzt als Platzhalter): ```css @font-face { font-family: 'Caveat'; src: url(data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvM........) format('truetype'); font-weight: normal; font-style: normal; } .catch-phrase { font-family: 'Caveat', sans-serif; font-size: 28px; /* Schriftgröße anpassen */ color: #333;

text-align: center; transform: rotate(-4deg); /* 4 Grad nach links */ display: inline-block; margin: 20px 0; } ``` ### Schritte: 1. **Base64 einfügen:** Ersetze den Platzhalter `data:font/ttf;base64,...` mit dem vollständigen Base64-Code, den du durch Umwandlung deiner `Caveat-VariableFont_wght.ttf` erhältst. 2. **CSS speichern:** Füge den Code in deine `external.css` ein, die in der Angular-App verwendet wird. 3. **HTML bleibt gleich:** ```html <h2 class="catch-phrase">Mit den ahrtal-werken rundum versorgt.</h2> ``` Mit diesem Ansatz wird die Schriftart direkt in die CSS-Datei eingebettet und somit unabhängig vom Laden externer Ressourcen dargestellt. Wenn du magst, kann ich die Schrift auch für dich in Base64 umwandeln!

Ja, das kann ich! Basierend auf deinem Bild und den Farben kann ich dir den entsprechenden CSS-Code für den Farbverlauf erstellen. Außerdem binden wir die Schrift sauber ein, sodass der Header exakt deinem Beispiel ähnelt. Hier ist der HTML- und CSS-Code für den Header-Bereich: ### HTML: ```html <div class="header"> <div class="header-overlay"> <h1 class="header-title">GEMEINSAM</h1> <h2 class="header-subtitle">FÜR UNSERE SCHÖNE STADT</h2> </div> </div> ``` ### CSS: ```css /* Hintergrundbild */ .header { position: relative; width: 100%; height: 400px; /* Passe die Höhe an dein Layout an */ background: url('header.png') no-repeat center center; background-size: cover; /* Bild wird vollständig abgedeckt */ } /* Farbverläufe und Text-Overlay */ .header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, rgb(34, 107, 32), /* Dunkelgrün */ rgb(149, 193, 31) 50%, /* Grün */ rgb(0, 128, 201) 50%, /* Hellblau */ rgb(4, 43, 96) /* Dunkelblau */ ); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%); } /* Textgestaltung */ .header-title { color: white; font-size: 48px; font-weight: bold; margin: 0; padding: 20px; text-transform: uppercase; } .header-subtitle { color: white; font-size: 28px; margin: 0; padding: 20px; } ``` ### Erklärung: 1. **Hintergrundbild:** - Das Bild `header.png` wird zentriert und im Hintergrund eingefügt. - `background-size: cover` sorgt dafür, dass das Bild den gesamten Bereich ausfüllt. 2. **Farbverläufe:** - Mit `linear-gradient` wird ein Verlauf von Dunkelgrün zu Grün, dann zu Hellblau und Dunkelblau erstellt. - `clip-path` schneidet den Verlauf so zu, dass er am unteren Ende eine Schräge bildet (ähnlich wie im Bild). 3. **Text:** - Der Text wird überlagert und im Weiß gehalten, passend zum Bild. Du kannst die Schriftgrößen und Ausrichtung anpassen. ### Integration: 1. **Platziere die Datei `header.png`** im gleichen Verzeichnis wie die CSS-Datei oder passe den Pfad entsprechend an. 2. Binde die CSS-Datei und den HTML-Code in deine Angular-App ein. Das sollte den Header wie in deinem Beispiel nachbauen. Lass mich wissen, falls etwas noch optimiert werden muss! 😊

Danke für die zusätzlichen Infos! Wir können das Bild direkt in das HTML integrieren und den Farbverlauf darüberlegen. Hier ist eine angepasste Lösung, die mit den gegebenen Vorgaben arbeitet: ### HTML: ```html <nav> <div class="container-fluid"> <div class="container d-flex justify-content-between flex-column flex-md-row align-items-center p-2 px-md-2 align-left"> <a class="navbar-brand" routerLink="/"> <img src="assets/external-customization/img/ahrtal-werke_logo.svg" height="50px" /> </a> </div> </div> </nav> <div class="container-fluid px-0 position-relative header"> <!-- Das Bild --> <img src="assets/external-customization/img/title.jpg" class="w-100 crop" alt="Header-Bild" /> <!-- Farbverlauf --> <div class="header-overlay"> <h1 class="header-title">GEMEINSAM</h1> <h2 class="header-subtitle">FÜR UNSERE SCHÖNE STADT</h2> </div> </div> ``` ### CSS: ```css /* Allgemeine Styling */ .header { position: relative; overflow: hidden; } /* Farbverlauf-Overlay */ .header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, rgb(34, 107, 32), /* Dunkelgrün */ rgb(149, 193, 31) 50%, /* Grün */ rgb(0, 128, 201) 50%, /* Hellblau */ rgb(4, 43, 96) /* Dunkelblau */ ); opacity: 0.85; /* Leichte Transparenz */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%); /* Schräge */ z-index: 1; } /* Textgestaltung */ .header-title { color: white; font-size: 48px; font-weight: bold; margin: 0; padding: 20px; text-transform: uppercase; text-align: center; z-index: 2; position: relative; } .header-subtitle { color: white; font-size: 28px; margin: 0; text-align: center; z-index: 2; position: relative; padding-bottom: 20px; } ``` ### Erklärung: 1. **Bildintegration:** - Das Bild `title.jpg` wird im HTML mit einem `img`-Tag eingebunden. - `class="w-100 crop"` sorgt dafür, dass es die volle Breite einnimmt. 2. **Farbverlauf:** - Die `header-overlay`-Div legt sich über das Bild. Der Farbverlauf ist an deine Farbwerte angepasst. - `clip-path` erzeugt die Schräge am unteren Ende. 3. **Text:** - Der Text ist zentriert, weiß und liegt über dem Farbverlauf. - `position: relative` und `z-index` sorgen dafür, dass der Text über dem Farbverlauf angezeigt wird. ### Integration: - Kopiere den Code in deine Angular-App und passe den Bildpfad bei `src="assets/external-customization/img/title.jpg"` an, falls notwendig. - Füge das CSS zu deiner globalen Stylesheet-Datei hinzu. Falls noch etwas angepasst werden soll, lass es mich wissen! 😊

Ah, jetzt verstehe ich besser, was du meinst! Die Farbverläufe sind auf zwei separate geometrische Formen mit spitzen Enden verteilt, und der Text ist darin integriert. Ich passe den Code entsprechend an, damit diese zwei Formen mit den angegebenen Farbverläufen dargestellt werden und der Text darauf erscheint. ### HTML: ```html <nav> <div class="container-fluid"> <div class="container d-flex justify-content-between flex-column flex-md-row align-items-center p-2 px-md-2 align-left"> <a class="navbar-brand" routerLink="/"> <img src="assets/external-customization/img/ahrtal-werke_logo.svg" height="50px" /> </a> </div> </div> </nav> <div class="container-fluid px-0 position-relative header"> <!-- Das Hintergrundbild --> <img src="assets/external-customization/img/title.jpg" class="w-100 crop" alt="Header-Bild" /> <!-- Formen mit Text --> <div class="header-shape shape-green"> <h1 class="header-text">GEMEINSAM</h1> </div> <div class="header-shape shape-blue"> <h2 class="header-text-small">FÜR UNSERE SCHÖNE STADT</h2> </div> </div> ``` ### CSS: ```css /* Allgemeines Styling */ .header { position: relative; overflow: hidden; } /* Das Bild */ .header img { width: 100%; display: block; } /* Geometrische Formen */ .header-shape { position: absolute; height: 120px; width: 60%; color: white; display: flex; align-items: center; justify-content: center; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); } .shape-green { top: 30%; left: 0; background: linear-gradient(to right, rgb(34, 107, 32), rgb(149, 193, 31)); } .shape-blue { top: 40%; left: 30%; background: linear-gradient(to right, rgb(0, 128, 201), rgb(4, 43, 96)); } /* Textstyling */ .header-text { font-size: 36px; font-weight: bold; text-transform: uppercase; margin: 0; padding: 10px; } .header-text-small { font-size: 24px; margin: 0; padding: 10px; } ``` ### Erklärung: 1. **Geometrische Formen:** - Jede Form hat eine spezifische Farbe (grün oder blau) und ist mit einem Farbverlauf gefüllt. - Die rechte Spitze wird mit `clip-path: polygon()` geformt. - Die Positionen (`top` und `left`) sorgen dafür, dass die Formen versetzt übereinander liegen. 2. **Text:** - Der Text wird innerhalb der Formen zentriert dargestellt und hat eine passende Größe. - `header-text` für den größeren Text ("GEMEINSAM") und `header-text-small` für den kleineren Text. 3. **Positionierung:** - Die Formen und der Text sind absolut positioniert und unabhängig vom Hintergrundbild. 4. **Bilder und Farben:** - Das Hintergrundbild bleibt im Fokus, aber die Formen und Verläufe heben sich klar davon ab. Soll die Größe, Position oder der Winkel der Formen angepasst werden? 😊

Danke für die Klarstellung! Ich passe die Formen an, sodass sie nur so groß sind, dass sie den Text fassen, und ordne sie entsprechend deiner Beschreibung direkt übereinander an. Beide Formen überlappen das Hintergrundbild nur leicht auf der linken Seite. Hier ist der angepasste Code: --- ### HTML: ```html <nav> <div class="container-fluid"> <div class="container d-flex justify-content-between flex-column flex-md-row align-items-center p-2 px-md-2 align-left"> <a class="navbar-brand" routerLink="/"> <img src="assets/external-customization/img/ahrtal-werke_logo.svg" height="50px" /> </a> </div> </div> </nav> <div class="container-fluid px-0 position-relative header"> <!-- Das Hintergrundbild --> <img src="assets/external-customization/img/title.jpg" class="w-100 crop" alt="Header-Bild" /> <!-- Formen mit Text --> <div class="header-shape shape-green"> <h1 class="header-text">GEMEINSAM</h1> </div> <div class="header-shape shape-blue"> <h2 class="header-text-small">FÜR UNSERE SCHÖNE STADT</h2> </div> </div> ``` --- ### CSS: ```css /* Allgemeines Styling */ .header { position: relative; overflow: hidden; } /* Das Hintergrundbild */ .header img { width: 100%; display: block; } /* Geometrische Formen */ .header-shape { position: absolute; color: white; display: flex; align-items: center; justify-content: center; padding: 10px 20px; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); } /* Grüne Form */ .shape-green { top: 20%; /* Überlappung mit dem Bild */ left: 2%; /* Leichte Überlappung */ background: linear-gradient(to right, rgb(34, 107, 32), rgb(149, 193, 31)); } /* Blaue Form */ .shape-blue { top: 30%; /* Direkt unter der grünen Form */ left: 2%; /* Gleiche Überlappung */ background: linear-gradient(to right, rgb(0, 128, 201), rgb(4, 43, 96)); } /* Text in den Formen */ .header-text { font-size: 24px; font-weight: bold; text-transform: uppercase; margin: 0; text-align: center; } .header-text-small { font-size: 18px; margin: 0; text-align: center; } ``` --- ### Änderungen: 1. **Formgröße:** - Die Größe der Formen passt sich nun dem Inhalt automatisch an. Das wird durch das **Padding** und das Fehlen fester Breiten oder Höhen realisiert. 2. **Positionierung:** - Beide Formen liegen leicht übereinander, und die blaue Form ist direkt unter der grünen positioniert. Die leichte Überlappung erfolgt durch `top` und `left`. 3. **Zentrierung und Textgröße:** - Der Text wird durch flexibles Layout in den Formen perfekt zentriert. - Die Schriftgrößen sind etwas verkleinert, um den Text optimal in die Formen einzupassen. 4. **Bessere Responsivität:** - Die Formen passen sich bei Änderungen der Bildschirmgröße dynamisch an, da keine festen Maße definiert sind. Soll ich noch Feinanpassungen vornehmen? 😊