PixelForge — Creative team page

PixelForge, down to the details.

Introduce a creative studio through its people. PixelForge recreates the supplied reference’s portrait-led hero, four-column team grid, luminous purple details and project invitation. The text, cards and controls are editable HTML. High-resolution local portraits, a crisp vector logo and an interruptible spring-driven banner keep the reference composition clear and responsive.

Midnight blue · electric purple · Poppins.

Inside the page

• Brand header and six-link navigation
• Meet Our Team hero with five independent, high-resolution portraits
• Eight team profiles with portraits, roles, biographies and social controls
• Project invitation with a studio photograph and contact action

Try it in the preview

• Watch portraits fade out and return one by one; pause or resume the sequence.
• Hover, focus or tap a portrait to enlarge it while the other portraits ease smaller.
• Motion stops offscreen, in a hidden tab, or with reduced-motion preferences.
• Open a team member’s sample profile from a social control.
• Open the project form, complete required fields and preview a submission.
• Use the mobile menu, Escape key and focus return.
• Navigate directly to the team and project sections.

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.

1. Extract and open

   Download the ZIP, extract it, then open index.html. Leave the assets/ folder beside it.

2. 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.

3. 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.

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

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.

PixelForge 1.1.0 uses higher-resolution AI-reconstructed sample photography guided by the supplied reference, with an editable vector mark and live wordmark. These are not recovered original photos or verified real employees. Photography and reference-inspired branding are outside the code’s MIT grant; review their rights and suitability or replace them with approved assets before commercial publishing. Local fonts use SIL OFL; Phosphor icons use MIT.

Download code license · Read asset provenance