Websites
Client projectJL Lawn Services
A one-page site for a lawn care business in Hohenwald, Tennessee, built around getting a quote.
A clean, photo-led site for mowing, edging and trimming: the services, recent lawns, the service area, and a call, text or email route to a quote from every screen.
Client project — designed and built by TrueFrame Studio
- Type
- Client project
- Category
- Websites
- Platform
- Responsive website
- Built with
- HTML · CSS · JavaScript · Netlify Forms
- Disciplines
- Website Development, UI/UX Design
Screen 01 — Home
“Clean work. Sharp results.” over a freshly striped lawn.
01Live site
See it live.
On the live site
- 01
Open the email form from the envelope in the header.
- 02
Visit on a phone to see the fixed Call and Text bar.
- 03
Scroll down to the recent lawn work and the service area.
Key features
- 01
Call, text or email
Call and text links throughout the page, and a fixed Call / Text bar on phones.
- 02
Contact form in a modal
Email opens a message form over the page. It sends without leaving the site and confirms when it has gone.
- 03
Recent work
A grid of lawns the business has mowed, each with a short caption.
02Screens
Inside the product.
Responsive
Recomposed for every screen.
Navigation, hierarchy and controls are rebuilt for tablet and phone, not scaled down from the desktop layout.
Tablet768 px
Phone390 px
03Under the hood
How it was made.
- DM Serif DisplayHeadings · 400
- ManropeText · 400–700
- Paper#F7F6F1
- Soft green#A8CC87
- Green#2F7D3C
- Ink#0B120D
JL Lawn Services offers mowing, edging and trimming in Hohenwald, Tennessee. The site opens on a photograph of a freshly striped lawn and the line “Clean work. Sharp results.” From there it moves through the three services, a statement on what a finished lawn looks like, recent work and the service area.
01Brief and goalsWhat the site is built to do
Getting a quote is never more than a tap away: a call button in the header, text links through the page, an email form that opens over the page, and a call and text bar fixed to the bottom of the screen on phones.
Goals
- 01
Show the three services clearly, each with a photograph.
- 02
Use recent lawns as the proof of the work.
- 03
Make calling, texting or emailing for a quote possible from any point on the page.
02Design decisionsTypography · Colour · Layout · Interaction
- Typography
A serif with a second beat
DM Serif Display sets the headlines large and tightly spaced, and most end on an italic line in a soft green, as in “Sharp results.” and “Nothing it doesn’t.” Manrope handles the text, labels and buttons.
WhyThe serif gives a local service a considered, personal voice, and the italic green line lands the point of each heading.
- Colour
Greens from the lawn
A warm off-white page, a green-black ink and two greens: a deep one for buttons and a soft one for the italic lines. A dark band carries the statement and a dark panel the service area.
WhyMuted greens sit naturally beside the lawn photographs and let the striped grass be the brightest thing on the page.
- Layout
Photographs as proof
A full-bleed hero photograph with a shaded edge for the headline, a photograph on every service card and a grid of recent lawns with numbered captions.
WhyFor lawn care, the finished lawn is the argument. Real photographs of the work do more than any claim could.
- Interaction
Every route to a quote
Call sits in the header, text links run through the page, and on phones a bar with Call and Text stays fixed to the bottom. Email opens a modal form that traps focus, closes with Escape and submits in place.
WhyA quote is the reason to visit, so the next step is always one tap away, whichever way someone prefers to get in touch.
03Build and technologiesHTML · CSS · JavaScript · Netlify Forms
HTML
One page: hero, services, a statement band, recent work and the service area, plus the contact modal.
CSS
Custom styles: a full-bleed shaded hero, card and photo grids, and a phone layout with a fixed call bar.
JavaScript
A small script for the mobile menu, scroll reveals and the contact modal, which submits the form without a page reload.
Google Fonts
DM Serif Display for headings, Manrope for text.
Netlify Forms
Receives the contact form, with a honeypot field to filter spam.
Netlify
Static hosting. No framework and no build step.
Services delivered
04ProcessDiscover · Plan · Design & Develop · Launch & Support
01Discover
Start from what a lawn care customer needs: the services, proof of the work and a quick way to ask for a quote.
02Plan
One page: hero, services, a short statement, recent work and the service area, with call, text and email always in reach.
03Design & Develop
Design a calm serif-and-green system around the business's own lawn photography, then build the page, the phone call bar and the contact modal.
04Launch & Support
Publish on Netlify, with Netlify Forms handling the contact form.
The site. JL Lawn Services is a client project, designed and built by TrueFrame Studio and live at jl-lawnservices.com (opens in a new tab).