Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS

CSS : Membuat Kartu

Posting Komentar

Kartu (card) adalah elemen penting dalam desain web yang digunakan untuk menampilkan informasi secara ringkas dan menarik, seperti gambar, judul, dan deskripsi. Dengan CSS, kita dapat membuat kartu yang rapi dan seragam menggunakan pengaturan warna, bayangan, ukuran, serta tata letak, dll.
Pada Kesempatan kali ini, kita akan mempelajari cara membuat kartu dengan HTML dan CSS.

Struktur Folder

.
└── membuat_kartu/
    ├── card.html
    └── assets/
        └── gambar/

Membuat File HTML

Berikut adalah isi dari file card.html


<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Membuat Beberapa Card</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 20px;
    }

    .container {
      display: flex;
      flex-wrap: wrap; 
      justify-content: center;
      gap: 20px; 
    }

    .card {
      background-color: white;
      width: 250px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .card .image-container {
      width: 100%;
      height: 160px;
      background-color: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .card .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .card h3 {
      margin: 15px 0 5px;
      text-align: center;
    }

    .card p {
      color: #555;
      padding: 0 15px;
      font-size: 14px;
      text-align: center;
      flex-grow: 1;
    }

    .btn {
      display: inline-block;
      background-color: #007bff;
      color: white;
      padding: 8px 15px;
      margin: 15px auto 20px;
      border-radius: 5px;
      text-decoration: none;
    }

    .btn:hover {
      background-color: #0056b3;
    }

    @media (max-width: 1100px) {
      .card {
        width: 45%;
      }
    }

    @media (max-width: 600px) {
      .card {
        width: 90%;
      }
    }

  </style>
</head>
<body>

  <div class="container">
    <div class="card">
      <div class="image-container">
        <img src="alamat-gambar" alt="Gambar 1">
      </div>
      <h3>Nama Produk</h3>
      <p>Deskripsi Produk</p>
      <a href="#" class="btn">Detail</a>
    </div>
  </div>

</body>
</html>

Setelah itu lihat tampilan dari kode yang telah kita buat.

Tugas

Berikutnya silahkan mengeksplorasi dari kode yang telah kita buat.

  • Tambahkan jumlah card hingga menjadi enam atau lebih.
  • Beri gambar pada masing-masing card.
  • Tuliskan nama dari kartu yang telah dibuat.
  • Tambahkan deskripsi singkat untuk masing-masing kartu

Posting Komentar untuk "CSS : Membuat Kartu"