README hinzugefuegt, Lint-Fehler behoben, Code formatiert
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,2 +1,4 @@
|
|||||||
*.ps1
|
*.ps1
|
||||||
*.py
|
*.py
|
||||||
|
/node_modules/
|
||||||
|
package-lock.json
|
||||||
|
|||||||
1
.htmlhintrc
Normal file
1
.htmlhintrc
Normal file
@@ -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}
|
||||||
1
.husky/pre-commit
Normal file
1
.husky/pre-commit
Normal file
@@ -0,0 +1 @@
|
|||||||
|
npx lint-staged
|
||||||
3
.prettierignore
Normal file
3
.prettierignore
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
node_modules
|
||||||
|
*.min.js
|
||||||
|
*.min.css
|
||||||
1
.prettierrc
Normal file
1
.prettierrc
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"semi":true,"singleQuote":false,"tabWidth":2,"trailingComma":"all","printWidth":100,"bracketSpacing":true,"arrowParens":"always","endOfLine":"lf","htmlWhitespaceSensitivity":"ignore"}
|
||||||
11
.stylelintrc.json
Normal file
11
.stylelintrc.json
Normal file
@@ -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"]
|
||||||
|
}
|
||||||
175
README.md
Normal file
175
README.md
Normal file
@@ -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 |
|
||||||
File diff suppressed because it is too large
Load Diff
31
eslint.config.js
Normal file
31
eslint.config.js
Normal file
@@ -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"],
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -1,47 +1,47 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Cormorant Garamond';
|
font-family: "Cormorant Garamond";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url('CormorantGaramond-Light.ttf') format('truetype');
|
src: url("CormorantGaramond-Light.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Cormorant Garamond';
|
font-family: "Cormorant Garamond";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url('CormorantGaramond-Regular.ttf') format('truetype');
|
src: url("CormorantGaramond-Regular.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Cormorant Garamond';
|
font-family: "Cormorant Garamond";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url('CormorantGaramond-SemiBold.ttf') format('truetype');
|
src: url("CormorantGaramond-SemiBold.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'DM Sans';
|
font-family: "DM Sans";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url('DMSans-Light.ttf') format('truetype');
|
src: url("DMSans-Light.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'DM Sans';
|
font-family: "DM Sans";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url('DMSans-Regular.ttf') format('truetype');
|
src: url("DMSans-Regular.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'DM Sans';
|
font-family: "DM Sans";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url('DMSans-Medium.ttf') format('truetype');
|
src: url("DMSans-Medium.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,345 +1,485 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Einfamilienhaus zur Miete - Schleusingen</title>
|
<title>Einfamilienhaus zur Miete - Schleusingen</title>
|
||||||
<link rel="stylesheet" href="fonts/fonts.css">
|
<link rel="stylesheet" href="fonts/fonts.css" />
|
||||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||||
<!-- Masonry removed – using CSS columns instead -->
|
<!-- Masonry removed – using CSS columns instead -->
|
||||||
<link rel="stylesheet" href="css/haus-schleusingen.css">
|
<link rel="stylesheet" href="css/haus-schleusingen.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav id="navbar">
|
||||||
|
<div class="nav-logo">Bahnhofstraße 10</div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#galerie">Galerie</a></li>
|
||||||
|
<li><a href="#grundriss">Grundriss</a></li>
|
||||||
|
<li><a href="#miete">Miete</a></li>
|
||||||
|
<li><a href="#lage">Lage</a></li>
|
||||||
|
</ul>
|
||||||
|
<button
|
||||||
|
class="nav-cta"
|
||||||
|
onclick="$('html').animate({ scrollTop: $('#kontakt').offset().top }, 700)"
|
||||||
|
>
|
||||||
|
Jetzt anfragen
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
</head>
|
<section class="hero" id="hero">
|
||||||
<body>
|
<div
|
||||||
|
class="hero-bg"
|
||||||
|
id="heroBg"
|
||||||
|
style="background-image: url(bilder/Außenansicht-2.png)"
|
||||||
<nav id="navbar">
|
></div>
|
||||||
<div class="nav-logo">Bahnhofstraße 10</div>
|
<div class="hero-overlay"></div>
|
||||||
<ul class="nav-links">
|
<div class="hero-content" id="heroContent">
|
||||||
<li><a href="#galerie">Galerie</a></li>
|
<div class="hero-tag">Zur Langzeitmiete · Ab sofort verfügbar</div>
|
||||||
<li><a href="#grundriss">Grundriss</a></li>
|
<h1>
|
||||||
<li><a href="#miete">Miete</a></li>
|
Großzügiges
|
||||||
<li><a href="#lage">Lage</a></li>
|
<br />
|
||||||
</ul>
|
<em>Einfamilienhaus</em>
|
||||||
<button class="nav-cta" onclick="$('html').animate({scrollTop: $('#kontakt').offset().top}, 700)">Jetzt anfragen</button>
|
<br />
|
||||||
</nav>
|
in Schleusingen
|
||||||
|
</h1>
|
||||||
<section class="hero" id="hero">
|
<div class="hero-meta">
|
||||||
<div class="hero-bg" id="heroBg" style="background-image:url(bilder/Außenansicht-2.png)"></div>
|
<span><strong>Schleusinger Bahnhofstraße 10</strong></span>
|
||||||
<div class="hero-overlay"></div>
|
<span>227 m² Wohnfläche</span>
|
||||||
<div class="hero-content" id="heroContent">
|
<span>6 Zimmer</span>
|
||||||
<div class="hero-tag">Zur Langzeitmiete · Ab sofort verfügbar</div>
|
<span>3 Etagen + Dachterrasse</span>
|
||||||
<h1>Großzügiges<br><em>Einfamilienhaus</em><br>in Schleusingen</h1>
|
|
||||||
<div class="hero-meta">
|
|
||||||
<span><strong>Schleusinger Bahnhofstraße 10</strong></span>
|
|
||||||
<span>227 m² Wohnfläche</span>
|
|
||||||
<span>6 Zimmer</span>
|
|
||||||
<span>3 Etagen + Dachterrasse</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hero-scroll">
|
|
||||||
<span>Entdecken</span>
|
|
||||||
<div class="scroll-line"></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="facts-strip">
|
|
||||||
<div class="fact">
|
|
||||||
<div class="fact-val">227</div>
|
|
||||||
<div class="fact-label">m² Wohnfläche</div>
|
|
||||||
</div>
|
|
||||||
<div class="fact">
|
|
||||||
<div class="fact-val">6</div>
|
|
||||||
<div class="fact-label">Zimmer</div>
|
|
||||||
</div>
|
|
||||||
<div class="fact">
|
|
||||||
<div class="fact-val">3</div>
|
|
||||||
<div class="fact-label">Etagen</div>
|
|
||||||
</div>
|
|
||||||
<div class="fact">
|
|
||||||
<div class="fact-val">1.300</div>
|
|
||||||
<div class="fact-label">€ Kaltmiete</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="intro" id="intro">
|
|
||||||
<div class="intro-text" data-animate>
|
|
||||||
<div class="section-eyebrow">Das Objekt</div>
|
|
||||||
<h2>Wohnen mit Charakter und viel Raum</h2>
|
|
||||||
<p>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.</p>
|
|
||||||
<p>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.</p>
|
|
||||||
<div class="intro-stats">
|
|
||||||
<div><div class="istat-val">113 m²</div><div class="istat-label">Nutzfläche</div></div>
|
|
||||||
<div><div class="istat-val">35,8 m²</div><div class="istat-label">Dachterrasse</div></div>
|
|
||||||
<div><div class="istat-val">2 Stpl.</div><div class="istat-label">Garage</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="intro-img" data-animate>
|
|
||||||
<img src="bilder/wohnzimmer2.png" />
|
|
||||||
<div class="intro-img-badge">Wohnzimmer · 24,7 m²</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="galerie" class="gallery-section">
|
|
||||||
<div class="gallery-header">
|
|
||||||
<div>
|
|
||||||
<div class="section-eyebrow">Fotogalerie</div>
|
|
||||||
<h2>Einblicke ins Haus</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="masonry-grid">
|
|
||||||
<div class="grid-sizer"></div>
|
|
||||||
|
|
||||||
<div class="grid-item" data-img="bilder/Außenansicht-2.png">
|
|
||||||
<img src="bilder/Außenansicht-2.png" alt="Außenansicht" />
|
|
||||||
<span class="grid-item-label">Außenansicht</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/wohnzimmer2.png">
|
|
||||||
<img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" />
|
|
||||||
<span class="grid-item-label">Wohnzimmer · 24,7 m²</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/Küche 1.jpg">
|
|
||||||
<img src="bilder/Küche 1.jpg" alt="Küche" />
|
|
||||||
<span class="grid-item-label">Küche · 18,4 m²</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/schlafzimmer.png">
|
|
||||||
<img src="bilder/schlafzimmer.png" alt="Schlafzimmer" />
|
|
||||||
<span class="grid-item-label">Schlafzimmer · 18 m²</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/Bad.jpg">
|
|
||||||
<img src="bilder/Bad.jpg" alt="Badezimmer" />
|
|
||||||
<span class="grid-item-label">Badezimmer · 9,8 m²</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/Kinderzimmer.png">
|
|
||||||
<img src="bilder/Kinderzimmer.png" alt="Kinderzimmer 1" />
|
|
||||||
<span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/Kinderzimmer 2.jpg">
|
|
||||||
<img src="bilder/Kinderzimmer 2.jpg" alt="Kinderzimmer 2" />
|
|
||||||
<span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/kinderzimmer 2 2.jpeg">
|
|
||||||
<img src="bilder/kinderzimmer 2 2.jpeg" alt="Kinderzimmer Detail" />
|
|
||||||
<span class="grid-item-label">Kinderzimmer Detail</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/Kinderzimmer 3.jpg">
|
|
||||||
<img src="bilder/Kinderzimmer 3.jpg" alt="Kinderzimmer 3" />
|
|
||||||
<span class="grid-item-label">Gästezimmer · 11,5 m²</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42.jpeg">
|
|
||||||
<img src="bilder/WhatsApp Image 2026-03-30 at 07.50.42.jpeg" alt="Wohnbereich Detail 1" />
|
|
||||||
<span class="grid-item-label">Wohnbereich</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (1).jpeg">
|
|
||||||
<img src="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (1).jpeg" alt="Wohnbereich Detail 2" />
|
|
||||||
<span class="grid-item-label">Wohnbereich Detail</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg">
|
|
||||||
<img src="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg" alt="Wohnbereich Detail 3" />
|
|
||||||
<span class="grid-item-label">Hausansicht</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="floors-section" id="grundriss">
|
|
||||||
<div class="section-eyebrow">Raumaufteilung</div>
|
|
||||||
<h2>Großzügig auf allen Etagen</h2>
|
|
||||||
<div class="floor-accordion">
|
|
||||||
<div class="floor-item">
|
|
||||||
<div class="floor-header">
|
|
||||||
<span class="floor-title">Erdgeschoss</span>
|
|
||||||
<div class="floor-size">
|
|
||||||
<span>99,4 m²</span>
|
|
||||||
<div class="floor-icon">+</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="floor-body">
|
<div class="hero-scroll">
|
||||||
<div class="floor-rooms-grid">
|
<span>Entdecken</span>
|
||||||
<div class="room-chip">Flur <span class="room-chip-area">20,1 m²</span></div>
|
<div class="scroll-line"></div>
|
||||||
<div class="room-chip">WC <span class="room-chip-area">0,8 m²</span></div>
|
|
||||||
<div class="room-chip">Garage / Partykeller <span class="room-chip-area">42,6 m²</span></div>
|
|
||||||
<div class="room-chip">Abstellraum 1 <span class="room-chip-area">9,9 m²</span></div>
|
|
||||||
<div class="room-chip">Abstellraum 2 <span class="room-chip-area">7,8 m²</span></div>
|
|
||||||
<div class="room-chip">Heizungskeller <span class="room-chip-area">18,3 m²</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<div class="floor-item">
|
|
||||||
<div class="floor-header">
|
|
||||||
<span class="floor-title">1. Obergeschoss</span>
|
|
||||||
<div class="floor-size">
|
|
||||||
<span>100,3 m²</span>
|
|
||||||
<div class="floor-icon">+</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="floor-body">
|
|
||||||
<div class="floor-rooms-grid">
|
|
||||||
<div class="room-chip">Flur <span class="room-chip-area">20,1 m²</span></div>
|
|
||||||
<div class="room-chip">Wohnzimmer <span class="room-chip-area">24,7 m²</span></div>
|
|
||||||
<div class="room-chip">Gästezimmer <span class="room-chip-area">11,5 m²</span></div>
|
|
||||||
<div class="room-chip">Badezimmer <span class="room-chip-area">9,8 m²</span></div>
|
|
||||||
<div class="room-chip">Küche <span class="room-chip-area">18,4 m²</span></div>
|
|
||||||
<div class="room-chip">Schlafzimmer <span class="room-chip-area">18,0 m²</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="floor-item">
|
|
||||||
<div class="floor-header">
|
|
||||||
<span class="floor-title">2. Obergeschoss</span>
|
|
||||||
<div class="floor-size">
|
|
||||||
<span>68 m²</span>
|
|
||||||
<div class="floor-icon">+</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="floor-body">
|
|
||||||
<div class="floor-rooms-grid">
|
|
||||||
<div class="room-chip">Flur <span class="room-chip-area">13,9 m²</span></div>
|
|
||||||
<div class="room-chip">Kinderzimmer 1 <span class="room-chip-area">21,7 m²</span></div>
|
|
||||||
<div class="room-chip">Kinderzimmer 2 <span class="room-chip-area">15,7 m²</span></div>
|
|
||||||
<div class="room-chip">Spielzimmer <span class="room-chip-area">6,3 m²</span></div>
|
|
||||||
<div class="room-chip">Ankleidezimmer <span class="room-chip-area">1,4 m²</span></div>
|
|
||||||
<div class="room-chip">Dachterrasse <span class="room-chip-area">35,8 m²</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="floor-item">
|
|
||||||
<div class="floor-header">
|
|
||||||
<span class="floor-title">Dachboden</span>
|
|
||||||
<div class="floor-size">
|
|
||||||
<span>52 m² Nutzfläche</span>
|
|
||||||
<div class="floor-icon">+</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="floor-body">
|
|
||||||
<div class="floor-rooms-grid">
|
|
||||||
<div class="room-chip">Dachboden (ungeheizt) <span class="room-chip-area">52 m²</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="pricing-section" id="miete">
|
<div class="facts-strip">
|
||||||
<div class="pricing-inner">
|
<div class="fact">
|
||||||
<div class="section-eyebrow">Mietkonditionen</div>
|
<div class="fact-val">227</div>
|
||||||
<h2>Transparente Preisgestaltung</h2>
|
<div class="fact-label">m² Wohnfläche</div>
|
||||||
<div class="price-cards">
|
|
||||||
<div class="price-card">
|
|
||||||
<div class="pc-label">Kaltmiete</div>
|
|
||||||
<div class="pc-val">1.300 €</div>
|
|
||||||
<div class="pc-sub">pro Monat</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="price-card highlight">
|
<div class="fact">
|
||||||
<div class="pc-label">Gesamtmiete warm</div>
|
<div class="fact-val">6</div>
|
||||||
<div class="pc-val">1.600 €</div>
|
<div class="fact-label">Zimmer</div>
|
||||||
<div class="pc-sub">inkl. 300 € Nebenkosten</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="price-card">
|
<div class="fact">
|
||||||
<div class="pc-label">Kaution</div>
|
<div class="fact-val">3</div>
|
||||||
<div class="pc-val">2.600 €</div>
|
<div class="fact-label">Etagen</div>
|
||||||
<div class="pc-sub">2 Nettokaltmieten</div>
|
</div>
|
||||||
|
<div class="fact">
|
||||||
|
<div class="fact-val">1.300</div>
|
||||||
|
<div class="fact-label">€ Kaltmiete</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="price-note">
|
|
||||||
<div class="pn-item"><strong>Verfügbarkeit</strong>Ab sofort · unbefristete Laufzeit</div>
|
|
||||||
<div class="pn-item"><strong>Nebenkosten</strong>Vorauszahlung 300 €/Monat, jährliche Abrechnung</div>
|
|
||||||
<div class="pn-item"><strong>Energieausweis</strong>Wird bei Mietbeginn übergeben · Erdgasheizung</div>
|
|
||||||
<div class="pn-item"><strong>Haustiere</strong>Auf Anfrage</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="lage-section" id="lage">
|
<section class="intro" id="intro">
|
||||||
<div class="section-eyebrow">Standort</div>
|
<div class="intro-text" data-animate>
|
||||||
<h2>Zentral und ruhig zugleich</h2>
|
<div class="section-eyebrow">Das Objekt</div>
|
||||||
<div class="lage-grid">
|
<h2>Wohnen mit Charakter und viel Raum</h2>
|
||||||
<div class="lage-item">
|
<p>
|
||||||
<div class="lage-icon">🛒</div>
|
Vermietet wird ein vollständiges Einfamilienhaus in ruhiger Lage von Schleusingen. Das
|
||||||
<div><div class="lage-title">Einkaufen & Versorgung</div><div class="lage-desc">Supermärkte, Ärzte, Apotheken und Schulen sind fußläufig erreichbar</div></div>
|
Haus verbindet historischen Charme mit modernem Wohnkomfort auf drei großzügigen Etagen.
|
||||||
</div>
|
</p>
|
||||||
<div class="lage-item">
|
<p>
|
||||||
<div class="lage-icon">🚌</div>
|
Garage für zwei Fahrzeuge, großzügige Dachterrasse mit 35,8 m², vollausgestattete Küche,
|
||||||
<div><div class="lage-title">Öffentlicher Nahverkehr</div><div class="lage-desc">Zentrale Bushaltestelle ca. 200 m entfernt — direkte Verbindungen in die Region</div></div>
|
Vollbad sowie Abstell- und Nutzräume machen das Haus zu einem außergewöhnlichen
|
||||||
</div>
|
Mietobjekt.
|
||||||
<div class="lage-item">
|
</p>
|
||||||
<div class="lage-icon">🏛</div>
|
<div class="intro-stats">
|
||||||
<div><div class="lage-title">Innenstadt Schleusingen</div><div class="lage-desc">Wochenmarkt und Stadtmitte nur ca. 500 m entfernt</div></div>
|
<div>
|
||||||
</div>
|
<div class="istat-val">113 m²</div>
|
||||||
<div class="lage-item">
|
<div class="istat-label">Nutzfläche</div>
|
||||||
<div class="lage-icon">📍</div>
|
|
||||||
<div><div class="lage-title">Genaue Adresse</div><div class="lage-desc">Schleusinger Bahnhofstraße 10<br>98533 Schleusingen, Thüringen</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="contact-section" id="kontakt">
|
|
||||||
<div class="contact-inner">
|
|
||||||
<div class="section-eyebrow">Kontakt</div>
|
|
||||||
<h2>Interesse?<br><em>Schreiben Sie uns.</em></h2>
|
|
||||||
<p>Wir freuen uns über Ihre Anfrage und melden uns innerhalb von 24 Stunden. Besichtigungstermine sind jederzeit möglich.</p>
|
|
||||||
<div class="contact-form">
|
|
||||||
<form id="contactForm">
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="fname">Vorname</label>
|
|
||||||
<input type="text" id="fname" name="fname" placeholder="Max" required>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-field">
|
<div>
|
||||||
<label for="lname">Nachname</label>
|
<div class="istat-val">35,8 m²</div>
|
||||||
<input type="text" id="lname" name="lname" placeholder="Mustermann" required>
|
<div class="istat-label">Dachterrasse</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="istat-val">2 Stpl.</div>
|
||||||
|
<div class="istat-label">Garage</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="email">E-Mail</label>
|
|
||||||
<input type="email" id="email" name="email" placeholder="max@beispiel.de" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="phone">Telefon</label>
|
|
||||||
<input type="tel" id="phone" name="phone" placeholder="+49 ...">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-field full">
|
|
||||||
<label for="interest">Anliegen</label>
|
|
||||||
<select id="interest" name="interest">
|
|
||||||
<option>Besichtigung anfragen</option>
|
|
||||||
<option>Allgemeine Informationen</option>
|
|
||||||
<option>Mietbewerbung einreichen</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-field full">
|
|
||||||
<label for="message">Nachricht</label>
|
|
||||||
<textarea id="message" name="message" rows="4" placeholder="Ihre Nachricht ..."></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn-submit">Anfrage absenden</button>
|
|
||||||
</form>
|
|
||||||
<div class="form-success" id="formSuccess">
|
|
||||||
<p>Vielen Dank für Ihre Anfrage!</p>
|
|
||||||
<br>
|
|
||||||
<small>Wir melden uns schnellstmöglich bei Ihnen.</small>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="intro-img" data-animate>
|
||||||
|
<img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" />
|
||||||
|
<div class="intro-img-badge">Wohnzimmer · 24,7 m²</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="galerie" class="gallery-section">
|
||||||
|
<div class="gallery-header">
|
||||||
|
<div>
|
||||||
|
<div class="section-eyebrow">Fotogalerie</div>
|
||||||
|
<h2>Einblicke ins Haus</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="masonry-grid">
|
||||||
|
<div class="grid-sizer"></div>
|
||||||
|
|
||||||
|
<div class="grid-item" data-img="bilder/Außenansicht-2.png">
|
||||||
|
<img src="bilder/Außenansicht-2.png" alt="Außenansicht" />
|
||||||
|
<span class="grid-item-label">Außenansicht</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/wohnzimmer2.png">
|
||||||
|
<img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" />
|
||||||
|
<span class="grid-item-label">Wohnzimmer · 24,7 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/Küche 1.jpg">
|
||||||
|
<img src="bilder/Küche 1.jpg" alt="Küche" />
|
||||||
|
<span class="grid-item-label">Küche · 18,4 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/schlafzimmer.png">
|
||||||
|
<img src="bilder/schlafzimmer.png" alt="Schlafzimmer" />
|
||||||
|
<span class="grid-item-label">Schlafzimmer · 18 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/Bad.jpg">
|
||||||
|
<img src="bilder/Bad.jpg" alt="Badezimmer" />
|
||||||
|
<span class="grid-item-label">Badezimmer · 9,8 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/Kinderzimmer.png">
|
||||||
|
<img src="bilder/Kinderzimmer.png" alt="Kinderzimmer 1" />
|
||||||
|
<span class="grid-item-label">Kinderzimmer 1 · 21,7 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/Kinderzimmer 2.jpg">
|
||||||
|
<img src="bilder/Kinderzimmer 2.jpg" alt="Kinderzimmer 2" />
|
||||||
|
<span class="grid-item-label">Kinderzimmer 2 · 15,7 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/kinderzimmer 2 2.jpeg">
|
||||||
|
<img src="bilder/kinderzimmer 2 2.jpeg" alt="Kinderzimmer Detail" />
|
||||||
|
<span class="grid-item-label">Kinderzimmer Detail</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/Kinderzimmer 3.jpg">
|
||||||
|
<img src="bilder/Kinderzimmer 3.jpg" alt="Kinderzimmer 3" />
|
||||||
|
<span class="grid-item-label">Gästezimmer · 11,5 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42.jpeg">
|
||||||
|
<img src="bilder/WhatsApp Image 2026-03-30 at 07.50.42.jpeg" alt="Wohnbereich Detail 1" />
|
||||||
|
<span class="grid-item-label">Wohnbereich</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (1).jpeg">
|
||||||
|
<img
|
||||||
|
src="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (1).jpeg"
|
||||||
|
alt="Wohnbereich Detail 2"
|
||||||
|
/>
|
||||||
|
<span class="grid-item-label">Wohnbereich Detail</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item" data-img="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg">
|
||||||
|
<img
|
||||||
|
src="bilder/WhatsApp Image 2026-03-30 at 07.50.42 (2).jpeg"
|
||||||
|
alt="Wohnbereich Detail 3"
|
||||||
|
/>
|
||||||
|
<span class="grid-item-label">Hausansicht</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="floors-section" id="grundriss">
|
||||||
|
<div class="section-eyebrow">Raumaufteilung</div>
|
||||||
|
<h2>Großzügig auf allen Etagen</h2>
|
||||||
|
<div class="floor-accordion">
|
||||||
|
<div class="floor-item">
|
||||||
|
<div class="floor-header">
|
||||||
|
<span class="floor-title">Erdgeschoss</span>
|
||||||
|
<div class="floor-size">
|
||||||
|
<span>99,4 m²</span>
|
||||||
|
<div class="floor-icon">+</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floor-body">
|
||||||
|
<div class="floor-rooms-grid">
|
||||||
|
<div class="room-chip">
|
||||||
|
Flur
|
||||||
|
<span class="room-chip-area">20,1 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
WC
|
||||||
|
<span class="room-chip-area">0,8 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Garage / Partykeller
|
||||||
|
<span class="room-chip-area">42,6 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Abstellraum 1
|
||||||
|
<span class="room-chip-area">9,9 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Abstellraum 2
|
||||||
|
<span class="room-chip-area">7,8 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Heizungskeller
|
||||||
|
<span class="room-chip-area">18,3 m²</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floor-item">
|
||||||
|
<div class="floor-header">
|
||||||
|
<span class="floor-title">1. Obergeschoss</span>
|
||||||
|
<div class="floor-size">
|
||||||
|
<span>100,3 m²</span>
|
||||||
|
<div class="floor-icon">+</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floor-body">
|
||||||
|
<div class="floor-rooms-grid">
|
||||||
|
<div class="room-chip">
|
||||||
|
Flur
|
||||||
|
<span class="room-chip-area">20,1 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Wohnzimmer
|
||||||
|
<span class="room-chip-area">24,7 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Gästezimmer
|
||||||
|
<span class="room-chip-area">11,5 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Badezimmer
|
||||||
|
<span class="room-chip-area">9,8 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Küche
|
||||||
|
<span class="room-chip-area">18,4 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Schlafzimmer
|
||||||
|
<span class="room-chip-area">18,0 m²</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floor-item">
|
||||||
|
<div class="floor-header">
|
||||||
|
<span class="floor-title">2. Obergeschoss</span>
|
||||||
|
<div class="floor-size">
|
||||||
|
<span>68 m²</span>
|
||||||
|
<div class="floor-icon">+</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floor-body">
|
||||||
|
<div class="floor-rooms-grid">
|
||||||
|
<div class="room-chip">
|
||||||
|
Flur
|
||||||
|
<span class="room-chip-area">13,9 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Kinderzimmer 1
|
||||||
|
<span class="room-chip-area">21,7 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Kinderzimmer 2
|
||||||
|
<span class="room-chip-area">15,7 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Spielzimmer
|
||||||
|
<span class="room-chip-area">6,3 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Ankleidezimmer
|
||||||
|
<span class="room-chip-area">1,4 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="room-chip">
|
||||||
|
Dachterrasse
|
||||||
|
<span class="room-chip-area">35,8 m²</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floor-item">
|
||||||
|
<div class="floor-header">
|
||||||
|
<span class="floor-title">Dachboden</span>
|
||||||
|
<div class="floor-size">
|
||||||
|
<span>52 m² Nutzfläche</span>
|
||||||
|
<div class="floor-icon">+</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floor-body">
|
||||||
|
<div class="floor-rooms-grid">
|
||||||
|
<div class="room-chip">
|
||||||
|
Dachboden (ungeheizt)
|
||||||
|
<span class="room-chip-area">52 m²</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="pricing-section" id="miete">
|
||||||
|
<div class="pricing-inner">
|
||||||
|
<div class="section-eyebrow">Mietkonditionen</div>
|
||||||
|
<h2>Transparente Preisgestaltung</h2>
|
||||||
|
<div class="price-cards">
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="pc-label">Kaltmiete</div>
|
||||||
|
<div class="pc-val">1.300 €</div>
|
||||||
|
<div class="pc-sub">pro Monat</div>
|
||||||
|
</div>
|
||||||
|
<div class="price-card highlight">
|
||||||
|
<div class="pc-label">Gesamtmiete warm</div>
|
||||||
|
<div class="pc-val">1.600 €</div>
|
||||||
|
<div class="pc-sub">inkl. 300 € Nebenkosten</div>
|
||||||
|
</div>
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="pc-label">Kaution</div>
|
||||||
|
<div class="pc-val">2.600 €</div>
|
||||||
|
<div class="pc-sub">2 Nettokaltmieten</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="price-note">
|
||||||
|
<div class="pn-item">
|
||||||
|
<strong>Verfügbarkeit</strong>
|
||||||
|
Ab sofort · unbefristete Laufzeit
|
||||||
|
</div>
|
||||||
|
<div class="pn-item">
|
||||||
|
<strong>Nebenkosten</strong>
|
||||||
|
Vorauszahlung 300 €/Monat, jährliche Abrechnung
|
||||||
|
</div>
|
||||||
|
<div class="pn-item">
|
||||||
|
<strong>Energieausweis</strong>
|
||||||
|
Wird bei Mietbeginn übergeben · Erdgasheizung
|
||||||
|
</div>
|
||||||
|
<div class="pn-item">
|
||||||
|
<strong>Haustiere</strong>
|
||||||
|
Auf Anfrage
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="lage-section" id="lage">
|
||||||
|
<div class="section-eyebrow">Standort</div>
|
||||||
|
<h2>Zentral und ruhig zugleich</h2>
|
||||||
|
<div class="lage-grid">
|
||||||
|
<div class="lage-item">
|
||||||
|
<div class="lage-icon">🛒</div>
|
||||||
|
<div>
|
||||||
|
<div class="lage-title">Einkaufen & Versorgung</div>
|
||||||
|
<div class="lage-desc">
|
||||||
|
Supermärkte, Ärzte, Apotheken und Schulen sind fußläufig erreichbar
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lage-item">
|
||||||
|
<div class="lage-icon">🚌</div>
|
||||||
|
<div>
|
||||||
|
<div class="lage-title">Öffentlicher Nahverkehr</div>
|
||||||
|
<div class="lage-desc">
|
||||||
|
Zentrale Bushaltestelle ca. 200 m entfernt — direkte Verbindungen in die Region
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lage-item">
|
||||||
|
<div class="lage-icon">🏛</div>
|
||||||
|
<div>
|
||||||
|
<div class="lage-title">Innenstadt Schleusingen</div>
|
||||||
|
<div class="lage-desc">Wochenmarkt und Stadtmitte nur ca. 500 m entfernt</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lage-item">
|
||||||
|
<div class="lage-icon">📍</div>
|
||||||
|
<div>
|
||||||
|
<div class="lage-title">Genaue Adresse</div>
|
||||||
|
<div class="lage-desc">
|
||||||
|
Schleusinger Bahnhofstraße 10
|
||||||
|
<br />
|
||||||
|
98533 Schleusingen, Thüringen
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="contact-section" id="kontakt">
|
||||||
|
<div class="contact-inner">
|
||||||
|
<div class="section-eyebrow">Kontakt</div>
|
||||||
|
<h2>
|
||||||
|
Interesse?
|
||||||
|
<br />
|
||||||
|
<em>Schreiben Sie uns.</em>
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Wir freuen uns über Ihre Anfrage und melden uns innerhalb von 24 Stunden.
|
||||||
|
Besichtigungstermine sind jederzeit möglich.
|
||||||
|
</p>
|
||||||
|
<div class="contact-form">
|
||||||
|
<form id="contactForm">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="fname">Vorname</label>
|
||||||
|
<input type="text" id="fname" name="fname" placeholder="Max" required />
|
||||||
|
</div>
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="lname">Nachname</label>
|
||||||
|
<input type="text" id="lname" name="lname" placeholder="Mustermann" required />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="email">E-Mail</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="max@beispiel.de"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="phone">Telefon</label>
|
||||||
|
<input type="tel" id="phone" name="phone" placeholder="+49 ..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-field full">
|
||||||
|
<label for="interest">Anliegen</label>
|
||||||
|
<select id="interest" name="interest">
|
||||||
|
<option>Besichtigung anfragen</option>
|
||||||
|
<option>Allgemeine Informationen</option>
|
||||||
|
<option>Mietbewerbung einreichen</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-field full">
|
||||||
|
<label for="message">Nachricht</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
name="message"
|
||||||
|
rows="4"
|
||||||
|
placeholder="Ihre Nachricht ..."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn-submit">Anfrage absenden</button>
|
||||||
|
</form>
|
||||||
|
<div class="form-success" id="formSuccess">
|
||||||
|
<p>Vielen Dank für Ihre Anfrage!</p>
|
||||||
|
<br />
|
||||||
|
<small>Wir melden uns schnellstmöglich bei Ihnen.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="footer-logo">Bahnhofstraße 10 · Schleusingen</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="#">Impressum</a>
|
||||||
|
<a href="#">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div class="lightbox" id="lightbox">
|
||||||
|
<button class="lightbox-close" id="lightboxClose">×</button>
|
||||||
|
<img src="" id="lightboxImg" alt="Vollbild" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer>
|
<script src="js/haus-schleusingen.js"></script>
|
||||||
<div class="footer-logo">Bahnhofstraße 10 · Schleusingen</div>
|
</body>
|
||||||
<div class="footer-links">
|
</html>
|
||||||
<a href="#">Impressum</a>
|
|
||||||
<a href="#">Datenschutz</a>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<div class="lightbox" id="lightbox">
|
|
||||||
<button class="lightbox-close" id="lightboxClose">×</button>
|
|
||||||
<img src="" id="lightboxImg" alt="Vollbild">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="js/haus-schleusingen.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,70 +1,76 @@
|
|||||||
$(function() {
|
$(function () {
|
||||||
// Navbar scroll
|
// Navbar scroll
|
||||||
$(window).on('scroll', function() {
|
$(window).on("scroll", function () {
|
||||||
if ($(this).scrollTop() > 60) $('#navbar').addClass('scrolled');
|
if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled");
|
||||||
else $('#navbar').removeClass('scrolled');
|
else $("#navbar").removeClass("scrolled");
|
||||||
});
|
});
|
||||||
|
|
||||||
// Hero animation on load
|
// Hero animation on load
|
||||||
setTimeout(function() {
|
setTimeout(function () {
|
||||||
$('#heroContent').addClass('visible');
|
$("#heroContent").addClass("visible");
|
||||||
$('#heroBg').addClass('loaded');
|
$("#heroBg").addClass("loaded");
|
||||||
}, 200);
|
}, 200);
|
||||||
|
|
||||||
// Scroll animations
|
// Scroll animations
|
||||||
function checkVisible() {
|
function checkVisible() {
|
||||||
$('.fact, [data-animate]').each(function() {
|
$(".fact, [data-animate]").each(function () {
|
||||||
var el = $(this);
|
var el = $(this);
|
||||||
var top = el.offset().top;
|
var top = el.offset().top;
|
||||||
var windowBottom = $(window).scrollTop() + $(window).height();
|
var windowBottom = $(window).scrollTop() + $(window).height();
|
||||||
if (windowBottom > top + 60) {
|
if (windowBottom > top + 60) {
|
||||||
el.addClass('visible');
|
el.addClass("visible");
|
||||||
el.css({opacity: 1, transform: 'translateY(0)'});
|
el.css({ opacity: 1, transform: "translateY(0)" });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
$('[data-animate]').css({opacity: 0, transform: 'translateY(30px)', transition: 'opacity 0.8s ease, transform 0.8s ease'});
|
$("[data-animate]").css({
|
||||||
$(window).on('scroll', checkVisible);
|
opacity: 0,
|
||||||
|
transform: "translateY(30px)",
|
||||||
|
transition: "opacity 0.8s ease, transform 0.8s ease",
|
||||||
|
});
|
||||||
|
$(window).on("scroll", checkVisible);
|
||||||
checkVisible();
|
checkVisible();
|
||||||
|
|
||||||
// Floor accordion
|
// Floor accordion
|
||||||
$('.floor-header').on('click', function() {
|
$(".floor-header").on("click", function () {
|
||||||
var item = $(this).closest('.floor-item');
|
var item = $(this).closest(".floor-item");
|
||||||
var isOpen = item.hasClass('open');
|
var isOpen = item.hasClass("open");
|
||||||
$('.floor-item').removeClass('open');
|
$(".floor-item").removeClass("open");
|
||||||
$('.floor-body').slideUp(300);
|
$(".floor-body").slideUp(300);
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
item.addClass('open');
|
item.addClass("open");
|
||||||
item.find('.floor-body').slideDown(300);
|
item.find(".floor-body").slideDown(300);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Lightbox – gallery grid items
|
// Lightbox – gallery grid items
|
||||||
$(document).on('click', '.grid-item', function() {
|
$(document).on("click", ".grid-item", function () {
|
||||||
var src = $(this).data('img') || $(this).find('img').attr('src');
|
var src = $(this).data("img") || $(this).find("img").attr("src");
|
||||||
$('#lightboxImg').attr('src', src);
|
$("#lightboxImg").attr("src", src);
|
||||||
$('#lightbox').addClass('open');
|
$("#lightbox").addClass("open");
|
||||||
$('body').css('overflow', 'hidden');
|
$("body").css("overflow", "hidden");
|
||||||
});
|
});
|
||||||
$('#lightboxClose, #lightbox').on('click', function(e) {
|
$("#lightboxClose, #lightbox").on("click", function (e) {
|
||||||
if (e.target === this) {
|
if (e.target === this) {
|
||||||
$('#lightbox').removeClass('open');
|
$("#lightbox").removeClass("open");
|
||||||
$('body').css('overflow', '');
|
$("body").css("overflow", "");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$(document).on('keydown', function(e) {
|
$(document).on("keydown", function (e) {
|
||||||
if (e.key === 'Escape') { $('#lightbox').removeClass('open'); $('body').css('overflow', ''); }
|
if (e.key === "Escape") {
|
||||||
|
$("#lightbox").removeClass("open");
|
||||||
|
$("body").css("overflow", "");
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Form submit
|
// Form submit
|
||||||
$('#contactForm').on('submit', function(e) {
|
$("#contactForm").on("submit", function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var btn = $(this).find('.btn-submit');
|
var btn = $(this).find(".btn-submit");
|
||||||
btn.text('Wird gesendet...').prop('disabled', true);
|
btn.text("Wird gesendet...").prop("disabled", true);
|
||||||
setTimeout(function() {
|
setTimeout(function () {
|
||||||
$('#contactForm').hide();
|
$("#contactForm").hide();
|
||||||
$('#formSuccess').fadeIn(400);
|
$("#formSuccess").fadeIn(400);
|
||||||
}, 1200);
|
}, 1200);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
54
package.json
Normal file
54
package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user