Want to get this as ready made template with just 1 CLICK INSTALL?
Initial Prompt for Copying Screenshot:
You are a senior front-end developer and UI engineer. Your task is to recreate the provided screenshot as a pixel-perfect hero section using clean, production-ready HTML, CSS, and minimal JavaScript if needed. IMPORTANT RULES: - Do NOT redesign, simplify, or improve anything. - Do NOT add your own creativity. - Match the layout EXACTLY as shown in the screenshot. - Maintain identical spacing, alignment, proportions, and hierarchy. LAYOUT INSTRUCTIONS: - Carefully analyze the screenshot and replicate: - Exact structure (containers, columns, positioning) - Padding and margins (top, bottom, left, right) - Element alignment (center, left, right, flex/grid behavior) - If overlapping or absolute positioning is used, replicate it precisely. TYPOGRAPHY: - Match font sizes, weights, line heights, and letter spacing exactly - Use closest possible web-safe or Google font if font is unknown - Maintain exact text hierarchy (heading, subheading, paragraph) COLORS & STYLES: - Extract and use the exact colors from the screenshot (background, text, buttons) - Match border radius, shadows, gradients, and opacity precisely - Replicate button styles exactly (hover states included) IMAGES & MEDIA: - Use placeholder images if assets are not provided, but preserve exact dimensions and aspect ratios - Maintain correct positioning and scaling RESPONSIVENESS: - Make it responsive while preserving the same layout behavior - Ensure it visually matches the screenshot on desktop first, then adapt for tablet and mobile CODE QUALITY: - Write clean, well-structured HTML and CSS - Use modern layout techniques (Flexbox or Grid) - Avoid unnecessary divs - Keep CSS organized and readable OUTPUT FORMAT: - Provide complete HTML + CSS in one block - Do NOT explain anything - Do NOT include comments unless necessary - Do NOT describe the design — only implement it ACCURACY PRIORITY: This is a design replication task, not a creative task. Accuracy is more important than creativity. If something is unclear in the screenshot, choose the most visually accurate interpretation — not a generic solution.
