Barbers Landing Page — Modern Frontend Build
Fully responsive and visually polished landing page for a barbershop, highlighting key services, pricing, and integrated booking via embedded widget.
Role: Frontend Developer
Stack: HTML · CSS · JavaScript
Scope: Landing Page · Booking Embed · Responsive Design
2025
Project Overview
Goal
Build a trainer placement quiz that helps new members find the right PT quickly, while showcasing a clean and responsive gym UI.
Approach
Created a fast landing page with clear calls to action, a multi step quiz with simple scoring to match trainers by goals and schedule, a modular plan selector, and a checkout style preview.
Key Highlights
Modern Layout
Hero banner, services, pricing grid, and testimonial section styled with responsive CSS grid and flex layouts.
Frontend-Focused Build
Pure HTML, CSS, and JavaScript with minimal dependencies for fast load and easy maintenance.
Embedded Booking Widget
Integrated a Square booking iframe for live appointment management, styled to match the brand theme.
Responsive Design
Optimised for desktop, tablet, and mobile with fluid typography and scalable components.
Architecture at a Glance
Frontend
HTML · CSS · JS
HTML · CSS · JS
Booking
Square Appointments (iframe embed)
Square Appointments (iframe embed)
Components
Hero · Services Grid · Pricing · CTA
Hero · Services Grid · Pricing · CTA
Responsive
Mobile first · Fluid layout
Mobile first · Fluid layout
Assets
Optimised images · Icon set
Optimised images · Icon set
Hosting
Static + CDN
Static + CDN
→ Landing page → Booking embed → Clear CTAs → Fast load
Notables
- Square booking widget embedded for seamless appointment flow.
- Clean visual hierarchy with bold hero and modular service layout.
- Responsive grid tuned for all common breakpoints from 320px upward.
- Accessible structure with clear headings and tap-friendly spacing.
- Lightweight build prioritising performance and visual polish.
Screens
Outcomes & Learnings
Clean Visual Design
Created a polished, modern interface that reflects a premium barbershop brand with consistent
spacing, typography, and color balance.
Seamless Booking
Integrated the Square booking system directly on the page, allowing users to book appointments
instantly without extra navigation.
Performance
Fast-loading, lightweight build optimised for both mobile and desktop with smooth visual flow.