Newer
Older
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Manager</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
<header>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assets/helles logo.png" width="94" height="80" alt="Logo" onclick="showPage('startseite')"/>
<li><a onclick="showPage('reisen')">Reisen</a></li>
<li><a onclick="showPage('about-Us')">About Us</a></li>
<li><a onclick="showPage('kontakt')">Kontakt</a></li>
</div>
<div class="dropdown">
<div type="button" class="btn" data-bs-toggle="dropdown">
<i class="fa-solid fa-circle-user"></i>
</div>
<label for="exampleDropdownFormEmail2" class="form-label">E-Mail</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Passwort</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2">
</div>
<button type="submit" class="btn btn-primary" id="login-button" onclick="showPage('meineReisen')">Login</button>
<a class="dropdown-item" onclick="showPage('registrieren')"><u>Registrieren</u></a>
<div class="hero">
<img src="assets/heroimage.jpg" height="570" width="1668" alt="Hero-Bild" class="hero-image"/>
<div class="hero-text">
<p>your journey begins</p>
<h1>Entdecken, Erleben, Unterstützen</h1>
<button id="hero-button" onclick="showPage('reisen')">Reise mit uns! </button>
</div>
</div>
<!-- Titeltext-->
<section class="horizon-changers-opening">
<div class="horizon-changers-opening-container">
Bei uns erlebst du Reisen, die Herz und Abenteuerlust vereinen. Tauche ein in soziale Projekte, entdecke <br> neue Kulturen und spüre den Nervenkitzel unvergesslicher Outdoor-Erlebnisse. Mach deine Reise zu etwas Bedeutungsvollem! <br> Wähle ein soziales Projekt plus passende abenteuerliche Freizeitaktivitäten (die Erste ist inklusive) und <br> starte in dein Abenteuer...
</p>
<a class="horizon-changers-button" onclick="showPage('about-Us')"> Mehr erfahren</a>
<div class="carousel-title" id="carousel-title">
<h2>Unsere Reisen</h2>
<p>Beginne jetzt die Reise deines Lebens</p>
</div>
<div class="carousel-wrapper" id="beispielreisen-carrousel">
<!-- Karussell -->
<div id="travelCarousel" class="carousel slide">
<div class="carousel-inner">
<!-- Erstes Element -->
<div class="carousel-item active">
<div class="card-carrousel-reisen">
<div class="position-relative">
<img src="assets/spanienprojket 2.jpg" class="card-img-beispiel" alt="Erlebe Spanien"><img/>
<span class="bestseller-badge">Bestseller</span>
</div>
<div class="card-body">
<h5 class="card-title-carousel">Erlebe Spanien von einer besonderen Seite - Pfoten ohne Grenzen</h5>
<p class="card-text-carousel">Hilf dabei, Straßenhunde zu retten und ihnen ein besseres Leben zu schenken! Tauche ein in die lokale Kultur, arbeite mit engagierten Tierschutzteams zusammen und genieße unvergessliche Momente an Spaniens sonnigen Küsten. Dein Einsatz macht den Unterschied!</p>
</div>
<!-- Zweites Element -->
<div class="carousel-item">
<div class="card-carrousel-reisen">
<div class="position-relative">
<img src="assets/keniaprojekt.jpeg" class="card-img-beispiel" alt="Reiseziel 2">
<span class="bestseller-badge">Neu</span>
<i class="favorite-icon fa-regular fa-heart"></i>
</div>
<div class="card-body">
<h5 class="card-title-carousel">Mach den Unterschied - Lebensquelle in Kenia</h5>
<p class="card-text-carousel">Hilf dabei Brunnen für Trinkwasser zu bauen. Sei der Unterschied selbst.</p>
</div>
<!-- Drittes Element -->
<div class="carousel-item">
<div class="card-carrousel-reisen">
<div class="position-relative">
<img src="assets/peruprojekt (1).jpeg" class="card-img-beispiel" alt="Reiseziel 3">
<span class="bestseller-badge">Beliebt</span>
<i class="favorite-icon fa-regular fa-heart"></i>
</div>
<div class="card-body">
<h5 class="card-title-carousel">Lebensqualität in Peru - Lebenscomfort für jeden</h5>
<p class="card-text-carousel">Tauche ein in die Welt des Inselparadieses. Genieße traumhafte Strände, kristallklares Wasser und entspannte Stunden unter der Sonne.</p>
</div>
<div>
<button class="carousel-control-prev" type="button" data-bs-target="#travelCarousel" data-bs-slide="prev">
<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
<span class="visually-hidden">Vorherige</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#travelCarousel" data-bs-slide="next">
<i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
<span class="visually-hidden">Nächste</span>
</button>
</div>
<div class="header">
<h1 id="h1-landkarte"> Unsere Länder</h1>
<p id="subtitle-landkarte">Die Welt ist voller Abenteuer – wohin führt Deine nächste Reise?</p>
</div>
<div class="map-container">
<img src="assets/MAPLÄNDER.png" alt="Weltkarte" class="map" height="484" width="860"/>
<div class="pin" title="Südamerika"></div>
<div class="pin" title="Afrika"></div>
<div class="pin" title="Asien"></div>
</div>
<div id="registrieren" class="page justify-content-center">
<i class="fa-solid fa-circle-arrow-left backButton"></i>
<label for="add-user-first-name" class="d-none">Vorname</label>
<input type="text" class="form-control-registrieren" id="add-user-first-name">
<label for="add-user-last-name" class="d-none">Name</label>
<input type="text" class="form-control-registrieren" id="add-user-last-name">
<label for="add-user-email" class="d-none">E-Mail</label>
<input type="text" class="form-control-registrieren" id="add-user-email">
<label for="add-user-password" class="d-none">Passwort</label>
<input type="password" class="form-control-registrieren" id="add-user-password">
<div id="label5" class="form-text-registrieren">
Passwort wiederholen
<label for="add-user-repeatPassword" class="d-none">Passwort wiederholen</label>
<input type="password" class="form-control-registrieren" id="add-user-repeatPassword">
<button type="submit" class="btn btn-primary" id="registrierenButton" onclick="showPage ('meineReisen')">Registrieren</button>
<i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
<p class="greeting" id="current-user-firstName">Hallo,</p>
<li><a href="#">Meine Reisen</a></li>
<li><a onclick="showPage('profil')">Mein Profil</a></li>
<li><a href="#">Merkliste</a></li>
<li><a href="#">Meine Supportanfragen</a></li>
<li><a onclick="showPage ('meineReiseberichte')">Meine Reiseberichte </a></li>
<div id="logout-form">
<li><a id="logout-button" onclick="showPage('startseite')">Abmelden</a></li>
</div>
</ul>
</nav>
</aside>
<main class="content">
<section>
<h2>Meine bevorstehenden Reisen</h2>
<div class="trip-card">
<img src="assets/bevorstehendeReisen.jpg" height="890" width="736" alt="Projekt Bildung für Frauen"/>
<div class="trip-info">
<h3>Projekt Bildungslicht für Frauen (Indien)</h3>
<button class="details-button">Details</button>
</div>
</div>
</section>
<section>
<h2>Meine angetretenen Reisen</h2>
<div class="trip-card">
<img src="assets/angetreteneReisen.jpg" height="1000" width="667" alt="Projekt Bausteine der Gesundheit"/>
<div class="trip-info">
<h3>Projekt Bausteine der Gesundheit (Peru)</h3>
<button class="details-button">Details</button>
<button class="report-button" onclick="showPage('reiseberichtSchreiben')">Reisebericht schreiben</button>
</div>
</div>
</section>
</main>
</div>
</div>
<!--Profil-->
<div id="profil" class="page">
<i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
<p class="greeting">Hallo,</p>
<li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
<li><a>Mein Profil</a></li>
<li><a>Merkliste</a></li>
<li><a>Meine Supportanfragen</a></li>
<li><a onclick="showPage ('meineReiseberichte')">Meine Reiseberichte </a></li>
<div id="logout-form1">
<li><a id="logout-button1" onclick="showPage('startseite')">Abmelden</a></li>
</div>
<!-- FORMULAR mit Profildaten und zum bearbeiten im Formular-->
<div class="profil-container">
<h1>Profil</h1>
<div class="profil-card">
<div class="section">
<h2>Persönliche Daten</h2>
<form id="edit-profile-form">
<div id="label1edit" class="form-text-profile">
Vorname
<label for="edit-user-first-name" class="d-none">Vorname</label>
<input type="text" class="form-control-registrieren" id="edit-user-first-name">
<div id="label2edit" class="form-text-profile">
Nachname
<label for="edit-user-last-name" class="d-none">Name</label>
<input type="text" class="form-control-registrieren" id="edit-user-last-name">
<div id="label3edit" class="form-text-profile">
E-Mail
<label for="edit-user-email" class="d-none">E-Mail</label>
<input type="text" class="form-control-registrieren" id="edit-user-email">
<div class="section">
<h2>Adressdaten</h2>
<div id="label5edit" class="form-text-profile" >
Adresse
<label for="edit-user-adress" class="d-none">Adresse</label>
<input type="text" class="form-control-registrieren" id="edit-user-adress">
</div>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
Profil löschen
</button>
<!-- Delete-Popup-Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="deleteModalLabel">Profil löschen</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Bist du dir sicher, dass du dein Profil löschen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
</div>
<div class="modal-footer">
<button type="submit" id="saveButtonDelete" class="btn btn-danger">Löschen</button>
</div>
</div>
</div>
</div>
<!-- Edit Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#updateModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Zum Speichern der Änderungen ist die Passworteingabe erforderlich</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Passwort
<label for="modal-password" class="d-none">Passwort</label>
<input type="password" class="form-control-registrieren-modal" id="modal-password">
</div>
<div class="modal-footer">
<button type="submit" id="saveButtonEdit" class="btn btn-primary">Sichern</button>
</div>
</div>
</div>
</div>
<!--AboutUs-->
<div id="about-Us" class="page">
<div class="containerAboutUs">
<header class="hero">
<img src="assets/heroAboutUs.jpeg" height="1104" width="736" alt="Teamwork" class="hero-image-aboutUs">
</header>
<main>
<!-- Über uns Abschnitt -->
<section class="about-section">
<div class="container">
<div class="row align-items-center">
<!-- Textblock auf der linken Seite -->
<div class="col-lg-6">
<h1>Horizon Changers</h1>
<h2>Entdecken, Erleben, Unterstützen</h2>
<br>
<div class="text-box">
<p>
Horizon Changers wurde gegründet auf einer Vision: soziales Engagement, Urlaub und abenteuerliche Aktivitäten verbinden. Wir bieten Reisen, bei denen Teilnehmer an Freiwilligenprojekten in Bereichen wie Bildung und Umweltschutz mitwirken und gleichzeitig spannende Aktivitäten wie Elefantentouren genießen können.
Unser Ziel ist es, den Reisenden eine tiefere Verbindung zu den Kulturen und Gemeinschaften zu ermöglichen, in denen sie helfen. Ein Beispiel ist unser Projekt zum Bau von Schulen für Frauen, das den Zugang zu Bildung fördert. Wir legen großen Wert auf Nachhaltigkeit und respektvollen Umgang mit den lokalen Kulturen und möchten, dass jeder Reisende mit einem positiven Einfluss zurückkehrt.
</p>
</div>
</div>
<!-- Bild auf der rechten Seite -->
<div class="col-lg-6">
<img src="assets/UnternehmenAboutUs.jpg" class="img-fluid about-image" alt="Unser Team">
</div>
</div>
</section>
<!-- Philosophie Abschnitt -->
<section class="philosophy-section">
<div class="container">
<div class="row align-items-center">
<!-- Bild auf der linken Seite -->
<div class="col-lg-6">
<img src="assets/PhilosophieAboutUs.jpg" class="img-fluid philosophy-image" alt="Unsere Mission">
</div>
<!-- Textblock auf der rechten Seite -->
<div class="col-lg-6">
<div class="text-box-philosophie">
<h2>Unsere Philosophie</h2>
<p>
Bei Horizon Changers verbinden wir Reisen mit sozialem Engagement, um ein erfüllendes Erlebnis zu schaffen. Unsere Teilnehmer nehmen an Freiwilligenprojekten teil und entdecken gleichzeitig neue Kulturen und Sehenswürdigkeiten.
Indien hat mich durch lebendige Straßen, beeindruckende Elefantentouren und ein berührendes Projekt, bei dem ich den Bau einer Schule für Frauen unterstützte, tief inspiriert. Unsere Reisen bieten eine ausgewogene Mischung aus Freizeit und sinnvollem Engagement in Bereichen wie Bildung und Umwelt.
Wir setzen auf nachhaltige Praktiken, respektieren lokale Kulturen und fördern Empowerment. Horizon Changers lädt dazu ein, die Welt zu entdecken und gleichzeitig einen positiven Einfluss zu hinterlassen.
</p>
</div>
</div>
</div>
</section>
<!-- Stimmen von Unterwegs -->
<section class="testimonials">
<h2>Stimmen von Unterwegs</h2>
<div class="testimonial">
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<p class="name">Annika Kastner</p>
<p class="quote">
Es war die erfüllendste Reise, die ich je erleben durfte!
</p>
<div class="testimonial">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p class="name">Max Mustermann</p>
<p class="quote">
Ich habe mich noch nie so mit Menschen und Kulturen verbunden gefühlt, wie auf dieser Reise!
</p>
<div class="sidebarAdmin-container">
<aside class="sidebarAdmin">
<i class="fa-solid fa-circle-arrow-left backButton"></i>
<nav class="menu">
<ul>
<li><a>Dashboard</a></li>
<li><a>Kundendaten</a></li>
<div id="logout-form2">
<li><a id="logout-button2" onclick="showPage('startseite')">Abmelden</a></li>
</div>
<tr>
<th>
ID
</th>
<th>
Vorname
</th>
<th>
Name
</th>
</tr>
</thead>
<tbody id="user-list">
</tbody>
</table>
<form id="edit-user-admin-form">
<div class="modal-header">
<h1 class="modal-title fs-5" id="updateModalLabel">Daten von Nutzer bearbeiten</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body card">
<input type="hidden" id="edit-user-admin-id">
<input type="text" class="form-control-bearbeiten" id="edit-user-admin-first-name">
</div>
<div id="label2edituser" class="form-text-profile">
Nachname
<input type="text" class="form-control-bearbeiten" id="edit-user-admin-last-name">
</div>
<div id="label3edituser" class="form-text-profile">
E-Mail
<input type="text" class="form-control-bearbeiten" id="edit-user-admin-email">
</div>
<div id="label4edituser" class="form-text-profile" >
Adresse
<label for="edit-user-admin-adress" class="d-none">Adresse</label>
<input type="text" class="form-control-bearbeiten" id="edit-user-admin-adress">
</div>
<div id="label5edituser" class="form-text-profile" >
Rolle
<label for="edit-user-admin-role" class="d-none">Rolle</label>
<input type="text" class="form-control-bearbeiten" id="edit-user-admin-role">
</div>
<div class="modal-footer">
<button type="submit" id="updateButtonEdit" class="editButton">Aktualisieren</button>
</div>
</div>
</form>
<div class="modal fade" id="deleteModalAdmin" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="deleteModalAdminLabel">Nutzerdaten löschen</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Sind Sie sicher, dass Sie den Nutzer löschen wollen?
</div>
<div class="modal-footer">
<button type="submit" id="nodeleteButtonEdit" class="btn btn-primary">abbrechen</button>
<button type="submit" id="deleteButtonAdmin" class="btn btn-primary">löschen</button>
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
<!--Impressum-->
<div id="Impressum" class="page">
<div class="container-Impressum">
<i class="fa-solid fa-circle-arrow-left backButton"></i>
<h1>Impressum</h1>
<section class="impressum">
<h2>Impressum</h2>
<br>
<h3>Horizon Changers</h3>
<p>Musterstraße 123<br>12345 Musterstadt<br>Deutschland</p>
<h3>Vertreten durch:</h3>
<p>Max Mustermann (Geschäftsführer)</p>
<h3>Kontakt:</h3>
<p>
Telefon: +49 (0)123 4567890<br>
E-Mail: <a href="mailto:info@horizonchangers.de">info@horizonchangers.de</a><br>
Web: <a href="http://www.horizonchangers.de" target="_blank">www.horizonchangers.de</a>
</p>
<h3>Registereintrag:</h3>
<p>
Eingetragen im Handelsregister.<br>
Registergericht: Amtsgericht Musterstadt<br>
Registernummer: HRB 123456
</p>
<h3>Umsatzsteuer-ID:</h3>
<p>DE123456789</p>
<h3>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</h3>
<p>
Max Mustermann<br>
Musterstraße 123<br>
12345 Musterstadt
</p>
<h3>Hinweis auf EU-Streitschlichtung:</h3>
<p>
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung bereit.
<br>
<br>
Unsere E-Mail-Adresse finden Sie oben im Impressum.
</p>
</section>
<section class="datenschutz">
<h3>Datenschutz</h3>
<p>
Sämtliche innerhalb des Internetauftritts verwendeten Texte, Bilder und Grafiken sind geistiges Eigentum und damit urheberrechtlich geschützt. Es besteht weder ein Recht auf Kopie, Download oder Abschrift. Insbesondere besteht kein Recht auf weitere Verwendung, es sei denn, ein Nutzungsrecht hierfür sei ausdrücklich eingeräumt worden.
<br>
Haftungsausschluss
<br>
Wir haben den Inhalt unserer Seiten nach bestem Wissen und Gewissen zusammengestellt. Eine Gewähr für die Funktion, Aktualität, Richtigkeit, Vollständigkeit oder Qualität der Informationen unserer Internet-Seiten, der Link-Verweise und insbesondere der Informationen der verwiesenen („verlinkten“) Internetseiten der Drittanbieter (inklusive Rechtmäßigkeit des Inhaltes) kann angesichts der Unentgeltlichkeit aber nicht übernommen werden. Die Rechte an diesen Seiten sowie die Verantwortlichkeit für deren Inhalt liegen ausschließlich beim Drittanbieter.
</p>
</section>
</div>
</div>
<!--Reisebericht schreiben-->
<div id="reiseberichtSchreiben" class="page">
<aside class="sidebar">
<i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
<p class="greeting">Hallo,</p>
<nav class="menu">
<ul>
<li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
<li><a>Mein Profil</a></li>
<li><a>Merkliste</a></li>
<li><a>Meine Supportanfragen</a></li>
<li><a onclick="showPage ('meineReiseberichte')">Meine Reiseberichte </a></li>
<div id="logout-form3">
<li><a id="logout-button3" onclick="showPage('startseite')">Abmelden</a></li>
</div>
</ul>
</nav>
</aside>
<div class="reiseberichtFormular">
<h1>Wie war Deine Reise mit Uns?</h1>
<label for="country">Land auswählen</label>
<select id="country" name="country">
<option value="">-- Bitte wählen --</option>
<option value="spanien">Spanien</option>
<option value="peru" >Peru</option>
<option value="indien">Indien</option>
<option value="kenia">Kenia</option>
<div class="rating" id="ratingReisebericht">
<span id="stern1">★</span>
<span id="stern2">★</span>
<span id="stern3">★</span>
<span id="stern4">★</span>
<span id="stern5">★</span>
</div>
<label for="titleReisebericht">Titel</label>
<input type="text" id="titleReisebericht" name="title" placeholder="titel">
<label for="feedback">Feedback</label>
<textarea id="feedback" name="feedback" placeholder="Schreibe hier dein Feedback..."></textarea>
</form>
</div>
</div>
<!--Meine Reiseberichte-->
<div id="meineReiseberichte" class="page">
<aside class="sidebar">
<i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
<p class="greeting">Hallo,</p>
<nav class="menu">
<ul>
<li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
<li><a>Mein Profil</a></li>
<li><a>Merkliste</a></li>
<li><a>Meine Supportanfragen</a></li>
<li><a onclick="showPage ('meineReiseberichte')" id="meineReiseberichteSeite" >Meine Reiseberichte </a></li>
<div id="logout-form4">
<li><a id="logout-button4" onclick="showPage('startseite')">Abmelden</a></li>
</div>
</ul>
</nav>
</aside>
<main class="content">
<section id="sectionNewReisebericht">
<h2>Meine Reiseberichte</h2>
<div class="reisebericht-card" id="reisebericht-card">
<h3 id="titelReise">Meine Reise in Indien</h3>
<h5 id="reiseland"> ...</h5>
<p id="reisebeschreibung">Das Projekt setzt sich dafür ein, Frauen in benachteiligten Regionen Indiens Zugang zu Bildung und beruflichen Chancen zu ermöglichen. Schon bei meiner Ankunft wurde deutlich, wie wichtig diese Arbeit ist: Die strahlenden Augen der Teilnehmerinnen und ihre Geschichten zeigten, dass Bildung für sie ein Tor zu einem besseren Leben bedeutet.</p>
<button class="details-button">Reisebericht löschen</button>
<button class="report-button" onclick="showPage('reiseberichtSchreiben')">Reisebericht bearbeiten</button>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-container">
<div class="footer-logo">
<img src="assets/HORIZON CHANGERS.PNG" alt="Horizon Changers Logo"/>
</div>
<div class="footer-section">
<h4>Nützliche Informationen</h4>
<ul>
<li> <a href="#">FAQ</a>
</li>
</ul>
</div>
<div class="footer-section">
<h4>Unsere Zahlungsmöglichkeiten</h4>
<div class="payment-icons">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Paypal_2014_logo.png" alt="PayPal">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Klarna_Payment_Badge.svg/1280px-Klarna_Payment_Badge.svg.png" alt="Klarna">
<img src="https://e7.pngegg.com/pngimages/530/165/png-clipart-logo-mastercard-pentagram-flat-design-brand-mastercard-text-trademark.png" alt="Mastercard">
<img src="https://img.icons8.com/?size=512&id=13608&format=png" alt="Visa">
</div>
</div>
<div class="footer-section">
<h4>Mehr Inspirationen</h4>
<div class="social-icons">
<a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>Copyright © 2025 Horizon Changers GmbH | Alle Rechte vorbehalten</p>
</div>
</footer>