Modern Coffee Shop Landing Page
Budget / Salary$10–30
TypeFreelance project
LocationRemote
Posted2 hours ago
The task is to design and build a single-page, fully responsive website that captures the spirit of my coffee shop while staying clean, modern, and fast. The overall palette should lean on cool blues and greens so the brand feels fresh and inviting. Layout must adapt gracefully from mobile up to large desktop screens without losing visual balance.
Key sections to implement:
• Hero header that instantly introduces the shop and highlights our signature brew.
• Professional-shot photo gallery that blends seamlessly into the flow of the page, with smooth lightbox/slider behaviour.
• Menu presented in a clear grid layout—categories, item names, short descriptions, and prices all visible at a glance.
• Simple, spam-protected contact form (name, email, message) that routes entries to my Gmail inbox.
• Sticky navigation and subtle, on-brand animations for a polished feel.
Technical notes: HTML5, semantic CSS3 (you may use Bootstrap 5 or Tailwind if you prefer), and vanilla JavaScript or a lightweight library for interactivity. Optimise images for web, keep Lighthouse scores high, and ensure cross-browser consistency.
Deliverables:
1. All source files (HTML, CSS, JS, images) organised and commented.
2. A quick README with setup instructions and colour codes used.
3. Live preview link or deploy to Netlify/Vercel so I can test on real devices.
Final hand-off is complete once I can load the page on mobile and desktop, submit a test message through the form, and browse the gallery without layout shifts.
Key sections to implement:
• Hero header that instantly introduces the shop and highlights our signature brew.
• Professional-shot photo gallery that blends seamlessly into the flow of the page, with smooth lightbox/slider behaviour.
• Menu presented in a clear grid layout—categories, item names, short descriptions, and prices all visible at a glance.
• Simple, spam-protected contact form (name, email, message) that routes entries to my Gmail inbox.
• Sticky navigation and subtle, on-brand animations for a polished feel.
Technical notes: HTML5, semantic CSS3 (you may use Bootstrap 5 or Tailwind if you prefer), and vanilla JavaScript or a lightweight library for interactivity. Optimise images for web, keep Lighthouse scores high, and ensure cross-browser consistency.
Deliverables:
1. All source files (HTML, CSS, JS, images) organised and commented.
2. A quick README with setup instructions and colour codes used.
3. Live preview link or deploy to Netlify/Vercel so I can test on real devices.
Final hand-off is complete once I can load the page on mobile and desktop, submit a test message through the form, and browse the gallery without layout shifts.
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.