Membuat Service Section Pada Web Company Profile Dengan Bootstrap 5 #3

Setelah selesai membuat section hero kali ini kita akan membuat section Layanan Kami, untuk langkah pertama silahkan membuat sebuah section seperti dibawah ini :

<!-- Layanan Section -->
      <section id="layanan">
        <div class="container">
          <div class="row">
            <div class="col-12 text-center">
              <h2>Layanan Kami</h2>
              <span class="sub-title">Moro Adver hadir memberikan solusi terbaik bagi Anda</span>
            </div>
          </div>
        </div>
      </section>

Selnanjutnya tambahkan card didalamnya seperti code dibawah :

          <div class="row mt-5">
            <div class="col-md-4 text-center">
              <div class="card-layanan">
                <div class="wadah-icon position-relative mx-auto">
                  <img src="asset/img/icon1.png" alt="" class="position-absolute top-50 start-50 translate-middle">
                </div>
                <h3 class="mt-4">Property Baru</h3>
                <p class="mt-3">Rumah impinan baru jadi milik anda
                  nikmati hunian murah dan dengan lingkungan
                  yang asri dan lingkungan yang bersih.</p>
              </div>
            </div>
          </div>

Setelah itu tambahkan style.css dengan code berikut :

/* LAYANAN */
#layanan {
  padding: 100px 0;
}

h2 {
  font-size: 48px;
  font-weight: bold;
  color: #025782;
}

.sub-title {
  font-size: 18px;
  color: #000;
}

.card-layanan {
  width: 100%;
  height: 270px;
  border-radius: 20px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.7s ease-in;
}

.card-layanan h3 {
  color: #025782;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.7s ease-in;
}

.card-layanan p {
  color: #025782;
  font-size: 14px;
  transition: all 1s ease-in;
}

.wadah-icon {
  width: 73px;
  height: 73px;
  background-color: #9dcbef;
  border-radius: 50%;
  transition: all 0.7s ease-in;
}
/* Kondisi ketika di hover */
.card-layanan:hover {
  width: 100%;
  height: 270px;
  border-radius: 20px;
  background: linear-gradient(113.94deg, #3c83ab 2.44%, #000000 215.92%);
  padding: 30px;
  box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.7s ease-in;
}

.card-layanan:hover h3 {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.7s ease-in;
}

.card-layanan:hover p {
  color: #fff;
  font-size: 14px;
  transition: all 1s ease-in;
}

.card-layanan:hover .wadah-icon {
  background-color: #fff;
  transition: all 0.7s ease-in;
}

Selanjutnya copy card layanan sebanyak 3 kali dan sesuaikan isinya, seperti code berikut :

      <!-- Layanan Section -->
      <section id="layanan">
        <div class="container">
          <div class="row">
            <div class="col-12 text-center">
              <h2>Layanan Kami</h2>
              <span class="sub-title">Moro Adver hadir memberikan solusi terbaik bagi Anda</span>
            </div>
          </div>

          <div class="row mt-5">
            <div class="col-md-4 text-center">
              <div class="card-layanan">
                <div class="wadah-icon position-relative mx-auto">
                  <img src="asset/img/icon1.png" alt="" class="position-absolute top-50 start-50 translate-middle">
                </div>
                <h3 class="mt-4">Property Baru</h3>
                <p class="mt-3">Rumah impinan baru jadi milik anda
                  nikmati hunian murah dan dengan lingkungan
                  yang asri dan lingkungan yang bersih.</p>
              </div>
            </div>

            <div class="col-md-4 text-center">
              <div class="card-layanan">
                <div class="wadah-icon position-relative mx-auto">
                  <img src="asset/img/icon2.png" alt="" class="position-absolute top-50 start-50 translate-middle">
                </div>
                <h3 class="mt-4">Sewa Rumah</h3>
                <p class="mt-3">Rumah impinan baru jadi milik anda
                  nikmati hunian murah dan dengan lingkungan
                  yang asri dan lingkungan yang bersih.</p>
              </div>
            </div>

            <div class="col-md-4 text-center">
              <div class="card-layanan">
                <div class="wadah-icon position-relative mx-auto">
                  <img src="asset/img/icon3.png" alt="" class="position-absolute top-50 start-50 translate-middle">
                </div>
                <h3 class="mt-4">Beli Rumah</h3>
                <p class="mt-3">Rumah impinan baru jadi milik anda
                  nikmati hunian murah dan dengan lingkungan
                  yang asri dan lingkungan yang bersih.</p>
              </div>
            </div>
          </div>

        </div>
      </section>

Setelah selesai hasilnya sebagai berikut :