Hero Section এবং Responsive Headers

Hero Section এবং Responsive Headers Bulma ফ্রেমওয়ার্কে ব্যবহৃত জনপ্রিয় ডিজাইন উপাদান। এগুলি ওয়েবসাইটের প্রথম দর্শনে ব্যবহারকারীদের আকর্ষণ করার জন্য ব্যবহৃত হয়। Bulma এর সহজ এবং রেসপনসিভ ক্লাস সিস্টেমের মাধ্যমে আপনি সহজেই এই উপাদানগুলি তৈরি করতে পারেন।

১. Hero Section

Bulma এ Hero Section একটি বড় ব্যানার বা হেডিং সেকশন হিসেবে কাজ করে যা সাধারণত ওয়েবসাইটের প্রথম অংশে প্রদর্শিত হয়। এটি সাধারণত সাইটের উদ্দেশ্য বা ব্র্যান্ডিং তুলে ধরতে ব্যবহৃত হয়।

Hero Section এর মূল বৈশিষ্ট্য:

• Hero Section সাইটের প্রধান কনটেন্টের পূর্বে থাকে এবং বড় আকৃতির ব্যানার হিসেবে কাজ করে।
• এতে সাধারণত হেডিং, সাবহেডিং, এবং একটি কাস্টম বাটন থাকে।
• Hero Section এর মাধ্যমে আপনি সাইটের মূল উদ্দেশ্য বা বার্তা ব্যবহারকারীদের কাছে পৌঁছে দিতে পারেন।

উদাহরণ: Hero Section

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Welcome to My Website
      </h1>
      <h2 class="subtitle">
        A place where you can learn and grow.
      </h2>
      <a href="#get-started" class="button is-light">Get Started</a>
    </div>
  </div>
</section>

এখানে:

• hero ক্লাসটি Hero Section তৈরি করে।
• is-primary ক্লাসটি সেকশনের ব্যাকগ্রাউন্ড রঙ নিয়ন্ত্রণ করে।
• hero-body সেকশনের প্রধান কনটেন্ট থাকে, যেমন টাইটেল, সাবটাইটেল এবং বাটন।
• container ক্লাসটি কনটেন্টকে পেজের সেন্টারে রাখে।

২. Hero Section এর কাস্টমাইজেশন

Bulma এর Hero Section কাস্টমাইজ করার জন্য আপনি ব্যাকগ্রাউন্ড কালার, টেক্সট স্টাইল, এবং সেকশনের উচ্চতা পরিবর্তন করতে পারেন।

উদাহরণ: কাস্টম Hero Section

<section class="hero is-info is-large">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Explore New Horizons
      </h1>
      <h2 class="subtitle">
        Join us on a journey to the stars.
      </h2>
    </div>
  </div>
</section>

এখানে:

• is-info ক্লাসটি সেকশনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করে।
• is-large ক্লাসটি সেকশনের উচ্চতা বাড়িয়ে দেয়।

৩. Responsive Hero Section

Bulma আপনাকে Responsive Hero Sections তৈরি করতে দেয়, যাতে বিভিন্ন স্ক্রীন সাইজের জন্য ডিজাইনটি স্বয়ংক্রিয়ভাবে অভিযোজিত হয়। আপনি hero-body এর ভিতরে থাকা কনটেন্টের আকার এবং অবস্থান নিয়ন্ত্রণ করতে পারেন যাতে এটি মোবাইল, ট্যাবলেট, এবং ডেস্কটপ ডিভাইসে ভালোভাবে কাজ করে।

উদাহরণ: Responsive Hero Section

<section class="hero is-success">
  <div class="hero-body">
    <div class="container">
      <h1 class="title is-size-3-mobile is-size-1-tablet is-size-1-desktop">
        Reach for the Stars
      </h1>
      <h2 class="subtitle is-size-5-mobile is-size-3-tablet is-size-2-desktop">
        A bold new way to explore the universe.
      </h2>
    </div>
  </div>
</section>

এখানে:

• is-size-3-mobile, is-size-1-tablet, এবং is-size-1-desktop ক্লাসগুলো হেডিং এর সাইজ কন্ট্রোল করে। এগুলি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য বিভিন্ন সাইজের হেডিং প্রদান করে।
• subtitle তেও আমরা একইভাবে রেসপনসিভ সাইজ প্রযোজ্য করেছি।

৪. Responsive Headers (হেডিং)

Responsive Headers হেডিং গুলি বিভিন্ন স্ক্রীন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত হতে পারে। Bulma এ এটি খুবই সহজ, কারণ Bulma ফ্রেমওয়ার্কে এর জন্য প্রস্তুত বিভিন্ন ক্লাস রয়েছে।

উদাহরণ: Responsive Headers

<h1 class="title is-size-4-mobile is-size-2-tablet is-size-1-desktop">
  Responsive Header Example
</h1>

এখানে:

• is-size-4-mobile ক্লাসটি মোবাইল ডিভাইসে হেডিংয়ের সাইজ নির্ধারণ করে।
• is-size-2-tablet ক্লাসটি ট্যাবলেট ডিভাইসে হেডিংয়ের সাইজ পরিবর্তন করে।
• is-size-1-desktop ক্লাসটি ডেস্কটপ ডিভাইসে বড় আকারে হেডিং দেখাবে।

৫. Multi-Column Hero Section

কখনও কখনও আপনি Hero Section এ একাধিক কলাম ব্যবহার করতে পারেন। এটি করতে columns এবং column ক্লাস ব্যবহার করা হয়।

উদাহরণ: Multi-Column Hero Section

<section class="hero is-info">
  <div class="hero-body">
    <div class="container">
      <div class="columns">
        <div class="column is-half">
          <h1 class="title">
            Welcome to the Future
          </h1>
          <h2 class="subtitle">
            Discover new possibilities today.
          </h2>
        </div>
        <div class="column is-half">
          <img src="https://via.placeholder.com/300" alt="Future Image">
        </div>
      </div>
    </div>
  </div>
</section>

এখানে:

• columns ক্লাসটি দুটি কলাম তৈরি করে।
• প্রথম কলামে টেক্সট এবং দ্বিতীয় কলামে একটি ইমেজ রয়েছে।

সারাংশ

Hero Section এবং Responsive Headers Bulma ফ্রেমওয়ার্কের অন্যতম গুরুত্বপূর্ণ উপাদান যা ওয়েবসাইটে আকর্ষণীয় এবং রেসপনসিভ ডিজাইন তৈরিতে সাহায্য করে। Hero Section বড় ব্যানার হিসেবে ব্যবহৃত হয় এবং এতে হেডিং, সাবহেডিং এবং বাটন থাকে, যা সাইটের উদ্দেশ্য বা বার্তা পরিষ্কারভাবে তুলে ধরে। Responsive Headers বিভিন্ন স্ক্রীন সাইজের জন্য হেডিংয়ের সাইজ পরিবর্তন করতে সহায়তা করে, যাতে মোবাইল, ট্যাবলেট এবং ডেস্কটপে ওয়েবসাইট ভালোভাবে দেখা যায়। Bulma এর রেসপনসিভ ক্লাসগুলো ব্যবহার করে আপনি খুব সহজে এই উপাদানগুলো কাস্টমাইজ করতে পারেন।