“দল পরিবেশনা” পাতা কিভাবে তৈরি করবেন:

“দল পরিবেশনা” পাতা কিভাবে তৈরি করবেন

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<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="প্রস্থান:১০০%">
      <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>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করো:

/* তিনটি সাথে-সাথে স্তম্ভ */
.column {
  ফ্লোট: বাম;
  প্রস্থান: ৩৩.৩%;
  মার্গ-বেস: ১৬পি;
  প্যাডিং: ০ ৮পি;
}
/* ছোট স্ক্রিনে, স্তম্ভগুলোকে একসাথে নয়, উপর-নীচে দিখান */
@media screen and (max-width: ৬৫০পি) {
  .column {
    প্রস্থান: ১০০%;
    ডিসপ্লে: ব্লক;
  }
}
/* কার্ড ইফেক্ট তৈরি করতে কিছু শ্যাডো যোগ করো */
.card {
  বক্স-শ্যাডো: ০ ৪পি ৮পি ০ রেডিয়াল-অ্যালবা (০, ০, ০, ০.২);
}
/* কনটেনারের অভ্যন্তরীণ বাম-ডান ইনডেন্টি জোগাও */
.container {
  প্যাডিং: ০ ১৬পি;
}
/* ফ্লোটিং নিষ্ক্রিয় করো */
.container::after, .row::after {
  কনটেন্ট: "";
  ক্লিয়ার: মধ্য;
  ডিসপ্লে: টেবিল;
}
.title {
  কালার: গ্রে;
}
.button {
  বর্তন: না;
  আউটলাইন: ০;
  ডিসপ্লে: ইনলাইন-ব্লক;
  প্যাডিং: ৮পি;
  কালার: সাদা;
  ব্যাকগ্রাউন্ড-কালার: #000;
  টেক্সট-অ্যালাইন: মধ্য;
  কার্সর: পুংছিল;
  প্রস্থান: ১০০%;
}
.button:hover {
  background-color: #555;
}

亲自试一试