BOVDEMO 2026
⚠ COLLEGE COURSEWORK — layout-clone class test. This is NOT a real website or service. No orders, payments, or votes are processed.
Service category concept · demo only

IP Votes: Concept Service Page (Class Test 2026)

This page recreates the layout of a typical service-category page — header, intro, a grid of package cards, a feature list, a short process and a closing call-to-action. It is part of a college web-design assignment. Nothing here is for sale, and no votes of any kind are provided.

Package Card Layout

Six placeholder cards in a 3×2 grid. Names, prices and features are intentionally blank.

Tier 1

Placeholder package / demo only
$—
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
Demo only

Tier 2

Placeholder package / demo only
$—
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
Demo only

Tier 3

Placeholder package / demo only
$—
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
Demo only

Tier 4

Placeholder package / demo only
$—
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
Demo only

Tier 5

Placeholder package / demo only
$—
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
Demo only

Tier 6

Placeholder package / demo only
$—
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
  • Placeholder feature line
Demo only

About This Concept Page

This is the IP Votes page of the BuyOnlineVote class project. It exists to show how a service-category page is usually structured — not to describe or sell any real service.

Why This Page Layout Works

📐 Clear structure

A short intro, then cards, then supporting text: visitors see the main content first.

🧩 Reusable cards

The same card component repeats six times, which keeps the code short and consistent.

📱 Mobile friendly

The 3-column grid collapses to one column on small screens.

🔒 Honest labels

Every price and feature is a placeholder, and every button only shows a demo message.

Simple 3-Step Layout Pattern

  1. Intro: tell the visitor what the page is about.
  2. Options: show choices as cards.
  3. Next step: point to the contact page (demo form only).

Built for Class

All text, graphics and code on this page were written for the assignment. Questions? Use the demo contact page.

Project Notes & FAQ

Short notes about how this page was planned and built, shown in the same card format a blog section uses.

Is this a real service?

Is This a Real Service?

No. It is a static design mockup for a college web-design class test. It does not sell votes, take payments or deliver anything.

Planning the layout

Planning the Section Order

How the reference page was broken down into header, hero, about, features, articles, testimonials and footer before coding.

Colors & type

Choosing Colors and Fonts

Navy background, bright red headings and a geometric sans-serif font were matched to the reference style.

Making it responsive

Making It Work on Phones

Media queries turn the grids into one column and swap the menu for a burger button below 900px.

WordPress setup

Building It in WordPress

The whole page lives in one Custom HTML block, with a few lines of Additional CSS to hide the theme header and footer.

What’s not included

What Was Left Out on Purpose

No payment fields, no contest-link field, no real reviews and no copied text, logos or images from the reference site.

Placeholder Testimonials

Written for this assignment to fill the slider — these are not real customer reviews.

A

“The slider, cards and footer look clean and are easy to follow on this mockup page.”

— Sample Persona A
B

“Nice use of a dark hero with a bright headline — the layout is very clear.”

— Sample Persona B
C

“The menu and grids collapse nicely on a phone screen.”

— Sample Persona C
Demo only — nothing was sent.