कैसे बनाएं: परिचय पत्र

कैसे पर्सनल प्रोफाइल कार्ड बनाएं

पहला-चरण - 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>बिल गेट्स</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 रेगा(0, 0, 0, 0.2);
  अधिकतम-चौड़ाई: 300 पाइक्स;
  मार्ग: ऑटो;
  पाठ-आकार: केंद्रीय;
}
.title {
  रंग: ग्रे;
  फ़ॉन्ट-साइज़: 18 पाइक्स;
}
button {
  बॉर्डर: नहीं;
  आउटलाइन: 0;
  डिस्प्ले: इनलाइन-ब्लॉक;
  पैडिंग: 8 पाइक्स;
  रंग: श्वेत;
  पृष्ठ-रंग: #000;
  पाठ-आकार: केंद्रीय;
  कर्सर: पॉइंटर;
  चौड़ाई: 100%;
  फ़ॉन्ट-साइज़: 18 पाइक्स;
}
a {
  पाठ-डिकॉरेशन: नहीं;
  फ़ॉन्ट-साइज़: 22 पाइक्स;
  रंग: काला;
}
button:hover, a:hover {
  opacity: 0.7;
}

अपने आप प्रयास करें