Build a Website for Your Business · Part 2

Add About, Services, and Contact Pages

Published 2026-06-14

What you'll build

In this part you'll create the three remaining pages of your website and wire them together with consistent navigation and a floating WhatsApp button.

By the end of this part you'll have:

about.html — your story, your team, why customers choose you
services.html — your full services list with pricing
contact.html — a contact form, your address, and a map embed
A floating WhatsApp button that appears on all pages

Create a shared stylesheet

Right now all the CSS is inside index.html. Before we add more pages, extract the shared styles into a separate file so all pages look consistent.

BlocWeave prompt

Extract the shared CSS from index.html into a new file called styles.css. The shared styles are: CSS custom properties (:root), reset (*), body, a, the navigation bar (.site-nav and all its children), the footer (.site-footer), the floating WhatsApp button, and any utility classes. Leave only page-specific styles (hero, services strip, testimonials, CTA banner) inside the index.html <style> tag. Update index.html to add <link rel="stylesheet" href="styles.css"> in the <head>.

Add the floating WhatsApp button

BlocWeave prompt

Add a floating WhatsApp button to styles.css. It should be a fixed circle button in the bottom-right corner (right: 1.5rem, bottom: 1.5rem, z-index: 999). Green background (#25D366, WhatsApp's official color). White WhatsApp icon SVG inside. On hover, scale to 1.1. The HTML for this button is: <a href="https://wa.me/233240000001" target="_blank" rel="noopener" class="whatsapp-float" aria-label="Chat on WhatsApp"><svg ...WhatsApp icon SVG...</svg></a> Add the button HTML just before in index.html. I'll add it manually to other pages.

Build the About page

BlocWeave prompt

Create about.html for Ama's Catering. Link <link rel="stylesheet" href="styles.css"> in the head. Include the same navigation bar as index.html. Include the floating WhatsApp button before . Sections: 1. Page header — green background, white text. Heading: "About Ama's Catering". Subheading: "A family tradition of great food, brought to your event." 2. Our story — two column layout: large text on left, greyed out image placeholder on right. Story: "Ama Asante started cooking for her community in Kumasi in 2012. What began as preparing Sunday meals for neighbours grew into a full catering operation. In 2018, Ama moved to Accra and founded Ama's Catering to serve the city's growing need for reliable, quality event catering. Today, the team of 12 serves over 200 events per year — from 10-person birthday parties to 500-guest weddings." 3. Our values — three icon cards in a row: "Fresh daily — We source from Makola market every morning. No frozen ingredients.", "Punctual — Your event starts on time. We deliver and set up 1 hour early, always.", "Personal — Every menu is custom. We taste-test with you before the big day." 4. The team — heading: "The people behind the food". Three team cards, each with a greyed out photo placeholder, name, and role: "Ama Asante — Founder & Head Chef", "Kwame Boateng — Operations Manager", "Adjoa Mensah — Events Coordinator". 5. Same footer as index.html.

Build the Services page

BlocWeave prompt

Create services.html for Ama's Catering. Link styles.css, include the navigation and WhatsApp float button. Sections: 1. Page header — same style as about.html. "Our Services & Pricing". "Every package includes delivery, set-up, and a dedicated event coordinator." 2. Service packages — three cards arranged in a grid. Each card has: package name in large text, price range, a bullet list of what's included, and a gold "Get a Quote" button linking to contact.html. - Office Lunch — "From GHS 25 per head". Includes: Set lunch or dinner menu (3 dishes + drink), Delivery and collection of serving equipment, Minimum 10 people, available Monday–Friday. - Events Package — "From GHS 80 per head". Includes: Custom 5-course menu, Waitstaff service (1 per 20 guests), Full set-up and breakdown, Minimum 30 people. - Wedding Package — "Custom pricing". Includes: Tasting session with the couple, Unlimited menu customisation, Canapés, starter, mains, dessert, cake cutting, Day-of coordinator on site. 3. What's included — four-column icon strip: Delivery, Equipment, Setup, Coordinator — short label under each icon. 4. FAQ — three questions using a simple show/hide toggle (JavaScript accordion): - "How far in advance should I book?" — "We recommend at least 2 weeks for events under 50 people, and 4 weeks for larger events. Contact us to check availability." - "Do you cater outside Accra?" — "Yes, we cover Greater Accra, Ashanti, and Eastern regions. A transport surcharge applies outside Accra." - "Can you accommodate dietary requirements?" — "Yes. We cater for vegetarian, vegan, gluten-free, and halal requirements with advance notice."

Build the Contact page

BlocWeave prompt

Create contact.html for Ama's Catering. Link styles.css, include the navigation and WhatsApp float button. Sections: 1. Page header — "Get in Touch". "We'd love to help with your next event. Fill in the form and we'll get back to you within 24 hours." 2. Two-column layout: contact form on the left (wider), contact details on the right. Form fields (we'll add the form action in Part 3): - Name (required) - Email (required, type email) - Phone (type tel) - Event type (select: Corporate Catering, Wedding, Birthday Party, Other) - Event date (type date) - Number of guests (type number) - Message / additional details (textarea) - Submit button: "Send Message" in gold Contact details panel: phone number with a phone icon, email with email icon, WhatsApp button (opens wa.me/233240000001), operating hours "Mon–Sat: 7am – 7pm", address "14 Ring Road East, Accra, Ghana". 3. Map embed — embed a Google Maps iframe for the address (use a placeholder iframe for now with text "Map loading..."). We'll add a real embed URL in Part 3. Style the form cleanly: inputs with border-bottom only (not box borders), green focus outline, generous spacing between fields. The submit button should be full-width on mobile.

Link all pages together

BlocWeave prompt

Check that the navigation links in all four HTML files (index.html, about.html, services.html, contact.html) correctly point to each other: - "Home" → index.html - "About" → about.html - "Services" → services.html - "Contact" → contact.html - "Get a Quote" button → contact.html Make sure the active page's nav link is styled differently (bold or underlined) on each page. Update each file.

Test all pages

Open each page in your browser and check:

The navigation links work between all pages
The WhatsApp button appears on all pages and opens wa.me on click
The services page accordion FAQ opens and closes correctly
The contact form has all fields and the submit button is visible
Everything looks correct on a phone screen (shrink your browser window to test)

Project structure after Part 2

your-business-site/
  index.html
  about.html
  services.html
  contact.html
  styles.css
  BLOCWEAVE_PLAN.md

Adding your own photos: Create an images/ folder and drop your photos in. Then ask BlocWeave: "Replace the grey image placeholder in the about.html Our Story section with the image images/kitchen.jpg". BlocWeave will update the HTML tag with the correct path and add appropriate alt text.

What's next

In Part 3 we make the contact form actually send emails (using Formspree — free, no server needed), embed a real Google Maps location, and deploy the entire website to Cloudflare Pages so it's live on the internet with a free domain.

← Previous Next →