Hai, sahabat kode! 👋 Pada kesempatan kali ini, kita akan membongkar kode HTML dan CSS yang membentuk sebuah kartu profil yang keren. Persiapkan diri dan mari kita mulai memahami setiap elemen!Hai, sahabat kode! 👋 Pada kesempatan kali ini, kita akan membongkar kode HTML dan CSS yang membentuk sebuah kartu profil yang keren. Persiapkan diri dan mari kita mulai memahami setiap elemen!

1.HTML Structure for a Stylish Profile Card.

HTML kita memiliki struktur dasar dari kartu profil yang kita buat. Mari kita bahas setiap elemen:

    <div class="card">
      <div class="banner">
        <img src="/aset/banner.jpeg" alt="Banner Image" />
      </div>
      <div class="display-picture">
        <img src="/aset/profile.jpeg" alt="Profile Picture" />
      </div>
      <div class="content">
        <h2>Kirasakti</h2>
        <div class="details">
          <div>
            <strong>Hobi:</strong>
            <!-- <p> your hobby </p> -->
          </div>
          <div>
            <strong>Status:</strong>
            <!-- <p> your status </p> -->
          </div>
        </div>
      </div>
    </div>

• .card: Ini adalah container utama untuk kartu profil kita. Menggunakan display grid untuk tata letaknya dan memiliki beberapa bagian seperti banner, display picture, dan content.

2. CSS for the Overall Card Design.

CSS ini bertanggung jawab atas desain keseluruhan kartu profil, memberikan bayangan dan batas yang indah:

.card {
  display: grid;
  grid-template-rows: 5rem 2rem 1fr;
  grid-template-columns: 1fr;
  gap: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  margin: 20px auto;
  background-color: #fff;
}

.banner {
  grid-row: 1 / 3;
  grid-column: 1 / -1;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

• .card: Mendefinisikan tata letak grid dan atribut desain keseluruhan untuk kartu profil.
• .banner: Menangani gambar latar belakang di bagian atas kartu.

3. Adding Style to Profile Details.

CSS ini fokus pada tata letak dan desain elemen-elemen yang menunjukkan identitas pengguna:

.display-picture {
  grid-row: 2 / 3;
  grid-column: 1 / -1;
  padding: 10px;
  text-align: center;
  z-index: 1;
}

.display-picture img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
}

.content {
  grid-row: 3 / 4;
  grid-column: 1 / -1;
  padding: 15px;
  text-align: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

• .display-picture: Mengatur tata letak dan gaya untuk bagian display picture.
• .content: Menangani tata letak dan desain untuk bagian konten, termasuk nama pengguna dan detail.

4. Further Styling and Details.

CSS ini menambahkan sentuhan terakhir pada elemen-elemen spesifik dan memberikan penjelasan pada detail tertentu:

h2 {
  padding: 10px;
  margin-bottom: 8px;
  color: #333;
}

p {
  color: #555;
  margin-bottom: 10px;
}

.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.details div {
  text-align: center;
}

.details strong {
  color: #333;
}

•  
• h2: Menentukan gaya untuk judul (nama pengguna).
• p: Menentukan gaya untuk teks paragraf (hobi dan status).
• .details: Mengatur tata letak grid untuk elemen-elemen detail.
• .details strong: Memberikan warna khusus pada elemen strong di dalam .details.

klik di sini untuk mendownload aset gambar

Selamat, sahabat kode! Kita telah melakukan perjalanan melalui pembuatan kartu profil yang tidak hanya fungsional, tetapi juga penuh gaya. Dengan kode HTML dan CSS kita, sekarang kartu profil kita bukan sekadar informasi, tapi juga karya seni digital.

Jangan lupa, kode yang kita tulis bukan hanya sekedar karakter dan angka. Ia adalah bahasa yang dapat merangkul identitas dan keunikan kita. Setiap garis kode adalah langkah kita dalam mengekspresikan diri di dunia maya.

Selama perjalanan ini, kita belajar tentang tata letak grid, desain responsif, dan sentuhan akhir yang memberikan karakter pada setiap elemen. Pergunakan pengetahuan ini untuk menciptakan desain yang lebih indah dan mengekspresikan kreativitas kita dengan bebas.

Teruslah belajar, bereksperimen, dan berbagi! Jangan ragu untuk menanyakan pertanyaan atau berbagi pengalaman Anda di komentar. Sampai jumpa di petualangan kode selanjutnya! 🚀💻