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/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 43138b6bbf540ffa7fab653ec3bf2558e3d49db6..bd34d87870020b1368e06d85819b0b7ed570dc80 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>
diff --git a/userman_all/client/stylesheet.css b/userman_all/client/stylesheet.css
index dd162c9577b7fd6e9a98a602ef2a5903ba10b6e9..e34c9c2fc79c00f32a18664d5fd35a351a969b65 100644
--- a/userman_all/client/stylesheet.css
+++ b/userman_all/client/stylesheet.css
@@ -1265,16 +1265,16 @@ h2 {
}
-h1 {
+.container-Impressum {
font-family: "Cy Grotesk Wide";
font-size: 43px;
color: #03355C;
margin-bottom: 20px;
}
-h2{
+.impressum{
font-family: DM Sans, sans-serif, bold;
- font-size: 26px;
+ font-size: 20px;
color: #03355C;
margin-top: 30px;
margin-bottom: 10px;
@@ -1380,4 +1380,108 @@ textarea {
.reiseberichtAbsenden:hover {
background-color: #e36c20;
-}
\ No newline at end of file
+}
+
+/*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 {
+ font-family: "DM Sans", sans-serif;
+ color: #03355C;
+ padding: 20px;
+ text-align: center;
+ display: flex;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ gap: 20px;
+ flex-wrap: wrap;
+ overflow-x: hidden;
+
+ }
+
+
+ .cards-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 20px;
+ box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
+ }
+ .card {
+ background: white;
+ border-radius: 30px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ width: 300px; /* Feste Breite */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .card img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+ }
+
+ .card-content {
+ padding: 20px;
+ flex-grow: 1; /* Gleichmäßiges Wachstum */
+ }
+
+ .card-content h3 {
+ font-size: 1.5rem;
+ margin-bottom: 10px;
+ color: #033355;
+ }
+
+ .card-content p {
+ font-size: 0.9rem;
+ color: #555;
+ margin-bottom: 20px;
+ }
+
+ .stars {
+ color: #ff9900;
+ margin-bottom: 20px;
+ }
+
+ .card-button {
+ font-family: "DM Sans", sans-serif;
+ background-color: #bde4cc;
+ 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;
+ }
+