Want to get this as ready made template with just 1 CLICK INSTALL?
Banner Section Prompt:
Make a hero banner section for a car website. Here I provide the design inspiration image. For the car I want to use a 3D car model. I provide the GLB file inside this projects folder. Change the background text to “PHANTOM” and the car should be visible from the angle like the other screenshot provided.
Can you properly run this project on localhost using http protocol so we can see the 3D model
Now I want to change the car color to red. And also change the blue text color and background gradient color to red to get the same vibe. For the big title, create a smooth gradient so near the bottom it looks darker. I also want to rotate the car with mouse move. But, I only want to rotate it slightly on xy plane, not on z axis. Also during the 3D model loading, we don’t want the “model loading” text or any progressbar And also fix these design issues: - change the car position exactly shown as the reference screenshoot - remove the box frame wrapping the content - don’t make the menu full width - make the big heading font: Impact, font weight: 900 and font size 300px - and for other text make the Inter font - the car width will be wider than the text: around 1400px wide - the bottom half of the text would be overlapped by the car - change the top right button text: “LET’S DRIVE” - change the text: “REAR-WHEEL” to “R. WHEEL” - change the bottom button text: “EXPLORE NOW” - make the section 100vh and fit all the content inside that - after the changes, readjust proper spacing so the section looks good
2nd Section Prompt:
Looks good, now create a 2nd section with the layout of the provided wireframe. the car in the middle and 4 items on the sides. 2 on the left and 2 on the right. For each card, we need a small text with a number (e.g. 01), title and a paragraph. With each item add a top border with gradient. Also add a slight gradient in the middle of this section. Make this overall section’s look and feel like the previous banner section’s theme. For this section, the car view would be like the provided screenshot. While scrolling down, that same 3D car from the banner section should smoothly make a 3D rotate and finally fits in the middle of the 2nd section and appears like the screenshot.
Make these following changes: - the car should go above any other content of the website, so increase its z index, but make sure other contents are clickable too - for the left side items, make their content right aligned - make the title font: Impact and font size: 32px
3rd Section Prompt:
now create a 3rd section with the provided wireframe. On the left the car model, and on the right these content: - a small size subtitle: “TOP SPEED” - a title with the same font and gradient like the banner section big title - a paragraph - a gradient border - 3 short features about wheel, design will be same like the banner section features, but a bit smaller - a button “EXPLORE THE PHANTOM”, design will be same like the banner section bottom button The car 3D model will also rotate and appear to be as the same angle like the provided screenshot image.
Make these following changes: - on the left, make the car size slightly bigger and place it more left - the title will be in 2 lines and the font size: 110px - the paragraph font size will be 18px
4th Section Prompt:
Now create the last section. Here I want a small subtitle: “Experience Phantom” and a gradient heading: "LET’S GO" with big font size: 300px and after that want the car with the angle of the provided image. Here the half height of the title will be overlapped by the car. And near the bottom middle of this section, add a big gradient.
- increase the car size so the car width will be visible in 650px - and the car should cover half height of the big text
Initial Responsive Prompt:
Right now, I'm viewing this website from 1727px width device and the website looks perfect here. Now can you make the whole website responsive for lower width devices. And from under 950px, we don't want to move/rotate the car with scroll, just keep it on the hero section and change all the section's height from 100vh to auto.
Deployment Prompt:
Now, deploy this website to jituraiyan.me using Hostinger Connector
