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 :
