如何创建：个人资料卡

چگونه کارت شناسایی شخصی ایجاد کنید

ابتدا - HTML اضافه کنید:

<!-- کتابخانه‌ی آیکون اضافه کنید -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
  <img src="img.jpg" alt="John" style="width:100%">
  <h1>بیل گیتس</h1>
  <p class="title">CEO و بنیان‌گذار, مثال</p>
  <p>دانشگاه هاروارد</p>
  <a href="#"><i class="fa fa-dribbble"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-linkedin"></i></a>
  <a href="#"><i class="fa fa-facebook"></i></a>
  <p><button>تماس</button></p>
</div>

دوماً - CSS اضافه کنید:

.card {
  سایه: 0 4 پیکسل 8 پیکسل 0 rgba(0, 0, 0, 0.2);
  بیشترین عرض: 300 پیکسل;
  محدودیت خودکار;
  جسارت متنی: وسط;
}
.title {
  رنگ: خاکستری;
  اندازه‌ی فونت: 18 پیکسل;
}
button {
  کنده: هیچ;
  کонтور: 0;
  نمایش: بلاک در خط;
  پدینگ: 8 پیکسل;
  رنگ: سفید;
  رنگ پس‌زمینه: #000;
  جسارت متنی: وسط;
  نشانگر: اشاره‌گر;
  عرض: 100%;
  اندازه‌ی فونت: 18 پیکسل;
}
a {
  زیرخط: هیچ;
  اندازه‌ی فونت: 22 پیکسل;
  رنگ: بلک;
}
button:hover, a:hover {
  opacity: 0.7;
}

亲自试一试