Initial commit

JGV-Web/docker-compose.yaml

+version: "3"
+services:
+  jgv-web:
+    build: .
+    ports:
+     - "8080:80"
\ No newline at end of file

JGV-Web/dockerfile

+FROM nginx:latest
+
+COPY public /usr/share/nginx/html
\ No newline at end of file

JGV-Web/public/.idea/.gitignore

+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

JGV-Web/public/.idea/Teil 3.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

JGV-Web/public/.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Teil 3.iml" filepath="$PROJECT_DIR$/.idea/Teil 3.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

JGV-Web/public/css/galerie.css

+/* Container for the gallery */
+.galerie {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    padding: 20px;
+}
+
+/* Styling for each gallery item */
+.gallery-item {
+    text-align: center;
+    overflow: hidden;
+    border-radius: 10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease;
+}
+
+.gallery-item:hover {
+    transform: scale(1.05);
+}
+
+.gallery-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 10px;
+}
+
+.gallery-item h2 {
+    margin-top: 10px;
+    font-size: 1.2em;
+    color: #0A84C6;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Hält die Galerie in der Mitte und den Footer am unteren Rand */
+.content {
+    flex: 1;
+}
\ No newline at end of file

JGV-Web/public/css/galerie/galerieDetails.css

+/* Styling for the event gallery */
+.event-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 10px;
+    padding: 20px;
+}
+
+.event-gallery img {
+    width: 100%;
+    height: 200px; /* Feste Höhe, damit alle Bilder quadratisch sind */
+    object-fit: cover; /* Das Bild wird zugeschnitten, um das Quadrat zu füllen */
+    border-radius: 8px;
+    border: 2px solid #f0f0f0;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+    transition: transform 0.2s ease-in-out;
+}
+
+.event-gallery img:hover {
+    transform: scale(1.05);
+    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
+}
+
+.imageFooter {
+    margin-top: auto;
+}
+
+@media(min-width: 1287px) {
+
+}
\ No newline at end of file

JGV-Web/public/css/globalStyles.css

+/* Allgemeine Einstellungen */
+html{
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+body {
+    margin: 0;
+    padding: 0;
+    background: #2D2D2D;
+    overflow-x: hidden;
+    color: #FFFFFF;
+    font-family: "Palatino Linotype", Palatino, serif;
+}
+
+header {
+    width: 100%;
+}
+
+.imageFooter {
+    width: 100%;
+    position: relative;
+    z-index: 10;
+    background: transparent;
+    overflow: hidden;
+    min-height: 250px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    bottom: 0;
+}
+
+.impressum-link {
+    position: absolute;
+    bottom: 20px;
+    left: 40%;
+    transform: translateX(-50%);
+    z-index: 11;
+    color: white;
+    text-decoration: none;
+    font-size: 1em;
+}
+
+.kontakt-link {
+    position: absolute;
+    bottom: 20px;
+    right: 40%;
+    transform: translateX(-50%);
+    z-index: 11;
+    color: white;
+    text-decoration: none;
+    font-size: 1em;
+}
+
+.imageFooter img {
+    min-height: 250px;
+    width: 100%; /* Bild anpassen */
+    height: 100%;
+    object-fit: cover; /* Optionale Einstellung für Bilddarstellung */
+}
+
+
+.top-nav ul.menu {
+    display: flex;
+    justify-content: space-around;
+    list-style: none;
+    padding: 10px;
+}
+
+@media (max-width: 650px) {
+    .texthome {
+        font-size: 2em;
+    }
+    .impressum-link {
+        left: 30%;
+    }
+    .kontakt-link {
+        left: 70%;
+    }
+
+}
+
+@media (min-width: 701px) {
+    .texthome {
+        font-size: 3vw;
+    }
+}
+
+h1 {
+    text-align: center;
+}
+
+.logo {
+    height: 80px;
+    width: auto;
+    margin-left: 10px;
+}
\ No newline at end of file

JGV-Web/public/css/impressum.css

+body {
+    margin-top: 150px;
+    text-align: start;
+}
+
+.textNews {
+    color: #0A84C6
+}
+
+h1 {
+    text-align: center;
+}
+
+/* Grundlegende Stile für den Inhalt */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px; /* Abstand zwischen den Spalten */
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Stile für die einzelnen Abschnitte innerhalb des Inhalts */
+.content > div {
+    flex: 1 1 45%; /* Jeder Abschnitt nimmt 45% der Breite ein, um zwei Spalten zu erzeugen */
+    min-width: 300px; /* Minimalbreite für die einzelnen Blöcke */
+}
+
+/* Einspaltiges Layout für kleinere Bildschirme */
+@media (max-width: 650px) {
+    .content {
+        flex-direction: column;
+        gap: 15px;
+    }
+    .content > div {
+        flex: 1 1 100%; /* Vollbreite auf mobilen Geräten */
+    }
+}
+
+/* Desktop- und Tablet-Version */
+.pictureSource table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+}
+
+.pictureSource th,
+.pictureSource td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+    word-wrap: break-word; /* Zeilenumbruch innerhalb der Zellen erlauben */
+}
+
+.pictureSource th {
+    background-color: #0A84C6;
+    color: white;
+    font-weight: bold;
+}
+
+/* Optimierung für kleine Bildschirme */
+@media (max-width: 650px) {
+    .pictureSource table {
+        display: block;
+        overflow-x: auto; /* Horizontal scrollen, wenn der Bildschirm zu klein ist */
+        white-space: nowrap;
+    }
+
+    .pictureSource th, .pictureSource td {
+        padding: 8px;
+    }
+}
+

JGV-Web/public/css/kontakt.css

+/* Basis-Reset */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* Inhalt der Seite */
+.content {
+    max-width: 800px;
+    margin: 2rem auto;
+    padding: 1rem;
+    text-align: center;
+}
+
+/* Kontaktformular */
+.contact-form-container {
+    max-width: 600px;
+    margin: 2rem auto;
+    padding: 1rem;
+    background-color: #434343;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.contact-form label {
+    text-align: start;
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+    color: #0A84C6;
+}
+
+.contact-form input,
+.contact-form textarea {
+    color: #FFFFFF;
+    width: 100%;
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+    background-color: #2D2D2D;
+    border: 1px solid #2D2D2D;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.contact-form button {
+    display: block;
+    width: 100%;
+    padding: 0.75rem;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.contact-form button:hover {
+    background-color: #0056b3;
+}
+
+
+
+

JGV-Web/public/css/nav.css

+body {
+    margin-top: 150px;
+    height: 100%;
+    overflow-x: hidden;
+}
+
+* {
+    font-family: "Palatino Linotype", Palatino, serif;
+    box-sizing: border-box;
+}
+
+.top-nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+    background: #2D2D2D;
+    color: #FFF;
+    height: 100px;
+    padding: 1em;
+    width: 100%;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.menu {
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.menu > li {
+    margin: 0 1rem;
+    overflow: hidden;
+    z-index: 100000;
+}
+
+.menu-button-container {
+    display: none;
+    height: 100%;
+    width: 30px;
+    cursor: pointer;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#menu-toggle {
+    display: none;
+}
+
+.menu-button,
+.menu-button::before,
+.menu-button::after {
+    display: block;
+    background-color: #fff;
+    position: fixed;
+    height: 4px;
+    width: 30px;
+    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    border-radius: 2px;
+}
+
+.menu-button::before {
+    content: '';
+    margin-top: -8px;
+}
+
+.menu-button::after {
+    content: '';
+    margin-top: 8px;
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button::before {
+    transform: rotate(45deg);
+    margin-top: 0;
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button {
+    background: rgba(255, 255, 255, 0);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button::after {
+    transform: rotate(-45deg);
+    margin-top: 0;
+}
+
+@media (max-width: 650px) {
+    .menu-button-container {
+        display: flex;
+    }
+    .menu {
+        position: fixed;
+        top: 0;
+        margin-top: 100px;
+        left: 0;
+        flex-direction: column;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+    #menu-toggle ~ .menu li {
+        height: 0;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    }
+    #menu-toggle:checked ~ .menu li {
+        height: 2.5em;
+        padding: 0.5em;
+        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    }
+    .menu > li {
+        display: flex;
+        justify-content: center;
+        margin: 0;
+        padding: 0.5em 0;
+        width: 100%;
+        color: white;
+        background-color: #2D2D2D;
+        z-index: 100000;
+    }
+    .menu > li:not(:last-child) {
+        border-bottom: 1px solid #444;
+    }
+}
+
+a {
+    text-decoration: none;
+    color: white;
+}
+
+
+.menu a {
+    text-decoration: none;
+    font-weight: bold;
+    padding: 5px 10px;
+}
+
+.menu a:hover {
+    color: #0A84C6;
+    border-radius: 5px;
+}
+
+.currentSite{
+    font-family: "Palatino Linotype", sans-serif;
+    color: #0A84C6;
+    font-weight: bold;
+}
\ No newline at end of file

JGV-Web/public/css/news.css

+.imageHome {
+    position: relative;
+    height: 50vh;
+    overflow: hidden;
+}
+
+.imageHome::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("../images/News.jpg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: brightness(40%);
+    z-index: -1;
+}
+
+.textHome {
+    text-align: center;
+    position: absolute;
+    transform: translate(-50%, -60%);
+    color: white;
+    top: 30%;
+    left: 50%;
+    z-index: 1;
+}
+
+
+.content {
+    padding: 50px;
+    background: transparent;
+}
+
+/* Grid Layout für die Anlässe */
+.anlass-grid {
+    display: grid;
+    gap: 20px; /* Abstand zwischen den Kästen */
+}
+
+/* Dreispaltig auf größeren Bildschirmen */
+@media (min-width: 768px) {
+    .anlass-grid {
+        grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
+    }
+}
+
+/* Einspaltig auf kleineren Bildschirmen */
+@media (max-width: 650px) {
+    .anlass-grid {
+        grid-template-columns: 1fr; /* Eine Spalte */
+    }
+}
+
+/* Design der Kästen für jeden Anlass */
+.anlass {
+    padding: 20px;
+    background-color: #2D2D2D; /* Helles Grau für den Hintergrund */
+    border-radius: 8px; /* Runde Ecken für die Kästen */
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten für besseren Effekt */
+}
+
+/* Stil für die Titel */
+.aktuelles-section h2, .vergangenes-section h2 {
+    margin-bottom: 20px;
+}

JGV-Web/public/css/statuten.css

+/* Title styling */
+h1 {
+    text-align: center;
+    font-size: 2.5em;
+    margin: 20px 0;
+    color: #0A84C6;
+}
+
+/* Statuten section styling */
+.content {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #333333;
+    border-radius: 10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.statuten {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.statute {
+    padding: 15px;
+    border-left: 5px solid #0A84C6;
+    background-color: #2D2D2D;
+    border-radius: 5px;
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+.statute h2 {
+    font-size: 1.5em;
+    color: #0A84C6;
+    margin-bottom: 10px;
+}
+
+.statute p {
+    font-size: 1em;
+    color: #ffffff;
+}
+
+
+/* Responsive Design */
+@media (max-width: 650px) {
+    .menu {
+        flex-direction: column;
+    }
+
+    h1 {
+        font-size: 2em;
+    }
+
+    .statute h2 {
+        font-size: 1.3em;
+    }
+
+    .statute p {
+        font-size: 1em;
+        color: #ffffff;
+    }
+}

JGV-Web/public/css/style.css

+.imageHome {
+    position: relative;
+    height: 100vh; /* Höhe des Bildes auf volle Höhe setzen */
+    overflow: hidden;
+}
+
+.imageHome::before {
+    content: "";
+    position: fixed; /* Bild fixieren */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("../images/Kathedrale.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: brightness(40%);
+    z-index: -1; /* Hinter den Inhalt setzen */
+}
+
+.textHome {
+    text-align: center;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    color: white;
+    top: 43%;
+    left: 50%;
+    z-index: 1;
+}
+
+@media (max-width: 650px) {
+    .imageHome::before {
+        background-image: url("../images/Kathedrale.png");
+        background-position: 60% 0%;
+    }
+
+    .content {
+        padding: 100px;
+        background: transparent;
+    }
+}
+
+@media (min-width: 701px) {
+    .content {
+        padding: 150px;
+        background: transparent;
+    }
+}
+
+p {
+    text-align: center;
+    font-size: 1.1em;
+}
+
+h2 {
+    vertical-align: center;
+    text-align: center;
+}
+

JGV-Web/public/css/vorstand.css

+/* Optimiertes Styling für die Vorstand-Seite mit Palatino Schriftart */
+
+body {
+    font-family: "Palatino Linotype", Palatino, serif;
+    color: #2D2D2D;
+    margin: 0;
+    padding: 0;
+}
+
+.content {
+    padding: 40px 20px;
+    background-color: #2D2D2D;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+h1 {
+    text-align: center;
+    font-size: 2.5em;
+    color: #fff;
+    margin-bottom: 30px;
+}
+
+.person-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 20px;
+    gap: 30px;
+    max-width: 1200px;
+}
+
+.person {
+    text-align: center;
+    background-color: #333333;
+    border: 1px solid #0A84C6;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+    padding: 20px;
+    width: 280px; /* Einheitliche Breite */
+    height: 400px; /* Einheitliche Höhe */
+    transition: transform 0.3s ease;
+}
+
+.person:hover {
+    transform: translateY(-5px);
+}
+
+.content img {
+    width: 160px;
+    height: auto;
+    border-radius: 50%;
+    margin-bottom: 15px;
+    transition: transform 0.3s ease;
+}
+
+.content img:hover {
+    transform: scale(1.1);
+}
+
+h2 {
+    font-size: 1.4em;
+    color: #0A84C6;
+    margin-bottom: 8px;
+}
+
+p {
+    font-size: 1em;
+    color: #fff;
+    margin-bottom: 40px;
+}
+
+/* Desktop-Version: 2 Zeilen mit 3 Personen pro Zeile */
+@media (min-width: 1024px) {
+    .person-container {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 30px;
+        max-width: 900px;
+    }
+}
+
+/* Tablet-Version: Erste Zeile 2 Personen, zweite Zeile 2 Personen, dritte Zeile 1 Person */
+@media (min-width: 769px) and (max-width: 1023px) {
+    .person-container {
+        max-width: 600px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 30px;
+    }
+
+    .person-container .person:nth-child(5) {
+        grid-column: span 2;
+    }
+}
+
+/* Mobile-Version: Eine Person pro Zeile */
+@media (max-width: 650px) {
+    .person-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .person {
+        width: 100%;
+        max-width: 350px;
+        margin: 15px 0;
+    }
+}