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/index.html b/userman_all/client/index.html
index 43138b6bbf540ffa7fab653ec3bf2558e3d49db6..2b077655b291a3d1bf3ed32314bdf1cb4e9098aa 100644
--- a/userman_all/client/index.html
+++ b/userman_all/client/index.html
@@ -669,7 +669,7 @@
</aside>
<div class="reiseberichtFormular">
<h1>Wie war Deine Reise mit Uns?</h1>
- <form>
+ <form.reiseberichtFormular>
<label for="country">Land auswählen</label>
<select id="country" name="country">
<option value="">-- Bitte wählen --</option>
@@ -698,7 +698,7 @@
<button type="submit" class="reiseberichtAbsenden" onclick="showPage('meineReiseberichte')">Absenden</button>
- </form>
+ </form.reiseberichtFormular>
</div>
</div>
@@ -724,7 +724,104 @@
</aside>
</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-->
<footer class="footer">
<div class="footer-container">
diff --git a/userman_all/client/stylesheet.css b/userman_all/client/stylesheet.css
index dd162c9577b7fd6e9a98a602ef2a5903ba10b6e9..d3a2777609c50fd9d312d1646c4a67f6cd7f398f 100644
--- a/userman_all/client/stylesheet.css
+++ b/userman_all/client/stylesheet.css
@@ -1307,19 +1307,25 @@ a:hover {
margin-top: 40px;
}
/*Reisebericht schreiben*/
+.reiseberichtFormular {
+ margin-left: 200px;
+}
h1 {
+ font-family: "Cy Grotesk Wide";
font-size: 24px;
color: #03355C;
margin-bottom: 20px;
+
}
-form {
+form.reiseberichtFormular {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
+
}
label {
@@ -1353,6 +1359,7 @@ select {
textarea {
height: 150px;
background-color: #FCF3E4;
+ border: 1px solid #03355C;
}
.rating {
@@ -1379,5 +1386,159 @@ textarea {
}
.reiseberichtAbsenden:hover {
- background-color: #e36c20;
-}
\ No newline at end of file
+ background-color: #FB7300;
+}
+
+
+/* Reisen */
+.reisen {
+ width: 50%;
+ height: 100%;
+ justify-content: center;
+ margin-left:400px;
+}
+
+
+
+header.reisen {
+ display: flex;
+ align-items: center;
+ padding: 20px;
+ background-color: #fff;
+
+}
+.back-button {
+ background: none;
+ border: none;
+ font-size: 24px;
+ cursor: pointer;
+ margin-right: 10px;
+}
+
+.reisen h1{
+ font-size: 43px;
+ color: #03355C;
+ font-family: "Cy Grotesk Wide";
+}
+
+.filter-section {
+ background-color: #FCF3E4;
+ padding: 20px;
+ margin: 20px;
+ border-radius: 8px;
+}
+
+.filter-container {
+ display: flex;
+ gap: 15px;
+ align-items: center;
+}
+
+select, input[type="range"] {
+ padding: 10px;
+ font-size: 20px;
+ font-family: "DM Sans", sans-serif;
+ border: 1px solid #03355C;
+ border-radius: 24px;
+ color: #03355C;
+}
+
+.price-filter {
+ display: flex;
+ flex-direction: column;
+}
+
+.price-values {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 5px;
+ font-size: 14px;
+ color: #03355C;
+}
+
+.filter-button {
+ padding: 10px 20px;
+ background-color: #BDD4CE;
+ color: #03355C;
+ border: none;
+ border-radius: 24px;
+ cursor: pointer;
+}
+
+.projects-section {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ margin: 20px;
+}
+
+.project-card {
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+.project-card img {
+ width: 100%;
+ height: 150px;
+ object-fit: cover;
+}
+
+.project-card h3 {
+ font-family: "DM Sans", sans-serif, bold;
+ font-size: 26px;
+ color: #03355C;
+ margin: 10px;
+}
+
+.project-card p {
+ margin: 0 10px 10px;
+ color: #03355C;
+ font-family: "DM Sans", sans-serif;
+ font-size: 20px;
+}
+
+.project-info {
+ padding-left: 1px;
+ display: flex;
+ gap: 10px;
+ margin: 10px;
+ font-size: 14px;
+ color: #03355C;
+ list-style: none;
+}
+
+/* Kalender (Produktkatalog, Sticky) */
+.fa-calendar-days {
+ color: #03355C;
+}
+
+/* Weltkugel (Produktkatalog) */
+.fa-earth-americas {
+ color: #03355C;
+}
+/* Stern ausgefüllt */
+.fa-star {
+ color: #03355C;
+}
+
+
+.price {
+ font-size: 18px;
+ font-weight: bold;
+ color: #03355C;
+ margin: 10px;
+}
+
+.info-button {
+ margin: 10px;
+ padding: 10px;
+ background-color: #fb7300;
+ color: white;
+ border: none;
+ border-radius: 24px;
+ cursor: pointer;
+}