Footer

rohitwushu
Jan 27, 2026 9
Live Preview

Live Editor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Footer Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">


</head>

<body class="bg-light p-2">

<div class="container">
  <footer class="footer">

    <div class="row">
      <!-- Brand -->
      <div class="col-md-3 mb-4">
        <div class="brand mb-3">
          <span>🐾</span> Vetic
        </div>
        <p style="font-size:13px;">
          Professional pet care services with love & trust.
        </p>
      </div>

      <!-- Menu 1 -->
      <div class="col-md-3 mb-4">
        <h6>Company</h6>
        <a href="#">Home Page</a>
        <a href="#">Services Offered</a>
        <a href="#">Meet Our Team</a>
        <a href="#">Client Testimonials</a>
        <a href="#">Contact Us</a>
      </div>

      <!-- Menu 2 -->
      <div class="col-md-3 mb-4">
        <h6>Resources</h6>
        <a href="#">Location Map</a>
        <a href="#">Blog Posts</a>
        <a href="#">FAQs</a>
        <a href="#">Pet Care</a>
        <a href="#">Emergency Care</a>
      </div>

      <!-- Contact -->
      <div class="col-md-3 mb-4">
        <h6>Contact</h6>
        <ul class="contact p-0">
          <li><span>📍</span> Level 12, Sydney NSW 2000</li>
          <li><span>📞</span> 1800 123 567</li>
          <li><span>✉️</span> info@vetic.io</li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom text-center">
      © 2026 Vetic. All rights reserved.
    </div>

    <!-- Pink bubbles -->
    <div class="bubbles">
      <span></span><span></span><span></span>
    </div>

  </footer>
</div>

</body>
</html>
.footer {
  background: linear-gradient(135deg, #0b0b0b, #1a1a1a);
  color: #ccc;
  border-radius: 14px;
  padding: 40px 10px;
  position: relative;
  overflow: hidden;
}

.footer h6 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 14px;
}

.footer a {
  color: #aaa;
  text-decoration: none;
  font-size: 13px;
  display: block;
  margin-bottom: 8px;
}

.footer a:hover {
  color: #f3a1e6;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #fff;
}

.brand span {
  width: 32px;
  height: 32px;
  background: #f3a1e6;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.contact li {
  list-style: none;
  font-size: 13px;
  margin-bottom: 10px;
}

.contact span {
  width: 28px;
  height: 28px;
  background: #f3a1e6;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #000;
}

/* Pink bubbles */
.bubbles span {
  position: absolute;
  background: #f3a1e6;
  border-radius: 50%;
  opacity: .9;
}

.bubbles span:nth-child(1) {
  width: 90px;
  height: 90px;
  bottom: -30px;
  right: 40px;
}

.bubbles span:nth-child(2) {
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 110px;
}

.bubbles span:nth-child(3) {
  width: 35px;
  height: 35px;
  bottom: 20px;
  right: 10px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 30px;
  padding-top: 15px;
  font-size: 12px;
  color: #777;
}
Categories

Footer

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
