04 / Web design

Farm to Table CSA

A four-page website concept connecting a community-supported agriculture service with its visitors.

Concept projectHTML · CSS · Multi-page layout

My contribution

Web design, HTML/CSS implementation & asset preparation

Tools & workflow

Visual Studio Code · Bootstrap · Photoshop · Illustrator

The brief

Build a four-page CSA website that organizes the service’s story, offerings, and contact information within a consistent online experience.

My approach

I built the Home, About, Services, and Contact pages with HTML, CSS, and Bootstrap. I handled the layouts, navigation, calls to action, typography, color system, and responsive styling. Shared visual elements connect the pages while each page serves a distinct information need.

How I developed the work

Decisions & execution

Organize the pages

I separated introductory information, the CSA story, services, and contact content into connected pages with recurring navigation.

Build and style the interface

I used Bootstrap as the structural framework and applied the page layouts, CSS styling, color system, and calls to action in Visual Studio Code.

Prepare the web assets

I optimized and renamed images in Photoshop and prepared the logo as an SVG in Illustrator.

Experience the website

Explore the design. Follow the journey.

A shared navigation and visual system connect four pages, from discovering the CSA to learning about its offerings and making an inquiry.

Farm to Table CSA

Open the working website and explore the pages, navigation, calls to action, and responsive layouts.

Open live demo

01 / HomeIntroduce the CSA 02 / AboutTell the farm’s story 03 / ServicesExplore shares & offerings 04 / ContactMove toward an inquiry

Navigation

Keep orientation familiar.

Recurring navigation and an active-page state help visitors move between the CSA story, services, and contact details.

Visual system

Use color with a role.

Farm green anchors navigation and feature sections. Earthy red emphasizes headings and actions; lighter surfaces give longer content room to breathe.

Implementation

Prepare for different screens.

Bootstrap supplies the structure, with custom CSS for the layout, typography, and mobile adjustments. Optimized photography and an SVG logo support the web presentation.

Portfolio demo of a concept website. Contact information is project content; the form demonstrates validation and feedback without sending a message. HTML, CSS, and Bootstrap implementation: Jessica M.

Visual direction

The color palette

#4E5B4B

#731C12

#BEBFA3

#F7F6EF

Colors from the website stylesheet: farm green, earthy red, muted olive, and a light neutral surface.

A closer look

Open images to see the details

Built with HTML, CSS, and Bootstrap. Photography came from supplied and outside sources, including Pexels; I selected and optimized images for web use.

Explore website concept

The final deliverable

Putting the decisions into practice

The supplied implementation can be explored below. It demonstrates the connected page structure and visual consistency; the contact form is a portfolio demonstration and does not send messages.

Back to selected work