Tutorial Membuat Component Card di HTML dengan CSS

Component card merupakan bagian yang tidak pernah absen disetiap web, misal seperti ecommerce untuk menampilkan produk-produk agar tampilan lebih menarik dibuatkannya card membentuk grid agar terlihat rapi.

Card sangat berfungsi sebagai wadah suatu konten yang berisi informasi tertentu. Pada card dibagi menjadi 3 bagian yakni card image, card content dan card footer. Tetapi card content dan footer bisa digabung menjadi satu.

Mari kita mulai untuk pembuatan card di HTML menggunakan CSS.

1. Buatlah sebuah kerangka html seperti biasanya seperti dibawah ini

2. Diantara tag body masukan kodingan dibawah ini, saya akan jelaskan disetiap barisnya

sehingga akan sesuai seperti dibawah ini

pada baris ke 7 : merupakan deklarasi css dengan class bernama card
pada baris ke 8 : merupakan sebuah gambar yang disebut dengan card image dimana menggunakan style inline dengan property width 100%, artinya gambar dengan lebar full
pada baris ke 9 : merupakan deklarasi css dengan class bernama container, container ini berisi dengan card content didalamnya
baris ke 10 dan 11 merupakan contentnya di dalam card content tersebut

3. Selanjutnya kita tambahkan CSS dengan menggunakan style sebagai contoh, style tersebut kita letakan sebelum tag </head> yang berisi sebagai berikut

sehingga pada HTML kita saat ini seperti

Demikian tutorial membuat component card dengan css, semoga bermanfaat.