1 
2<div class="neon-card">
3  <img src="https://plus.unsplash.com/premium_photo-1764705649402-6fb857ddc74a?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Profile" />
4  <div class="neon-card-content">
5    <h3>Alex Rivera</h3>
6    <p>Cybersecurity Engineer | Night Coder</p>
7  </div>
8</div>          

 1 
 2.neon-card {
 3  width: 300px;
 4  max-width: 90%;
 5  background: rgba(15, 15, 30, 0.7);
 6  border: 2px solid #0ff;
 7  border-radius: 12px;
 8  overflow: hidden;
 9  box-shadow:
10    0 4px 12px rgba(0, 0, 0, 0.5),
11    0 0 0 0 transparent;
12  transition: all 0.4s ease;
13  position: relative;
14}
15 
16.neon-card:hover {
17  transform: translateY(-4px);
18  box-shadow:
19    0 0 10px #0ff,
20    0 0 20px #0ff,
21    0 0 30px rgba(0, 255, 255, 0.3);
22}
23 
24/* Gambar di dalam card */
25.neon-card img {
26  width: 100%;
27  height: 140px; /* Tinggi gambar dikontrol agar card tetap compact */
28  object-fit: cover;
29  display: block;
30}
31 
32/* Konten teks */
33.neon-card-content {
34  padding: 16px;
35  color: white;
36}
37 
38.neon-card h3 {
39  margin: 0 0 8px 0;
40  font-size: 18px;
41  font-weight: 700;
42  letter-spacing: 0.5px;
43}
44 
45.neon-card p {
46  margin: 0;
47  font-size: 14px;
48  color: rgba(255, 255, 255, 0.8);
49  line-height: 1.4;
50}
51 
52/* Animasi sapuan cahaya (opsional saat hover) */
53.neon-card::before {
54  content: '';
55  position: absolute;
56  top: 0;
57  left: -100%;
58  width: 100%;
59  height: 100%;
60  background: linear-gradient(
61    90deg,
62    transparent,
63    rgba(0, 255, 255, 0.2),
64    transparent
65  );
66  transition: left 0.9s ease;
67  pointer-events: none;
68  z-index: 1;
69}
70 
71.neon-card:hover::before {
72  left: 100%;
73}