چگونه ایجاد کنیم: کارت پروفایل

چگونه کارت پروفایل ایجاد کنیم

مرحله‌ی اول - اضافه‌ی 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">مدیرعامل و موسس، مثال</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 {
  شفافیت: 0.7;
}

آزمایش کنید