Skip to main content
idapt
HomeCodeAI ModelsPricing
Sign inStart free
  • Home
  • Pricing
  • AI Models
  • Image models
  • Voice models
  • Video models
  • Rankings
  • New models
  • Model status
  • Multi-Model Chat
  • Voice Mode
  • Voice HUD
  • Web Search
  • Image Generation
  • Video Generation
  • Audio Generation
  • Transcription
  • Drive
  • Credentials
  • Sharing
  • Workspaces
  • Tasks
  • Memory
  • Agents
  • Subagents
  • Automations
  • Skills
  • idapt Code
  • Code Execution
  • Computers
  • Computer Use
  • Computer Assist · Soon
  • Containers
  • Cloud Computers
  • Local AI
  • AI Gateway
  • API & SDK
  • CLI
  • MCP
  • Tunnels
  • All features →
  • LLM cost calculator
  • Token counter
  • Context window checker
  • Can I run it
  • Model picker quiz
  • Savings finder
  • Video cost estimator
  • Text to speech cost
  • Transcription cost
  • API endpoint tester
  • All free tools →
  • Blog
  • Use cases
  • Comparisons
  • Best of
  • Skills
  • Learn
  • Changelog
  • Help center
  • FAQ
  • Privacy
  • Compare all models
  • Support
  • idapt Code
  • Developers
  • Quickstarts
  • API reference
  • API pricing
  • CLI
  • MCP
  • Downloads
  • Desktop
  • Badges and embeds
© idapt[email protected]TermsPrivacy PolicyLegal noticeReport content
X (Twitter)
All skills
Code

Build a before and after page

Paired images with a slider, and the story of each job.

Fill it in

The pairs, named so they can be matched.

A line on each: what it was, what you did, how long it took.

Name, contact and what they need.

Your prompt

Build a before and after page.

[the jobs]
Match the pairs by the same viewpoint. A before shot from the doorway and an
after from the corner is not a comparison, and it reads as hiding something even
when it is not.

A slider beats side by side. The reveal is the whole product, and it is the
interaction people share.

Give each job a line of context: what it was, what you did, and how long it took.
The duration is what a prospective customer is really asking.

Add an enquiry form: name, contact, and what they need. Short.
Lazy-load the images. Galleries like this are usually opened on a phone, on site.
Continue and pick your folderOpens with everything above already filled in.

Why this works

A before shot from the doorway and an after from the corner is not a comparison, and it reads as hiding something even when it is not. This matches viewpoints, uses a slider because the reveal is the product, and gives each job the duration a prospective customer is actually asking about.

More code skills

  • idapt Code
  • Fix a failing test

Use it now in a chat in 1 click

Use Build a before and after page
Fix a GitHub issue
  • Find security bugs
  • Ship a feature
  • Speed up slow code