Proyek CSS Mikro: Kartu Profil Karyawan Modern
Dalam proyek ini, kita akan membuat kartu profil yang sering ditemukan pada halaman "About Us" di sebuah perusahaan atau tim pengembang seperti di proyek SatuMedia.
1. Struktur HTML
Kita akan menggunakan elemen semantik untuk membungkus foto, nama, jabatan, dan ikon sosial media.
<div class="profile-card"> <div class< /span>="image-container"> <img src="https://via.placeholder.com/150" alt="Foto Profil"> div> <div class="profile-info"> <h2>Dika Antonih2> <p class="job-title">Backend Developerp> <p class="bio">Spesialis Laravel & PHP yang berfokus pada performa sistem dan integrasi AI.p> div> <div class="social-links"> <a href="#" class="social-icon">Ina> <a href="#" class="social-icon">Gha> <a href="#" class="social-icon">Twa> div>
div>
2. Styling CSS (Kombinasi Materi)
Kita akan menerapkan variabel CSS untuk memudahkan pengaturan warna dan menggunakan clamp() agar ukuran font tetap terjaga.
:root { --primary-blue: #004a99; --text-color: #333; --bg-card: #ffffff; --shadow-soft: 0 10px 20px rgba(0,0,0,0.1); --shadow-hover: 0 20px 40px rgba(0,0,0,0.2);
} .profile-card { width: 320px; background-color: var(-- bg-card); border-radius: 20px; padding: 30px; text-align: center; box-shadow: var(--shadow-soft); /* Transition untuk elev asi */ transition: transform 0.3s ease, box-shadow 0.3s ease; margin: 50px auto;
} /* 1. Animasi Hover pada Kartu */
.profile-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover);
} /* 2. Styling Foto Profil */
.image-container img { width: 120px; height: 120px; border-radius: 50%; /* Membuat lingkaran sempurna */ border: 5px solid var(--primary-blue); padding: 5px; object-fit: cover; transition: transform 0.5s ease;
} .profile-card:hover .image-container img { transform: rotate(360deg); /* Animasi putar saat hover */
} /* 3. Tipografi */
.p rofile-info h2 { font-size: clamp(1.2rem, 5vw, 1.5rem); margin: 15px 0 5px; color: var(--text-color);
} .job-title { color: var(--primary-blue); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem;
} .bio { font-size: 0.95rem; color: #666; line-height: 1.6; margin: 15px 0;
} /* 4. Sosial Media dengan Inline-Block */
.social-links { display: flex; justify-content: center; gap: 15px;
} .social-icon { display: inline-block; width: 35px; height: 35px; line-height: 35px; background-color: var(--primary-blue); color: white; text-decoration: none; border-radius: 50%; font-size: 0.8rem; transition: background-color 0.3s ease, transform 0.3s ease;
} .social-icon:hover { background-color: #2c3e50; transform: scale(1.2); /* Membesar saat ikon di-hover */
}
3. Penjelasan Fitur Utama
| Fitur | Properti yang Digunakan | Tujuan |
| Elevasi | box-shadow & translateY |
Membuat efek kartu "terangkat" saat didekati kursor. |
| Lingkaran | border-radius: 50% |
Mengubah elemen kotak menjadi lingkaran untuk foto dan ikon. |
| Irama Gerak | transition: all 0.3s ease |
Menghilangkan kesan kaku saat perubahan status hover terjadi. |
| Skala Font | clamp() |
Memastikan nama karyawan tetap terbaca di berbagai ukuran layar. |
Tips Pro untuk Penyempurnaan
-
Object-Fit: Selalu gunakan
object-fit: coverpada gambar profil agar jika foto yang diunggah karyawan memiliki rasio berbeda, foto tersebut tidak terlihat penyet atau tertarik. -
Filter: Anda b isa menambahkan
filter: grayscale(100%)pada foto awal dan mengubahnya menjadigrayscale(0%)saat hover untuk memberikan sentuhan artistik. -
Warna Dinamis: Gunakan CSS Variables untuk warna
--primary-blueagar Anda bisa dengan cepat menyesuaikan tema kartu ini dengan logo perusahaan klien Anda.
