‘टीम परिचय’ पृष्ठ कैसे बनाएं

‘टीम परिचय’ पृष्ठ कैसे बनाएं

पहला कदम - HTML जोड़ें:

<div class="row">
  <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Bill Gates</h2>
        <p class="title">CEO & Founder</p>
        <p>मेरे बारे में कुछ वर्णन करने वाला लेकिन लोरेम इप्सम इप्सम लोरेम.</p>
        <p>example@example.com</p>
        <p><button class="button">संपर्क</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>एलन मस्क</h2>
        <p class="title">आर्ट डायरेक्टर</p>
        <p>मेरे बारे में कुछ वर्णन करने वाला लेकिन लोरेम इप्सम इप्सम लोरेम.</p>
        <p>example@example.com</p>
        <p><button class="button">संपर्क</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="विस्तार:100%">
      <div class="container">
        <h2>स्टीव जॉब्स</h2>
        <p class="title">डिजाइनर</p>
        <p>मेरे बारे में कुछ वर्णन करने वाला लेकिन लोरेम इप्सम इप्सम लोरेम.</p>
        <p>example@example.com</p>
        <p><button class="button">संपर्क</button></p>
      </div>
    </div>
  </div>
</div>

दूसरा कदम - CSS जोड़ें:

/* तीन स्तम्भों को साथ साथ रखना */
.column {
  फ्लोट: बाईं;
  विस्तार: 33.3%;
  मार्ग-नीचे: 16पिक्सल;
  पैडिंग: 0 8पिक्सल;
}
/* छोटे स्क्रीन पर, स्तम्भ को साथ साथ नहीं बल्कि ऊपर-नीचे दिखायें */
@media screen and (मैक्स-विस्तार: 650पिक्सल) {
  .column {
    विस्तार: 100%;
    डिस्प्ले: ब्लॉक;
  }
}
/* कार्ड इफेक्ट बनाने के लिए कुछ शेडो जोड़ें */
.card {
  शेडो: 0 4पिक्सल 8पिक्सल 0 रेगा(0, 0, 0, 0.2);
}
/* कंटेनर के अंदर कुछ दायां-बायां आरेखनियामिकी */
.container {
  पैडिंग: 0 16पिक्सल;
}
/* स्वचलन निष्क्रिय करना */
.container::after, .row::after {
  कंटेंट: "";
  साफी: दोनों ओर;
  डिस्प्ले: तालिका;
}
.title {
  रंग: ग्रे;
}
.button {
  बॉर्डर: नहीं;
  आउटलाइन: 0;
  डिस्प्ले: इनलाइन ब्लॉक;
  पैडिंग: 8पिक्सल;
  रंग: श्वेत;
  पृष्ठभूमि रंग: #000;
  लेबल जस्टिफाइज़: मध्य;
  कर्सर: पॉइंटर;
  विस्तार: 100%;
}
.button:hover {
  background-color: #555;
}

亲自试一试