Section 2: Building the Core Website Pages
Each page in a business website has a specific job. The About page builds trust by telling a human story — who you are, what you believe, and who is behind the work. The Services page communicates value. It tells potential clients what you do, why it matters, and what they can expect. The Contact page removes friction by making reaching you effortless.
Every layout decision we make in this section is driven by those jobs. We are not decorating; we are solving communication problems with structure and code.
Every page here uses the shared <header> and <footer> markup from Section 1. The .page-hero, .page-content, and footer CSS we added to styles.css are already in place. This section adds the inner <main> content and the CSS to style it.
The About Page – about.html
The About page is one of the most-visited pages on any business website, yet one of the most neglected. Visitors land here specifically to answer the question: “Can I trust these people?” A strong About page answers that question with a clear story, real values, and visible people.
We will build four distinct sections: a page hero banner, a mission statement with an image-text grid, a core values block, and a team member row.
The About Page Banner
The page hero uses the .page-hero class we added to styles.css in Section 1. It is a gradient banner carrying the page title and a one-line descriptor. This replaces the full background-image hero used on the homepage — inner pages need a lighter, faster-loading banner that reinforces the page identity without competing with the content below.
Copy the HTML code below and paste it into the <main> section of the about.html file.
<main>
<!-- ── Page Hero ── -->
<section class="page-hero">
<h1>About Kmacims Web Solutions</h1>
<p>We build web experiences that grow businesses. Here's our story.</p>
</section>
</main>
Mission & Story: Image + Text Grid
This is the heart of the About page. A two-column layout — image on the left, story text on the right — delivers professional credibility immediately. The layout uses CSS Grid. The image gives the text visual weight; the text gives the image context. Together they form a stronger impression than either would alone.
Copy the code below into the main section, after the page hero section.
<!-- ── Mission & Story Section ── -->
<section class="about-mission">
<div class="page-content about-mission-inner">
<div class="about-image">
<img
src="images/about-team.jpg"
alt="The Kmacims team collaborating around a desk with open laptops"
width="600"
height="450"
loading="lazy"
/>
</div>
<div class="about-text">
<h2>We Started With a Single Belief</h2>
<p>
Great websites don't need bloated frameworks. They need intentional
design, clean code, and a deep understanding of the business they
represent. That belief has guided every project we've taken on since
Kmacims Web Solutions was founded.
</p>
<p>
We work with small and medium businesses that want a professional
online presence — without the agency price tag or the endless
revisions cycle. Our process is direct, our code is clean, and our
results speak for themselves.
</p>
<a href="contact.html" class="cta-button">Work With Us</a>
</div>
</div>
</section>
Note the addition of width, height, and loading=”lazy” attributes. Width and height prevent layout shift (the page jumping as images load). loading=”lazy” defers loading this image until the user scrolls near it. This is a free performance win since the image is below the fold.
Core Values Cards
After the story, we reinforce it with a concrete values grid. Four cards — each with an emoji icon, a short title, and one descriptive sentence. This pattern is fast to scan, visually balanced, and gives search engines keyword-rich semantic content without stuffing.
Copy and paste the code within the main section, under the mission section.
<!-- ── Core Values Section ── -->
<section class="about-values">
<div class="page-content">
<h2>What We Stand For</h2>
<p class="section-intro">
These aren't just values on a page — they are the decisions
we make on every project, every day.
</p>
<div class="values-grid">
<article class="value-card">
<div class="value-icon" aria-hidden="true">🎯</div>
<h3>Purposeful Design</h3>
<p>Every element on your website earns its place. If it doesn't serve your visitor, it doesn't ship.</p>
</article>
<article class="value-card">
<div class="value-icon" aria-hidden="true">⚡</div>
<h3>Performance First</h3>
<p>Speed is not a feature — it is the foundation. Slow sites lose customers. We build fast from day one.</p>
</article>
<article class="value-card">
<div class="value-icon" aria-hidden="true">🤝</div>
<h3>Client Partnership</h3>
<p>We do not build in a vacuum. Your goals, your audience, and your feedback shape every decision we make.</p>
</article>
<article class="value-card">
<div class="value-icon" aria-hidden="true">🔒</div>
<h3>Built to Last</h3>
<p>Security and maintainability are built in, not bolted on. Your website should still be solid in five years.</p>
</article>
</div>
</div>
</section>
The emoji icons are decorative — the heading and paragraph text already fully describe each value. Adding aria-hidden=”true” to the icon container tells screen readers to skip it entirely, preventing the announcement of emoji character names, which would be redundant and confusing.
Team Member Row
Faces build trust faster than any copywriting. A simple team row — avatar, name, role, short bio — humanizes the business and shows visitors there are real people behind the work. We use <ul> as the container because team members are a list of parallel items.
Copy the following code into the main section below core values.
<!-- Team Section -->
<section class="about-team">
<div class="page-content">
<h2>Meet the Team</h2>
<p class="section-intro">
Small team. Big output. Every project gets senior attention.
</p>
<ul class="team-grid">
<li class="team-card">
<div class="team-avatar">
<img
src="images/team-kemi.jpg"
alt="Kemi Adeyemi, Founder and Lead Designer"
width="120"
height="120"
loading="lazy"
/>
</div>
<h3>Kemi Adeyemi</h3>
<p class="team-role">Founder & Lead Designer</p>
<p class="team-bio">
10 years of experience turning complex business requirements into
clear, beautiful interfaces.
</p>
</li>
<li class="team-card">
<div class="team-avatar">
<img
src="images/team-mike.jpg"
alt="Mike Obi, Lead Developer"
width="120"
height="120"
loading="lazy"
/>
</div>
<h3>Mike Obi</h3>
<p class="team-role">Lead Developer</p>
<p class="team-bio">
Specialist in performance-first builds. If the site scores below 95
on Lighthouse, he takes it personally.
</p>
</li>
<li class="team-card">
<div class="team-avatar">
<img
src="images/team-sara.jpg"
alt="Sara Eze, Client Strategist"
width="120"
height="120"
loading="lazy"
/>
</div>
<h3>Sara Eze</h3>
<p class="team-role">Client Strategist</p>
<p class="team-bio">
Bridges the gap between what clients ask for and what their
customers actually need to see.
</p>
</li>
</ul>
</div>
</section>
The src values above (team-kemi.jpg, team-mike.jpg, team-sara.jpg) are placeholders. Add your actual team photos to the images/ folder and update the src and alt attributes to match. The alt text should describe who is in the image — name and role — not just “team photo”.
The Services Page – services.html
The homepage Services section introduced three service cards as a teaser. This page is the full version — each service gets its own detailed card with a description and a feature list. We also add a “How We Work” process strip and a bottom CTA (call-to-action) to drive conversions.
Copy and paste the code in the main section of the services.html page.
<main>
<!-- Page Hero -->
<section class="page-hero">
<h1>Our Services</h1>
<p>End-to-end web solutions for modern businesses. No templates. No shortcuts.</p>
</section>
<!-- Detailed Services Section -->
<section class="services-detail">
<div class="page-content">
<h2>What We Offer</h2>
<p class="section-intro">
Every service is delivered with the same commitment: purposeful design,
clean code, and results you can measure.
</p>
<div class="services-detail-grid">
<article class="service-detail-card">
<div class="svc-icon" aria-hidden="true">🎨</div>
<h3>Web Design</h3>
<p>
Custom, responsive designs built around your brand identity. Every
layout is crafted to guide your visitors towards a clear action —
whether that's making a purchase, booking a call, or getting in touch.
</p>
<ul class="service-features">
<li>Brand-aligned colour, typography, and visual language</li>
<li>Mobile-first, fully responsive layouts</li>
<li>UI/UX wireframing and prototyping</li>
<li>Accessibility-compliant design (WCAG 2.1 AA)</li>
</ul>
</article>
<article class="service-detail-card">
<div class="svc-icon" aria-hidden="true">💻</div>
<h3>Development</h3>
<p>
Clean, fast, hand-coded websites with no unnecessary frameworks or
dependencies. Your site loads instantly, ranks well in search engines,
and is easy to maintain for years to come.
</p>
<ul class="service-features">
<li>Semantic HTML5 and modern CSS (Grid, custom properties)</li>
<li>Google Lighthouse scores of 95+ across all categories</li>
<li>Zero-dependency builds — no React, no bundlers required</li>
<li>Cross-browser and device tested before delivery</li>
</ul>
</article>
<article class="service-detail-card">
<div class="svc-icon" aria-hidden="true">📈</div>
<h3>Consulting</h3>
<p>
Strategic guidance to strengthen your digital presence. Whether you
need a full site audit, an SEO plan, or advice on your tech stack,
we help you make decisions based on data and long-term thinking.
</p>
<ul class="service-features">
<li>Comprehensive SEO audit and on-page optimisation</li>
<li>Content structure and keyword strategy</li>
<li>Technology recommendations tailored to your budget</li>
<li>Monthly performance reports and actionable insights</li>
</ul>
</article>
</div>
</div>
</section>
<!-- How We Work Section -->
<section class="services-process">
<div class="page-content">
<h2>How We Work</h2>
<p class="section-intro">
A clear, four-stage process that keeps you informed and in control
from the first conversation to the final launch.
</p>
<ol class="process-steps">
<li class="process-step">
<div class="step-number" aria-hidden="true">01</div>
<div class="step-text">
<h3>Discovery</h3>
<p>We start by listening. A 30-minute call to understand your business, your goals, your audience, and what success looks like for you.</p>
</div>
</li>
<li class="process-step">
<div class="step-number" aria-hidden="true">02</div>
<div class="step-text">
<h3>Design</h3>
<p>We create wireframes and a visual direction for your approval before writing a single line of code. No surprises at the end.</p>
</div>
</li>
<li class="process-step">
<div class="step-number" aria-hidden="true">03</div>
<div class="step-text">
<h3>Build</h3>
<p>Development against the approved design with regular progress check-ins. You always know where things stand.</p>
</div>
</li>
<li class="process-step">
<div class="step-number" aria-hidden="true">04</div>
<div class="step-text">
<h3>Launch & Support</h3>
<p>We handle the go-live process and stay available for post-launch support. You get a site that works — and a team that stands behind it.</p>
</div>
</li>
</ol>
</div>
</section>
<!-- CTA Strip -->
<section class="cta-strip">
<div class="page-content cta-strip-inner">
<div class="cta-strip-text">
<h2>Ready to Start Your Project?</h2>
<p>Let's talk about what you need. No commitment, just a conversation.</p>
</div>
<a href="contact.html" class="cta-button">Get in Touch</a>
</div>
</section>
</main>
Each service is wrapped in an <article> — independently meaningful, self-contained content. Inside each card: an emoji icon, a heading, a paragraph description, and a feature list using a semantic <ul>. The grid is the same auto-fit / minmax pattern from Part 1, so it already responds to all screen sizes without extra media queries.
A numbered process section removes a major objection prospective clients carry: “I don’t know what working with you actually looks like.” Four steps, numbered, with a short explanation each. We use an ordered list (<ol>) because the sequence matters — this is the semantic correct element for numbered steps.
Every services page needs a conversion moment — a section that asks the visitor to take the next step. We place it at the bottom of the page, after they have read everything. A dark strip with a clear heading, a supporting line, and a button pointing to the Contact page.
The Contact Page – contact.html
The Contact page has one job: make it easy to reach you. It achieves this with a two-column layout — a form on the left (the primary action), and supporting business details on the right (phone, email, address, and hours). The form markup here is the full semantic structure; form validation, input types, and backend connection are covered in depth in Section 4.
Copy and paste the following code inside the main section of the services.html file.
<main>
<!-- Page Hero -->
<section class="page-hero">
<h1>Get in Touch</h1>
<p>
Have a project in mind? We'd love to hear about it.
Fill in the form and we'll get back to you within one business day.
</p>
</section>
<!-- Contact Section -->
<section class="contact-section">
<div class="page-content contact-inner">
<!-- Contact Form -->
<div class="contact-form-wrapper">
<h2>Send Us a Message</h2>
<form
class="contact-form"
action="https://formspree.io/f/YOUR_FORM_ID"
method="POST"
novalidate
>
<div class="form-row">
<div class="form-group">
<label for="name">Your Name <span class="required" aria-hidden="true">*</span></label>
<input
type="text"
id="name"
name="name"
placeholder="Jane Smith"
required
autocomplete="name"
/>
</div>
<div class="form-group">
<label for="email">Email Address <span class="required" aria-hidden="true">*</span></label>
<input
type="email"
id="email"
name="email"
placeholder="jane@example.com"
required
autocomplete="email"
/>
</div>
</div>
<div class="form-group">
<label for="phone">Phone Number <span class="optional">(optional)</span></label>
<input
type="tel"
id="phone"
name="phone"
placeholder="+234 800 000 0000"
autocomplete="tel"
/>
</div>
<div class="form-group">
<label for="subject">Subject <span class="required" aria-hidden="true">*</span></label>
<input
type="text"
id="subject"
name="subject"
placeholder="New website project"
required
/>
</div>
<div class="form-group">
<label for="message">Your Message <span class="required" aria-hidden="true">*</span></label>
<textarea
id="message"
name="message"
rows="6"
placeholder="Tell us about your project — what you need, your timeline, and any other details."
required
></textarea>
</div>
<button type="submit" class="cta-button submit-btn">
Send Message
</button>
</form>
</div>
<!-- Business Details -->
<aside class="contact-details">
<h2>Our Details</h2>
<ul class="details-list">
<li>
<div class="detail-icon" aria-hidden="true">📧</div>
<div>
<strong>Email</strong>
<a href="mailto:contact@kmacims.com.ng">contact@kmacims.com.ng</a>
</div>
</li>
<li>
<div class="detail-icon" aria-hidden="true">📞</div>
<div>
<strong>Phone</strong>
<a href="tel:+2348037321869">+234 803 732 1869</a>
</div>
</li>
<li>
<div class="detail-icon" aria-hidden="true">📍</div>
<div>
<strong>Location</strong>
<span>Umuahia, Abia State, Nigeria</span>
</div>
</li>
<li>
<div class="detail-icon" aria-hidden="true">🕐</div>
<div>
<strong>Office Hours</strong>
<span>Monday – Friday, 9:30am – 4:30pm WAT</span>
</div>
</li>
</ul>
<div class="response-note">
<p>⏱ We typically respond within <strong>one business day</strong>. For urgent enquiries, please call us directly.</p>
</div>
</aside>
</div>
</section>
</main>
The layout is a CSS Grid two-column split: the form column is wider (1.5fr) because it is the primary action; the details column is narrower (1fr) and serves as supporting information. On small screens, the grid collapses to a single column automatically.
A <form> element is the semantically correct container for interactive input controls. It gives the browser the information it needs to handle submission, enables native validation, allows users to submit with the Enter key, and ensures assistive technologies like screen readers announce the form boundaries to their users. Never wrap form inputs in a generic <div>.
The business details column uses <aside> because it is supplementary content related to the main form. The email and phone links use href=”mailto:” and href=”tel:” — these trigger the native mail and phone apps on mobile, which dramatically improves conversion on small screens. The novalidate attribute on the form prevents browser-default validation popups; we build our own clean validation in Section 4. The action attribute points to Formspree — a free service that receives your form submissions and emails them to you. Replace YOUR_FORM_ID with your actual Formspree endpoint (covered fully in Section 4).
CSS for Section 2 – css/styles.css
Add all of the following css code to css/styles.css, below the existing ones. The rules are organised in the same order the sections appear on the pages — About, then Services, then Contact — with shared utilities at the top.
/*
_________________________
SECTION 2 — Core Pages CSS
______________________________
*/
/* Section intro text — the descriptive paragraph under each section heading */
.section-intro {
text-align: center;
font-size: 1.05rem;
color: #6b7280;
max-width: 600px;
margin: 0 auto 3rem;
}
/* Styles for the About Page */
/* ── About: Mission Section ── */
.about-mission {
background: var(--bg-color);
}
.about-mission-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
gap: 3.5rem;
align-items: center;
}
.about-image img {
width: 100%;
height: auto;
border-radius: 12px;
display: block;
object-fit: cover;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.about-text h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 1.25rem;
color: var(--text-color);
}
.about-text p {
color: #4b5563;
font-size: 1rem;
line-height: 1.75;
margin-bottom: 1rem;
}
.about-text .cta-button {
margin-top: 0.5rem;
display: inline-block;
}
/* ── About: Values Section ── */
.about-values {
background: #f9fafb;
}
.about-values h2 {
text-align: center;
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 0.75rem;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.value-card {
background: white;
border-radius: 10px;
padding: 2rem;
border: 1px solid #e5e7eb;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.value-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.07);
}
.value-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.value-card h3 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-color);
}
.value-card p {
font-size: 0.92rem;
color: #6b7280;
line-height: 1.6;
}
/* About: Team Section */
.about-team {
background: var(--bg-color);
}
.about-team h2 {
text-align: center;
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 0.75rem;
}
.team-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
}
.team-card {
text-align: center;
padding: 2rem 1.5rem;
border-radius: 12px;
border: 1px solid #e5e7eb;
transition: box-shadow 0.2s ease;
}
.team-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}
.team-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 1.25rem;
border: 3px solid #dbeafe;
}
.team-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 0.25rem;
}
.team-role {
font-size: 0.82rem;
font-weight: 600;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
}
.team-bio {
font-size: 0.9rem;
color: #6b7280;
line-height: 1.6;
}
/* Styles for the Services Page */
/* Services: Detailed Cards */
.services-detail {
background: var(--bg-color);
}
.services-detail h2 {
text-align: center;
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 0.75rem;
}
.services-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.service-detail-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 2rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-detail-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 32px rgba(0,0,0,0.07);
}
.svc-icon {
font-size: 2.25rem;
margin-bottom: 1rem;
}
.service-detail-card h3 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--text-color);
}
.service-detail-card p {
color: #4b5563;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1.25rem;
}
.service-features {
padding-left: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.service-features li {
font-size: 0.88rem;
color: #374151;
padding-left: 1.25rem;
position: relative;
}
/* Custom checkmark bullet using ::before */
.service-features li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: 700;
}
/* ── Services: Process Steps ── */
.services-process {
background: #f9fafb;
}
.services-process h2 {
text-align: center;
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 0.75rem;
}
.process-steps {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.process-step {
background: white;
border-radius: 12px;
padding: 2rem;
border: 1px solid #e5e7eb;
position: relative;
}
.step-number {
font-size: 2.5rem;
font-weight: 900;
color: #dbeafe;
line-height: 1;
margin-bottom: 0.75rem;
letter-spacing: -0.04em;
}
.step-text h3 {
font-size: 1rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 0.5rem;
}
.step-text p {
font-size: 0.9rem;
color: #6b7280;
line-height: 1.6;
}
/* Services: CTA Strip */
.cta-strip {
background: #111827;
color: white;
}
.cta-strip-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
.cta-strip-text h2 {
font-size: clamp(1.3rem, 3vw, 1.75rem);
color: white;
margin-bottom: 0.4rem;
}
.cta-strip-text p {
color: #9ca3af;
font-size: 1rem;
}
/* Styles for the Contact Page */
/* Contact: Two-Column Layout */
.contact-inner {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 4rem;
align-items: start;
}
.contact-form-wrapper h2,
.contact-details h2 {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 1.5rem;
}
/* Contact: Form Fields */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1.25rem;
}
.form-group label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-color);
}
.required {
color: #ef4444;
margin-left: 0.1rem;
}
.optional {
font-size: 0.78rem;
font-weight: 400;
color: #9ca3af;
margin-left: 0.25rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.7rem 1rem;
border: 1.5px solid #d1d5db;
border-radius: 6px;
font-size: 0.95rem;
font-family: inherit;
color: var(--text-color);
background: white;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.form-group textarea {
resize: vertical;
min-height: 140px;
}
.submit-btn {
width: 100%;
padding: 0.85rem;
font-size: 1rem;
border: none;
cursor: pointer;
}
/* ── Contact: Business Details Sidebar ── */
.details-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.details-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.detail-icon {
font-size: 1.35rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.details-list strong {
display: block;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #9ca3af;
margin-bottom: 0.2rem;
}
.details-list a,
.details-list span {
font-size: 0.97rem;
color: var(--text-color);
text-decoration: none;
}
.details-list a:hover {
color: var(--primary-color);
text-decoration: underline;
}
.response-note {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 1rem 1.25rem;
font-size: 0.9rem;
color: #6b7280;
line-height: 1.6;
}
/* Responsive: Collapse Contact Grid on Mobile */
@media (max-width: 700px) {
.contact-inner {
grid-template-columns: 1fr;
gap: 3rem;
}
.form-row {
grid-template-columns: 1fr;
}
Most of our grids use auto-fit / minmax() and collapse naturally without media queries — that is the beauty of intrinsic web design. However, the contact two-column layout uses 1.5fr 1fr with explicit proportions, which cannot auto-collapse on its own. A single @media (max-width: 700px) rule fixes both the contact grid and the two-column name/email row in one go. This is the minimum amount of media query code needed to make the page fully responsive.
