An elegant, pastel-toned responsive portfolio layout crafted for beauty salons, editorial makeup artists, and bridal stylists. It features minimalist editorial grids, client testimonials, and an interactive FAQ accordion.

HTML Structure

<header>
  <div class="logo">AURORA BEAU</div>
  <nav>
    <a href="#" class="active">Home</a>
    <a href="#">Artistry</a>
    <a href="#">Packages</a>
    <a href="#">Gallery</a>
  </nav>
  <button class="btn-gold">Book consult</button>
</header>

<!-- FAQ Accordion Layout -->
<section class="faq-section">
  <div class="faq-item">
    <div class="faq-question" onclick="toggleFaq(this)">
      <span>How far in advance should I reserve a bridal styling?</span>
      <svg class="faq-icon-svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </div>
    <div class="faq-answer">
      <div class="faq-answer-inner">
        We highly recommend booking bridal packages 6 to 12 months in advance.
      </div>
    </div>
  </div>
</section>

CSS Styling

Here are the key styling definitions for Aurora Beau:

.faq-item {
  background: #fff;
  border: 1px solid #efe3e1;
  margin-bottom: 16px;
  overflow: hidden;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.faq-item.active .faq-answer {
  max-height: 200px;
}
.testimonial-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(18px, 3vw, 24px);
  color: #2c1d1c;
  margin-bottom: 24px;
}

FAQ Toggle Script

function toggleFaq(questionEl) {
  const faqItem = questionEl.parentElement;
  const isActive = faqItem.classList.contains('active');
  
  // Close all FAQs first
  document.querySelectorAll('.faq-item').forEach(item => item.classList.remove('active'));

  // If clicked item was not active, open it
  if(!isActive) {
    faqItem.classList.add('active');
  }
}