Init Commit

static/css/carousel.css

@@ -0,0 +1,43 @@
+.carousel {
+  position: relative;
+  /*max-width: 1000px; */
+  margin: auto;
+  overflow: hidden;
+}
+
+.carousel-inner {
+  display: flex;
+  transition: transform 0.5s ease;
+}
+
+.carousel-item {
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+.carousel-item img {
+  width: 100%;
+  display: block;
+  border-radius: 8px;
+}
+
+button.prev,
+button.next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0,0,0,0.5);
+  color: #fff;
+  border: none;
+  padding: 10px 15px;
+  cursor: pointer;
+  border-radius: 50%;
+  font-size: 2rem;
+}
+
+button.prev { left: 10px; }
+button.next { right: 10px; }
+
+button:hover {
+  background-color: rgba(0,0,0,0.8);
+}

static/css/footer.css

@@ -0,0 +1,59 @@
+/* Footer Grundlayout */
+  #site_footer {
+      background-color: #111;
+      color: #eee;
+      padding: 30px 20px;
+      font-family: 'Montserrat', sans-serif;
+      border-top: 2px solid #eee;
+  }
+
+  #site_footer a {
+      color: #eee;
+      text-decoration: none;
+      margin-left: 15px;
+      font-weight: bold;
+      transition: color 0.3s;
+  }
+
+  #site_footer a:hover {
+      color: #fff;
+  }
+
+  .footer-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      max-width: 1000px;
+      margin: auto;
+      flex-wrap: wrap;
+  }
+
+  .footer-left p {
+      margin: 5px 0;
+      font-size: 0.95rem;
+  }
+
+  .footer-right {
+      margin-top: 10px;
+  }
+
+  .footer-right a:first-child {
+      margin-left: 0;
+  }
+
+  /* Mobile Responsive */
+  @media (max-width: 600px) {
+      .footer-container {
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+      }
+
+      .footer-right {
+          margin-top: 15px;
+      }
+
+      #site_footer a {
+          margin: 0 10px;
+      }
+  }

static/css/header.css

@@ -0,0 +1,25 @@
+#logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#main_navigation {
+    display: flex;            /* Container wird Flexbox */
+    align-items: center;
+    justify-content: center;
+    gap: 40px;                /* Abstand zwischen den Links */
+}
+
+#main_navigation a {
+    text-decoration: none !important;
+    color: #eee;
+    cursor: pointer;
+    transition: color 0.3s;
+    font-size: 2rem;
+}
+
+#main_navigation a:hover {
+    text-decoration: underline;  /* nur beim Überfahren */
+    color: #fff;
+}

static/css/index.css

@@ -0,0 +1,29 @@
+#main_image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Responsive Schriftgrößen */
+@media (max-width: 768px) {
+    section {
+        padding: 1rem;
+    }
+    h1 {
+        font-size: 1.5rem;
+    }
+}
+
+        @media (max-width: 480px) {
+            h1 {
+            font-size: 1.25rem;
+            }
+            p {
+            font-size: 0.95rem;
+            }
+        }
+        #spotify_link {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }

static/css/style.css

@@ -0,0 +1,14 @@
+body {
+  font-family: 'Montserrat', sans-serif;
+  background: #111;
+  color: #eee;
+  margin: 20;
+}
+
+h1, h2, h3 {
+  font-family: 'Oswald', sans-serif;
+}
+
+.spacer {
+    height: 30px; /* amount of vertical space */
+}

static/js/carousel.js

@@ -0,0 +1,17 @@
+const carousel = document.querySelector('.carousel-inner');
+const slides = document.querySelectorAll('.carousel-item');
+let index = 0;
+
+document.querySelector('.next').addEventListener('click', () => {
+  index = (index + 1) % slides.length;
+  updateCarousel();
+});
+
+document.querySelector('.prev').addEventListener('click', () => {
+  index = (index - 1 + slides.length) % slides.length;
+  updateCarousel();
+});
+
+function updateCarousel() {
+  carousel.style.transform = `translateX(-${index * 100}%)`;
+}