Skip to the content
FilCommunityWorkflowsDocsOpen Fil
Build a single-page website that recreates the layout of the reference design: a narrow left column with a logo block, a…
A web page: run it in Fil

Code · Claude Opus 5.5

Build a single-page website that recreates the layout of the…

Build a single-page website that recreates the layout of the reference design: a narrow left column with a logo block, a short tagline card, a tall orange product card and a dark stats card, and a large hero on the right with a huge two-line headline over a misty lake scene, a top navigation (About, How it works, Help Center) with a dark pill ORDER button, a centred subheading, and two ruled feature rows with arrow buttons. Replace the brand VintxHome with the new brand "Aldera Home" and replace the person Li Yuzim, CEO, with "Mara Kessler, CEO". Keep the headline as "HOME SAFETY", and adapt the other copy to Aldera Home. Style: airy, minimal, foggy blue-grey palette with deep navy text and one warm orange accent, wide light geometric sans-serif type, generous spacing, rounded small cards. Use the provided section images for the hero landscape, the camera product card, the CEO portrait and the stats card house. Draw all UI, icons, arrows, buttons and the line overlay in HTML and CSS. Add subtle hover states and a responsive layout.

Meng To@shadownessguy0097
Model
Claude Opus 5.5
Made by
Meng To
Shared
Likes
0
Open in Fil

Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.

More like this

The hero image from the skill, for Hero.md: a sleeping hand resting on a dark linen sheet, wearing the slim Driftline ring…The hero image from the skill, for Hero.md: a sleeping hand resting on a dark linen sheet, wearing the slim Driftline ring, lit by a faint…The hero section from the skill, for Hero.md, built around the wired hero image. Reference (Hero.md): # Hero - **Product:**…The hero section from the skill, for Hero.md, built around the wired hero image. Reference (Hero.md): # Hero - **Product:** Driftline, a…The website in the brief as a React site, following the skill, with the wired hero image in the hero and the wired…The website in the brief as a React site, following the skill, with the wired hero image in the hero and the wired reference’s layout…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery long-limbed character in…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery long-limbed character in…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery long-limbed character in…YouTube thumbnail, 16:9. Bold title text "BUILD PAID APPS" on the left in three lines, in a heavy condensed sans-serif with…YouTube thumbnail, 16:9. Bold title text "BUILD PAID APPS" on the left in three lines, in a heavy condensed sans-serif with a thick dark…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery…Editorial black-and-white halftone line illustration about designing, developing and making apps. A tall, rubbery long-limbed character in…Direction: Cards on a thread. The work hangs on the line that joins it. Explore: two or three rounded-square cards joined…Direction: Cards on a thread. The work hangs on the line that joins it. Explore: two or three rounded-square cards joined by one curved…A true-isometric diorama illustration on one rounded off-white slab with a faceted bevelled edge, showing an online…A true-isometric diorama illustration on one rounded off-white slab with a faceted bevelled edge, showing an online business workspace: a…