commit 3d0cf139ce9c4ede4f01b6cb7c5e45dee2b6c056 Author: Carina_Hirschle Date: Fri May 15 13:50:41 2026 +0000 Erste Version der Website diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..85433ce --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +*.save +*.swp +*~ +.DS_Store diff --git a/assets/Preisliste.pdf b/assets/Preisliste.pdf new file mode 100644 index 0000000..dac1811 Binary files /dev/null and b/assets/Preisliste.pdf differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..e58abfe --- /dev/null +++ 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; } diff --git a/eis_projekt.html b/eis_projekt.html new file mode 100644 index 0000000..a5373a3 --- /dev/null +++ b/eis_projekt.html @@ -0,0 +1,31 @@ + + + + + + Über uns – Cyanotypie + + + + +
+ +
+ +
+ +
+ + + + + + diff --git a/img/Favicon.jpg b/img/Favicon.jpg new file mode 100644 index 0000000..f30ed63 Binary files /dev/null and b/img/Favicon.jpg differ diff --git a/img/Fotogalerie/C1.jpg b/img/Fotogalerie/C1.jpg new file mode 100644 index 0000000..37343ee Binary files /dev/null and b/img/Fotogalerie/C1.jpg differ diff --git a/img/Fotogalerie/C2.jpg b/img/Fotogalerie/C2.jpg new file mode 100644 index 0000000..c3977ac Binary files /dev/null and b/img/Fotogalerie/C2.jpg differ diff --git a/img/Fotogalerie/C3.jpg b/img/Fotogalerie/C3.jpg new file mode 100644 index 0000000..0cd6753 Binary files /dev/null and b/img/Fotogalerie/C3.jpg differ diff --git a/img/Fotogalerie/C4.jpg b/img/Fotogalerie/C4.jpg new file mode 100644 index 0000000..70d2533 Binary files /dev/null and b/img/Fotogalerie/C4.jpg differ diff --git a/img/Fotogalerie/C5.jpg b/img/Fotogalerie/C5.jpg new file mode 100644 index 0000000..fb5cb77 Binary files /dev/null and b/img/Fotogalerie/C5.jpg differ diff --git a/img/Fotogalerie/C6.jpg b/img/Fotogalerie/C6.jpg new file mode 100644 index 0000000..edd5df0 Binary files /dev/null and b/img/Fotogalerie/C6.jpg differ diff --git a/img/Fotogalerie/C7.jpg b/img/Fotogalerie/C7.jpg new file mode 100644 index 0000000..69ac133 Binary files /dev/null and b/img/Fotogalerie/C7.jpg differ diff --git a/img/Fotogalerie/C8.jpg b/img/Fotogalerie/C8.jpg new file mode 100644 index 0000000..aab42df Binary files /dev/null and b/img/Fotogalerie/C8.jpg differ diff --git a/img/Logo2.png b/img/Logo2.png new file mode 100644 index 0000000..ba376cf Binary files /dev/null and b/img/Logo2.png differ diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..1600d0d --- /dev/null +++ b/impressum.html @@ -0,0 +1,34 @@ + + + + + + Impressum – Cyanotypie + + + + +
+ +
+ +
+

Impressum

+

Verantwortlich: Carina Hirschle

+

E-Mail: carina.hirschle@stud.ph-weingarten.de

+

Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung "Entwicklung interaktiver Softwareanwendungen"

+
+ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..9c61349 --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + isa9 – EIS SoSe 25 + + + + + + +
+

cyan.

+

Creative Studio.

+ +
+ + +
+

Farn Serie

+
+
Farn 1
+
Farn 2
+
Farn 3
+
Farn 4
+ + +
+ + + + +
+
+
+ + +
+

Moos Serie

+
+
Moos 1
+
Moos 2
+
Moos 3
+
Moos 4
+ + +
+ + + + +
+
+
+ +
+ + Preisliste herunterladen (PDF) +
+ + + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..60a7baa --- /dev/null +++ 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'); diff --git a/kontakt.html b/kontakt.html new file mode 100644 index 0000000..a5373a3 --- /dev/null +++ b/kontakt.html @@ -0,0 +1,31 @@ + + + + + + Über uns – Cyanotypie + + + + +
+ +
+ +
+ +
+ + + + + + diff --git a/ueber_uns.html b/ueber_uns.html new file mode 100644 index 0000000..a5373a3 --- /dev/null +++ b/ueber_uns.html @@ -0,0 +1,31 @@ + + + + + + Über uns – Cyanotypie + + + + +
+ +
+ +
+ +
+ + + + + +