← Back to all prompts

Create a Static Apartment Listing Website

Development

Current Version (v2)

6/5/2026

Submit a New Version

Version History

v2
· 6/5/2026
View content
Build a static apartment listing website for finding a new tenant. Single page, no framework.

Details:

4-Zimmer-Wohnung, Musterstrasse 25, 1111 Musterstadt
Nettomiete: CHF 1'300.-- / Monat
Nebenkosten (HK/NK): CHF 200.-- / Monat
Einstellhalle-Parkplatz: CHF 125.-- / Monat
Kaution: CHF 3'900.--
Verfuegbar ab 1. September
Ausstattung: 4 Zimmer, 2 Badezimmer, Küche, Balkon, Keller, Waschküche im Haus, Estrich
Zentrale Lage, gute ÖV-Anbindung, Einkaufsmoeglichkeiten in der Nähe
Design:

Light warm cream/parchment background (#f5f2ed), dark text
Monospace font (JetBrains Mono from Google Fonts)
Editorial, minimal layout -- no emojis, no rounded cards, no bright colors
Full-viewport dark hero section with background image overlay (photo3.jpeg, opacity 0.25)
Key facts in a horizontal grid separated by thin vertical lines
Photo gallery in a 3-column grid with 2px gaps, clickable with a fullscreen lightbox (prev/next arrows, keyboard nav, swipe on mobile, Escape to close, counter)
Details section: 3 columns, list items prefixed with "/" character
Embedded Google Maps (slightly desaturated with CSS filter)
Contact section: left-aligned, download link as simple underlined text (no button), contact card separated by top border
Footer: subtle, small text
Pages:

index.html -- main listing page
bewerbungsformular.html -- printable application form (Personalien, Beruf & Einkommen, Haushalt, aktuelle Wohnsituation, Betreibungsauskunft, Unterschrift). Same monospace font, minimal styling, "Print/Save as PDF" button hidden on print.
Mobile:

Use svh units for hero height
Facts grid collapses to 2 columns on tablet, stays 2 on phone
Gallery goes 2-col on tablet, 1-col on phone
Details stack to single column
Touch swipe support in lightbox
Content language: Leave all text as placeholder -- I will write the Swiss German copy myself.

Photos: I will place photo1-9.jpeg in a photos/ folder. Include all 9 in the gallery grid.
v1
· 6/5/2026

Initial version

View content
Build a static apartment listing website for finding a new tenant. Single page, no framework.

Details:

4-Zimmer-Wohnung, Musterstrasse 25, 1111 Musterstadt
Nettomiete: CHF 1'300.-- / Monat
Nebenkosten (HK/NK): CHF 200.-- / Monat
Einstellhalle-Parkplatz: CHF 125.-- / Monat
Kaution: CHF 3'900.--
Verfuegbar ab 1. September
Ausstattung: 4 Zimmer, 2 Badezimmer, Küche, Balkon, Keller, Waschküche im Haus, Estrich
Zentrale Lage, gute ÖV-Anbindung, Einkaufsmoeglichkeiten in der Nähe
Design:

Light warm cream/parchment background (#f5f2ed), dark text
Monospace font (JetBrains Mono from Google Fonts)
Editorial, minimal layout -- no emojis, no rounded cards, no bright colors
Full-viewport dark hero section with background image overlay (photo3.jpeg, opacity 0.25)
Key facts in a horizontal grid separated by thin vertical lines
Photo gallery in a 3-column grid with 2px gaps, clickable with a fullscreen lightbox (prev/next arrows, keyboard nav, swipe on mobile, Escape to close, counter)
Details section: 3 columns, list items prefixed with "/" character
Embedded Google Maps (slightly desaturated with CSS filter)
Contact section: left-aligned, download link as simple underlined text (no button), contact card separated by top border
Footer: subtle, small text
Pages:

index.html -- main listing page
bewerbungsformular.html -- printable application form (Personalien, Beruf & Einkommen, Haushalt, aktuelle Wohnsituation, Betreibungsauskunft, Unterschrift). Same monospace font, minimal styling, "Print/Save as PDF" button hidden on print.
Mobile:

Use svh units for hero height
Facts grid collapses to 2 columns on tablet, stays 2 on phone
Gallery goes 2-col on tablet, 1-col on phone
Details stack to single column
Touch swipe support in lightbox
Content language: Leave all text as placeholder -- I will write the Swiss German copy myself.

Photos: I will place photo1-9.jpeg in a photos/ folder. Include all 9 in the gallery grid.