Saya sedang membuat tapak web menggunakan Bootstrap 5 tetapi sifat index.css tidak digunakan pada index.html. Apabila saya menuding pada kad perkhidmatan, latar belakang harus berubah, memberikan kesan peralihan. Sepatutnya dari ini ke ini. Walau bagaimanapun, saya fikir mungkin terdapat masalah dengan CSS yang dipautkan ke HTML, kerana apabila saya cuba menukar latar belakang tapak kepada warna rawak, perubahan itu tidak muncul di tapak.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
  background: #f1f2fa;
  font-family: 'Poppins', sans-serif;
}

hr {
  border: 1.5px solid #0b5ed7
}

.crd {
  background-color: #f1f2fa;
  transition: all;
}

.crd:hover {
  background: #0b5ed7;
  color: #fff;
  transition: 0.5s;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- SERVICES SECTION START -->
<section>
  <div class="container">
    <div class="row py-5">
      <h2 class="display-6 mb-4">Our Services</h2>
      <!-- <div class="col-lg-4 col-md-6">
                    <div class="card text-center p-4 mb-2">
                        <i class="fas fa-camera fa-3x"></i>
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
                            voluptatum, voluptate, quibusdam, quia voluptas quod quos
                            exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                    </div>
          </div> -->
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-database fa-3x"></i>
          <h4>Datacenter Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <!-- <div class="col-lg-4 col-md-6">
              <div class="card text-center p-4 mb-2">
                <i class="fas fa-sign-hanging fa-3x"></i>
                <h4>Digital Signage</h4>
                <p class="p-2">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
                  voluptatum, voluptate, quibusdam, quia voluptas quod quos
                  exercitationem quae voluptatibus doloribus quidem. Quisquam
                </p>
              </div>
            </div> -->
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-headset fa-3x"></i>
          <h4>General Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-server fa-3x"></i>
          <h4>Network Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-cash-register fa-3x"></i>
          <h4>POS Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-tower-cell fa-3x"></i>
          <h4>Telecom Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fa-solid fa-bars fa-3x"></i>
          <h4>Additional Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- SERVICES SECTION CLOSE -->