Fernscape Interiors
A Coded 4-Page Website — Bootstrap & Visual Studio Code
Overview
Fernscape Interiors is a fictional Portland-based houseplant and interior-greening studio, built as the client brand for this project. The assignment itself was straightforward — learn the fundamentals of coding and design a simple website — but it ended up being the first project I actually hand-coded rather than wireframed. Over three weeks, working in Bootstrap inside Visual Studio Code, I built out a full four-page site: Home, About, Services, and Contact, each carrying the same brand system through in a slightly different layout.
The Brand System
Fernscape’s whole visual identity leans into its subject matter: interior plant design. The palette pairs a muted sage green with a warm terracotta, and almost every UI element — nav bar, buttons, content cards — is built from soft, rounded, almost organic shapes rather than hard rectangles, echoing the “growth” of the brand without ever needing to say so directly. Headlines are set in an elegant serif for warmth; navigation and body copy stay in a clean sans serif for legibility. A small fern-leaf mark sits next to the wordmark, and that same rounded-pill navigation bar carries across all four pages to keep the site feeling like one continuous system.
Home
The homepage leads with a full-width hero photo of a plant-filled interior, softened under a dark overlay so the white headline type stays legible. The tagline “Botanical interiors for homes, studios, and workspaces” sits above a larger serif headline — “Bring a grounded, lived-in sense of nature to every room.” Two rounded photo cards act as visual entry points into the rest of the site, linking straight to About and Services instead of relying on the nav bar alone.
Design notes
- Dark photo overlay keeps white headline type legible over a busy background image
- Two card CTAs give the homepage its own navigation, beyond the top nav bar
- Rounded pill nav bar and rounded cards establish the shape language used site-wide
- Consistent footer (address, phone, email, social) anchors every page
About
The About page swaps the photo-heavy hero for a green background field with two floating white content cards — one telling Fernscape’s founding story (started in 2021 by two friends in Portland), the other stating the brand’s mission in a single short paragraph. A large vertical photo of a plant-lined interior corridor runs down the right side, with a smaller circular photo insert tucked beside the mission card.
Services
Services needed to hold six distinct offerings without turning into a wall of text, so the page opens with a short photo hero and headline, then drops into a clean 2-row, 3-column card grid: Indoor Plant Design, Plant Installation, Plant Maintenance, Office Greening, Green Living Spaces, and Plant Workshops. Each card carries its own background photo with a dark gradient overlay, a bold title, and a single-line description.
Contact
The most functional of the four pages — a real form (name, email, subject, message) inside a large rounded white card, paired with a short “Get in Touch” message, the studio’s address and hours, and a terracotta submit button matching the site’s primary accent. Keeping the form and contact details side by side, rather than stacked, means visitors can find the phone number or email without scrolling past the form first.
Reflection
This was the first project where the design didn’t stop at a wireframe — it had to actually work as a coded, responsive site in Bootstrap. That constraint changed some decisions I’d normally make freely in a design tool: the rounded-card grid on Services, for instance, had to hold together at different screen widths, not just look right in one fixed frame. Three weeks was enough to get all four pages built, styled, and consistent, which, for a first real coding project, felt like more than the brief actually asked for.