Antara Muka Kad Profil Peribadi

Ini ialah projek mesra pemula yang ringkas untuk membantu anda mempelajari HTML dan CSS dengan mencipta kad profil bergaya yang memaparkan foto, nama, peranan dan pautan media sosial.

---

? Gambaran Keseluruhan Projek

Projek ini akan mengajar anda cara:

• Struktur dokumen HTML asas.
• Gunakan CSS untuk menggayakan kandungan anda.
• Buat reka letak kad ringkas dengan bucu bulat dan bayang-bayang.
• Tambah dan gayakan imej, teks dan pautan.
• Gunakan Flexbox untuk menyusun elemen.

---

? Struktur Fail

Projek anda akan mempunyai dua fail:

personal-profile_card/
│-- index.html      ← The HTML structure
└-- styles.css      ← The CSS styling

---

? Fail HTML (index.html)

Fail ini mengandungi struktur (atau rangka) halaman web. Begini rupanya:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Profile Card</title>
  <link rel="stylesheet" href="styles.css">


  <div>



<h3>
  
  
  <strong>Explanation of Key Elements</strong>
</h3>

<ol>
<li>
<p><strong>Profile Card Container</strong> (</p>
<div>
<br>
A box that holds the image, name, role, and social links.
<li><p><strong>Image Tag</strong> (<img  alt="Antara Muka Kad Profil Peribadi" >)<br><br>
Displays the profile picture.</p></li>
<li>
<p><strong>Headings and Paragraph</strong>  </p>

<ul>
<li>
<h2> for the user's name.
</h2>
</li>
<li>
<p> for the user's role.</p>
</li>
</ul>
</li>
<li><p><strong>Links</strong><br><br>
<a> tags for social media links.</a></p></li>



<hr>

<h2>
  
  
  ? <strong>CSS File (styles.css)</strong>
</h2>

<p>This file adds styling to your HTML. Here's what it looks like:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.profile-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.profile-name {
  font-size: 1.5em;
  margin: 10px 0 5px;
  color: #333;
}

.profile-role {
  font-size: 1em;
  color: #777;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-link {
  text-decoration: none;
  color: #008cba;
  font-weight: bold;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: #005f73;
}

Penjelasan Gaya Utama

1. Latar Belakang dan Pemusatan:
   
   Badan memusatkan kad profil menggunakan Flexbox dan menetapkan warna latar belakang biru muda.

2. Penggayaan Kad Profil:

   • warna latar belakang: Menetapkan latar belakang putih.
   • jejari sempadan: Membulat sudut.
   • box-shadow: Menambahkan bayangan halus untuk kedalaman.

3. Penggayaan Imej:

   • lebar dan tinggi: Tetapkan saiz imej.
   • jejari sempadan: 50%: Menjadikan imej bulat.

4. Penggayaan Teks:
   
   Gayakan nama dan peranan dengan saiz dan warna fon yang berbeza.

5. Pautan Sosial:

   • Disusun dengan Flexbox untuk jarak.
   • Kesan tuding untuk menukar warna pautan.

---

? Cara Menggunakan Projek Ini

1. Muat turun Fail:
   
   Muat turun atau salin fail index.html dan styles.css.

2. Buka Fail HTML:
   
   Klik dua kali fail index.html untuk membukanya dalam penyemak imbas anda.

3. Edit Kandungan:

   • Tukar nama dan peranan.
   • Ganti URL imej dengan gambar profil anda sendiri.
   • Kemas kini pautan media sosial.

4. Percubaan dengan CSS:
   
   Cuba tukar warna, fon dan saiz dalam styles.css untuk melihat cara ia mempengaruhi reka bentuk!

---

? Apa yang Anda Akan Pelajari

• Cara membuat reka letak HTML.
• Cara menggayakan elemen dengan CSS.
• Cara menggunakan Flexbox untuk penjajaran.
• Cara menambah kesan tuding untuk interaktiviti.

---

? Langkah Seterusnya

• Tambah Lebih Banyak Ciri: Sertakan bahagian bio atau butang kenalan.
• Jadikan Ia Responsif: Ketahui cara menjadikan kad kelihatan bagus pada peranti mudah alih.
• Tambah Animasi: Gunakan animasi CSS untuk menjadikan kad lebih interaktif.

---

Selamat Pengekodan! ??