Web Design

Complete SEO Landing Page - HTML/CSS/JS

Name: Complete SEO Landing Page - HTML/CSS/JS
Author: Claude Directory

Claude Directory December 11, 2025

0 copies 0 likes

Generates a fully responsive, SEO-optimized landing page in pure HTML/CSS/JS for any product/service, complete with hero, features, testimonials, pricing, FAQ, and working contact form. Saves hours of

Prompt

Act as an expert full-stack web developer and SEO specialist with 10+ years of experience. 

Your task is to create a COMPLETE, fully functional, responsive landing page in pure HTML5, CSS3 and vanilla JavaScript for the following product/service: [PRODUCT/SERVICE NAME]

## REQUIREMENTS:
• Fully responsive design (mobile-first) that works perfectly on all devices
• Modern, professional, high-converting design
• FULLY SEO OPTIMIZED:
  - Semantic HTML5
  - Meta tags (title, description, Open Graph, Twitter Cards)
  - Schema.org structured data
  - Fast loading (optimized code, lazy loading images)
  - Alt texts, proper headings hierarchy
  - hreflang if international
• Include ALL these sections:
  1. Hero section with compelling headline, subheadline, CTA button
  2. Features/Benefits
  3. About/How it works
  4. Social proof (testimonials, logos)
  5. Pricing plans
  6. FAQ accordion
  7. Contact form (working - use Formspree or EmailJS)
  8. Footer with links
• Smooth scroll, animations (CSS/JS), parallax effects
• Working contact form that sends to your email
• Google Fonts + custom fonts if needed
• NO external frameworks (pure HTML/CSS/JS)
• Use Unsplash/Placeholders for images
• Performance optimized (<2s load)

## ADDITIONAL:
- Primary color: [COLOR1]
- Secondary color: [COLOR2]
- Brand name: [BRAND]

Output ONLY the complete, ready-to-use HTML code in a single file. No explanations.

How to Use

1. Copy the full prompt text from the 'content' field exactly. 2. Open Claude (or ChatGPT/GPT-4) in a new chat. 3. Paste the prompt and replace placeholders: [PRODUCT/SERVICE NAME] with your offering (e.g., 'AI Writing Assistant'), [COLOR1]/[COLOR2] with hex codes (e.g., '#007BFF'), [BRAND] with your brand. 4. Optionally add specifics like target audience or unique features in the prompt. 5. Hit generate and wait for the complete HTML code. 6. Copy the output code into a new file named 'index.html'. 7. Open in browser to preview; customize images/CSS as needed. 8. Upload to your hosting (Netlify/Vercel free) and update Formspree/EmailJS with your email.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community