lilac valley: html css farm stay landing page
a fictitious farm stay landing page built with plain html, css, and javascript featuring responsive navigation, smooth scrolling, a css grid gallery, and an embedded google map
A fictitious farm stay landing page for a rustic accommodation in the Blue Mountains, built with plain HTML, CSS, and JavaScript. No framework, just layout, responsiveness, and small interactive details that make a static site feel polished.
key features
- Responsive hamburger nav on mobile and tablet, fixed vertical nav on desktop
- Smooth scrolling for internal anchor links with keyboard focus handling
- Back-to-top button that appears only after scrolling down
- Gallery with progressive enhancement: column layout on mobile, 2-column grid on tablet, 4-column grid with hover zoom on desktop
- Booking form section
- Google Maps embed using
importLibraryandAdvancedMarkerElement - Custom
@font-face(Cormorant Garamond) and CSS design tokens throughout
tech stack
# core
html5 | css3 | vanilla javascript# deployment
netlify | google maps apihighlights
home page, hero section with background image and call to action
gallery section with responsive grid layout
booking section with form inputs
contact section with embedded google map
A landing page looks simple but has a lot of moving parts once you care about responsiveness. Splitting the CSS into three files by breakpoint (mobile, tablet, desktop) kept the styles manageable and made the progressive enhancement logic easy to follow without a build tool.
The small interactions were the most satisfying part. Smooth scrolling with keyboard focus handling, a back-to-top button that only appears when needed, and nav transitions on hover are the kind of details that separate something that looks finished from something that feels finished.