Cara Membuat Tampilan Kartu Proyek (Card Design) di Portofolio HTML & CSS Internal – Part 4
Pada Part 3, kita telah membuat halaman portofolio menjadi responsive. Di Part 4 ini, kita akan menambahkan kartu proyek (card design) agar tampilan portofolio terlihat lebih profesional dan menarik.
Apa Itu Card Design?
Card design adalah tampilan berbentuk kotak berisi gambar, judul, dan deskripsi singkat. Desain ini umum digunakan di website modern untuk menampilkan daftar proyek, produk, atau portofolio.
Langkah 1: Tambahkan CSS untuk Kartu Proyek
Buka file index.html dari Part 3. Cari bagian <style> di dalam <head> dan tambahkan kode berikut di bawah CSS sebelumnya:
/* Gaya Kartu Proyek */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card img {
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
}
.card h3 {
margin: 10px 0;
}
.card p {
font-size: 14px;
color: #555;
}
💡 Penjelasan:
.project-grid: Mengatur layout proyek menggunakan grid..card: Tampilan kartu dengan bayangan (shadow) agar terlihat menonjol.- Efek hover membuat kartu sedikit naik saat diarahkan kursor.
Langkah 2: Ubah Bagian Proyek di HTML
Cari bagian <section id="projects"> dan ubah isinya menjadi:
<section id="projects">
<h2>Proyek Saya</h2>
<div class="project-grid">
<div class="card">
<img src="proyek1.jpg" alt="Website Toko Online">
<h3>Website Toko Online</h3>
<p>Membangun website e-commerce sederhana menggunakan HTML & CSS.</p>
</div>
<div class="card">
<img src="proyek2.jpg" alt="Aplikasi Catatan Harian">
<h3>Aplikasi Catatan Harian</h3>
<p>Aplikasi berbasis web untuk mencatat kegiatan harian.</p>
</div>
<div class="card">
<img src="proyek3.jpg" alt="Desain Poster Digital">
<h3>Desain Poster Digital</h3>
<p>Membuat poster promosi dengan desain modern dan menarik.</p>
</div>
</div>
</section>
📌 Catatan: Ganti proyek1.jpg, proyek2.jpg, proyek3.jpg dengan gambar proyek Anda.
Dengan menambahkan kartu proyek, portofolio Anda terlihat lebih modern dan menarik. Di Part 5, kita akan menambahkan formulir kontak (contact form) agar pengunjung dapat menghubungi Anda langsung.