diff --git a/userman_all/client/assets/Indien.jpg b/userman_all/client/assets/Indien.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a19b7927489c963555c3ca8ce5d0efe7b7ac116a
Binary files /dev/null and b/userman_all/client/assets/Indien.jpg differ
diff --git a/userman_all/client/assets/Kenia.jpg b/userman_all/client/assets/Kenia.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0246e6b0af7615513698b49f7420746d6d725f8a
Binary files /dev/null and b/userman_all/client/assets/Kenia.jpg differ
diff --git a/userman_all/client/assets/Bild.jpg b/userman_all/client/assets/Produkt Spanien.jpg
similarity index 100%
rename from userman_all/client/assets/Bild.jpg
rename to userman_all/client/assets/Produkt Spanien.jpg
diff --git a/userman_all/client/assets/Spanien.jpg b/userman_all/client/assets/Spanien.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0e12482da878457e8128637f8ad31e39ae1f16b3
Binary files /dev/null and b/userman_all/client/assets/Spanien.jpg differ
diff --git a/userman_all/client/index.html b/userman_all/client/index.html
index 2dad744a087b3fe333c67aaba9f3725acd23bf1d..13a80e2014379384bfac45e298b776bc81ec9f02 100644
--- a/userman_all/client/index.html
+++ b/userman_all/client/index.html
@@ -66,7 +66,7 @@
</div>
<div id="startseite" class="page active">
- <!--Startseite hero-bereich-->
+ <!--Startseite -bereich-->
<div class="hero">
<img src="assets/heroimage.jpg" height="570" width="1668" alt="Hero-Bild" class="hero-image"/>
<div class="hero-text">
@@ -173,6 +173,72 @@
</div>
</div>
+
+<!-- Erfahrungsberichte Startseite-->
+<div class="erfahrungsberichte">
+ <div class="header-berichte-title">
+ <h2>Unsere Reisen, Eure Erlebnisse</h2>
+ </div>
+ <div class="header-berichte-title1">
+ <p>Horizon Changers travel experience</p>
+ </div>
+
+ <div class="cards-container">
+ <!-- Card 1 -->
+ <div class="card">
+ <img src="assets/Kenia.jpg" alt="Kenia" height="114" width="257"/>
+ <div class="card-content">
+ <h3>Kenia</h3>
+ <p>Schon bei der Ankunft spüre ich: Dieses Abenteuer wird unvergesslich... </p>
+ <br>
+ <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>
+ </div>
+ <button class="card-button">weiter lesen</button>
+ </div>
+
+ <!-- Card 2 -->
+ <div class="card">
+ <img src="assets/Spanien.jpg" height="114" width="257" alt="Spanien">
+ <div class="card-content">
+ <h3>Spanien</h3>
+ <p>Ein Land voller Magie und Vielfalt. Jeder Moment erzählt eine neue Geschichte, geprägt von Farben, Düften und...</p>
+ <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>
+ </div>
+ <button class="card-button">weiter lesen</button>
+ </div>
+
+ <!-- Card 3 -->
+ <div class="card">
+ <img src="assets/Indien.jpg" alt="Indien" height="114" width="257"/>
+ <div class="card-content">
+ <h3>Indien</h3>
+ <p>Ein Ort der Sinne und Seele berührt. Jede Ecke birgt neue Wunder...</p>
+ <br>
+ <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>
+ </div>
+ <button class="card-button">weiter lesen</button>
+ </div>
+ </div>
+</div>
+
<!--Registrieren-Seite-->
<div id="registrieren" class="page justify-content-center">
<i class="fa-solid fa-circle-arrow-left backButton"></i>
@@ -734,7 +800,104 @@
</main>
</div>
+<!--Reisen-->
+
+<div id="reisen" class="page">
+<div class="reisen">
+<body>
+<header.reisen>
+ <i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
+ <h1>Bereise gemeinsam mit uns die Welt!</h1>
+</header.reisen>
+
+<section class="filter-section">
+ <div class="filter-container">
+ <select name="country" id="country1">
+ <option value="">Land</option>
+ <option value="indien">Indien</option>
+ <option value="spanien">Spanien</option>
+ <option value="kenia">Kenia</option>
+ <option value="peru">Kenia</option>
+ </select>
+
+ <select name="project-type" id="project-type">
+ <option value="">Freiwilligenprojekt</option>
+ <option value="bildung">Bildungslicht für Frauen</option>
+ <option value="tierschutz">Pfoten ohne Grenzen</option>
+ <option value="gesundheit">Bausteine der Gesundheit</option>
+ <option value="gesundheit">Lebensquellen</option>
+ </select>
+
+ <div class="price-filter">
+ <label for="price">Preis</label>
+ <input type="range" id="price" name="price" min="0" max="5000" step="500">
+ <div class="price-values">
+ <span>0</span>
+ <span>5.000</span>
+ </div>
+ </div>
+
+ <button class="filter-button">Filtern</button>
+ </div>
+</section>
+
+<section class="projects-section">
+ <div class="project-card">
+ <img src="assets/bevorstehendeReisen.jpg" height="890" width="736" alt="Bildungslicht für Frauen"/>
+ <h3>Bildungslicht für Frauen</h3>
+ <p>Schulen und Träume in Indien verwirklichen</p>
+ <ul class="project-info">
+ <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
+ <li><i class="fa-solid fa-earth-americas"></i> Indien</li>
+ <li><i class="fa-solid fa-star"></i>4,6</li>
+ </ul>
+ <p class="price">ab 1.500€</p>
+ <button class="info-button">Mehr Infos</button>
+ </div>
+ <div class="project-card">
+ <img src="assets/Produkt%20Spanien.jpg" height="920" width="736" alt="Pfoten ohne Grenzen"/>
+ <h3>Pfoten ohne Grenzen</h3>
+ <p>Eine Reise zur Rettung von Straßenhunden</p>
+ <ul class="project-info">
+ <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
+ <li><i class="fa-solid fa-earth-americas"></i> Spanien</li>
+ <li><i class="fa-solid fa-star"></i>4,8</li>
+ </ul>
+ <p class="price">ab 1.500€</p>
+ <button class="info-button">Mehr Infos</button>
+ </div>
+
+ <div class="project-card">
+ <img src="assets/keniaprojekt.jpeg" height="491" width="736" alt="Lebensquellen Kenia"/>
+ <h3>Lebensquellen Kenia</h3>
+ <p>Brunnenbau für eine bessere Welt</p>
+ <br>
+ <ul class="project-info">
+ <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
+ <li><i class="fa-solid fa-earth-americas"></i> Kenia</li>
+ <li><i class="fa-solid fa-star"></i>4,9</li>
+ </ul>
+ <p class="price">ab 1.500€</p>
+ <button class="info-button">Mehr Infos</button>
+ </div>
+
+ <div class="project-card">
+ <img src="assets/peruprojekt (1).jpeg" height="445" width="667" alt="Bausteine der Gesundheit"/>
+ <h3>Bausteine der Gesundheit</h3>
+ <p>Sanitäranlagen für eine nachhaltige Zukunft in Peru</p>
+ <ul class="project-info">
+ <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
+ <li><i class="fa-solid fa-earth-americas"></i> Peru</li>
+ <li><i class="fa-solid fa-star"></i>4,6</li>
+ </ul>
+ <p class="price">ab 1.500€</p>
+ <button class="info-button">Mehr Infos</button>
+ </div>
+</section>
+</body>
+</div>
+</div>
<!--Footer-->
diff --git a/userman_all/client/stylesheet.css b/userman_all/client/stylesheet.css
index d844338bd11daba933f6fece7b0b88b80d5d3137..196bdc538f41ab85b563ecf204c9652482a29923 100644
--- a/userman_all/client/stylesheet.css
+++ b/userman_all/client/stylesheet.css
@@ -1383,6 +1383,100 @@ textarea {
}
+/* Erfahrungsberichte Startseite*/
+
+.erfahrungsberichte {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+
+.header-berichte-title {
+ font-family: "Cy Grotesk Wide";
+ font-size: 2rem;
+ color: #03355C;
+ margin-bottom: 10px;
+ text-align: center;
+}
+
+.header-berichte-title1 {
+ font-family: "DM Sans", sans-serif;
+ font-size: 1rem;
+ color: #03355C;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.cards-container {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ flex-wrap: wrap;
+ margin-bottom: 40px;
+ box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
+}
+
+.card {
+ background: white;
+ border-radius: 40px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ width: 300px; /* Feste Breite */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ text-align: center;
+}
+
+.card img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+}
+
+.card-content {
+ padding: 20px;
+ flex-grow: 1; /* Gleichmäßiges Wachstum */
+}
+
+.card-content h3 {
+ font-family: "DM Sans", sans-serif;
+ font-size: 1.5rem;
+ margin-bottom: 10px;
+ color: #03355C;
+}
+
+.card-content p {
+ font-family: "DM Sans", sans-serif;
+ font-size: 0.9rem;
+ color: #03355C;
+ margin-bottom: 20px;
+}
+
+.stars {
+ color: #ff9900;
+ margin-bottom: 10px;
+}
+
+.card-button {
+ background-color: #bdd4ce;
+ color: #ffffff;
+ padding: 10px 15px;
+ border: none;
+ border-radius: 50px;
+ text-transform: uppercase;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ margin: 0 20px 20px;
+}
+
+.card-button:hover {
+ background-color: #afd3c6;
+}
+
+
.reisebericht-card {
width: 662px;
height: auto;