Mens Salon Gallery | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Men's Salon Gallery</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 
</head>
<body>

<section class="gallery-section">
  <h2 data-aos="fade-up">Our Men’s Salon Services</h2>
  <p data-aos="fade-up" data-aos-delay="100">
    Experience top-notch grooming, haircuts, beard styling, and facials designed exclusively for men.  
    Our professional barbers combine modern techniques with style to give you a fresh, confident look.
  </p>

<div class="container">
    <div class="gallery-container">
      <div class="gallery-card" data-aos="zoom-in">
        <img src="https://images.unsplash.com/photo-1600948836101-f9ffda59d250?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c2Fsb258ZW58MHx8MHx8fDA%3D" alt="Haircut">
        <div class="gallery-info">
          <div>
            <h4>Haircuts</h4>
            <p>Stylish modern cuts</p>
          </div>
        </div>
      </div>
      <div class="gallery-card" data-aos="zoom-in" data-aos-delay="100">
        <img src="https://plus.unsplash.com/premium_photo-1661645788141-8196a45fb483?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmFyYmVyfGVufDB8fDB8fHww" alt="Beard Styling">
        <div class="gallery-info">
          <div>
            <h4>Beard Styling</h4>
            <p>Trim & shape perfectly</p>
          </div>
        </div>
      </div>
      <div class="gallery-card" data-aos="zoom-in" data-aos-delay="200">
        <img src="https://images.unsplash.com/photo-1493256338651-d82f7acb2b38?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8YmFyYmVyfGVufDB8fDB8fHww" alt="Hair Color">
        <div class="gallery-info">
          <div>
            <h4>Hair Coloring</h4>
            <p>Subtle & stylish tones</p>
          </div>
        </div>
      </div>
      <div class="gallery-card" data-aos="zoom-in" data-aos-delay="300">
        <img src="https://images.unsplash.com/photo-1532710093739-9470acff878f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGJhcmJlcnxlbnwwfHwwfHx8MA%3D%3D" alt="Facial Care">
        <div class="gallery-info">
          <div>
            <h4>Facial Treatments</h4>
            <p>Refresh & rejuvenate</p>
          </div>
        </div>
      </div>
      <div class="gallery-card" data-aos="zoom-in" data-aos-delay="400">
        <img src="https://plus.unsplash.com/premium_photo-1661420297394-a8a9590e93a8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fGJhcmJlcnxlbnwwfHwwfHx8MA%3D%3D" alt="Hair Spa">
        <div class="gallery-info">
          <div>
            <h4>Hair Spa</h4>
            <p>Nourish & relax your hair</p>
          </div>
        </div>
      </div>
      <div class="gallery-card" data-aos="zoom-in" data-aos-delay="500">
        <img src="https://plus.unsplash.com/premium_photo-1661493935776-a76a3e33dddf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjd8fGJhcmJlcnxlbnwwfHwwfHx8MA%3D%3D" alt="Full Grooming">
        <div class="gallery-info">
          <div>
            <h4>Full Grooming</h4>
            <p>Complete head-to-toe styling</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

</body>
</html>

CSS

body {
      font-family: 'Poppins', sans-serif;
      background: #1e1e1e;
      color: #fff;
    }
    .gallery-section {
      padding: 80px 20px;
      text-align: center;
      background: #121212;
    }
    .gallery-section h2 {
      font-size: 2.8rem;
      font-weight: 700;
      color: #f1c40f;
      margin-bottom: 15px;
    }
    .gallery-section p {
      font-size: 1.1rem;
      color: #ddd;
      max-width: 720px;
      margin: 0 auto 50px;
    }
    .gallery-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
    }
    .gallery-card {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      background: #222;
      box-shadow: 0 8px 25px rgba(0,0,0,0.4);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .gallery-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .gallery-card:hover img {
      transform: scale(1.15);
    }
    .gallery-card:hover {
      transform: translateY(-12px);
      box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    }
    .gallery-info {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      background: linear-gradient(to top, rgba(241,196,15,0.9), rgba(241,196,15,0.2));
      color: #111;
      padding: 20px;
      opacity: 0;
      transition: all 0.4s ease;
    }
    .gallery-card:hover .gallery-info {
      opacity: 1;
    }
    .gallery-info h4 {
      margin: 0;
      font-size: 1.3rem;
      font-weight: 700;
    }
    .gallery-info p {
      margin: 6px 0 0;
      font-size: 0.95rem;
      opacity: 0.95;
    }

JavaScript

Mens Salon Gallery Preview

Download Options