• Header & Navigation — Sticky header with smooth scroll and mobile toggle.
• Hero Section — Full-screen background banner with a clear call-to-action.
• Services Section — Six service cards with icons and hover effects.
• Pricing Section — Filterable pricing cards organized by service category.
• Gallery Section — Four-column photo grid with animated overlay on hover.
• Appointment Section — Booking form with name, email, phone, category, date, and message fields.
• Footer — Newsletter subscription, quick links, recent news, and contact info.

• Responsive Design — Fully optimized layout for mobile, tablet, and desktop.
• Sticky Header — Header locks to top with animation after scrolling 100px.
• Mobile Navigation — Hamburger menu toggle with smooth open and close behavior.
• Filterable Pricing — Filter pricing cards by category using JavaScript.
• Gallery Hover Effects — Overlay with title and button appears on image hover.
• Appointment Form — Structured form with service category dropdown and date picker.
• Back to Top Button — Appears on scroll with smooth return to top behavior.
• Custom Icon Font — Uses Flaticon icon set for service and UI icons.

• HTML5 — Semantic markup with accessible roles and labels throughout.
• CSS3 — Custom properties, animations, transitions, and media queries.
• JavaScript (ES6) — Handles navigation toggle, scroll effects, and pricing filter.
• Google Fonts — Oswald and Rubik fonts for clean typographic hierarchy.
• Flaticon — Icon font library used for service cards and UI elements.
• Ionicons — Icon set used for buttons, footer, and navigation elements.

barber-shop/
│
├── index.html                 # Main HTML with all sections and forms
│
├── assets/
│   ├── css/
│   │   ├── style.css          # Complete styles with animations and responsive design
│   │   └── flaticon.min.css   # Icon font stylesheet
│   │
│   ├── js/
│   │   └── script.js          # Navigation, scroll effects, and filter logic
│   │
│   ├── fonts/
│   │   └── flaticon.ttf       # Custom icon font file
│   │
│   └── images/                # Hero banners, pricing images, gallery photos, footer images
│
└── README.md                  # Project documentation
    

1. Clone the repository:

   git clone https://github.com/nawazdevx/barber-shop.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update services, pricing, and gallery content in <code>index.html</code></li>
      <li>Change colors and fonts using CSS variables in <code>style.css</code></li>
      <li>Replace hero and gallery images inside <code>assets/images/</code></li>
      <li>Edit navigation links and footer contact details in <code>index.html</code></li>
      <li>Modify filter categories and pricing items in <code>index.html</code></li>
    </ul>
  </li>
</ol>