CSS দিয়ে রেসপন্সিভ প্রাইসিং টেবিল তৈরি

ফ্লোট এবং মিডিয়া কোয়েরি ব্যবহার করে রেসপন্সিভ প্রাইসিং টেবিল তৈরি করা যায় যা মোবাইলে স্ট্যাক হয়ে যায়।

উদাহরণ: রেসপন্সিভ প্রাইসিং টেবিল

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { box-sizing: border-box; }
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  .compareFields {
    float: left;
    width: 50%;
    padding: 8px;
  }
  li { font-size: 18px; font-weight: 500; }
  .pricing {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    transition: 0.3s;
  }
  .pricing:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); }
  .pricing .header { background-color: rgb(52, 31, 129); color: white; font-size: 25px; }
  .pricing li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; }
  .button {
    border: none; color: white; padding: 10px 25px; text-align: center;
    text-decoration: none; font-size: 18px;
  }
  @media only screen and (max-width: 600px) {
    .compareFields { width: 100%; }
  }
</style>
</head>
<body>
  <h1 style="text-align:center">রেসপন্সিভ প্রাইসিং টেবিল উদাহরণ</h1>
  <div class="compareFields">
    <ul class="pricing">
      <li class="header">ফ্রি মেম্বারশিপ</li>
      <li>২০ মেসেজ</li>
      <li>কাস্টমার সাপোর্ট নেই</li>
      <li>৯৮% আপটাইম</li>
      <li>১ জিবি প্রতি দিন</li>
      <li>৫০ জিবি স্টোরেজ</li>
      <li><a href="#" class="button" style="background-color: rgb(52, 31, 129);">রেজিস্টার</a></li>
    </ul>
  </div>
  <div class="compareFields">
    <ul class="pricing">
      <li class="header" style="background-color:rgb(250, 136, 59)">এডভান্সড মেম্বারশিপ</li>
      <li>১০০ মেসেজ</li>
      <li>২৪*৭ কাস্টমার সাপোর্ট</li>
      <li>৯৯.৯% আপটাইম</li>
      <li>৮ জিবি প্রতি দিন</li>
      <li>১৫০ জিবি স্টোরেজ</li>
      <li><a href="#" class="button" style="background-color:rgb(250, 136, 59)">রেজিস্টার</a></li>
    </ul>
  </div>
</body>
</html>

কোড ব্যাখ্যা

• .compareFields { float: left; width: 50%; }: ডেস্কটপে دوটি কলাম সাইড বাই সাইড।
• @media (max-width: 600px): মোবাইলে ১০০% প্রস্থে স্ট্যাক হয়।
• hover ইফেক্ট: মাউস হোভারে বক্স শ্যাডো দিয়ে ডেপথ যোগ করা হয়েছে।

আধুনিক পদ্ধতি

Flexbox বা CSS Grid ব্যবহার করলে ফ্লোটের চেয়ে ক্লিনার এবং আরও নিয়ন্ত্রণযোগ্য লেআউট পাওয়া যায়।