Bagaimana untuk membuat: kartu profil

Bagaimana untuk membuat kad profil

Kesediaan 1 - Tambahkan HTML:

<!-- Tambahkan pustaka ikon -->
<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="lebar:100%">
  <h1>Bill Gates</h1>
  <p class="title">CEO & Pendiri, Contoh</p>
  <p>Universiti Harvard</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>Buat hubungan</button></p>
</div>

Kesediaan 2 - Tambahkan CSS:

.card {
  bayangan: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  lebar maksimum: 300px;
  jarak: automatik;
  pelantar teks: tengah;
}
.title {
  warna: abu-abu;
  saiz tulisan: 18px;
}
button {
  sempadan: tak ada;
  garis tebal: 0;
  pameran: dalaman blok;
  keping: 8px;
  warna: putih;
  warna latar belakang: #000;
  pelantar teks: tengah;
  kursor: pointer;
  lebar: 100%;
  saiz tulisan: 18px;
}
a {
  tarikan teks: tak ada;
  saiz tulisan: 22px;
  warna: hitam;
}
button:hover, a:hover {
  ketinggian: 0.7;
}

亲自试一试