Home Coding 10 Card UI HTML CSS untuk Landing Page yang Responsif & Modern

10 Card UI HTML CSS untuk Landing Page yang Responsif & Modern

Farhan Hidayat 8 April 2026 23 min read

Card UI untuk landing page bukan cuma soal tampilan yang “keren”. Lebih dari itu, elemen ini membantu menyusun informasi agar lebih rapi dan mudah dipahami. Nah, di artikel ini kamu akan menemukan berbagai contoh card UI HTML CSS yang responsif, modern, dan bisa langsung kamu terapkan tanpa ribet.

Kenapa Card UI Penting untuk Landing Page?

Pertama, banyak landing page terlihat kurang menarik karena informasi ditampilkan terlalu panjang dan tidak terstruktur. Akibatnya, user cepat bosan lalu langsung keluar.

Sebaliknya, dengan card UI, kamu bisa membagi informasi menjadi bagian kecil yang lebih nyaman dibaca. Selain itu, tampilan juga jadi lebih profesional. Bahkan, user bisa langsung fokus ke poin penting seperti produk, layanan, atau CTA.

Ciri-Ciri Card UI yang Efektif untuk Landing Page

Supaya hasilnya maksimal, card UI tidak boleh asal dibuat. Ada beberapa hal penting yang perlu kamu perhatikan.

Also Read: 7 Animasi Teks CSS Otomatis yang Bikin Website Lebih Hidup

Pertama, desain harus simpel tapi tetap menarik. Jangan terlalu ramai karena justru bikin bingung.
Kedua, pastikan responsif di semua device. Jadi, tampilan tetap rapi baik di desktop maupun mobile.
Selain itu, gunakan CTA yang jelas seperti “Buy Now” atau “Learn More”.
Terakhir, manfaatkan warna dan shadow secukupnya agar terlihat modern tanpa berlebihan.

10 Contoh Card UI HTML CSS untuk Landing Page

Berikut beberapa jenis card UI yang bisa kamu gunakan sesuai kebutuhan:

1. Card Produk

Also Read: Cara Membuat Loading Spinner CSS Simple & Responsif

cocok untuk menampilkan produk lengkap dengan harga dan tombol beli.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
    <div class="card">
      <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9" alt="Product Image">
      
      <div class="card-content">
        <h3>Smart Watch</h3>
        <p>Jam pintar modern dengan fitur kesehatan lengkap.</p>
        
        <div class="price">Rp 1.250.000</div>
        
        <button>Buy Now</button>
      </div>
    </div>
  </div>

</body>
</html>

CSS

Also Read: 5 Template Footer Website Profesional Gratis & Siap Digunakan

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #f4f6f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Container */
.container {
  padding: 20px;
}

/* Card */
.card {
  width: 300px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Image */
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Content */
.card-content {
  padding: 20px;
}

.card-content h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.card-content p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

/* Price */
.price {
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 15px;
}

/* Button */
button {
  width: 100%;
  padding: 10px;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #0056b3;
}

2. Card Profile

biasanya dipakai untuk tim atau personal branding.

HTML

Also Read: Cara Membuat Toggle Dark Mode HTML CSS JS yang Responsif

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile Card Premium</title>
  <link rel="stylesheet" href="style.css">

  <!-- Icon CDN -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
  <div class="profile-card">

    <!-- Badge Verified -->
    <div class="badge">
      ✔
    </div>

    <!-- Profile Image -->
    <div class="img-box">
      <img src="https://i.pravatar.cc/150?img=12" alt="Profile">
    </div>

    <!-- Info -->
    <h3>Dayat Dev</h3>
    <p class="role">Frontend Developer</p>

    <!-- Stats -->
    <div class="stats">
      <div>
        <h4>2.4K</h4>
        <span>Followers</span>
      </div>
      <div>
        <h4>120</h4>
        <span>Projects</span>
      </div>
      <div>
        <h4>5.8K</h4>
        <span>Likes</span>
      </div>
    </div>

    <!-- Social Media -->
    <div class="social">
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-linkedin"></i></a>
      <a href="#"><i class="fab fa-github"></i></a>
    </div>

    <!-- Button -->
    <button>View Profile</button>

  </div>
</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Gradient Background */
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Container */
.container {
  padding: 20px;
}

/* Card */
.profile-card {
  width: 300px;
  background: #fff;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  transition: 0.4s;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.profile-card:hover {
  transform: translateY(-10px) scale(1.02);
}

/* Badge */
.badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #00c853;
  color: #fff;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 50px;
}

/* Image */
.img-box {
  margin-bottom: 15px;
}

.img-box img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: 0.3s;
}

.profile-card:hover img {
  transform: scale(1.1);
}

/* Text */
.profile-card h3 {
  font-size: 20px;
  margin-bottom: 5px;
}

.role {
  color: #777;
  font-size: 14px;
  margin-bottom: 15px;
}

/* Stats */
.stats {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.stats h4 {
  font-size: 16px;
}

.stats span {
  font-size: 12px;
  color: #888;
}

/* Social */
.social {
  margin-bottom: 20px;
}

.social a {
  margin: 0 8px;
  color: #555;
  font-size: 18px;
  transition: 0.3s;
}

.social a:hover {
  color: #667eea;
}

/* Button */
button {
  width: 100%;
  padding: 10px;
  border: none;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  opacity: 0.9;
}

3. Card Testimoni

membantu meningkatkan kepercayaan user.

Also Read: 10 Animasi Hover CSS yang Bikin Website Lebih Hidup

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testimonial Card</title>
  <link rel="stylesheet" href="style.css">

  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body>

<div class="container">

  <div class="testimonial-card">

    <!-- Quote Icon -->
    <div class="quote">
      <i class="fas fa-quote-left"></i>
    </div>

    <!-- Testimonial Text -->
    <p class="text">
      “Sejak pakai UI ini, landing page saya jadi jauh lebih profesional. 
      Conversion naik hampir 2x lipat. Desainnya clean dan mudah dipakai!”
    </p>

    <!-- User Info -->
    <div class="user">
      <img src="https://i.pravatar.cc/100?img=5" alt="User">
      <div>
        <h4>Yunita Sari</h4>
        <span>Digital Marketer</span>
      </div>
    </div>

    <!-- Rating -->
    <div class="rating">
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
    </div>

  </div>

</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Background modern */
  background: linear-gradient(135deg, #1e3c72, #2a5298);
}

/* Container */
.container {
  padding: 20px;
}

/* Card */
.testimonial-card {
  width: 320px;
  background: #fff;
  border-radius: 20px;
  padding: 25px;
  position: relative;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  transition: 0.4s;
}

.testimonial-card:hover {
  transform: translateY(-10px) scale(1.02);
}

/* Quote Icon */
.quote {
  position: absolute;
  top: -15px;
  left: 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  font-size: 14px;
}

/* Text */
.text {
  font-size: 14px;
  color: #555;
  margin: 20px 0;
  line-height: 1.6;
}

/* User */
.user {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.user img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 10px;
}

.user h4 {
  font-size: 14px;
}

.user span {
  font-size: 12px;
  color: #888;
}

/* Rating */
.rating {
  margin-top: 15px;
  color: #fbc02d;
}

.rating i {
  margin-right: 3px;
}

4. Card Blog

menampilkan preview artikel agar lebih menarik.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">

  <div class="blog-card">

    <!-- Thumbnail -->
    <div class="image">
      <img src="https://picsum.photos/400/250" alt="Blog Image">
      <span class="tag">UI Design</span>
    </div>

    <!-- Content -->
    <div class="content">
      <h3>10 Card UI HTML CSS untuk Landing Page yang Modern</h3>
      <p>
        Kumpulan card UI terbaik yang bisa kamu pakai untuk bikin landing page lebih profesional dan menarik.
      </p>

      <!-- Info -->
      <div class="info">
        <span>By Dayat</span>
        <span>•</span>
        <span>5 Menit Baca</span>
      </div>
    </div>

  </div>

</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #f4f6f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Container */
.container {
  padding: 20px;
}

/* Card */
.blog-card {
  width: 320px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: 0.3s;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Image */
.image {
  position: relative;
}

.image img {
  width: 100%;
  display: block;
}

/* Tag */
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #007bff;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 20px;
}

/* Content */
.content {
  padding: 15px;
}

.content h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.content p {
  font-size: 13px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* Info */
.info {
  font-size: 12px;
  color: #888;
  display: flex;
  gap: 5px;
}

5. Card Pricing

cocok untuk paket layanan atau subscription.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Premium</title>
  <link rel="stylesheet" href="style.css">

  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body>

<div class="pricing">

  <!-- CARD 1 -->
  <div class="card dark">
    <h3>Bello Star</h3>
    <p class="old-price">Rp 320.000</p>
    <h1>Rp 260.000</h1>
    <p class="desc">Paket Star cocok digunakan untuk kebutuhan 1 website.</p>

    <button>Beli Sekarang</button>

    <ul>
      <li><i class="fas fa-check"></i> Penggunaan Lifetime</li>
      <li><i class="fas fa-check"></i> Free Update 1 Tahun</li>
      <li><i class="fas fa-check"></i> Free Support 1 Tahun</li>
      <li><i class="fas fa-check"></i> Tersedia Video Tutorial</li>
      <li><i class="fas fa-check"></i> Tersedia Group Support</li>
    </ul>
  </div>

  <!-- CARD 2 (HIGHLIGHT) -->
  <div class="card highlight">

    <div class="badge">Extra Hemat Hingga 30%</div>

    <h3>Bello Pro</h3>
    <p class="old-price">Rp 960.000</p>
    <h1>Rp 546.000</h1>
    <p class="desc">Paket Pro cocok digunakan untuk kebutuhan 3 website.</p>

    <button class="btn-light">Beli Sekarang</button>

    <ul>
      <li><i class="fas fa-check"></i> Penggunaan Lifetime</li>
      <li><i class="fas fa-check"></i> Free Update 1 Tahun</li>
      <li><i class="fas fa-check"></i> Free Support 1 Tahun</li>
      <li><i class="fas fa-check"></i> Tersedia Video Tutorial</li>
      <li><i class="fas fa-check"></i> Tersedia Group Support</li>
    </ul>
  </div>

  <!-- CARD 3 -->
  <div class="card dark">
    <h3>Bello Max</h3>
    <p class="old-price">Rp 3.200.000</p>
    <h1>Rp 1.820.000</h1>
    <p class="desc">Paket Max cocok digunakan untuk kebutuhan 10 website.</p>

    <button>Beli Sekarang</button>

    <ul>
      <li><i class="fas fa-check"></i> Penggunaan Lifetime</li>
      <li><i class="fas fa-check"></i> Free Update 1 Tahun</li>
      <li><i class="fas fa-check"></i> Free Support 1 Tahun</li>
      <li><i class="fas fa-check"></i> Tersedia Video Tutorial</li>
      <li><i class="fas fa-check"></i> Tersedia Group Support</li>
    </ul>
  </div>

</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #1f2430;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Layout */
.pricing {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Card Base */
.card {
  width: 280px;
  padding: 25px;
  border-radius: 15px;
  position: relative;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-8px);
}

/* Dark Card */
.dark {
  background: #2b3142;
  color: #fff;
  border: 2px solid #ff5a5f;
}

/* Highlight Card */
.highlight {
  background: #ff5a5f;
  color: #fff;
  transform: scale(1.05);
}

/* Badge */
.badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #3ecf8e;
  color: #fff;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 12px;
}

/* Text */
h3 {
  text-align: center;
  margin-bottom: 10px;
}

.old-price {
  text-decoration: line-through;
  text-align: center;
  opacity: 0.7;
}

h1 {
  text-align: center;
  margin: 10px 0;
}

.desc {
  text-align: center;
  font-size: 14px;
  margin-bottom: 20px;
}

/* Button */
button {
  width: 100%;
  padding: 12px;
  border: none;
  background: #ff5a5f;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 20px;
  font-weight: bold;
}

.btn-light {
  background: #fff;
  color: #ff5a5f;
}

/* List */
ul {
  list-style: none;
}

ul li {
  margin: 10px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
}

ul i {
  background: #3ecf8e;
  color: #fff;
  border-radius: 6px;
  padding: 5px;
  margin-right: 10px;
  font-size: 12px;
}

6. Card Statistik

menampilkan data seperti jumlah user atau visitor.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Statistik Card</title>
  <link rel="stylesheet" href="style.css">

  <!-- Icon -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body>

<div class="stats-container">

  <!-- Card 1 -->
  <div class="stat-card">
    <div class="icon blue">
      <i class="fas fa-users"></i>
    </div>
    <h2>12.5K</h2>
    <p>Users</p>
    <span class="growth up">↑ 12%</span>
  </div>

  <!-- Card 2 -->
  <div class="stat-card">
    <div class="icon green">
      <i class="fas fa-chart-line"></i>
    </div>
    <h2>8.2K</h2>
    <p>Revenue</p>
    <span class="growth up">↑ 8%</span>
  </div>

  <!-- Card 3 -->
  <div class="stat-card">
    <div class="icon orange">
      <i class="fas fa-shopping-cart"></i>
    </div>
    <h2>3.1K</h2>
    <p>Orders</p>
    <span class="growth down">↓ 3%</span>
  </div>

  <!-- Card 4 -->
  <div class="stat-card">
    <div class="icon purple">
      <i class="fas fa-star"></i>
    </div>
    <h2>4.9</h2>
    <p>Rating</p>
    <span class="growth up">↑ 5%</span>
  </div>

</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

/* Container */
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  width: 90%;
  max-width: 1000px;
}

/* Card */
.stat-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 15px;
  padding: 20px;
  color: #fff;
  text-align: center;
  transition: 0.3s;
  border: 1px solid rgba(255,255,255,0.1);
}

.stat-card:hover {
  transform: translateY(-8px);
}

/* Icon */
.icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon i {
  font-size: 20px;
}

/* Icon Colors */
.blue { background: #4facfe; }
.green { background: #43e97b; }
.orange { background: #fa709a; }
.purple { background: #a18cd1; }

/* Text */
.stat-card h2 {
  font-size: 26px;
  margin: 10px 0;
}

.stat-card p {
  font-size: 14px;
  color: #ccc;
}

/* Growth */
.growth {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
}

.up {
  background: rgba(67, 233, 123, 0.2);
  color: #43e97b;
}

.down {
  background: rgba(255, 82, 82, 0.2);
  color: #ff5252;
}

7. Card Service

menjelaskan layanan secara singkat.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Service Card</title>
  <link rel="stylesheet" href="style.css">

  <!-- Icon -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body>

<div class="service-container">

  <!-- Card 1 -->
  <div class="service-card">
    <div class="icon">
      <i class="fas fa-code"></i>
    </div>
    <h3>Web Development</h3>
    <p>Membangun website modern, cepat, dan responsive sesuai kebutuhan bisnis kamu.</p>
    <a href="#">Learn More →</a>
  </div>

  <!-- Card 2 -->
  <div class="service-card">
    <div class="icon">
      <i class="fas fa-paint-brush"></i>
    </div>
    <h3>UI/UX Design</h3>
    <p>Desain interface yang clean, profesional, dan meningkatkan pengalaman pengguna.</p>
    <a href="#">Learn More →</a>
  </div>

  <!-- Card 3 -->
  <div class="service-card">
    <div class="icon">
      <i class="fas fa-bullhorn"></i>
    </div>
    <h3>Digital Marketing</h3>
    <p>Meningkatkan traffic dan conversion dengan strategi marketing yang tepat.</p>
    <a href="#">Learn More →</a>
  </div>

</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container */
.service-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  width: 90%;
  max-width: 1000px;
}

/* Card */
.service-card {
  background: #111827;
  padding: 25px;
  border-radius: 16px;
  text-align: left;
  position: relative;
  color: #fff;
  transition: 0.4s;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Gradient Border Effect */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hover */
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Icon */
.icon {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.icon i {
  font-size: 20px;
  color: #fff;
}

/* Text */
.service-card h3 {
  margin-bottom: 10px;
}

.service-card p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* Link */
.service-card a {
  text-decoration: none;
  color: #667eea;
  font-size: 14px;
  transition: 0.3s;
}

.service-card a:hover {
  color: #fff;
}

8. Card Portfolio

untuk showcase hasil kerja.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="portfolio-container">

  <!-- Card 1 -->
  <div class="portfolio-card">
    <img src="https://picsum.photos/400/300?1" alt="Project">
    
    <div class="overlay">
      <h3>Landing Page SaaS</h3>
      <p>UI Design</p>
      <a href="#">View Project</a>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="portfolio-card">
    <img src="https://picsum.photos/400/300?2" alt="Project">
    
    <div class="overlay">
      <h3>Dashboard Admin</h3>
      <p>Web App</p>
      <a href="#">View Project</a>
    </div>
  </div>

  <!-- Card 3 -->
  <div class="portfolio-card">
    <img src="https://picsum.photos/400/300?3" alt="Project">
    
    <div class="overlay">
      <h3>E-commerce UI</h3>
      <p>Frontend</p>
      <a href="#">View Project</a>
    </div>
  </div>

</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #141e30, #243b55);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container */
.portfolio-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 90%;
  max-width: 1000px;
}

/* Card */
.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  cursor: pointer;
}

.portfolio-card img {
  width: 100%;
  display: block;
  transition: 0.4s;
}

/* Overlay */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.4s;
  text-align: center;
}

/* Hover Effect */
.portfolio-card:hover img {
  transform: scale(1.1);
}

.portfolio-card:hover .overlay {
  opacity: 1;
}

/* Text */
.overlay h3 {
  margin-bottom: 5px;
}

.overlay p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 10px;
}

/* Button */
.overlay a {
  text-decoration: none;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 8px 15px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  transition: 0.3s;
}

.overlay a:hover {
  opacity: 0.8;
}

9. Card CTA

fokus pada aksi seperti download atau daftar.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CTA Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="cta-container">

  <div class="cta-card">
    
    <h2>Siap Naikin Level Website Kamu?</h2>
    <p>
      Bangun website profesional yang cepat, modern, dan siap menghasilkan.
      Mulai sekarang, sebelum kompetitor kamu duluan.
    </p>

    <div class="cta-buttons">
      <a href="#" class="btn-primary">Mulai Sekarang</a>
      <a href="#" class="btn-secondary">Lihat Portfolio</a>
    </div>

  </div>

</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container */
.cta-container {
  width: 90%;
  max-width: 900px;
}

/* Card */
.cta-card {
  position: relative;
  background: #111827;
  padding: 50px 30px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

/* Glow Effect */
.cta-card::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(102,126,234,0.4), transparent);
  top: -100px;
  left: -100px;
}

.cta-card::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(118,75,162,0.4), transparent);
  bottom: -100px;
  right: -100px;
}

/* Text */
.cta-card h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.cta-card p {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 25px;
  line-height: 1.6;
}

/* Buttons */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Primary */
.btn-primary {
  text-decoration: none;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 12px 25px;
  border-radius: 10px;
  color: #fff;
  font-weight: 500;
  transition: 0.3s;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(102,126,234,0.4);
}

/* Secondary */
.btn-secondary {
  text-decoration: none;
  border: 1px solid #667eea;
  padding: 12px 25px;
  border-radius: 10px;
  color: #667eea;
  transition: 0.3s;
}

.btn-secondary:hover {
  background: #667eea;
  color: #fff;
}

10. Card Minimalist

desain sederhana tapi tetap elegan.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minimalist Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="minimal-container">

  <!-- Card 1 -->
  <div class="minimal-card">
    <span class="tag">Design</span>
    <h3>Clean UI System</h3>
    <p>Membangun sistem desain yang konsisten dan scalable untuk produk digital modern.</p>
    <a href="#">Explore →</a>
  </div>

  <!-- Card 2 -->
  <div class="minimal-card">
    <span class="tag">Development</span>
    <h3>Modern Web App</h3>
    <p>Aplikasi web cepat, ringan, dan responsif menggunakan teknologi terbaru.</p>
    <a href="#">Explore →</a>
  </div>

  <!-- Card 3 -->
  <div class="minimal-card">
    <span class="tag">Strategy</span>
    <h3>Digital Growth</h3>
    <p>Strategi digital untuk meningkatkan performa bisnis secara berkelanjutan.</p>
    <a href="#">Explore →</a>
  </div>

</div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  min-height: 100vh;
  background: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container */
.minimal-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  width: 90%;
  max-width: 1000px;
}

/* Card */
.minimal-card {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  transition: 0.3s;
  position: relative;
}

/* Accent Line */
.minimal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Hover */
.minimal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* Tag */
.tag {
  font-size: 12px;
  color: #667eea;
  font-weight: 500;
}

/* Title */
.minimal-card h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #111827;
}

/* Text */
.minimal-card p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Link */
.minimal-card a {
  text-decoration: none;
  font-size: 14px;
  color: #667eea;
  transition: 0.3s;
}

.minimal-card a:hover {
  opacity: 0.7;
}

Dengan kombinasi yang tepat, landing page kamu bisa terlihat lebih hidup dan tidak monoton.

Cara Membuat Card UI HTML CSS yang Responsif

Sekarang, kita masuk ke bagian teknis. Tenang, sebenarnya tidak serumit yang dibayangkan.

Pertama, gunakan Flexbox atau Grid untuk mengatur layout. Keduanya sangat membantu dalam membuat tampilan rapi.
Kemudian, atur breakpoint agar card bisa menyesuaikan ukuran layar.
Selain itu, tambahkan efek hover untuk meningkatkan interaksi.
Terakhir, perhatikan spacing dan ukuran elemen supaya tetap nyaman dilihat.

Kesalahan yang Sering Terjadi Saat Membuat Card UI

Walaupun terlihat simpel, masih banyak yang melakukan kesalahan saat membuat card UI untuk landing page.

Misalnya, terlalu banyak elemen dalam satu card. Akibatnya, desain jadi berantakan.
Selain itu, banyak yang lupa membuat versi mobile. Padahal ini sangat penting.
Kemudian, CTA sering dibuat kurang jelas sehingga user bingung harus klik apa.
Terakhir, penggunaan warna yang tidak konsisten juga bisa merusak tampilan.

Tips Biar Card UI Lebih Maksimal

Supaya hasilnya lebih maksimal, kamu bisa terapkan beberapa tips berikut.

Pertama, gunakan shadow dan border-radius secukupnya agar terlihat modern.
Kedua, jaga konsistensi warna dan font di seluruh card.
Selain itu, tambahkan animasi ringan seperti hover effect untuk meningkatkan UX.
Dan yang paling penting, selalu utamakan kenyamanan user, bukan sekadar tampilan.

Kesimpulan

Card UI untuk landing page adalah solusi praktis untuk membuat tampilan website lebih rapi, menarik, dan profesional. Dengan desain yang responsif serta struktur yang jelas, kamu bisa meningkatkan pengalaman user sekaligus peluang konversi. Jadi, tinggal pilih jenis card yang sesuai, lalu sesuaikan dengan kebutuhan website kamu.

Kalau kamu ingin eksplorasi lebih jauh, kamu bisa cek beberapa referensi berikut:
– Inspirasi desain di

Dribbble

– Komponen siap pakai di

Flowbite

– Dokumentasi CSS di

MDN Web Docs

– Jasa Artikel SEO Friendly & Tema WordPress Premium di

ArtikelPro

Tagged with: