BOVDEMO 2026
⚠ COLLEGE COURSEWORK — layout-clone class test. This is NOT a real website or service. No orders, payments, or votes are processed.
Student Web-Design Project · Class Test 2026

A concept page for online contest & poll voting

This page recreates a common contest-voting landing-page layout for a college assignment. Every field and button below is demo only — nothing is submitted, sold, or delivered.

This form is not connected to any server or payment system.
About this project

A Layout Study, Built for Class

BuyOnlineVote is a student web-design exercise. The goal of the class test is to reproduce the structure and visual style of a real-world landing page — sticky header, full-width hero with a form, text block, feature list, article cards, testimonial slider and a multi-column footer — using original text and graphics.

Nothing on this site is a real offer. There is no checkout, no account system and no vote delivery. Buttons either scroll within the page or show a short “demo only” message.

The page is built as a single Custom HTML block inside WordPress, with plain CSS and a small amount of JavaScript for the mobile menu, the “Show more” button and the testimonial slider.

Why This Layout Works

Six short points explaining the design choices behind this mockup:

Clear Visual Hierarchy

A strong red headline over a dark navy hero immediately tells visitors what the page is about.

Form Above the Fold

The inline three-field form sits inside the hero so the main action is visible without scrolling (demo only here).

Readable Long-Form Text

The About block uses a narrow centered column and large type so long paragraphs stay easy to read.

Two-Column Feature List

Check-mark bullets with red titles break the feature list into scannable pieces.

Responsive by Default

Header, grids and footer collapse into a single column with a burger menu on phones.

Honest, Labeled Content

Every section is clearly marked as a mockup so nobody mistakes it for a live service.

Thanks for reviewing this class test. All text, graphics and code on this page were written for the assignment.— The BuyOnlineVote Student Team

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.