ViVA — Everyday marketplace

A forest-green marketplace with a lifestyle hero, nine categories, product deals, promotional tiles and a complete store footer.

Web DesignHTML / CSS / JSReference reconstructionv1.1.0

Interactive source, not a screenshot. Scroll inside the preview to explore the full page.

Loading preview…

ViVA, down to the details.

Recreate a warm, everyday shopping experience. ViVA follows the supplied reference from its shipping announcement and searchable header through the merchandise hero, product selection, customer stories and newsletter. Its five-product catalog powers a real local browsing and shopping-bag demo.

Forest green · warm ivory · Inter & Playfair Display.

Inside the page

Shipping announcement, searchable header and shop navigation
Lifestyle merchandise hero with collection controls
Nine category choices and five product-deal cards
Three promotional collections and a customer-story carousel
Newsletter form, service assurances and a five-column footer

Try it in the preview

Search the sample catalog and filter by category, including empty/reset states.
Add products, change quantities, remove items and see the calculated subtotal.
Open the sample wishlist and add a saved product to the bag.
Switch the featured headline and rotate the sample reviews.
Validate an email in the newsletter preview without sending or saving it.

Responsive desktop and mobileWorking local interactionsLocal images and fontsNo build step or remote scripts

The preview and its source, together.

Keep the HTML and assets folder together. The ZIP includes all files needed to open the page locally.

index.html
Editable page
The complete HTML, CSS and JavaScript used in the preview.
assets/
Local imagery and fonts
WebP images, font files and their licenses. Included in the ZIP.
PROMPT.md
Customization prompt
A brief for your brand, audience, verified content and approved imagery.
SKILL.md
Reusable AI workflow
Instructions for adapting the page and checking its interactions.
README.md
Quick-start guide
File structure, working controls and front-end demo boundaries.
ASSETS.md
Asset provenance
Reference imagery, font and icon sources, and reuse conditions.
LICENSE
Implementation license
MIT terms for the code and instructions; imagery has separate rights.
PHOSPHOR-LICENSE.txt
Icon notice
The MIT license for the included Phosphor icon paths.

From reference to your own site.

Extract and open
Download the ZIP, extract it, then open index.html. Leave the assets/ folder beside it.
Add your story
Replace the sample copy, catalog or team data and images with your verified content. Adjust the CSS colors or use the included AI prompt.
Check and publish
Try the page on a phone and with a keyboard. Verify image rights and business claims, connect any required services, then publish on your static host.

Make it yours with AI

Bring the HTML file and these instructions to your preferred coding assistant. Replace the bracketed inputs with your product details.

# Customize ViVA

Use the included index.html and local assets/ folder as the starting point.

Brand: [YOUR BRAND]
Audience: [WHO USES IT]
Purpose: [PRIMARY TASK]
Verified content: [PEOPLE / PRODUCTS / PRICES / REAL CLAIMS]
Primary action: [ACTION AND DESTINATION]
Approved assets: [REPLACEMENT IMAGES AND THEIR RIGHTS]

Preserve this visual direction: Forest green · warm ivory · Inter & Playfair Display.
Keep the reference layout, image proportions and section rhythm. Adapt it for 375, 768, 1024 and 1440px widths with readable text, visible focus, keyboard controls and reduced-motion support. Keep the HTML, CSS and JavaScript editable and all assets local.

Retain or deliberately replace these working interactions:
- Search the sample catalog and filter by category, including empty/reset states.
- Add products, change quantities, remove items and see the calculated subtotal.
- Open the sample wishlist and add a saved product to the bag.
- Switch the featured headline and rotate the sample reviews.
- Validate an email in the newsletter preview without sending or saving it.

Reference names, portraits, prices, testimonials, ratings and customer counts are sample content. Replace them with approved material and verified claims before publishing. The MIT license covers the implementation and instructions, not the supplied brand/photographic imagery; see ASSETS.md and the font/icon notices.

Do not invent successful checkout, authentication, email delivery, orders, backend storage or deployment. Do not add remote scripts, analytics, credentials or services unless requested. Keep local demo actions explicitly labeled inside their result dialogs.

Deliver the updated source and assets, verify the main journey and every in-page link, and report the checks and remaining service integrations.

AI customization is optional. Skill installation depends on your assistant; WOG Labs does not install it for you.

Before you start.

Is the preview an image or a real webpage?

It is the actual HTML file included in the download. Text, layout and controls are editable; photographs are local image assets. Scroll inside the preview or open it in a new tab to see the full page.

What do I need to run it?

A modern browser. Extract the entire ZIP and open index.html with the assets folder beside it. No package installation, AI subscription, key or build step is required.

Can I use the images and branding commercially?

The implementation and instructions are MIT-licensed. ViVA 1.1.0 uses twelve newly generated high-resolution sample photographs and editable SVG branding. Products and people are illustrative; sample reviews are not verified customer endorsements. Local fonts use SIL OFL; Phosphor icons use MIT.

Are the people, products, reviews and figures real claims?

They are sample content preserved from the visual reference. Names, prices, offers, reviews, ratings and customer-count statements have not been independently verified. Replace them with accurate content for your business.

Does it include checkout, accounts or a backend?

No. Demo changes stay in this browser tab’s memory and reset on reload. Shopping totals are calculated locally, and forms show a local preview response. No payment, account, email, order, analytics or database service is connected.

Can I customize it with an AI coding assistant?

Yes. Attach the source and the included prompt, or use the Markdown skill in your assistant’s supported workflow. Keep the assets folder available and ask the assistant to preserve the responsive layout and working controls.

Does it work on phones and in dark mode?

The layout adapts below 700px, including navigation and multi-column content. The standalone template retains its reference’s color theme; the surrounding WOG Labs detail page follows the site’s light/dark setting. Test your customized version in your target browsers.

Code you can adapt. Assets with their own terms.

The HTML/CSS/JavaScript implementation, prompt and skill are MIT-licensed. Retain the included copyright and permission notice.

ViVA 1.1.0 uses twelve newly generated high-resolution sample photographs and editable SVG branding. Products and people are illustrative; sample reviews are not verified customer endorsements. Local fonts use SIL OFL; Phosphor icons use MIT.

Download code license · Read asset provenance

Version 1.1.0 · October 25, 2026

Initial release: faithful reference layout, local image assets, responsive interactions, preview, source package, prompt and skill.

Your next page starts here.

Open the source. Keep the details. Make it yours.

Download ViVA

Live preview

ViVA, down to the details.

Inside the page

Try it in the preview

The preview and its source, together.

Editable page

Local imagery and fonts

Customization prompt

Reusable AI workflow

Quick-start guide

Asset provenance

Implementation license

Icon notice

From reference to your own site.

Extract and open

Add your story

Check and publish

Make it yours with AI

Before you start.

Code you can adapt. Assets with their own terms.

Version 1.1.0 · October 25, 2026

Your next page starts here.