ল্যান্ডিং পেজ ডিজাইন | How to Design Professional Landing Page – Bangla Tutorial 2026

আসসালামু আলাইকুম বন্ধুরা! আজকের এই ভিডিওতে আমি দেখাবো কিভাবে professional landing page design করতে হয়। Landing page হলো এমন একটা page যেখানে visitors আসে এবং আপনার product বা service সম্পর্কে জানে।

Important Links & Resources

Access the Ready-to-Use Landing Page Template

Sale Price Styling

/* =========================================
   🔹 Sale Price Styling
   ========================================= */
   
বর্তমান ডিসকাউন্ট মূল্য <span style="color:#1F2937; border:3px solid #0B5ED7; border-radius:50%; padding:2px 6px;">10৫০</span> টাকা

/* =========================================
   🔹 Sale Price Styling
   ========================================= */
   
বর্তমান ডিসকাউন্ট মূল্য <span style="color:#1F2937; border:3px solid #0B5ED7; border-radius:50%; padding:2px 6px;">10৫০</span> টাকা

CSS

Regular Price Styling

/* =========================================
   🔹 Regular Price Styling
   ========================================= */
   
<style>
.price-title {
  color: #6B7280;
  font-family: 'Hind Siliguri', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.old-price {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.price-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.price-cross .line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ff0000;
}

.price-cross .line-1 {
  transform: rotate(40deg);
}

.price-cross .line-2 {
  transform: rotate(-40deg);
}

/* 📱 Mobile */
@media (max-width: 767px) {
  .price-title {
    font-size: 22px;
    line-height: 1.3;
  }
}

/* 📱 Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .price-title {
    font-size: 26px;
  }
}

/* 🖥 Desktop */
@media (min-width: 1024px) {
  .price-title {
    font-size: 30px;
  }
}
</style>

<h3 class="price-title">
  রেগুলার মূল্য
  <span class="old-price">
    ২৮০০
    <span class="price-cross">
      <span class="line line-1"></span>
      <span class="line line-2"></span>
    </span>
  </span>
</h3>

/* =========================================
   🔹 Regular Price Styling
   ========================================= */
   
<style>
.price-title {
  color: #6B7280;
  font-family: 'Hind Siliguri', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.old-price {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.price-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.price-cross .line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ff0000;
}

.price-cross .line-1 {
  transform: rotate(40deg);
}

.price-cross .line-2 {
  transform: rotate(-40deg);
}

/* 📱 Mobile */
@media (max-width: 767px) {
  .price-title {
    font-size: 22px;
    line-height: 1.3;
  }
}

/* 📱 Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .price-title {
    font-size: 26px;
  }
}

/* 🖥 Desktop */
@media (min-width: 1024px) {
  .price-title {
    font-size: 30px;
  }
}
</style>

<h3 class="price-title">
  রেগুলার মূল্য
  <span class="old-price">
    ২৮০০
    <span class="price-cross">
      <span class="line line-1"></span>
      <span class="line line-2"></span>
    </span>
  </span>
</h3>

CSS

Arif Sadiq

Join my YouTube channel where I share simple, practical tutorials on eCommerce, website design, and online business to help you grow faster and with confidence.