From d25525946d0213d281476b1d88d1ae53d2231aec Mon Sep 17 00:00:00 2001 From: Martin Date: Sun, 10 May 2026 02:15:40 +0200 Subject: [PATCH] README hinzugefuegt, Lint-Fehler behoben, Code formatiert --- .gitignore | 2 + .htmlhintrc | 1 + .husky/pre-commit | 1 + .prettierignore | 3 + .prettierrc | 1 + .stylelintrc.json | 11 + README.md | 175 +++++++ css/haus-schleusingen.css | 947 +++++++++++++++++++++++++++++--------- eslint.config.js | 31 ++ fonts/fonts.css | 26 +- haus-schleusingen.html | 796 +++++++++++++++++++------------- js/haus-schleusingen.js | 80 ++-- package.json | 54 +++ 13 files changed, 1536 insertions(+), 592 deletions(-) create mode 100644 .htmlhintrc create mode 100644 .husky/pre-commit create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .stylelintrc.json create mode 100644 README.md create mode 100644 eslint.config.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore index a8ab218..c4d1f8b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ *.ps1 *.py +/node_modules/ +package-lock.json diff --git a/.htmlhintrc b/.htmlhintrc new file mode 100644 index 0000000..323675a --- /dev/null +++ b/.htmlhintrc @@ -0,0 +1 @@ +{"attr-value-not-empty":false,"tag-pair":true,"tagname-lowercase":true,"attr-lowercase":true,"doctype-first":true,"id-unique":true,"src-not-empty":false,"title-require":true,"alt-require":true} \ No newline at end of file diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000..2312dc5 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +npx lint-staged diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..fdfe71f --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +node_modules +*.min.js +*.min.css \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..2e8af55 --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{"semi":true,"singleQuote":false,"tabWidth":2,"trailingComma":"all","printWidth":100,"bracketSpacing":true,"arrowParens":"always","endOfLine":"lf","htmlWhitespaceSensitivity":"ignore"} \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..b4e1d47 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,11 @@ +{ + "extends": ["stylelint-config-standard"], + "plugins": ["stylelint-prettier"], + "rules": { + "prettier/prettier": true, + "selector-class-pattern": null, + "selector-id-pattern": null, + "no-descending-specificity": null + }, + "ignoreFiles": ["node_modules/**", "**/*.min.css"] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..0b3a354 --- /dev/null +++ b/README.md @@ -0,0 +1,175 @@ +# Landingpage – Haus Schleusingen + +Statische Landingpage für **Haus Schleusingen**. +Das Projekt basiert auf reinem HTML, CSS und JavaScript und wird über einen Nginx-Container ausgeliefert. + +--- + +## Inhaltsübersicht + +``` +├── bilder/ # Bildressourcen +├── css/ +│ └── haus-schleusingen.css # Hauptstylesheet +├── fonts/ +│ └── fonts.css # Schriftart-Einbindungen +├── js/ +│ ├── haus-schleusingen.js # Haupt-JavaScript +│ └── masonry.pkgd.min.js # Masonry-Layout-Bibliothek +├── haus-schleusingen.html # Einstiegsseite +├── nginx.conf # Nginx-Konfiguration +├── Dockerfile # Docker-Image (nginx:alpine) +├── eslint.config.js # ESLint-Konfiguration +├── .stylelintrc.json # Stylelint-Konfiguration +├── .htmlhintrc # HTMLHint-Konfiguration +├── .prettierrc # Prettier-Konfiguration +├── .husky/pre-commit # Husky Git-Hook (lint-staged) +└── package.json # Projekt-Metadaten & Skripte +``` + +--- + +## Voraussetzungen + +| Werkzeug | Version | +| -------- | --------------- | +| Node.js | ≥ 18 | +| npm | ≥ 9 | +| Docker | optional (≥ 20) | + +--- + +## Installation + +```bash +# Repository klonen +git clone https://git.home.kies-media.de/greggy/landingpage-haus-schleusingen.git +cd landingpage-haus-schleusingen + +# Abhängigkeiten installieren +npm install +``` + +--- + +## Entwicklung + +### Lokaler Dateiserver + +Für die Entwicklung empfiehlt sich ein lokaler Server, z. B.: + +```bash +npx serve . +``` + +Oder mit der in VS Code integrierten _Live Server_-Erweiterung. + +--- + +## Deployment mit Docker + +Das Projekt enthält ein vorkonfiguriertes Nginx-Image. + +```bash +# Image bauen +docker build -t landingpage-haus-schleusingen . + +# Container starten (Website-Dateien per Volume einbinden) +docker run -d \ + -p 8080:80 \ + -v $(pwd):/usr/share/nginx/html:ro \ + landingpage-haus-schleusingen +``` + +Die Seite ist danach unter **http://localhost:8080** erreichbar. + +--- + +## Code-Qualität & Linting + +Das Projekt nutzt eine Kombination aus mehreren Linting- und Formatierungswerkzeugen, um eine einheitliche Code-Qualität sicherzustellen: + +| Werkzeug | Zweck | Konfigurationsdatei | +| --------------- | ---------------------------------- | ------------------- | +| **ESLint** | JavaScript-Linting | `eslint.config.js` | +| **Stylelint** | CSS-Linting | `.stylelintrc.json` | +| **HTMLHint** | HTML-Linting | `.htmlhintrc` | +| **Prettier** | Code-Formatierung | `.prettierrc` | +| **Husky** | Git Hooks (Pre-Commit) | `.husky/pre-commit` | +| **lint-staged** | Linting nur für gesteuerte Dateien | `package.json` | + +### Befehle + +#### Alle Linter auf einmal ausführen + +```bash +npm run lint +``` + +Dadurch werden nacheinander `lint:html`, `lint:css` und `lint:js` ausgeführt. + +#### HTML linten + +```bash +npm run lint:html +``` + +Prüft alle `.html`-Dateien mit **HTMLHint**. + +Regeln (`.htmlhintrc`): + +- Tag-Paarung (`tag-pair`) +- Kleinschreibung von Tags & Attributen (`tagname-lowercase`, `attr-lowercase`) +- Doctype zuerst (`doctype-first`) +- Eindeutige IDs (`id-unique`) +- `alt`-Attribut bei Bildern (`alt-require`) +- Titel erforderlich (`title-require`) + +#### CSS linten + +```bash +npm run lint:css +``` + +Prüft alle CSS-Dateien in `css/` und `fonts/` mit **Stylelint** (basiert auf `stylelint-config-standard`). + +#### JavaScript linten + +```bash +npm run lint:js +``` + +Prüft alle `.js`-Dateien in `js/` mit **ESLint** (minimierte Dateien werden ignoriert). + +Regeln (`eslint.config.js`): + +- `no-unused-vars` → Warnung +- `no-undef` → Warnung +- Prettier-Integration (`prettier/prettier` → Fehler) + +#### Code formatieren + +```bash +npm run format +``` + +Formatiert alle `html`, `css`, `js`, `json` und `md`-Dateien mit **Prettier** (in-place). + +#### Formatierung prüfen (ohne Änderungen) + +```bash +npm run format:check +``` + +Prüft, ob alle Dateien den Prettier-Vorgaben entsprechen, ohne sie zu verändern. + +#### Husky Pre-Commit Hook + +Bei jedem `git commit` werden automatisch **lint-staged**-Prüfungen ausgeführt: + +| Dateityp | Aktionen | +| -------------- | ------------------------------ | +| `*.html` | HTMLHint + Prettier | +| `*.css` | Stylelint (`--fix`) + Prettier | +| `*.js` | ESLint (`--fix`) + Prettier | +| `*.json, *.md` | Prettier | diff --git a/css/haus-schleusingen.css b/css/haus-schleusingen.css index 3016379..c848e01 100644 --- a/css/haus-schleusingen.css +++ b/css/haus-schleusingen.css @@ -1,17 +1,28 @@ :root { - --cream: #F5F0E8; - --warm: #E8DFD0; - --stone: #9E9485; - --dark: #1C1A17; - --charcoal: #2E2B26; - --accent: #8B6914; - --accent-light: #C49A2A; - --white: #FDFCFA; + --cream: #f5f0e8; + --warm: #e8dfd0; + --stone: #9e9485; + --dark: #1c1a17; + --charcoal: #2e2b26; + --accent: #8b6914; + --accent-light: #c49a2a; + --white: #fdfcfa; } -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -html { scroll-behavior: smooth; } + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + body { - font-family: 'DM Sans', sans-serif; + font-family: "DM Sans", sans-serif; background: var(--white); color: var(--dark); overflow-x: hidden; @@ -19,173 +30,348 @@ body { /* NAV */ nav { - position: fixed; top: 0; left: 0; right: 0; z-index: 100; - display: flex; justify-content: space-between; align-items: center; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + display: flex; + justify-content: space-between; + align-items: center; padding: 1.25rem 3rem; background: transparent; - transition: background 0.4s, padding 0.4s; + transition: + background 0.4s, + padding 0.4s; } + nav.scrolled { - background: rgba(253,252,250,0.96); + background: rgb(253 252 250 / 96%); backdrop-filter: blur(12px); padding: 0.85rem 3rem; - border-bottom: 1px solid rgba(158,148,133,0.2); + border-bottom: 1px solid rgb(158 148 133 / 20%); } + .nav-logo { - font-family: 'Cormorant Garamond', serif; + font-family: "Cormorant Garamond", serif; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; color: var(--white); transition: color 0.4s; } -nav.scrolled .nav-logo { color: var(--dark); } -.nav-links { display: flex; gap: 2.5rem; list-style: none; } + +nav.scrolled .nav-logo { + color: var(--dark); +} + +.nav-links { + display: flex; + gap: 2.5rem; + list-style: none; +} + .nav-links a { - font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; - text-transform: uppercase; text-decoration: none; - color: rgba(255,255,255,0.85); + font-size: 0.8rem; + font-weight: 500; + letter-spacing: 0.1em; + text-transform: uppercase; + text-decoration: none; + color: rgb(255 255 255 / 85%); transition: color 0.3s; } -nav.scrolled .nav-links a { color: var(--stone); } -.nav-links a:hover, nav.scrolled .nav-links a:hover { color: var(--accent); } + +nav.scrolled .nav-links a { + color: var(--stone); +} + +.nav-links a:hover, +nav.scrolled .nav-links a:hover { + color: var(--accent); +} + .nav-cta { - font-family: 'DM Sans', sans-serif; - font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; + font-family: "DM Sans", sans-serif; + font-size: 0.78rem; + font-weight: 500; + letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent); color: var(--white); border: none; padding: 0.65rem 1.5rem; cursor: pointer; - transition: background 0.3s, transform 0.2s; + transition: + background 0.3s, + transform 0.2s; +} + +.nav-cta:hover { + background: var(--accent-light); + transform: translateY(-1px); } -.nav-cta:hover { background: var(--accent-light); transform: translateY(-1px); } /* HERO */ .hero { - position: relative; height: 100vh; min-height: 650px; - display: flex; align-items: flex-end; + position: relative; + height: 100vh; + min-height: 650px; + display: flex; + align-items: flex-end; overflow: hidden; } + .hero-bg { - position: absolute; inset: 0; - background-size: cover; background-position: center 20%; + position: absolute; + inset: 0; + background-size: cover; + background-position: center 20%; transform: scale(1.05); transition: transform 8s ease-out; } -.hero-bg.loaded { transform: scale(1); } -.hero-overlay { - position: absolute; inset: 0; - background: linear-gradient(to top, rgba(28,26,23,0.85) 0%, rgba(28,26,23,0.3) 50%, rgba(28,26,23,0.1) 100%); + +.hero-bg.loaded { + transform: scale(1); } + +.hero-overlay { + position: absolute; + inset: 0; + background: linear-gradient( + to top, + rgb(28 26 23 / 85%) 0%, + rgb(28 26 23 / 30%) 50%, + rgb(28 26 23 / 10%) 100% + ); +} + .hero-content { - position: relative; z-index: 2; + position: relative; + z-index: 2; padding: 0 3rem 5rem; max-width: 900px; - opacity: 0; transform: translateY(30px); - transition: opacity 0.9s ease, transform 0.9s ease; + opacity: 0; + transform: translateY(30px); + transition: + opacity 0.9s ease, + transform 0.9s ease; } -.hero-content.visible { opacity: 1; transform: translateY(0); } + +.hero-content.visible { + opacity: 1; + transform: translateY(0); +} + .hero-tag { - display: inline-flex; align-items: center; gap: 8px; - font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; - text-transform: uppercase; color: var(--accent-light); + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 0.72rem; + font-weight: 500; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--accent-light); margin-bottom: 1.25rem; } -.hero-tag::before { content: ''; width: 28px; height: 1px; background: var(--accent-light); } + +.hero-tag::before { + content: ""; + width: 28px; + height: 1px; + background: var(--accent-light); +} + .hero h1 { - font-family: 'Cormorant Garamond', serif; + font-family: "Cormorant Garamond", serif; font-size: clamp(2.8rem, 6vw, 5rem); - font-weight: 300; line-height: 1.08; + font-weight: 300; + line-height: 1.08; color: var(--white); letter-spacing: -0.01em; margin-bottom: 1.5rem; } -.hero h1 em { font-style: italic; color: var(--accent-light); } + +.hero h1 em { + font-style: italic; + color: var(--accent-light); +} + .hero-meta { - display: flex; gap: 2.5rem; align-items: center; - font-size: 0.82rem; color: rgba(255,255,255,0.6); + display: flex; + gap: 2.5rem; + align-items: center; + font-size: 0.82rem; + color: rgb(255 255 255 / 60%); letter-spacing: 0.05em; } -.hero-meta strong { color: var(--white); } -.hero-scroll { - position: absolute; bottom: 2rem; right: 3rem; - display: flex; flex-direction: column; align-items: center; gap: 6px; - font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; - color: rgba(255,255,255,0.5); cursor: pointer; + +.hero-meta strong { + color: var(--white); +} + +.hero-scroll { + position: absolute; + bottom: 2rem; + right: 3rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + font-size: 0.68rem; + letter-spacing: 0.18em; + text-transform: uppercase; + color: rgb(255 255 255 / 50%); + cursor: pointer; +} + +.scroll-line { + width: 1px; + height: 40px; + background: rgb(255 255 255 / 30%); + animation: scroll-anim 2s infinite; +} + +@keyframes scroll-anim { + 0%, + 100% { + transform: scaleY(1); + opacity: 0.3; + } + + 50% { + transform: scaleY(0.5); + opacity: 0.8; + } } -.scroll-line { width: 1px; height: 40px; background: rgba(255,255,255,0.3); animation: scrollAnim 2s infinite; } -@keyframes scrollAnim { 0%,100%{transform:scaleY(1);opacity:0.3} 50%{transform:scaleY(0.5);opacity:0.8} } /* FACTS STRIP */ .facts-strip { - display: grid; grid-template-columns: repeat(4, 1fr); + display: grid; + grid-template-columns: repeat(4, 1fr); background: var(--dark); } + .fact { padding: 2.25rem 2rem; - border-right: 1px solid rgba(255,255,255,0.07); + border-right: 1px solid rgb(255 255 255 / 7%); text-align: center; - opacity: 0; transform: translateY(20px); - transition: opacity 0.6s ease, transform 0.6s ease; + opacity: 0; + transform: translateY(20px); + transition: + opacity 0.6s ease, + transform 0.6s ease; } -.fact:last-child { border-right: none; } -.fact.visible { opacity: 1; transform: translateY(0); } + +.fact:last-child { + border-right: none; +} + +.fact.visible { + opacity: 1; + transform: translateY(0); +} + .fact-val { - font-family: 'Cormorant Garamond', serif; - font-size: 2.2rem; font-weight: 600; + font-family: "Cormorant Garamond", serif; + font-size: 2.2rem; + font-weight: 600; color: var(--accent-light); line-height: 1; margin-bottom: 0.4rem; } -.fact-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); } + +.fact-label { + font-size: 0.72rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--stone); +} /* INTRO */ .intro { - display: grid; grid-template-columns: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 1fr; gap: 0; padding: 6rem 3rem; - max-width: 1200px; margin: 0 auto; + max-width: 1200px; + margin: 0 auto; align-items: center; } -.intro-text { padding-right: 4rem; } + +.intro-text { + padding-right: 4rem; +} + .section-eyebrow { - font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; - text-transform: uppercase; color: var(--accent); + font-size: 0.72rem; + font-weight: 500; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--accent); margin-bottom: 1rem; } + .intro-text h2 { - font-family: 'Cormorant Garamond', serif; + font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 3.5vw, 3rem); - font-weight: 300; line-height: 1.2; + font-weight: 300; + line-height: 1.2; margin-bottom: 1.5rem; color: var(--charcoal); } + .intro-text p { - font-size: 0.95rem; line-height: 1.85; - color: var(--stone); margin-bottom: 1rem; + font-size: 0.95rem; + line-height: 1.85; + color: var(--stone); + margin-bottom: 1rem; } + .intro-stats { - display: flex; gap: 2rem; margin-top: 2rem; + display: flex; + gap: 2rem; + margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--warm); } + .istat-val { - font-family: 'Cormorant Garamond', serif; - font-size: 1.8rem; font-weight: 600; color: var(--accent); line-height: 1; + font-family: "Cormorant Garamond", serif; + font-size: 1.8rem; + font-weight: 600; + color: var(--accent); + line-height: 1; } -.istat-label { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--stone); margin-top: 4px; } + +.istat-label { + font-size: 0.72rem; + letter-spacing: 0.08em; + color: var(--stone); + margin-top: 4px; +} + .intro-img { - position: relative; height: 480px; overflow: hidden; + position: relative; + height: 480px; + overflow: hidden; } -.intro-img img { width: 100%; height: 100%; object-fit: cover; } + +.intro-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + .intro-img-badge { - position: absolute; bottom: -1px; left: -1px; + position: absolute; + bottom: -1px; + left: -1px; background: var(--accent); color: var(--white); padding: 1rem 1.5rem; - font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; + font-size: 0.72rem; + letter-spacing: 0.12em; + text-transform: uppercase; } /* GALLERY — CSS Columns Masonry */ @@ -193,13 +379,15 @@ nav.scrolled .nav-links a { color: var(--stone); } padding: 0 0 6rem; background: var(--cream); } + .gallery-header { padding: 5rem 3rem 3rem; max-width: 1400px; margin: 0 auto; } + .gallery-header h2 { - font-family: 'Cormorant Garamond', serif; + font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 300; color: var(--charcoal); @@ -214,7 +402,9 @@ nav.scrolled .nav-links a { color: var(--stone); } } /* Hide the sizer – not needed for CSS columns */ -.grid-sizer { display: none; } +.grid-sizer { + display: none; +} .grid-item { break-inside: avoid; @@ -229,9 +419,11 @@ nav.scrolled .nav-links a { color: var(--stone); } width: 100%; display: block; border-radius: 3px; - transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), - filter 0.5s ease; + transition: + transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), + filter 0.5s ease; } + .grid-item:hover img { transform: scale(1.04); filter: brightness(0.9); @@ -239,174 +431,377 @@ nav.scrolled .nav-links a { color: var(--stone); } .grid-item-label { position: absolute; - bottom: 0; left: 0; right: 0; + bottom: 0; + left: 0; + right: 0; padding: 2rem 1rem 0.85rem; - background: linear-gradient(transparent, rgba(28,26,23,0.75)); + background: linear-gradient(transparent, rgb(28 26 23 / 75%)); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; - color: rgba(255,255,255,0.9); + color: rgb(255 255 255 / 90%); border-radius: 0 0 3px 3px; transform: translateY(6px); opacity: 0; - transition: transform 0.35s ease, opacity 0.35s ease; + transition: + transform 0.35s ease, + opacity 0.35s ease; pointer-events: none; } + .grid-item:hover .grid-item-label { transform: translateY(0); opacity: 1; } -@media (max-width: 1100px) { - .masonry-grid { column-count: 3; } +@media (width <= 1100px) { + .masonry-grid { + column-count: 3; + } } -@media (max-width: 768px) { - .masonry-grid { column-count: 2; column-gap: 6px; padding: 0 1rem; } - .grid-item { margin-bottom: 6px; } - .gallery-header { padding: 3rem 1.5rem 2rem; } + +@media (width <= 768px) { + .masonry-grid { + column-count: 2; + column-gap: 6px; + padding: 0 1rem; + } + + .grid-item { + margin-bottom: 6px; + } + + .gallery-header { + padding: 3rem 1.5rem 2rem; + } } -@media (max-width: 480px) { - .masonry-grid { column-count: 1; padding: 0 1.5rem; } + +@media (width <= 480px) { + .masonry-grid { + column-count: 1; + padding: 0 1.5rem; + } } /* FLOORS */ -.floors-section { padding: 6rem 3rem; max-width: 1200px; margin: 0 auto; } -.floors-section h2 { - font-family: 'Cormorant Garamond', serif; - font-size: clamp(2rem, 3vw, 2.8rem); - font-weight: 300; margin-bottom: 3rem; color: var(--charcoal); +.floors-section { + padding: 6rem 3rem; + max-width: 1200px; + margin: 0 auto; } -.floor-accordion { border-top: 1px solid var(--warm); } + +.floors-section h2 { + font-family: "Cormorant Garamond", serif; + font-size: clamp(2rem, 3vw, 2.8rem); + font-weight: 300; + margin-bottom: 3rem; + color: var(--charcoal); +} + +.floor-accordion { + border-top: 1px solid var(--warm); +} + .floor-item { border-bottom: 1px solid var(--warm); overflow: hidden; } + .floor-header { - display: flex; justify-content: space-between; align-items: center; - padding: 1.5rem 0; cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 0; + cursor: pointer; transition: color 0.2s; } -.floor-header:hover .floor-title { color: var(--accent); } + +.floor-header:hover .floor-title { + color: var(--accent); +} + .floor-title { - font-family: 'Cormorant Garamond', serif; - font-size: 1.35rem; font-weight: 400; + font-family: "Cormorant Garamond", serif; + font-size: 1.35rem; + font-weight: 400; transition: color 0.2s; } + .floor-size { - font-size: 0.78rem; letter-spacing: 0.1em; color: var(--stone); - display: flex; align-items: center; gap: 1rem; + font-size: 0.78rem; + letter-spacing: 0.1em; + color: var(--stone); + display: flex; + align-items: center; + gap: 1rem; } + .floor-icon { - width: 24px; height: 24px; + width: 24px; + height: 24px; border: 1px solid var(--warm); border-radius: 50%; - display: flex; align-items: center; justify-content: center; - font-size: 0.8rem; color: var(--stone); - transition: transform 0.3s, border-color 0.3s; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; + color: var(--stone); + transition: + transform 0.3s, + border-color 0.3s; } -.floor-item.open .floor-icon { transform: rotate(45deg); border-color: var(--accent); color: var(--accent); } + +.floor-item.open .floor-icon { + transform: rotate(45deg); + border-color: var(--accent); + color: var(--accent); +} + .floor-body { display: none; padding: 0 0 1.5rem; } + .floor-rooms-grid { - display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + display: grid; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } + .room-chip { background: var(--cream); padding: 0.75rem 1rem; - font-size: 0.82rem; color: var(--charcoal); - display: flex; justify-content: space-between; align-items: center; + font-size: 0.82rem; + color: var(--charcoal); + display: flex; + justify-content: space-between; + align-items: center; +} + +.room-chip-area { + font-size: 0.72rem; + color: var(--stone); } -.room-chip-area { font-size: 0.72rem; color: var(--stone); } /* PRICING */ .pricing-section { background: var(--dark); padding: 6rem 3rem; } -.pricing-inner { max-width: 1200px; margin: 0 auto; } -.pricing-section .section-eyebrow { color: var(--accent-light); } + +.pricing-inner { + max-width: 1200px; + margin: 0 auto; +} + +.pricing-section .section-eyebrow { + color: var(--accent-light); +} + .pricing-section h2 { - font-family: 'Cormorant Garamond', serif; + font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 3vw, 2.8rem); - font-weight: 300; color: var(--white); + font-weight: 300; + color: var(--white); margin-bottom: 3rem; } -.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.07); } + +.price-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1px; + background: rgb(255 255 255 / 7%); +} + .price-card { background: var(--charcoal); padding: 2.5rem 2rem; transition: background 0.3s; } -.price-card:hover { background: #383530; } -.price-card.highlight { background: var(--accent); } -.price-card.highlight:hover { background: var(--accent-light); } -.pc-label { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--stone); margin-bottom: 1rem; } -.price-card.highlight .pc-label { color: rgba(255,255,255,0.7); } -.pc-val { - font-family: 'Cormorant Garamond', serif; - font-size: 2.8rem; font-weight: 600; line-height: 1; - color: var(--white); margin-bottom: 0.3rem; + +.price-card:hover { + background: #383530; } -.pc-sub { font-size: 0.78rem; color: var(--stone); } -.price-card.highlight .pc-sub { color: rgba(255,255,255,0.7); } + +.price-card.highlight { + background: var(--accent); +} + +.price-card.highlight:hover { + background: var(--accent-light); +} + +.pc-label { + font-size: 0.72rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--stone); + margin-bottom: 1rem; +} + +.price-card.highlight .pc-label { + color: rgb(255 255 255 / 70%); +} + +.pc-val { + font-family: "Cormorant Garamond", serif; + font-size: 2.8rem; + font-weight: 600; + line-height: 1; + color: var(--white); + margin-bottom: 0.3rem; +} + +.pc-sub { + font-size: 0.78rem; + color: var(--stone); +} + +.price-card.highlight .pc-sub { + color: rgb(255 255 255 / 70%); +} + .price-note { margin-top: 2.5rem; padding-top: 2.5rem; - border-top: 1px solid rgba(255,255,255,0.07); - display: flex; gap: 3rem; + border-top: 1px solid rgb(255 255 255 / 7%); + display: flex; + gap: 3rem; +} + +.pn-item { + font-size: 0.85rem; + color: var(--stone); + line-height: 1.7; +} + +.pn-item strong { + color: var(--white); + display: block; + font-weight: 500; + margin-bottom: 2px; } -.pn-item { font-size: 0.85rem; color: var(--stone); line-height: 1.7; } -.pn-item strong { color: var(--white); display: block; font-weight: 500; margin-bottom: 2px; } /* LAGE */ -.lage-section { padding: 6rem 3rem; max-width: 1200px; margin: 0 auto; } -.lage-section h2 { - font-family: 'Cormorant Garamond', serif; - font-size: clamp(2rem, 3vw, 2.8rem); - font-weight: 300; margin-bottom: 3rem; color: var(--charcoal); +.lage-section { + padding: 6rem 3rem; + max-width: 1200px; + margin: 0 auto; } -.lage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--warm); } + +.lage-section h2 { + font-family: "Cormorant Garamond", serif; + font-size: clamp(2rem, 3vw, 2.8rem); + font-weight: 300; + margin-bottom: 3rem; + color: var(--charcoal); +} + +.lage-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1px; + background: var(--warm); +} + .lage-item { background: var(--white); padding: 2rem; - display: flex; gap: 1.25rem; align-items: flex-start; + display: flex; + gap: 1.25rem; + align-items: flex-start; transition: background 0.3s; } -.lage-item:hover { background: var(--cream); } -.lage-icon { - width: 40px; height: 40px; flex-shrink: 0; + +.lage-item:hover { background: var(--cream); - display: flex; align-items: center; justify-content: center; - font-size: 1.1rem; color: var(--accent); } -.lage-title { font-size: 0.9rem; font-weight: 500; margin-bottom: 4px; } -.lage-desc { font-size: 0.82rem; color: var(--stone); line-height: 1.6; } + +.lage-icon { + width: 40px; + height: 40px; + flex-shrink: 0; + background: var(--cream); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; + color: var(--accent); +} + +.lage-title { + font-size: 0.9rem; + font-weight: 500; + margin-bottom: 4px; +} + +.lage-desc { + font-size: 0.82rem; + color: var(--stone); + line-height: 1.6; +} /* CONTACT */ .contact-section { background: var(--cream); padding: 6rem 3rem; } + .contact-inner { - max-width: 700px; margin: 0 auto; text-align: center; + max-width: 700px; + margin: 0 auto; + text-align: center; } + .contact-inner h2 { - font-family: 'Cormorant Garamond', serif; + font-family: "Cormorant Garamond", serif; font-size: clamp(2.2rem, 4vw, 3.5rem); - font-weight: 300; line-height: 1.15; - color: var(--charcoal); margin-bottom: 1rem; + font-weight: 300; + line-height: 1.15; + color: var(--charcoal); + margin-bottom: 1rem; } -.contact-inner h2 em { font-style: italic; color: var(--accent); } -.contact-inner p { font-size: 0.9rem; color: var(--stone); line-height: 1.8; margin-bottom: 2.5rem; } -.contact-form { text-align: left; } -.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } -.form-field { display: flex; flex-direction: column; gap: 0.4rem; } -.form-field label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); } -.form-field input, .form-field textarea, .form-field select { - font-family: 'DM Sans', sans-serif; + +.contact-inner h2 em { + font-style: italic; + color: var(--accent); +} + +.contact-inner p { + font-size: 0.9rem; + color: var(--stone); + line-height: 1.8; + margin-bottom: 2.5rem; +} + +.contact-form { + text-align: left; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-bottom: 1rem; +} + +.form-field { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.form-field label { + font-size: 0.72rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--stone); +} + +.form-field input, +.form-field textarea, +.form-field select { + font-family: "DM Sans", sans-serif; font-size: 0.88rem; background: var(--white); border: 1px solid var(--warm); @@ -416,83 +811,207 @@ nav.scrolled .nav-links a { color: var(--stone); } transition: border-color 0.2s; resize: none; } -.form-field input:focus, .form-field textarea:focus, .form-field select:focus { + +.form-field input:focus, +.form-field textarea:focus, +.form-field select:focus { border-color: var(--accent); } -.form-field.full { grid-column: span 2; } + +.form-field.full { + grid-column: span 2; +} + .btn-submit { - font-family: 'DM Sans', sans-serif; - font-size: 0.78rem; font-weight: 500; letter-spacing: 0.15em; + font-family: "DM Sans", sans-serif; + font-size: 0.78rem; + font-weight: 500; + letter-spacing: 0.15em; text-transform: uppercase; background: var(--accent); color: var(--white); - border: none; width: 100%; + border: none; + width: 100%; padding: 1.1rem; cursor: pointer; margin-top: 0.5rem; - transition: background 0.3s, transform 0.2s; + transition: + background 0.3s, + transform 0.2s; } -.btn-submit:hover { background: var(--accent-light); transform: translateY(-1px); } + +.btn-submit:hover { + background: var(--accent-light); + transform: translateY(-1px); +} + .form-success { - display: none; text-align: center; padding: 3rem; - background: var(--white); border: 1px solid var(--warm); + display: none; + text-align: center; + padding: 3rem; + background: var(--white); + border: 1px solid var(--warm); +} + +.form-success p { + font-family: "Cormorant Garamond", serif; + font-size: 1.5rem; + color: var(--charcoal); +} + +.form-success small { + font-size: 0.82rem; + color: var(--stone); } -.form-success p { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--charcoal); } -.form-success small { font-size: 0.82rem; color: var(--stone); } /* FOOTER */ footer { background: var(--dark); padding: 2.5rem 3rem; - display: flex; justify-content: space-between; align-items: center; - border-top: 1px solid rgba(255,255,255,0.06); + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid rgb(255 255 255 / 6%); } + .footer-logo { - font-family: 'Cormorant Garamond', serif; - font-size: 1rem; font-weight: 600; color: var(--white); + font-family: "Cormorant Garamond", serif; + font-size: 1rem; + font-weight: 600; + color: var(--white); letter-spacing: 0.04em; } -.footer-links { display: flex; gap: 2rem; } + +.footer-links { + display: flex; + gap: 2rem; +} + .footer-links a { - font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; - color: var(--stone); text-decoration: none; + font-size: 0.72rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--stone); + text-decoration: none; transition: color 0.2s; } -.footer-links a:hover { color: var(--accent-light); } + +.footer-links a:hover { + color: var(--accent-light); +} /* LIGHTBOX */ .lightbox { - display: none; position: fixed; inset: 0; z-index: 1000; - background: rgba(28,26,23,0.96); - align-items: center; justify-content: center; + display: none; + position: fixed; + inset: 0; + z-index: 1000; + background: rgb(28 26 23 / 96%); + align-items: center; + justify-content: center; } -.lightbox.open { display: flex; } -.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; } + +.lightbox.open { + display: flex; +} + +.lightbox img { + max-width: 90vw; + max-height: 85vh; + object-fit: contain; +} + .lightbox-close { - position: absolute; top: 1.5rem; right: 2rem; - font-size: 1.5rem; color: var(--white); cursor: pointer; - background: none; border: none; + position: absolute; + top: 1.5rem; + right: 2rem; + font-size: 1.5rem; + color: var(--white); + cursor: pointer; + background: none; + border: none; transition: color 0.2s; } -.lightbox-close:hover { color: var(--accent-light); } + +.lightbox-close:hover { + color: var(--accent-light); +} /* RESPONSIVE */ -@media (max-width: 900px) { - nav { padding: 1rem 1.5rem; } - nav.scrolled { padding: 0.75rem 1.5rem; } - .nav-links { display: none; } - .hero-content { padding: 0 1.5rem 4rem; } - .facts-strip { grid-template-columns: repeat(2, 1fr); } - .fact { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); } - .intro { grid-template-columns: 1fr; padding: 3rem 1.5rem; } - .intro-text { padding-right: 0; margin-bottom: 2rem; } - .masonry-grid { column-count: 2; } - .gallery-header { padding: 3rem 1.5rem 2rem; } - .price-cards { grid-template-columns: 1fr; } - .price-note { flex-direction: column; gap: 1.5rem; } - .lage-grid { grid-template-columns: 1fr; } - .form-row { grid-template-columns: 1fr; } - .form-field.full { grid-column: span 1; } - .floors-section, .lage-section, .contact-section { padding: 4rem 1.5rem; } - footer { flex-direction: column; gap: 1.5rem; text-align: center; } -} \ No newline at end of file +@media (width <= 900px) { + nav { + padding: 1rem 1.5rem; + } + + nav.scrolled { + padding: 0.75rem 1.5rem; + } + + .nav-links { + display: none; + } + + .hero-content { + padding: 0 1.5rem 4rem; + } + + .facts-strip { + grid-template-columns: repeat(2, 1fr); + } + + .fact { + border-right: none; + border-bottom: 1px solid rgb(255 255 255 / 7%); + } + + .intro { + grid-template-columns: 1fr; + padding: 3rem 1.5rem; + } + + .intro-text { + padding-right: 0; + margin-bottom: 2rem; + } + + .masonry-grid { + column-count: 2; + } + + .gallery-header { + padding: 3rem 1.5rem 2rem; + } + + .price-cards { + grid-template-columns: 1fr; + } + + .price-note { + flex-direction: column; + gap: 1.5rem; + } + + .lage-grid { + grid-template-columns: 1fr; + } + + .form-row { + grid-template-columns: 1fr; + } + + .form-field.full { + grid-column: span 1; + } + + .floors-section, + .lage-section, + .contact-section { + padding: 4rem 1.5rem; + } + + footer { + flex-direction: column; + gap: 1.5rem; + text-align: center; + } +} diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..37a76da --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,31 @@ +const globals = require("globals"); +const js = require("@eslint/js"); +const prettierPlugin = require("eslint-plugin-prettier"); +const prettierConfig = require("eslint-config-prettier"); + +module.exports = [ + js.configs.recommended, + prettierConfig, + { + files: ["**/*.js"], + languageOptions: { + ecmaVersion: "latest", + sourceType: "script", + globals: { + ...globals.browser, + ...globals.jquery, + }, + }, + plugins: { + prettier: prettierPlugin, + }, + rules: { + "prettier/prettier": "error", + "no-unused-vars": "warn", + "no-undef": "warn", + }, + }, + { + ignores: ["node_modules/**", "**/*.min.js"], + }, +]; diff --git a/fonts/fonts.css b/fonts/fonts.css index 64fccdb..2549573 100644 --- a/fonts/fonts.css +++ b/fonts/fonts.css @@ -1,47 +1,47 @@ @font-face { - font-family: 'Cormorant Garamond'; + font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; - src: url('CormorantGaramond-Light.ttf') format('truetype'); + src: url("CormorantGaramond-Light.ttf") format("truetype"); } @font-face { - font-family: 'Cormorant Garamond'; + font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; - src: url('CormorantGaramond-Regular.ttf') format('truetype'); + src: url("CormorantGaramond-Regular.ttf") format("truetype"); } @font-face { - font-family: 'Cormorant Garamond'; + font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; - src: url('CormorantGaramond-SemiBold.ttf') format('truetype'); + src: url("CormorantGaramond-SemiBold.ttf") format("truetype"); } @font-face { - font-family: 'DM Sans'; + font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap; - src: url('DMSans-Light.ttf') format('truetype'); + src: url("DMSans-Light.ttf") format("truetype"); } @font-face { - font-family: 'DM Sans'; + font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; - src: url('DMSans-Regular.ttf') format('truetype'); + src: url("DMSans-Regular.ttf") format("truetype"); } @font-face { - font-family: 'DM Sans'; + font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; - src: url('DMSans-Medium.ttf') format('truetype'); -} \ No newline at end of file + src: url("DMSans-Medium.ttf") format("truetype"); +} diff --git a/haus-schleusingen.html b/haus-schleusingen.html index 0db61b7..80a0620 100644 --- a/haus-schleusingen.html +++ b/haus-schleusingen.html @@ -1,345 +1,485 @@ - + - - - -Einfamilienhaus zur Miete - Schleusingen - - - - + + + + Einfamilienhaus zur Miete - Schleusingen + + + + + + + - - - - - - - -
-
-
-
-
Zur Langzeitmiete · Ab sofort verfügbar
-

Großzügiges
Einfamilienhaus
in Schleusingen

-
- Schleusinger Bahnhofstraße 10 - 227 m² Wohnfläche - 6 Zimmer - 3 Etagen + Dachterrasse -
-
-
- Entdecken -
-
-
- -
-
-
227
-
m² Wohnfläche
-
-
-
6
-
Zimmer
-
-
-
3
-
Etagen
-
-
-
1.300
-
€ Kaltmiete
-
-
- -
-
-
Das Objekt
-

Wohnen mit Charakter und viel Raum

-

Vermietet wird ein vollständiges Einfamilienhaus in ruhiger Lage von Schleusingen. Das Haus verbindet historischen Charme mit modernem Wohnkomfort auf drei großzügigen Etagen.

-

Garage für zwei Fahrzeuge, großzügige Dachterrasse mit 35,8 m², vollausgestattete Küche, Vollbad sowie Abstell- und Nutzräume machen das Haus zu einem außergewöhnlichen Mietobjekt.

-
-
113 m²
Nutzfläche
-
35,8 m²
Dachterrasse
-
2 Stpl.
Garage
-
-
-
- -
Wohnzimmer · 24,7 m²
-
-
- - - -
-
Raumaufteilung
-

Großzügig auf allen Etagen

-
-
-
- Erdgeschoss -
- 99,4 m² -
+
+
+
+
+
+
Zur Langzeitmiete · Ab sofort verfügbar
+

+ Großzügiges +
+ Einfamilienhaus +
+ in Schleusingen +

+
+ Schleusinger Bahnhofstraße 10 + 227 m² Wohnfläche + 6 Zimmer + 3 Etagen + Dachterrasse
-
-
-
Flur 20,1 m²
-
WC 0,8 m²
-
Garage / Partykeller 42,6 m²
-
Abstellraum 1 9,9 m²
-
Abstellraum 2 7,8 m²
-
Heizungskeller 18,3 m²
-
+
+ Entdecken +
-
-
-
- 1. Obergeschoss -
- 100,3 m² -
+
-
-
-
-
-
Flur 20,1 m²
-
Wohnzimmer 24,7 m²
-
Gästezimmer 11,5 m²
-
Badezimmer 9,8 m²
-
Küche 18,4 m²
-
Schlafzimmer 18,0 m²
-
-
-
-
-
- 2. Obergeschoss -
- 68 m² -
+
-
-
-
-
-
Flur 13,9 m²
-
Kinderzimmer 1 21,7 m²
-
Kinderzimmer 2 15,7 m²
-
Spielzimmer 6,3 m²
-
Ankleidezimmer 1,4 m²
-
Dachterrasse 35,8 m²
-
-
-
-
-
- Dachboden -
- 52 m² Nutzfläche -
+
-
-
-
-
-
Dachboden (ungeheizt) 52 m²
-
-
-
-
-
+ -
-
-
Mietkonditionen
-

Transparente Preisgestaltung

-
-
-
Kaltmiete
-
1.300 €
-
pro Monat
+
+
+
227
+
m² Wohnfläche
-
-
Gesamtmiete warm
-
1.600 €
-
inkl. 300 € Nebenkosten
+
+
6
+
Zimmer
-
-
Kaution
-
2.600 €
-
2 Nettokaltmieten
+
+
3
+
Etagen
+
+
+
1.300
+
€ Kaltmiete
-
-
VerfügbarkeitAb sofort · unbefristete Laufzeit
-
NebenkostenVorauszahlung 300 €/Monat, jährliche Abrechnung
-
EnergieausweisWird bei Mietbeginn übergeben · Erdgasheizung
-
HaustiereAuf Anfrage
-
-
-
-
-
Standort
-

Zentral und ruhig zugleich

-
-
-
🛒
-
Einkaufen & Versorgung
Supermärkte, Ärzte, Apotheken und Schulen sind fußläufig erreichbar
-
-
-
🚌
-
Öffentlicher Nahverkehr
Zentrale Bushaltestelle ca. 200 m entfernt — direkte Verbindungen in die Region
-
-
-
🏛
-
Innenstadt Schleusingen
Wochenmarkt und Stadtmitte nur ca. 500 m entfernt
-
-
-
📍
-
Genaue Adresse
Schleusinger Bahnhofstraße 10
98533 Schleusingen, Thüringen
-
-
-
- -
-
-
Kontakt
-

Interesse?
Schreiben Sie uns.

-

Wir freuen uns über Ihre Anfrage und melden uns innerhalb von 24 Stunden. Besichtigungstermine sind jederzeit möglich.

-
-
-
-
- - +
+
+
Das Objekt
+

Wohnen mit Charakter und viel Raum

+

+ Vermietet wird ein vollständiges Einfamilienhaus in ruhiger Lage von Schleusingen. Das + Haus verbindet historischen Charme mit modernem Wohnkomfort auf drei großzügigen Etagen. +

+

+ Garage für zwei Fahrzeuge, großzügige Dachterrasse mit 35,8 m², vollausgestattete Küche, + Vollbad sowie Abstell- und Nutzräume machen das Haus zu einem außergewöhnlichen + Mietobjekt. +

+
+
+
113 m²
+
Nutzfläche
-
- - +
+
35,8 m²
+
Dachterrasse
+
+
+
2 Stpl.
+
Garage
-
-
- - -
-
- - -
-
-
-
- - -
-
-
-
- - -
-
- - -
-

Vielen Dank für Ihre Anfrage!

-
- Wir melden uns schnellstmöglich bei Ihnen.
+
+ Wohnzimmer +
Wohnzimmer · 24,7 m²
+
+
+ + + +
+
Raumaufteilung
+

Großzügig auf allen Etagen

+
+
+
+ Erdgeschoss +
+ 99,4 m² +
+
+
+
+
+
+
+ Flur + 20,1 m² +
+
+ WC + 0,8 m² +
+
+ Garage / Partykeller + 42,6 m² +
+
+ Abstellraum 1 + 9,9 m² +
+
+ Abstellraum 2 + 7,8 m² +
+
+ Heizungskeller + 18,3 m² +
+
+
+
+
+
+ 1. Obergeschoss +
+ 100,3 m² +
+
+
+
+
+
+
+ Flur + 20,1 m² +
+
+ Wohnzimmer + 24,7 m² +
+
+ Gästezimmer + 11,5 m² +
+
+ Badezimmer + 9,8 m² +
+
+ Küche + 18,4 m² +
+
+ Schlafzimmer + 18,0 m² +
+
+
+
+
+
+ 2. Obergeschoss +
+ 68 m² +
+
+
+
+
+
+
+ Flur + 13,9 m² +
+
+ Kinderzimmer 1 + 21,7 m² +
+
+ Kinderzimmer 2 + 15,7 m² +
+
+ Spielzimmer + 6,3 m² +
+
+ Ankleidezimmer + 1,4 m² +
+
+ Dachterrasse + 35,8 m² +
+
+
+
+
+
+ Dachboden +
+ 52 m² Nutzfläche +
+
+
+
+
+
+
+ Dachboden (ungeheizt) + 52 m² +
+
+
+
+
+
+ +
+
+
Mietkonditionen
+

Transparente Preisgestaltung

+
+
+
Kaltmiete
+
1.300 €
+
pro Monat
+
+
+
Gesamtmiete warm
+
1.600 €
+
inkl. 300 € Nebenkosten
+
+
+
Kaution
+
2.600 €
+
2 Nettokaltmieten
+
+
+
+
+ Verfügbarkeit + Ab sofort · unbefristete Laufzeit +
+
+ Nebenkosten + Vorauszahlung 300 €/Monat, jährliche Abrechnung +
+
+ Energieausweis + Wird bei Mietbeginn übergeben · Erdgasheizung +
+
+ Haustiere + Auf Anfrage +
+
+
+
+ +
+
Standort
+

Zentral und ruhig zugleich

+
+
+
🛒
+
+
Einkaufen & Versorgung
+
+ Supermärkte, Ärzte, Apotheken und Schulen sind fußläufig erreichbar +
+
+
+
+
🚌
+
+
Öffentlicher Nahverkehr
+
+ Zentrale Bushaltestelle ca. 200 m entfernt — direkte Verbindungen in die Region +
+
+
+
+
🏛
+
+
Innenstadt Schleusingen
+
Wochenmarkt und Stadtmitte nur ca. 500 m entfernt
+
+
+
+
📍
+
+
Genaue Adresse
+
+ Schleusinger Bahnhofstraße 10 +
+ 98533 Schleusingen, Thüringen +
+
+
+
+
+ +
+
+
Kontakt
+

+ Interesse? +
+ Schreiben Sie uns. +

+

+ Wir freuen uns über Ihre Anfrage und melden uns innerhalb von 24 Stunden. + Besichtigungstermine sind jederzeit möglich. +

+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ +
+
+

Vielen Dank für Ihre Anfrage!

+
+ Wir melden uns schnellstmöglich bei Ihnen. +
+
+
+
+ + + + -
-
- - - - - - - \ No newline at end of file + + + diff --git a/js/haus-schleusingen.js b/js/haus-schleusingen.js index 1130708..ece1912 100644 --- a/js/haus-schleusingen.js +++ b/js/haus-schleusingen.js @@ -1,70 +1,76 @@ -$(function() { +$(function () { // Navbar scroll - $(window).on('scroll', function() { - if ($(this).scrollTop() > 60) $('#navbar').addClass('scrolled'); - else $('#navbar').removeClass('scrolled'); + $(window).on("scroll", function () { + if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled"); + else $("#navbar").removeClass("scrolled"); }); // Hero animation on load - setTimeout(function() { - $('#heroContent').addClass('visible'); - $('#heroBg').addClass('loaded'); + setTimeout(function () { + $("#heroContent").addClass("visible"); + $("#heroBg").addClass("loaded"); }, 200); // Scroll animations function checkVisible() { - $('.fact, [data-animate]').each(function() { + $(".fact, [data-animate]").each(function () { var el = $(this); var top = el.offset().top; var windowBottom = $(window).scrollTop() + $(window).height(); if (windowBottom > top + 60) { - el.addClass('visible'); - el.css({opacity: 1, transform: 'translateY(0)'}); + el.addClass("visible"); + el.css({ opacity: 1, transform: "translateY(0)" }); } }); } - $('[data-animate]').css({opacity: 0, transform: 'translateY(30px)', transition: 'opacity 0.8s ease, transform 0.8s ease'}); - $(window).on('scroll', checkVisible); + $("[data-animate]").css({ + opacity: 0, + transform: "translateY(30px)", + transition: "opacity 0.8s ease, transform 0.8s ease", + }); + $(window).on("scroll", checkVisible); checkVisible(); // Floor accordion - $('.floor-header').on('click', function() { - var item = $(this).closest('.floor-item'); - var isOpen = item.hasClass('open'); - $('.floor-item').removeClass('open'); - $('.floor-body').slideUp(300); + $(".floor-header").on("click", function () { + var item = $(this).closest(".floor-item"); + var isOpen = item.hasClass("open"); + $(".floor-item").removeClass("open"); + $(".floor-body").slideUp(300); if (!isOpen) { - item.addClass('open'); - item.find('.floor-body').slideDown(300); + item.addClass("open"); + item.find(".floor-body").slideDown(300); } }); // Lightbox – gallery grid items - $(document).on('click', '.grid-item', function() { - var src = $(this).data('img') || $(this).find('img').attr('src'); - $('#lightboxImg').attr('src', src); - $('#lightbox').addClass('open'); - $('body').css('overflow', 'hidden'); + $(document).on("click", ".grid-item", function () { + var src = $(this).data("img") || $(this).find("img").attr("src"); + $("#lightboxImg").attr("src", src); + $("#lightbox").addClass("open"); + $("body").css("overflow", "hidden"); }); - $('#lightboxClose, #lightbox').on('click', function(e) { + $("#lightboxClose, #lightbox").on("click", function (e) { if (e.target === this) { - $('#lightbox').removeClass('open'); - $('body').css('overflow', ''); + $("#lightbox").removeClass("open"); + $("body").css("overflow", ""); } }); - $(document).on('keydown', function(e) { - if (e.key === 'Escape') { $('#lightbox').removeClass('open'); $('body').css('overflow', ''); } + $(document).on("keydown", function (e) { + if (e.key === "Escape") { + $("#lightbox").removeClass("open"); + $("body").css("overflow", ""); + } }); - // Form submit - $('#contactForm').on('submit', function(e) { + // Form submit + $("#contactForm").on("submit", function (e) { e.preventDefault(); - var btn = $(this).find('.btn-submit'); - btn.text('Wird gesendet...').prop('disabled', true); - setTimeout(function() { - $('#contactForm').hide(); - $('#formSuccess').fadeIn(400); + var btn = $(this).find(".btn-submit"); + btn.text("Wird gesendet...").prop("disabled", true); + setTimeout(function () { + $("#contactForm").hide(); + $("#formSuccess").fadeIn(400); }, 1200); }); }); - diff --git a/package.json b/package.json new file mode 100644 index 0000000..6673be5 --- /dev/null +++ b/package.json @@ -0,0 +1,54 @@ +{ + "name": "landingpage-haus-schleusingen", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "lint:html": "htmlhint \"**/*.html\"", + "lint:css": "stylelint \"css/**/*.css\" \"fonts/**/*.css\"", + "lint:js": "eslint \"js/**/*.js\" --ignore-pattern \"**/*.min.js\"", + "lint": "npm run lint:html && npm run lint:css && npm run lint:js", + "format": "prettier --write \"**/*.{html,css,js,json,md}\" --ignore-path .prettierignore", + "format:check": "prettier --check \"**/*.{html,css,js,json,md}\" --ignore-path .prettierignore", + "prepare": "husky" + }, + "lint-staged": { + "*.{html}": [ + "htmlhint", + "prettier --write" + ], + "*.{css}": [ + "stylelint --fix", + "prettier --write" + ], + "*.{js}": [ + "eslint --fix", + "prettier --write" + ], + "*.{json,md}": [ + "prettier --write" + ] + }, + "repository": { + "type": "git", + "url": "https://git.home.kies-media.de/greggy/landingpage-haus-schleusingen.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "type": "commonjs", + "devDependencies": { + "@eslint/js": "^10.0.1", + "eslint": "^10.3.0", + "eslint-config-prettier": "^10.1.8", + "eslint-plugin-prettier": "^5.5.5", + "globals": "^17.6.0", + "htmlhint": "^1.9.2", + "husky": "^9.1.7", + "lint-staged": "^16.4.0", + "prettier": "^3.8.3", + "stylelint": "^16.26.1", + "stylelint-config-standard": "^36.0.1", + "stylelint-prettier": "^5.0.3" + } +}