HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloned Page</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        
        /* Desktop styles */
        @media (min-width: 768px) {
            .container { max-width: 1200px; margin: 0 auto; }
        }
        
        /* Mobile styles */
        @media (max-width: 767px) {
            .container { padding: 0 16px; }
        }
    </style>
</head>
<body>
    <header>
        <h1>Main Title</h1>
        <nav>
            <h2 class="sr-only">Navigation</h2>
            <!-- Navigation items -->
        </nav>
    </header>
    <main>
        <section>
            <h2>Section Title</h2>
            <h3>Subsection</h3>
        </section>
    </main>
</body>
</html>

Progress:

• Analyze target website structure and visual hierarchy
• Extract color palette, typography, and spacing values
• Create semantic HTML with proper heading structure (h1-h6)
• Build mobile-first CSS with breakpoints
• Implement exact layout positioning and dimensions
• Add interactive elements and hover states
• Test responsive behavior across devices
• Validate HTML semantics and accessibility

Analysis Phase

1. Inspect target page's DOM structure
2. Note heading hierarchy (h1 should be unique, h2-h6 for sections)
3. Measure exact spacing, colors, fonts using browser dev tools
4. Identify breakpoints where layout changes

HTML Structure

HTML
<h1>Page Title (only one per page)</h1>
<section>
    <h2>Main Section</h2>
    <article>
        <h3>Article Title</h3>
        <h4>Subsection</h4>
    </article>
</section>

CSS Implementation

• Use CSS Grid/Flexbox for exact positioning
• Implement mobile breakpoint: @media (max-width: 767px)
• Desktop breakpoint: @media (min-width: 768px)
• Extract exact font sizes, line heights, margins