📄 File: footer.php

Path: /home2/outerorb/dev.outerorbittech.com/new/footer.php

Size: 6.01 KB

Permissions: 0644

<!-- Footer Section -->
<section class"">


<link href="css/style.css" rel="stylesheet">
  <div class="container footer-section foot_edit ">
    <div class="row footer-bg pt-5 pb-5">
      <!-- Logo + Social Icons -->
      <style>
        .footer-bg {
          background-repeat: no-repeat;
          background-position: right top;
          /* 1st image */
          background-image: url('img/footer_shape03.png');
          background-size: auto, 230px;
          /* 2nd img thodi badi-choti adjust */
        }

        /* 1st image animation (upar–niche) */
        .footer-bg {
          animation: floatShape 5s ease-in-out infinite alternate;
        }

        @keyframes floatShape {
          0% {
            background-position: right bottom, right 10px;
            /* 2nd fixed image */
          }

          100% {
            background-position: right 20px bottom, right 40px;
            /* 1st upar niche */
          }
        }
      </style>
      <div class="col-md-3 mt-3">
        <img src="img/logo_new.png" class="ft">
        <div class="footer-social mt-3">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-linkedin-in"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
      </div>

      <!-- Information -->
      <div class="col-md-3 mt-4">
        <h5 class="footer-title">Information</h5>
        <p><i class="fa-solid fa-phone"></i> +91-7979771209</p>
        <p><i class="fa-solid fa-envelope"></i> info@outerorbittech.com</p>
        <p><i class="fa-solid fa-location-dot"></i> C/O MIMEC Cable, 5th Floor, Plot No. 3/P,<br>Namkum Industrial Area,
          Namkum Ranchi JH 834010</p>
      </div>

      <!-- Top Links -->
      <div class="col-md-3 mt-4">
        <h5 class="footer-title">Top Links</h5>
        <ul class="footer-links">
          <li><a href="about.php">About Us</a></li>
          <li><a href="blog.php">Blog</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Why Choose Us</a></li>
          <li><a href="contact.php">Contact Us</a></li>
        </ul>
      </div>

      <!-- Services -->
      <div class="col-md-3 mt-4">
        <h5 class="footer-title">Services</h5>
        <ul class="footer-links">
          <li><a href="#">Inbound Call Center</a></li>
          <li><a href="#">Tech Support</a></li>
          <li><a href="#">Live Chat</a></li>
          <li><a href="#">Social Media</a></li>
          <li><a href="#">E-Mail</a></li>
        </ul>
      </div>


    </div>
  </div>
</section>

<!-- Copyright Bar -->
<div class="container-fluid footer-bottom">
  <div class="row">
    <center>
      <div class="col-md-12">
        Copyright © 2025 <b>Outer Orbit Technologies</b>. All Rights Reserved.
      </div>
    </center>
  </div>
</div>

<!-- Right Fixed Social Icon Bar (Solid Version) -->
<style>
  .social-bar {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .social-bar a {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    /* solid white base */
    color: #333;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    font-size: 22px;
  }

  .social-bar a:hover {
    transform: translateX(-6px) scale(1.05);
    color: #fff;
  }

  /* Custom brand colors on hover */
  .facebook:hover {
    background: #3b5998;
  }

  .instagram:hover {
    background: #e4405f;
  }

  .linkedin:hover {
    background: #0077b5;
  }

  .whatsapp:hover {
    background: #25d366;
  }

  .twitter:hover {
    background: #1DA1F2;
  }

  @media (max-width:768px) {
    .social-bar {
      right: 10px;
    }

    .social-bar a {
      width: 42px;
      height: 42px;
      font-size: 18px;
    }
  }
</style>

<div class="social-bar">
  <a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
  <a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
  <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
  <a href="#" class="whatsapp"><i class="bi bi-whatsapp"></i></a>
  <a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
</div>

<!-- Bootstrap Icons link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
  .footer-section {
    /*background-color: #fff;*/
    /*color: #1d1d1d;*/
  }

  .footer-title {
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
  }

  .footer-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background-color: #f7b500;
    margin-top: 6px;
  }

  .footer-links {
    list-style: none;
    padding: 0;
    margin-top: 10px;
  }

  .footer-links li {
    margin-bottom: 8px;
  }

  .footer-links a {
    color: #1d1d1d;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .footer-links a:hover {
    color: #f7b500;
  }

  .footer-social a {
    display: inline-block;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    background-color: #ecf6fa;
    color: #1d1d1d;
    margin-right: 5px;
    transition: all 0.3s ease;
  }

  .footer-social a:hover {
    background-color: #f7b500;
    color: #fff;
  }

  .footer-bottom {
    background-color: #ecf6fa;
    padding: 20px 40px;
    font-size: 15px;
    color: #333;
  }

  .footer-bottom a {
    color: #1d1d1d;
    text-decoration: none;
  }

  .footer-bottom a:hover {
    color: #f7b500;
  }
</style>

← Back to Directory Edit File 🔒 Chmod