Über diese Vorlage
Für eine Reise- oder Tourismusmarke löst Mostar Guide das Thema Landingpage mit einem einzigen erfassten Briefing. Die Überschrift der Seite lautet „A cinematic three-screen scroll story for Mostar city“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf #111411 darunter, aufhellung #FDF1E1 für die Schrift und blau #7FB4D4 für die Akzente begrenzt, gesetzt in Inter. Geliefert wird vanilla JS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung kommt über Übergänge von 640ms, cubic-bezier(0.22, 1, 0.36, 1) und eine Videospur in Schleife nicht hinaus. Nutze es als Referenz, wenn du eine Landingpage für dieses Publikum baust, also für eine Reise- oder Tourismusmarke, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Product Manager, die den Aufwand schätzen müssen, lesen ein Breakpoint bei 560px als Umfang der Arbeit.
- Wer mit einem KI-Builder arbeitet und ein Briefing will, das ein 798x584 Rahmen schon enthält, statt sie dem Modell zu überlassen.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Reisen 7,4s Video in Schleife tragen kann.
Was enthalten ist
- Obere Zeile, eine Aktion. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #7FB4D4, alles auf der kleinsten Schriftstufe des Briefings. Die Labels passen bei 560px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Ein Medien-Element trägt die Stimmung. Die Medien leisten Atmosphäre statt Erzählung: eine Schleife von 7,4s in 798x584 hinter allem anderen. Die Schleife ist kurz genug (7,4s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Obere Zeile: Wortmarke, Links, eine Aktion. Unter 560px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Abstände als Werte genannt. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Schrift von 12px bis 24px, 19vh hohe Sektionen, ein 2-Spalten-Raster und Radius 24px. Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern. Übernimm die Werte zusammen mit dem Layout.
Bewegung & Interaktion
Schnell genug, um bewusst zu wirken
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 640ms auf cubic-bezier(0.22, 1, 0.36, 1). Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Fokus-Zustände laufen mit demselben Wert wie Hover, Tastatur- und Zeiger-Rückmeldung passen dadurch zusammen.
Zeiger nur, wo sie helfen
Zustände werden pro Komponente behandelt (ein Sticky-Element, das seine Position hält, während der Inhalt darunter durchläuft und ein Slider, der Inhalte auf Anfrage weiterblättert) und nicht von einer globalen Animationsschicht. Hover und Fokus sind gemeinsam festgelegt, Zeiger und Tastatur bekommen dadurch dieselbe Information. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
So wird der Eintrag Landingpage deiner
Fang beim Versprechen an, nicht bei der Dekoration. Schreibe „A cinematic three-screen scroll story for Mostar city“ zu einem Satz um, der sagt, was du machst, und setze ihn in Inter in der Display-Größe aus dem Briefing. Ersetze blau #7FB4D4 durch deinen eigenen Akzent und prüfe ihn gegen #111411, bevor du etwas anderes anfasst. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Wie der Eintrag Landingpage umbricht
Test den Eintrag Landingpage bei 798x584 und dann in Telefonbreite: Dieselbe Reihenfolge hält; die Schrift ist zwischen 12px und 24px begrenzt, das Layout wechselt bei 560px und der Bereich wird auf 19vh gehalten. Die Skala folgt dem Viewport; die Abfolge bleibt.
Die Reihenfolge im Eintrag Landingpage
Lies den ersten Screen in einem Zug, und das Angebot ist bereits klar. die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und die Feature-Liste kommen der Reihe nach, und Schrift von 12px bis 24px und 19vh hohe Sektionen halten den Abstand statt dekorativer Trennlinien. Ein Leser im Bereich Reisen bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie ist dieser Eintrag zu Mostar Guide aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 27.876 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was steht eigentlich im Briefing hinter Mostar Guide?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 798x584, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Mostar Guide hängt von vanilla JS ab?
Mostar Guide wurde in vanilla JS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
