Erste Version der Website

2026-05-15 13:50:41 +00:00 · 2026-05-15 13:50:41 +00:00 · 3d0cf139ce
commit 3d0cf139ce
19 changed files with 431 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+*.save
+*.swp
+*~
+.DS_Store
--- a/assets/Preisliste.pdf
+++ b/assets/Preisliste.pdf
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,195 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Segoe UI', Arial, sans-serif;
+  color: #333;
+  background-color: #fff;
+  line-height: 1.6;
+}
+
+nav {
+  display: flex;
+  gap: 1.5rem;
+  padding: 1rem 2rem;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
+}
+
+nav a {
+  text-decoration: none;
+  color: #2563eb;
+  font-weight: 500;
+}
+
+nav a:hover { text-decoration: underline; }
+
+main {
+  max-width: 860px;
+  margin: 2rem auto;
+  padding: 0 1.5rem;
+}
+
+h1 {
+  color: #003366;
+  font-size: 4rem;
+  font-weight: 700;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  letter-spacing: -0.5px;
+}
+
+h2 {
+  font-size: 1.4rem;
+  color: #444;
+  margin-top: 35px;
+  margin-bottom: 15px;
+}
+
+p {
+  font-size: 1.1rem;
+  margin-bottom: 25px;
+}
+
+.galerie {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.galerie img {
+  width: 100%;
+  max-width: 420px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  transition: transform 0.3s ease;
+}
+
+.galerie img:hover {
+  transform: scale(1.03);
+}
+
+.btn {
+  display: inline-block;
+  margin-top: 30px;
+  padding: 12px 30px;
+  background-color: #2563eb;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 6px;
+  font-weight: 600;
+  transition: background 0.3s ease;
+}
+
+.btn:hover {
+  background-color: #1a4aaa;
+}
+
+footer {
+  text-align: center;
+  padding: 2rem;
+  font-size: 0.85rem;
+  color: #64748b;
+  border-top: 1px solid #e2e8f0;
+  margin-top: 4rem;
+}
+
+/* Logo in Nav */
+.nav-logo {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.logo {
+  height: 40px;
+  width: auto;
+}
+
+/* Galerien nebeneinander */
+.galerien-wrapper {
+  display: flex;
+  gap: 2rem;
+  margin-top: 2rem;
+  flex-wrap: wrap;
+}
+
+.slideshow-container {
+  flex: 1;
+  min-width: 220px;
+  max-width: 300px;
+}
+
+.slideshow-container h2 {
+  margin-bottom: 0.75rem;
+}
+
+/* Slideshow */
+.slideshow {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.slide {
+  display: none;
+}
+
+.slide.active {
+  display: block;
+}
+
+.slide img {
+  width: 100%;
+  height: 380px;
+  object-fit: contain;
+  border-radius: 8px;
+  display: block;
+  background-color: #f0f4f8;
+}
+
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0,0,0,0.4);
+  color: #fff;
+  border: none;
+  padding: 8px 14px;
+  cursor: pointer;
+  font-size: 1.2rem;
+  border-radius: 4px;
+  transition: background 0.2s;
+  z-index: 10;
+}
+
+.prev { left: 8px; }
+.next { right: 8px; }
+.prev:hover, .next:hover { background: rgba(0,0,0,0.7); }
+
+.dots {
+  text-align: center;
+  padding: 10px 0 6px;
+  background: rgba(255,255,255,0.85);
+}
+
+.dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 4px;
+  background: #ccc;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.dot.active { background: #2563eb; }
--- a/eis_projekt.html
+++ b/eis_projekt.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Über uns – Cyanotypie</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+  <header>
+    <nav>
+      <a href="index.html">Start</a>
+      <a href="ueber_uns.html">Über uns</a>
+      <a href="eis_projekt.html">Projekt</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="impressum.html">Impressum</a>
+    </nav>
+  </header>
+
+  <main>
+    <!-- Seiteninhalt hier -->
+  </main>
+
+  <footer>
+    <p>&copy; 2025 – Lernprojekt EIS</p>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
--- a/img/Favicon.jpg
+++ b/img/Favicon.jpg
--- a/img/Fotogalerie/C1.jpg
+++ b/img/Fotogalerie/C1.jpg
--- a/img/Fotogalerie/C2.jpg
+++ b/img/Fotogalerie/C2.jpg
--- a/img/Fotogalerie/C3.jpg
+++ b/img/Fotogalerie/C3.jpg
--- a/img/Fotogalerie/C4.jpg
+++ b/img/Fotogalerie/C4.jpg
--- a/img/Fotogalerie/C5.jpg
+++ b/img/Fotogalerie/C5.jpg
--- a/img/Fotogalerie/C6.jpg
+++ b/img/Fotogalerie/C6.jpg
--- a/img/Fotogalerie/C7.jpg
+++ b/img/Fotogalerie/C7.jpg
--- a/img/Fotogalerie/C8.jpg
+++ b/img/Fotogalerie/C8.jpg
--- a/img/Logo2.png
+++ b/img/Logo2.png
--- a/impressum.html
+++ b/impressum.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Impressum – Cyanotypie</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+  <header>
+    <nav>
+      <a href="index.html">Start</a>
+      <a href="ueber_uns.html">Über uns</a>
+      <a href="eis_projekt.html">Projekt</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="impressum.html">Impressum</a>
+    </nav>
+  </header>
+
+  <main>
+    <h1>Impressum</h1>
+    <p>Verantwortlich: Carina Hirschle</p>
+    <p>E-Mail: carina.hirschle@stud.ph-weingarten.de</p>
+    <p>Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung "Entwicklung interaktiver Softwareanwendungen"</p>
+  </main>
+
+  <footer>
+    <p>&copy; 2025 – Lernprojekt EIS</p>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>isa9 – EIS SoSe 25</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="icon" href="img/Favicon.jpg" type="image/jpeg">
+</head>
+<body>
+  <nav>
+    <a href="index.html" class="nav-logo">
+      <img src="img/Logo2.png" alt="Cyanotypie Logo" class="logo">
+    </a>
+    <a href="index.html">Home</a>
+    <a href="ueber_uns.html">Über uns</a>
+    <a href="eis_projekt.html">Projekt</a>
+    <a href="kontakt.html">Kontakt</a>
+    <a href="impressum.html">Impressum</a>
+  </nav>
+
+  <main>
+    <h1>cyan.</h1>
+    <p>Creative Studio.</p>
+
+    <div class="galerien-wrapper">
+
+      <!-- Farn Serie -->
+      <div class="slideshow-container">
+        <h2>Farn Serie</h2>
+        <div class="slideshow" id="farn">
+          <div class="slide active"><img src="img/Fotogalerie/C1.jpg" alt="Farn 1"></div>
+          <div class="slide"><img src="img/Fotogalerie/C2.jpg" alt="Farn 2"></div>
+          <div class="slide"><img src="img/Fotogalerie/C3.jpg" alt="Farn 3"></div>
+          <div class="slide"><img src="img/Fotogalerie/C4.jpg" alt="Farn 4"></div>
+          <button class="prev" onclick="changeSlide('farn', -1)">&#10094;</button>
+          <button class="next" onclick="changeSlide('farn', 1)">&#10095;</button>
+          <div class="dots" id="farn-dots">
+            <span class="dot active" onclick="goToSlide('farn', 0)"></span>
+            <span class="dot" onclick="goToSlide('farn', 1)"></span>
+            <span class="dot" onclick="goToSlide('farn', 2)"></span>
+            <span class="dot" onclick="goToSlide('farn', 3)"></span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Moos Serie -->
+      <div class="slideshow-container">
+        <h2>Moos Serie</h2>
+        <div class="slideshow" id="moos">
+          <div class="slide active"><img src="img/Fotogalerie/C5.jpg" alt="Moos 1"></div>
+          <div class="slide"><img src="img/Fotogalerie/C6.jpg" alt="Moos 2"></div>
+          <div class="slide"><img src="img/Fotogalerie/C7.jpg" alt="Moos 3"></div>
+          <div class="slide"><img src="img/Fotogalerie/C8.jpg" alt="Moos 4"></div>
+          <button class="prev" onclick="changeSlide('moos', -1)">&#10094;</button>
+          <button class="next" onclick="changeSlide('moos', 1)">&#10095;</button>
+          <div class="dots" id="moos-dots">
+            <span class="dot active" onclick="goToSlide('moos', 0)"></span>
+            <span class="dot" onclick="goToSlide('moos', 1)"></span>
+            <span class="dot" onclick="goToSlide('moos', 2)"></span>
+            <span class="dot" onclick="goToSlide('moos', 3)"></span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <a href="assets/Preisliste.pdf" download class="btn">Preisliste herunterladen (PDF)</a>
+  </main>
+
+  <footer>
+    <p>isa9 – EIS SoSe 25</p>
+  </footer>
+
+<script src="js/script.js"></script>
+</body>
+</html>
--- a/js/script.js
+++ b/js/script.js
@ -0,0 +1,28 @@
+const state = {};
+
+function initSlideshow(id) {
+  state[id] = 0;
+}
+
+function changeSlide(id, dir) {
+  const slides = document.querySelectorAll(`#${id} .slide`);
+  const dots = document.querySelectorAll(`#${id}-dots .dot`);
+  slides[state[id]].classList.remove('active');
+  dots[state[id]].classList.remove('active');
+  state[id] = (state[id] + dir + slides.length) % slides.length;
+  slides[state[id]].classList.add('active');
+  dots[state[id]].classList.add('active');
+}
+
+function goToSlide(id, index) {
+  const slides = document.querySelectorAll(`#${id} .slide`);
+  const dots = document.querySelectorAll(`#${id}-dots .dot`);
+  slides[state[id]].classList.remove('active');
+  dots[state[id]].classList.remove('active');
+  state[id] = index;
+  slides[state[id]].classList.add('active');
+  dots[state[id]].classList.add('active');
+}
+
+initSlideshow('farn');
+initSlideshow('moos');
--- a/kontakt.html
+++ b/kontakt.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Über uns – Cyanotypie</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+  <header>
+    <nav>
+      <a href="index.html">Start</a>
+      <a href="ueber_uns.html">Über uns</a>
+      <a href="eis_projekt.html">Projekt</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="impressum.html">Impressum</a>
+    </nav>
+  </header>
+
+  <main>
+    <!-- Seiteninhalt hier -->
+  </main>
+
+  <footer>
+    <p>&copy; 2025 – Lernprojekt EIS</p>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>
--- a/ueber_uns.html
+++ b/ueber_uns.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Über uns – Cyanotypie</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+  <header>
+    <nav>
+      <a href="index.html">Start</a>
+      <a href="ueber_uns.html">Über uns</a>
+      <a href="eis_projekt.html">Projekt</a>
+      <a href="kontakt.html">Kontakt</a>
+      <a href="impressum.html">Impressum</a>
+    </nav>
+  </header>
+
+  <main>
+    <!-- Seiteninhalt hier -->
+  </main>
+
+  <footer>
+    <p>&copy; 2025 – Lernprojekt EIS</p>
+  </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>