Πώς να δημιουργήσετε: Προφίλ κάρτας

Πώς να δημιουργήσετε ένα καρτέλι προφίλ

Πρώτη Βήμα - Προσθήκη 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="πλάτος:100%">
  <h1>Bill Gates</h1>
  <p class="title">Διευθυντής και Δημιουργός, Παράδειγμα</p>
  <p>Harvard University</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 4px 8px 0 rgba(0, 0, 0, 0.2);
  μέγιστο πλάτος: 300px;
  μαγνητισμός: αυτόματα;
  καθορισμός κειμένου: στο κέντρο;
}
.title {
  χρώμα: γκρι;
  πλάτος γραμματοσειράς: 18px;
}
button {
  κομμάτι: δεν υπάρχει;
  κλίμακα: 0;
  εμφάνιση: ενσωματωμένο;
  πλαίσιο: 8px;
  χρώμα: λευκό;
  χρώμα υποβάθρου: #000;
  καθορισμός κειμένου: στο κέντρο;
  ποντίκιο: σφής;
  πλάτος: 100%;
  πλάτος γραμματοσειράς: 18px;
}
a {
  διακόσμηση κειμένου: δεν υπάρχει;
  πλάτος γραμματοσειράς: 22px;
  χρώμα: μαύρο;
}
button:hover, a:hover {
  διαφάνεια: 0.7;
}

Δοκιμάστε το προσωπικά