Barber Shop

About Project: Barbershop website optimized for all devices, featuring service details, filterable pricing tables, photo gallery, and appointment booking form. Built with semantic HTML5, CSS3 custom properties for theming, and vanilla JavaScript for interactive filtering and navigation all organized in clean code that barbers and salons can customize for their business, and much more.

What I learned: Implemented interactive filter system using data attributes, created responsive grid layouts with CSS Grid and Flexbox, built overlay content effects with opacity transitions, and managed mobile navigation with smooth toggle animations, and much more.

Personal Note: I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.

Project More Details

What's Inside

• Hero Section - Full-width background image with overlay, headline text, and call-to-action button
• Services Section - Six service cards with Flaticon icons, descriptions, and arrow links
• Pricing Section - Filterable pricing tables with category tabs and service cards displaying images, titles, and prices
• Gallery Section - Four photo cards with hover overlay effects revealing service titles and descriptions
• Appointment Section - Booking form with text inputs, date picker, service dropdown, and message textarea flanked by side banners
• Footer - Newsletter subscription, quick links, services list, recent blog posts with dates, and contact information
• Mobile Navigation - Collapsible menu with slide animation for smaller screens
• Sticky Header - Fixed navigation that appears with background when scrolling past 100px
• Back to Top Button - Floating button for quick page navigation appearing on scroll

Technologies Used

• HTML5 - Semantic markup with proper structure and accessibility attributes
• CSS3 - Modern styling with Grid, Flexbox, custom properties, pseudo-elements, and smooth transitions
• JavaScript (ES6) - Vanilla JS for navigation toggle, scroll detection, and filter functionality
• Google Fonts - Oswald and Rubik font families for professional typography
• Ionicons - Icon library for navigation arrows and UI elements
• Flaticons - Custom icons for service cards and pricing filter buttons
• CSS Custom Properties - Variables for consistent colors, fonts, and spacing throughout
• CSS Animations - Keyframe animations for sliding header and popup effects on filtered items
• Media Queries - Responsive breakpoints at 575px, 768px, 992px, and 1200px

Project Structure

    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
    

Key Features

• Fully Responsive Design - Works seamlessly across all devices from 320px mobile to 1920px+ desktop screens
• Interactive Filter System - Category-based pricing filter using data attributes and JavaScript toggle
• Mobile Navigation - Collapsible menu with smooth height transitions and automatic close on link click
• Hover Effects - Image zoom on gallery cards, color transitions on buttons, and overlay reveals
• Scroll-Triggered Header - Transparent header becomes fixed with solid background after scrolling 100px
• Gallery Overlay - Hover-activated content reveals with opacity and scale animations
• Form Validation - HTML5 required fields for name, email, phone, date, and message inputs
• Service Dropdown - Custom-styled select menu for appointment category selection
• Newsletter Form - Email subscription input in footer with submit button
• Back to Top Button - Floating button appears when scrolling down for quick page navigation
• Cross-Browser Compatible - Tested on Chrome, Firefox, Safari, Edge, and Opera browsers
• Easy Customization - CSS variables and organized code structure for quick modifications

Quick Start

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 shop name and content in <code>index.html</code></li>
      <li>Change colors in <code>style.css</code> using CSS variables</li>
      <li>Replace images in <code>assets/images/</code> folder</li>
      <li>Modify services, pricing, and contact details</li>
    </ul>
  </li>
</ol>

Customization

• Text Content: Edit directly in index.html - update barbershop name, service descriptions, pricing details, and contact information
• Colors: Update CSS variables in :root selector at the top of style.css

  :root {
    --indian-yellow: hsl(28, 45%, 45%);        /* Primary accent color */
    --rich-black-fogra-39: hsl(25, 30%, 8%);   /* Dark backgrounds */
    --white: hsl(0, 0%, 100%);                 /* White text/backgrounds */
    --eerie-black-1: hsl(25, 20%, 18%);        /* Secondary dark color */
  }

• Images: Replace files inside assets/images/ with your own photos (keep same filenames or update HTML references)
• Fonts: Change the Google Fonts link in HTML <head> and update --ff-oswald and --ff-rubik variables in CSS
• Services Section: Add or remove service cards by duplicating or deleting <li> elements with service-card class
• Pricing Categories: Add filter buttons in tab-filter list and matching pricing cards with corresponding data-filter attributes
• Gallery: Duplicate gallery-card elements and update images to expand the photo showcase
• Appointment Form: Modify input fields, add dropdown options, or change form action URL
• Footer Content: Update newsletter form, navigation links, blog posts, and contact details
• Animations: Adjust timing in @keyframes sections and transition properties for different effects

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

You can view the live project here ➜ Live Demo