Advance CSS শিখুন বাংলায় (পর্ব ৮) — Mini Project: থিম ও অ্যানিমেশনসহ ল্যান্ডিং পেজ

এই পর্যন্ত Advanced CSS সিরিজে আমরা শিখেছি — SCSS, BEM, Advanced Animation, Grid Template Areas, Flexbox প্যাটার্ন, Custom Properties থিমিং, আর Container Queries। এই শেষ পর্বে সব একসাথে করে বানাব একটা সম্পূর্ণ ল্যান্ডিং পেজ — থিম টগল আর স্মুথ অ্যানিমেশনসহ।

প্রজেক্টের কাঠামো

ল্যান্ডিং পেজে থাকবে:

• grid-template-areas দিয়ে হেডার + হিরো + ফিচার + ফুটার লেআউট
• Flexbox দিয়ে নেভবার আর ফিচার কার্ড গ্রিড
• BEM নামকরণ পদ্ধতি সব ক্লাসে
• CSS Custom Properties দিয়ে লাইট/ডার্ক থিম
• cubic-bezier দিয়ে স্ক্রল-ইন অ্যানিমেশন (Intersection Observer সহ)
• Container Query দিয়ে ফিচার কার্ড রেসপনসিভ

ধাপ ১ — থিম ভ্যারিয়েবল (:root)

প্রথমে পর্ব ৬-এর টেকনিক দিয়ে থিম সিস্টেম বসাই:

:root {
  --bg: #ffffff;
  --text: #111827;
  --card-bg: #f8fafc;
  --accent: #2563eb;
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

body.dark-mode {
  --bg: #0f172a;
  --text: #f1f5f9;
  --card-bg: #1e293b;
  --accent: #60a5fa;
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
  margin: 0;
  font-family: sans-serif;
}

ধাপ ২ — পুরো পেজের লেআউট (Grid)

পর্ব ৪-এর grid-template-areas দিয়ে বড় স্ট্রাকচার:

.landing {
  display: grid;
  grid-template-areas:
    "nav"
    "hero"
    "features"
    "footer";
}

.landing__nav      { grid-area: nav; }
.landing__hero     { grid-area: hero; }
.landing__features { grid-area: features; }
.landing__footer   { grid-area: footer; }

ধাপ ৩ — নেভবার (Flexbox + BEM)

পর্ব ৫-এর নেভবার প্যাটার্ন, BEM নামকরণসহ:

<nav class="landing__nav nav">
  <span class="nav__logo">ArifStack</span>
  <button class="nav__toggle" id="themeToggle">🌓</button>
</nav>

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;

  &__logo {
    font-weight: bold;
    font-size: 20px;
    color: var(--accent);
  }

  &__toggle {
    background: none;
    border: 2px solid var(--accent);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: transform 0.3s var(--ease-smooth);

    &:hover {
      transform: rotate(20deg);
    }
  }
}

ধাপ ৪ — ফিচার কার্ড (Container Query)

পর্ব ৭-এর কৌশল — কার্ডগুলো নিজেদের কন্টেইনারের সাইজ দেখে লেআউট ঠিক করবে:

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 40px 24px;

  &__card {
    container-type: inline-size;
    flex: 1 1 220px;
    background: var(--card-bg);
    border-radius: 10px;
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);

    &--visible {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@container (min-width: 260px) {
  .features__title {
    font-size: 20px;
  }
}

এখানে .features__card--visible Modifier ক্লাসটাই স্ক্রল-ইন অ্যানিমেশনের ভিত্তি — JavaScript দিয়ে এই ক্লাস যোগ করা হবে।

ধাপ ৫ — স্ক্রল-ইন অ্যানিমেশন (Intersection Observer)

Advanced HTML সিরিজের পর্ব ৬-এ শেখা Intersection Observer দিয়ে কার্ডগুলো স্ক্রিনে আসার সাথে সাথে ফেড-ইন হবে:

const cards = document.querySelectorAll(".features__card");

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("features__card--visible");
    }
  });
}, { threshold: 0.2 });

cards.forEach((card) => observer.observe(card));

ধাপ ৬ — থিম টগল (localStorage সহ)

Advanced HTML পর্ব ১-এর localStorage টেকনিক দিয়ে থিম পছন্দ মনে রাখা:

const toggleBtn = document.getElementById("themeToggle");

if (localStorage.getItem("landingTheme") === "dark") {
  document.body.classList.add("dark-mode");
}

toggleBtn.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
  const isDark = document.body.classList.contains("dark-mode");
  localStorage.setItem("landingTheme", isDark ? "dark" : "light");
});

লাইভ ডেমো — সম্পূর্ণ মিনি ল্যান্ডিং পেজ

নিচে সবকিছু একসাথে কাজ করছে — থিম টগল করো, নিচে স্ক্রল করে কার্ডগুলো ফেড-ইন হতে দেখো।

ArifStack

বাংলায় ওয়েব ডেভেলপমেন্ট শিখুন

সহজ, প্র্যাকটিক্যাল আর প্রজেক্ট-ভিত্তিক টিউটোরিয়াল

🎨 SCSS ও BEM

📐 Grid ও Flexbox

🌗 ডাইনামিক থিমিং

© ২০২৬ ArifStack — Advanced CSS সিরিজ

নোট: এই ছোট প্রিভিউ বক্সে কার্ড সাথে সাথেই দেখা যাচ্ছে যাতে স্ক্রল করার দরকার না হয় — কিন্তু নিজের পূর্ণ পেজে বসালে Intersection Observer ঠিকমতো স্ক্রল-ইন ইফেক্ট দেখাবে।

নিজে চেষ্টা করো

Exercise:

1. উপরের পুরো কোড একটা স্বতন্ত্র HTML ফাইলে বসিয়ে ব্রাউজারে খুলে দেখো — আসল স্ক্রল-ইন ইফেক্ট দেখতে পাবে।
2. ফিচার সেকশনে আরও ৩টা কার্ড যোগ করো (মোট ৬টা), আর প্রতিটার transition-delay সামান্য বাড়িয়ে একটার পর একটা অ্যানিমেট হওয়ার ইফেক্ট বানাও।
3. grid-template-areas দিয়ে ধাপ ২-এর লেআউট ডেস্কটপে দুই-কলাম বানাও (হিরো বাঁয়ে, ফিচার ডানে), মোবাইলে এক-কলাম রেখে মিডিয়া কোয়েরি দিয়ে।
4. থিম টগলে একটা তৃতীয় "সিস্টেম" অপশন যোগ করো, যেটা ব্যবহারকারীর OS-এর ডার্ক/লাইট মোড অনুসরণ করবে (prefers-color-scheme মিডিয়া ফিচার খুঁজে দেখো)।

সিরিজ শেষ!

Advanced CSS সিরিজের আট পর্বে আমরা SCSS থেকে শুরু করে BEM, Animation, Grid, Flexbox, থিমিং, আর সবশেষে Container Queries শিখেছি — আর আজ সেগুলো একসাথে মিলিয়ে একটা বাস্তব প্রজেক্ট বানিয়েছি।