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; +}