Hover Flip Cards

<div class="container py-5">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="flip">
        <div class="flip-inner">
          <div class="flip-front bg-primary text-white">
            <h4 class="fw-bold">Design</h4>
            <p>Hover to learn more</p>
          </div>
          <div class="flip-back bg-white border">
            <h5>UI/UX Design</h5>
            <p class="small text-muted">Beautiful interfaces built for humans, not machines.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="flip">
        <div class="flip-inner">
          <div class="flip-front bg-success text-white">
            <h4 class="fw-bold">Develop</h4>
            <p>Hover to learn more</p>
          </div>
          <div class="flip-back bg-white border">
            <h5>Web Development</h5>
            <p class="small text-muted">Fast, accessible, SEO-ready applications.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="flip">
        <div class="flip-inner">
          <div class="flip-front bg-danger text-white">
            <h4 class="fw-bold">Deploy</h4>
            <p>Hover to learn more</p>
          </div>
          <div class="flip-back bg-white border">
            <h5>DevOps</h5>
            <p class="small text-muted">CI/CD, cloud hosting, monitoring, security.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>