Membuat Card Section Rekomendasi Pada Web Company Profile Dengan Bootstrap 5 #5

Selanjutnya kita akan membuat bagian rekomendasi rumah, seperti biasa kita siapkan dulu kerangnkanya sebagai berikut :

      <!-- REKOMENDASI SECTION -->
      <section id="rekomendasi">
        <div class="container">
          <div class="row">
            <div class="col-12 text-center">
              <h2>Rekomendasi Ruah Impian</h2>
            </div>
          </div>
        </div>
      </section>

Kemudia kita membuat row baru untuk menyimpan card yang ada pada desain, seperti berikut :

          <div class="row">
              <div class="col-md-4 mb-4">
            
          </div>

Kemudian masukan data dibawah didalam row

              <div class="col-md-4 mb-4">
                <div class="card p-2">
                  <img src="asset/img/icon rekomendasi/img1.png" alt="" class=" img-card mb-2">
                  <div class="card-body">
                    <h4>IDR. 200.000.000</h4>
                    <p>Baturaja Timu Kab. OKU <br> <span class="text-danger">Sewa</span></p>
                    
                  </div>
  
                  <div class="card-fasilitas d-flex justify-content-between p-3">
                    <span>
                      <img src="asset/img/icon rekomendasi/2.png" alt=""> 3
                      <p>Kamar Tidur</p> 
                    </span>                     
                    <span>
                      <img src="asset/img/icon rekomendasi/3.png" alt=""> 3
                      <p>Kamar Mandi</p>
                    </span>
                    <span>
                      <img src="asset/img/icon rekomendasi/4.png" alt=""> 100m
                      <p>Luas Tanah</p>
                    </span>
                  </div>
                </div>
              </div>

              <div class="col-md-4 mb-4">
                <div class="card p-2">
                  <img src="asset/img/icon rekomendasi/img1.png" alt="" class="mb-2">
                  <div class="card-body">
                    <h4>IDR. 200.000.000</h4>
                    <p>Baturaja Timu Kab. OKU <br> <span class="text-danger">Sewa</span></p>
                    
                  </div>
  
                  <div class="card-fasilitas d-flex justify-content-between p-3">
                    <span>
                      <img src="asset/img/icon rekomendasi/2.png" alt=""> 3
                      <p>Kamar Tidur</p> 
                    </span>                     
                    <span>
                      <img src="asset/img/icon rekomendasi/3.png" alt=""> 3
                      <p>Kamar Mandi</p>
                    </span>
                    <span>
                      <img src="asset/img/icon rekomendasi/4.png" alt=""> 100m
                      <p>Luas Tanah</p>
                    </span>
                  </div>
                </div>
              </div>

              <div class="col-md-4 mb-4">
                <div class="card p-2">
                  <img src="asset/img/icon rekomendasi/img1.png" alt="" class="mb-2">
                  <div class="card-body">
                    <h4>IDR. 200.000.000</h4>
                    <p>Baturaja Timu Kab. OKU <br> <span class="text-danger">Sewa</span></p>
                    
                  </div>
  
                  <div class="card-fasilitas d-flex justify-content-between p-3">
                    <span>
                      <img src="asset/img/icon rekomendasi/2.png" alt=""> 3
                      <p>Kamar Tidur</p> 
                    </span>                     
                    <span>
                      <img src="asset/img/icon rekomendasi/3.png" alt=""> 3
                      <p>Kamar Mandi</p>
                    </span>
                    <span>
                      <img src="asset/img/icon rekomendasi/4.png" alt=""> 100m
                      <p>Luas Tanah</p>
                    </span>
                  </div>
                </div>
              </div>

              <div class="col-md-4 mb-4">
                <div class="card p-2">
                  <img src="asset/img/icon rekomendasi/img1.png" alt="" class="mb-2">
                  <div class="card-body">
                    <h4>IDR. 200.000.000</h4>
                    <p>Baturaja Timu Kab. OKU <br> <span class="text-danger">Sewa</span></p>
                    
                  </div>
  
                  <div class="card-fasilitas d-flex justify-content-between p-3">
                    <span>
                      <img src="asset/img/icon rekomendasi/2.png" alt=""> 3
                      <p>Kamar Tidur</p> 
                    </span>                     
                    <span>
                      <img src="asset/img/icon rekomendasi/3.png" alt=""> 3
                      <p>Kamar Mandi</p>
                    </span>
                    <span>
                      <img src="asset/img/icon rekomendasi/4.png" alt=""> 100m
                      <p>Luas Tanah</p>
                    </span>
                  </div>
                </div>
              </div>

              <div class="col-md-4 mb-4">
                <div class="card p-2">
                  <img src="asset/img/icon rekomendasi/img1.png" alt="" class="mb-2">
                  <div class="card-body">
                    <h4>IDR. 200.000.000</h4>
                    <p>Baturaja Timu Kab. OKU <br> <span class="text-danger">Sewa</span></p>
                    
                  </div>
  
                  <div class="card-fasilitas d-flex justify-content-between p-3">
                    <span>
                      <img src="asset/img/icon rekomendasi/2.png" alt=""> 3
                      <p>Kamar Tidur</p> 
                    </span>                     
                    <span>
                      <img src="asset/img/icon rekomendasi/3.png" alt=""> 3
                      <p>Kamar Mandi</p>
                    </span>
                    <span>
                      <img src="asset/img/icon rekomendasi/4.png" alt=""> 100m
                      <p>Luas Tanah</p>
                    </span>
                  </div>
                </div>
              </div>

              <div class="col-md-4 mb-4">
                <div class="card p-2">
                  <img src="asset/img/icon rekomendasi/img1.png" alt="" class="mb-2">
                  <div class="card-body">
                    <h4>IDR. 200.000.000</h4>
                    <p>Baturaja Timu Kab. OKU <br> <span class="text-danger">Sewa</span></p>
                    
                  </div>
  
                  <div class="card-fasilitas d-flex justify-content-between p-3">
                    <span>
                      <img src="asset/img/icon rekomendasi/2.png" alt=""> 3
                      <p>Kamar Tidur</p> 
                    </span>                     
                    <span>
                      <img src="asset/img/icon rekomendasi/3.png" alt=""> 3
                      <p>Kamar Mandi</p>
                    </span>
                    <span>
                      <img src="asset/img/icon rekomendasi/4.png" alt=""> 100m
                      <p>Luas Tanah</p>
                    </span>
                  </div>
                </div>
              </div>

Kemudian tambahkan file css berikut :

/* REKOMENDASI */
#rekomendasi h2 {
  margin-top: 100px;
}

.card {
  height: 100%;
  border: none;
}

.card-body h4 {
  color: #000;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.6rem;
}

.card-body p {
  color: #000;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.6rem;
  margin-bottom: 80px;
}

.card:hover {
  background: linear-gradient(149.69deg, #3a61a0 36.55%, #000000 92.83%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.card:hover .card-body h4 {
  color: #fff;
  transition: all ease-in-out 0.3s;
}

.card-fasilitas {
  background-color: #fff;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 15px;
  color: #000;
}

.card-fasilitas span {
  height: 50px;
  font-size: 12px;
  margin-top: 0px;
}

Maka hasilnya sebagai berikut :