ওয়েব ডিজাইন (Web Design) হলো এমন একটি প্রক্রিয়া যার মাধ্যমে একটি ওয়েবসাইটের আকার, বিন্যাস, রং, ফন্ট, গ্রাফিক্স, এবং ইউজার ইন্টারফেস তৈরি করা হয়। এটি একটি ওয়েবসাইটকে ব্যবহারকারীর জন্য কার্যকরী, দৃষ্টিনন্দন, এবং সহজবোধ্য করে তোলে। ওয়েব ডিজাইনের প্রধান কাজ হলো ব্যবহারকারীদের অভিজ্ঞতা উন্নত করা এবং সাইটে নেভিগেশনকে সহজ করা। আধুনিক ওয়েব ডিজাইন শুধু ডেস্কটপের জন্যই নয়, মোবাইল এবং ট্যাবলেটের মতো অন্যান্য ডিভাইসের জন্যও গুরুত্বপূর্ণ।
ওয়েব ডিজাইনের মূল উপাদান:
১. লেআউট (Layout):
- লেআউট হলো ওয়েবসাইটের কাঠামো, যেখানে বিভিন্ন উপাদান যেমন হেডার, ফুটার, মেনু, এবং কন্টেন্ট রাখা হয়। এটি ওয়েবসাইটের সঠিক বিন্যাস এবং ব্যবহারকারীদের সহজে তথ্য খুঁজে পাওয়ার ব্যবস্থা করে।
২. গ্রাফিক্স (Graphics):
- ওয়েবসাইটে ব্যবহৃত ছবি, লোগো, এবং আইকনগুলোই গ্রাফিক্স। এগুলো ওয়েবসাইটকে দৃষ্টিনন্দন এবং তথ্যপূর্ণ করে তোলে।
৩. ফন্ট এবং রং (Fonts and Colors):
- ওয়েবসাইটে ব্যবহৃত ফন্ট এবং রং ওয়েবসাইটের দৃষ্টিনন্দনতা এবং ব্র্যান্ড পরিচিতি নির্ধারণ করে। এর মাধ্যমে ব্যবহারকারীর মনোযোগ আকর্ষণ করা হয়।
৪. ইউজার ইন্টারফেস (User Interface - UI):
- ওয়েবসাইটের ব্যবহারকারীর সাথে যোগাযোগের পদ্ধতিকে UI বলা হয়। এটি একটি ওয়েবসাইটকে কার্যকরী এবং ব্যবহারকারীদের জন্য সহজে নেভিগেট করার সুযোগ দেয়।
৫. রেসপনসিভ ডিজাইন (Responsive Design):
- রেসপনসিভ ডিজাইন হলো ওয়েবসাইটের এমন একটি ফিচার যা বিভিন্ন আকারের ডিভাইসে (ডেস্কটপ, মোবাইল, ট্যাবলেট) উপযুক্তভাবে প্রদর্শিত হয়।
HTML (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ):
HTML (Hypertext Markup Language) হলো ওয়েবসাইট তৈরি করার জন্য ব্যবহৃত একটি প্রাথমিক ভাষা। HTML মূলত ওয়েব পেজের স্ট্রাকচার বা কাঠামো তৈরি করে, যেখানে বিভিন্ন উপাদান যেমন টেক্সট, ইমেজ, এবং লিঙ্ক স্থাপন করা হয়। HTML ব্যবহার করে ওয়েবসাইটের বেসিক কাঠামো তৈরি করা হয়, যা ব্রাউজারকে নির্দেশ দেয় কীভাবে একটি ওয়েব পেজ প্রদর্শিত হবে।
HTML এর প্রধান উপাদানসমূহ:
১. ট্যাগ (Tag):
- HTML ট্যাগ হলো নির্দেশনা যা ব্রাউজারকে জানায় কীভাবে কন্টেন্ট প্রদর্শন করতে হবে। প্রতিটি HTML ট্যাগের শুরু এবং শেষ থাকে। উদাহরণ:
..., ...।
২. এলিমেন্ট (Element):
- HTML এলিমেন্ট হলো ট্যাগ এবং তার মধ্যে থাকা কন্টেন্ট। উদাহরণ:
এটি একটি প্যারাগ্রাফ
৩. অ্যাট্রিবিউট (Attribute):
- HTML অ্যাট্রিবিউট হলো ট্যাগের কিছু অতিরিক্ত তথ্য যা উপাদানের বৈশিষ্ট্য নির্ধারণ করে। উদাহরণ:
একটি সাধারণ HTML ডকুমেন্টের উদাহরণ:
আমার প্রথম ওয়েব পেজ
স্বাগতম!
এটি আমার প্রথম HTML পেজ।
উদাহরণটি একটি সাধারণ HTML পেজ দেখায়, যেখানে হেডারে একটি শিরোনাম </code> এবং বডিতে একটি প্রধান শিরোনাম <code><h1></code> এবং একটি প্যারাগ্রাফ <code><p></code> রয়েছে।</p><h3>HTML এর প্রধান ট্যাগসমূহ:</h3><p>১. <code><strong><html></strong></code>: HTML ডকুমেন্টের শুরু এবং শেষ নির্দেশ করে। ২. <code><strong><head></strong></code>: ডকুমেন্টের মেটাডেটা (যেমন শিরোনাম) ধারণ করে। ৩. <code><strong><title></strong></code>: ওয়েব পেজের টাইটেল নির্ধারণ করে, যা ব্রাউজারের ট্যাবে প্রদর্শিত হয়। ৪. <code><strong><body></strong></code>: HTML ডকুমেন্টের মূল কন্টেন্ট ধারণ করে। ৫. <code><strong><h1></strong></code><strong> থেকে </strong><code><strong><h6></strong></code>: বিভিন্ন স্তরের শিরোনাম তৈরি করে। <code><h1></code> সবচেয়ে বড় এবং <code><h6></code> সবচেয়ে ছোট। ৬. <code><strong><p></strong></code>: প্যারাগ্রাফ তৈরি করে। ৭. <code><strong><img></strong></code>: ইমেজ যোগ করার জন্য ব্যবহৃত হয়। ৮. <code><strong><a></strong></code>: হাইপারলিংক তৈরি করে, যা অন্য পেজ বা ওয়েবসাইটে নিয়ে যায়।</p><h3>সারসংক্ষেপ:</h3><p><strong>ওয়েব ডিজাইন</strong> হলো একটি প্রক্রিয়া যা ওয়েবসাইটের ভিজ্যুয়াল এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য কাজ করে, এবং <strong>HTML</strong> হলো সেই ভাষা যার মাধ্যমে ওয়েবসাইটের বেসিক স্ট্রাকচার তৈরি করা হয়। HTML ওয়েব ডিজাইনের ভিত্তি হিসেবে কাজ করে, যা CSS এবং JavaScript-এর মতো অন্যান্য প্রযুক্তি দিয়ে উন্নত করা যায়।</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-5 lg:grid-cols-2 xl:gap-10">
<div class="col-span-full">
<div class="flex flex-col">
<!-- Header Section -->
<div class="bg-gray-100 dark:bg-zinc-800 px-0 py-2 rounded-t-lg">
<div class="flex items-center justify-between px-4">
<h2 class="text-dark dark:text-gray-100 text-xl font-semibold">
Related Question
</h2>
<a href="https://sattacademy.com/all-written/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF"
class="inline-flex items-center gap-2 bg-white dark:bg-zinc-700 hover:bg-gray-50 dark:hover:bg-zinc-700 text-gray-900
dark:text-gray-100 px-2 py-1.5 rounded-lg transition-colors duration-200">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
<path d="M11 13l9 -9"></path>
<path d="M15 4h5v5"></path>
</svg>
View All
</a>
</div>
</div>
<!-- Question Cards -->
<div class="space-y-5">
<div class="select-none group border rounded-md p-2 bg-white dark:bg-zinc-800 mb-2 border-zinc-100 dark:border-white/5">
<div class=""
x-data="{showDescription: true}"
>
<div
class="flex items-start justify-between group rounded-lg cursor-pointer select-none gap-2 md:gap-4 p-0.5 ps-1 "
@click="showDescription = !showDescription" >
<a href="https://sattacademy.com/question/html-46167"
class="flex items-start overflow-x-auto overflow-y-hidden scrollbar-hide pt-1 gap-2" @click.stop>
<div class="flex flex-col gap-1">
<div
class="text-zinc-800 dark:text-zinc-200 leading-relaxed font-medium text-md">
HTML
<span>
(পূর্ণরূপ লিখুন)
</span>
</div>
</div>
</a>
<div class="shrink-0">
<button
class="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700"
aria-label="Toggle description">
<svg
x-show="!showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7">
</path>
</svg>
<svg
x-show="showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 15l7-7 7 7">
</path>
</svg>
</button>
</div>
</div>
<div class="flex items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/psc-and-others/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B6%E0%A6%BF%E0%A6%B6%E0%A7%81-%E0%A6%8F%E0%A6%95%E0%A6%BE%E0%A6%A1%E0%A7%87%E0%A6%AE%E0%A6%BF-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%85%E0%A6%AA%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%9F%E0%A6%B0-31-03-2023/all/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বাংলাদেশ শিশু একাডেমি — কম্পিউটার অপারেটর">
BSA Computer Operator - 2023
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B6%E0%A6%BF%E0%A6%B6%E0%A7%81-%E0%A6%8F%E0%A6%95%E0%A6%BE%E0%A6%A1%E0%A7%87%E0%A6%AE%E0%A6%BF-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%85%E0%A6%AA%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%9F%E0%A6%B0-31-03-2023/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/question-bank/psc-and-others/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/2023/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="2023">
2023
</a>
<a href="https://sattacademy.com/all-written/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div class="ml-auto hidden md:block">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">186</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
<div x-show="showDescription" x-data="{ showOtherDescs: false }" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0" class="space-y-4 mt-1">
<!-- Best Answer Card -->
<div
class="relative bg-[#dcebe596] dark:bg-[#2c3532] rounded-lg p-4 mb-4 border border-gray-200 dark:border-gray-700">
<!-- Content -->
<div class="text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed">
<span class="font-semibold text-gray-800 dark:text-gray-200 float-left mr-1">উত্তরঃ</span>
<p>Hyper text markup language </p>
</div>
<!-- Footer with time and actions -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<img src="https://sattacademy.com/uploads/avatar/1680175574.jpg"
class="w-7 h-7 rounded-full object-cover" alt="MD.SHAKIL UDDIN" >
<div>
<a href="https://sattacademy.com/user/u&id=54762/profile"
class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none">
MD.SHAKIL UDDIN
</a>
<div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none">
3 years ago
</div>
</div>
</div>
<div class="flex items-center gap-3">
<!-- Like button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
<!-- Unlike button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
</div>
</div>
</div>
<!-- Other Answers (Toggle with Alpine.js) -->
</div>
</div>
<div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="ml-auto">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">186</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
</div> <div class="select-none group border rounded-md p-2 bg-white dark:bg-zinc-800 mb-2 border-zinc-100 dark:border-white/5">
<div class=""
x-data="{showDescription: true}"
>
<div
class="flex items-start justify-between group rounded-lg cursor-pointer select-none gap-2 md:gap-4 p-0.5 ps-1 "
@click="showDescription = !showDescription" >
<a href="https://sattacademy.com/question/html-25169"
class="flex items-start overflow-x-auto overflow-y-hidden scrollbar-hide pt-1 gap-2" @click.stop>
<div class="flex flex-col gap-1">
<div
class="text-zinc-800 dark:text-zinc-200 leading-relaxed font-medium text-md">
<p>HTML</p>
<span>
(পূর্ণরূপ লিখুন)
</span>
</div>
</div>
</a>
<div class="shrink-0">
<button
class="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700"
aria-label="Toggle description">
<svg
x-show="!showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7">
</path>
</svg>
<svg
x-show="showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 15l7-7 7 7">
</path>
</svg>
</button>
</div>
</div>
<div class="flex items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/psc-and-others/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%97%E0%A7%80%E0%A6%AF%E0%A6%BC-%E0%A6%95%E0%A6%AE%E0%A6%BF%E0%A6%B6%E0%A6%A8%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%B0-%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%B2%E0%A6%AF%E0%A6%BC-%E0%A6%B0%E0%A6%82%E0%A6%AA%E0%A7%81%E0%A6%B0-%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%95%E0%A6%BE%E0%A6%AE-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%AE%E0%A7%81%E0%A6%A6%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%B7%E0%A6%B0%E0%A6%BF%E0%A6%95-07-07-2023/all/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বিভাগীয় কমিশনারের কার্যালয়, রংপুর — অফিস সহকারী কাম কম্পিউটার মুদ্রাক্ষরিক">
DivCom Rangpur – Office Assistant - 2023
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%97%E0%A7%80%E0%A6%AF%E0%A6%BC-%E0%A6%95%E0%A6%AE%E0%A6%BF%E0%A6%B6%E0%A6%A8%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%B0-%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%B2%E0%A6%AF%E0%A6%BC-%E0%A6%B0%E0%A6%82%E0%A6%AA%E0%A7%81%E0%A6%B0-%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%95%E0%A6%BE%E0%A6%AE-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%AE%E0%A7%81%E0%A6%A6%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%B7%E0%A6%B0%E0%A6%BF%E0%A6%95-07-07-2023/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/question-bank/psc-and-others/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/2023/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="2023">
2023
</a>
<a href="https://sattacademy.com/all-written/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div class="ml-auto hidden md:block">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">204</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
<div x-show="showDescription" x-data="{ showOtherDescs: false }" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0" class="space-y-4 mt-1">
<!-- Best Answer Card -->
<div
class="relative bg-[#dcebe596] dark:bg-[#2c3532] rounded-lg p-4 mb-4 border border-gray-200 dark:border-gray-700">
<!-- Content -->
<div class="text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed">
<span class="font-semibold text-gray-800 dark:text-gray-200 float-left mr-1">উত্তরঃ</span>
<p>HTML= Hypertext Markup Language </p>
</div>
<!-- Footer with time and actions -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<img src="https://sattacademy.com/uploads/avatar/1688644838.png"
class="w-7 h-7 rounded-full object-cover" alt="Riya" >
<div>
<a href="https://sattacademy.com/user/u&id=39575/profile"
class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none">
Riya
</a>
<div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none">
2 years ago
</div>
</div>
</div>
<div class="flex items-center gap-3">
<!-- Like button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
<!-- Unlike button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
</div>
</div>
</div>
<!-- Other Answers (Toggle with Alpine.js) -->
</div>
</div>
<div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="ml-auto">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">204</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
</div> <div class="select-none group border rounded-md p-2 bg-white dark:bg-zinc-800 mb-2 border-zinc-100 dark:border-white/5">
<div class=""
x-data="{showDescription: true}"
>
<div
class="flex items-start justify-between group rounded-lg cursor-pointer select-none gap-2 md:gap-4 p-0.5 ps-1 "
@click="showDescription = !showDescription" >
<a href="https://sattacademy.com/question/html%E0%A6%8F%E0%A6%B0-%E0%A6%AA%E0%A7%82%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%B0%E0%A7%82%E0%A6%AA-%E0%A6%B2%E0%A6%BF%E0%A6%96%E0%A7%81%E0%A6%A8"
class="flex items-start overflow-x-auto overflow-y-hidden scrollbar-hide pt-1 gap-2" @click.stop>
<span
class="text-zinc-800 dark:text-zinc-100 shrink-0 leading-relaxed font-medium text-md">
(ছ)
</span>
<div class="flex flex-col gap-1">
<div
class="text-zinc-800 dark:text-zinc-200 leading-relaxed font-medium text-md">
<p>'HTML'এর পূর্ণরূপ লিখুন।</p>
</div>
</div>
</a>
<div class="shrink-0">
<button
class="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700"
aria-label="Toggle description">
<svg
x-show="!showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7">
</path>
</svg>
<svg
x-show="showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 15l7-7 7 7">
</path>
</svg>
</button>
</div>
</div>
<div class="flex items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/psc-and-others/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%87-%E0%A6%9F%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%B8-%E0%A6%AE%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%87%E0%A6%9C%E0%A6%AE%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%9F-%E0%A6%87%E0%A6%89%E0%A6%A8%E0%A6%BF%E0%A6%9F-%E0%A6%A2%E0%A6%BE%E0%A6%95%E0%A6%BE-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%85%E0%A6%AA%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%9F%E0%A6%B0-07-06-2024/all/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ই-ট্যাক্স ম্যানেজমেন্ট ইউনিট, ঢাকা — কম্পিউটার অপারেটর">
e-Tax Unit – Computer Operator - 2024
</a>
<a href="https://sattacademy.com/%E0%A6%87-%E0%A6%9F%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%B8-%E0%A6%AE%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%87%E0%A6%9C%E0%A6%AE%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%9F-%E0%A6%87%E0%A6%89%E0%A6%A8%E0%A6%BF%E0%A6%9F-%E0%A6%A2%E0%A6%BE%E0%A6%95%E0%A6%BE-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%85%E0%A6%AA%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%9F%E0%A6%B0-07-06-2024/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/question-bank/psc-and-others/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/2024/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="2024">
2024
</a>
<a href="https://sattacademy.com/all-written/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div class="ml-auto hidden md:block">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">135</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
<div x-show="showDescription" x-data="{ showOtherDescs: false }" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0" class="space-y-4 mt-1">
<!-- Best Answer Card -->
<div
class="relative bg-[#dcebe596] dark:bg-[#2c3532] rounded-lg p-4 mb-4 border border-gray-200 dark:border-gray-700">
<!-- Content -->
<div class="text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed">
<span class="font-semibold text-gray-800 dark:text-gray-200 float-left mr-1">উত্তরঃ</span>
<p>'HTML'এর পূর্ণরূপ হলো HyperText Markup Language.</p>
</div>
<!-- Footer with time and actions -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<img src="https://sattacademy.com/uploads/avatar/1679567149.jpg"
class="w-7 h-7 rounded-full object-cover" alt="Najjar Hossain Raju" >
<div>
<a href="https://sattacademy.com/user/u&id=45086/profile"
class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none">
Najjar Hossain Raju
</a>
<div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none">
1 year ago
</div>
</div>
</div>
<div class="flex items-center gap-3">
<!-- Like button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
<!-- Unlike button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
</div>
</div>
</div>
<!-- Other Answers (Toggle with Alpine.js) -->
</div>
</div>
<div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="ml-auto">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">135</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
</div> <div class="select-none group border rounded-md p-2 bg-white dark:bg-zinc-800 mb-2 border-zinc-100 dark:border-white/5">
<div class=""
x-data="{showDescription: true}"
>
<div
class="flex items-start justify-between group rounded-lg cursor-pointer select-none gap-2 md:gap-4 p-0.5 ps-1 "
@click="showDescription = !showDescription" >
<a href="https://sattacademy.com/question/html-%E0%A6%AA%E0%A7%82%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%B0%E0%A7%82%E0%A6%AA-%E0%A6%95%E0%A7%80"
class="flex items-start overflow-x-auto overflow-y-hidden scrollbar-hide pt-1 gap-2" @click.stop>
<span
class="text-zinc-800 dark:text-zinc-100 shrink-0 leading-relaxed font-medium text-md">
(৪)
</span>
<div class="flex flex-col gap-1">
<div
class="text-zinc-800 dark:text-zinc-200 leading-relaxed font-medium text-md">
HTML পূর্ণরূপ কী?
</div>
</div>
</a>
<div class="shrink-0">
<button
class="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700"
aria-label="Toggle description">
<svg
x-show="!showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7">
</path>
</svg>
<svg
x-show="showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 15l7-7 7 7">
</path>
</svg>
</button>
</div>
</div>
<div class="flex items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/psc-and-others/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%85%E0%A6%AD%E0%A7%8D%E0%A6%AF%E0%A6%A8%E0%A7%8D%E0%A6%A4%E0%A6%B0%E0%A7%80%E0%A6%A3-%E0%A6%B8%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%A6-%E0%A6%AC%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%97-%E0%A6%85%E0%A6%B0%E0%A7%8D%E0%A6%A5-%E0%A6%AE%E0%A6%A8%E0%A7%8D%E0%A6%A4%E0%A7%8D%E0%A6%B0%E0%A6%A3%E0%A6%BE%E0%A6%B2%E0%A7%9F-%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%95%E0%A6%BE%E0%A6%AE-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%AE%E0%A7%81%E0%A6%A6%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%B7%E0%A6%B0%E0%A6%BF%E0%A6%95-20/all/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="অভ্যন্তরীণ সম্পদ বিভাগ, অর্থ মন্ত্রণালয় - অফিস সহকারী কাম কম্পিউটার মুদ্রাক্ষরিক">
IRD – Office Assistant cum Computer Typist - 2025
</a>
<a href="https://sattacademy.com/%E0%A6%85%E0%A6%AD%E0%A7%8D%E0%A6%AF%E0%A6%A8%E0%A7%8D%E0%A6%A4%E0%A6%B0%E0%A7%80%E0%A6%A3-%E0%A6%B8%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%A6-%E0%A6%AC%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%97-%E0%A6%85%E0%A6%B0%E0%A7%8D%E0%A6%A5-%E0%A6%AE%E0%A6%A8%E0%A7%8D%E0%A6%A4%E0%A7%8D%E0%A6%B0%E0%A6%A3%E0%A6%BE%E0%A6%B2%E0%A7%9F-%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%95%E0%A6%BE%E0%A6%AE-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%AE%E0%A7%81%E0%A6%A6%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%B7%E0%A6%B0%E0%A6%BF%E0%A6%95-20/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/question-bank/psc-and-others/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/2025/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="2025">
2025
</a>
<a href="https://sattacademy.com/all-written/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div class="ml-auto hidden md:block">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">102</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
<div x-show="showDescription" x-data="{ showOtherDescs: false }" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0" class="space-y-4 mt-1">
<!-- Best Answer Card -->
<div
class="relative bg-[#dcebe596] dark:bg-[#2c3532] rounded-lg p-4 mb-4 border border-gray-200 dark:border-gray-700">
<!-- Content -->
<div class="text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed">
<span class="font-semibold text-gray-800 dark:text-gray-200 float-left mr-1">উত্তরঃ</span>
<p>HTML পূর্ণরূপ Hyper Text Markup Language.</p>
</div>
<!-- Footer with time and actions -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<img src="https://sattacademy.com/uploads/avatar/1679567149.jpg"
class="w-7 h-7 rounded-full object-cover" alt="Najjar Hossain Raju" >
<div>
<a href="https://sattacademy.com/user/u&id=45086/profile"
class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none">
Najjar Hossain Raju
</a>
<div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none">
10 months ago
</div>
</div>
</div>
<div class="flex items-center gap-3">
<!-- Like button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
<!-- Unlike button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
</div>
</div>
</div>
<!-- Other Answers (Toggle with Alpine.js) -->
</div>
</div>
<div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="ml-auto">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">102</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
</div> <div class="select-none group border rounded-md p-2 bg-white dark:bg-zinc-800 mb-2 border-zinc-100 dark:border-white/5">
<div class=""
x-data="{showDescription: true}"
>
<div
class="flex items-start justify-between group rounded-lg cursor-pointer select-none gap-2 md:gap-4 p-0.5 ps-1 "
@click="showDescription = !showDescription" >
<a href="https://sattacademy.com/question/html-50631"
class="flex items-start overflow-x-auto overflow-y-hidden scrollbar-hide pt-1 gap-2" @click.stop>
<div class="flex flex-col gap-1">
<div
class="text-zinc-800 dark:text-zinc-200 leading-relaxed font-medium text-md">
HTML
<span>
(পূর্ণরূপ লিখুন)
</span>
</div>
</div>
</a>
<div class="shrink-0">
<button
class="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700"
aria-label="Toggle description">
<svg
x-show="!showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7">
</path>
</svg>
<svg
x-show="showDescription"
x-cloak
class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 15l7-7 7 7">
</path>
</svg>
</button>
</div>
</div>
<div class="flex items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/psc-and-others/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A7%87%E0%A6%B8%E0%A6%BE%E0%A6%AE%E0%A6%B0%E0%A6%BF%E0%A6%95-%E0%A6%AC%E0%A6%BF%E0%A6%AE%E0%A6%BE%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%93-%E0%A6%AA%E0%A6%B0%E0%A7%8D%E0%A6%AF%E0%A6%9F%E0%A6%A8-%E0%A6%AE%E0%A6%A8%E0%A7%8D%E0%A6%A4%E0%A7%8D%E0%A6%B0%E0%A6%A3%E0%A6%BE%E0%A6%B2%E0%A7%9F-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%85%E0%A6%AA%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%9F%E0%A6%B0-21062025/all/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বেসামরিক বিমান পরিবহন ও পর্যটন মন্ত্রণালয় - কম্পিউটার অপারেটর">
MoCAT – Computer Operator - 2025
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A7%87%E0%A6%B8%E0%A6%BE%E0%A6%AE%E0%A6%B0%E0%A6%BF%E0%A6%95-%E0%A6%AC%E0%A6%BF%E0%A6%AE%E0%A6%BE%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%93-%E0%A6%AA%E0%A6%B0%E0%A7%8D%E0%A6%AF%E0%A6%9F%E0%A6%A8-%E0%A6%AE%E0%A6%A8%E0%A7%8D%E0%A6%A4%E0%A7%8D%E0%A6%B0%E0%A6%A3%E0%A6%BE%E0%A6%B2%E0%A7%9F-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0-%E0%A6%85%E0%A6%AA%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%9F%E0%A6%B0-21062025/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/written-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/question-bank/psc-and-others/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/2025/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="2025">
2025
</a>
<a href="https://sattacademy.com/all-written/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div class="ml-auto hidden md:block">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">42</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
<div x-show="showDescription" x-data="{ showOtherDescs: false }" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0" class="space-y-4 mt-1">
<!-- Best Answer Card -->
<div
class="relative bg-[#dcebe596] dark:bg-[#2c3532] rounded-lg p-4 mb-4 border border-gray-200 dark:border-gray-700">
<!-- Content -->
<div class="text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed">
<span class="font-semibold text-gray-800 dark:text-gray-200 float-left mr-1">উত্তরঃ</span>
<p>HTML = Hypertext Markup Language.</p>
</div>
<!-- Footer with time and actions -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<img src="https://sattacademy.com/uploads/avatar/1679567149.jpg"
class="w-7 h-7 rounded-full object-cover" alt="Najjar Hossain Raju" >
<div>
<a href="https://sattacademy.com/user/u&id=45086/profile"
class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none">
Najjar Hossain Raju
</a>
<div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none">
10 months ago
</div>
</div>
</div>
<div class="flex items-center gap-3">
<!-- Like button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
<!-- Unlike button -->
<button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')"
class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="icon" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3">
</path>
</svg>
<span class="text-sm">0</span>
</button>
</div>
</div>
</div>
<!-- Other Answers (Toggle with Alpine.js) -->
</div>
</div>
<div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap">
<div class="ml-auto">
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">42</span>
</div>
<div class="flex items-center gap-3">
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div>
</div>
<div class="my-4">
<style>
.t_wrap{
background:linear-gradient(135deg, #1a5c2e 0%, #2d8c4e 40%, #1a7a3a 70%, #0d4d20 100%);
border-radius:14px;
padding:24px 22px 20px;
font-family:'Hind Siliguri',Arial,sans-serif;
margin:0 auto;
overflow:hidden;
}
.t_badge{
display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,0.15);
border:1px solid rgba(255,255,255,0.25);
border-radius:20px;padding:4px 12px;margin-bottom:12px;
}
.t_badge .dot{width:7px;height:7px;border-radius:50%;background:#4caf50;}
.t_badge span{color:#fff;font-size:11px;font-weight:500;}
.title{color:#fff;font-size:clamp(15px,4vw,20px);font-weight:600;;margin-bottom:5px;}
.title span{color:#ffd54f;}
.sub{color:rgba(255,255,255,0.82);font-size:clamp(11px,2.8vw,13px);margin-bottom:16px;line-height:1.5;}
.sub b{color:#80d8ff;}
.marquee-wrap{
display:flex;flex-direction:column;gap:8px;
margin-bottom:16px;
overflow:hidden;
-webkit-mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.marquee-row{display:flex;gap:8px;width:max-content;}
.marquee-row.r1{animation:scroll-left 28s linear infinite;}
.marquee-row.r2{animation:scroll-left 22s linear infinite;}
@keyframes scroll-left{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}
.feat{
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.18);
border-radius:9px;
padding:7px 12px;
display:flex;align-items:center;gap:7px;
flex-shrink:0;
white-space:nowrap;
}
.fi{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fi svg{width:11px;height:11px;}
.ft{color:#fff;font-size:clamp(10px,2.3vw,12px);line-height:1.35;}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.btn-y{background:#ffd54f;color:#1a237e;border:none;border-radius:20px;padding:9px 22px;font-size:clamp(12px,2.8vw,13px);font-weight:700;cursor:pointer;font-family:'Hind Siliguri',Arial,sans-serif;}
.btn-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.45);border-radius:20px;padding:8px 18px;font-size:clamp(12px,2.8vw,13px);font-weight:500;cursor:pointer;font-family:'Hind Siliguri',Arial,sans-serif;}
.stats{display:flex;gap:16px;margin-left:auto;}
.stat .n{color:#ffd54f;font-size:13px;font-weight:700;}
.stat .l{color:rgba(255,255,255,0.7);font-size:10px;}
@media(max-width:380px){.stats{margin-left:0;width:100%;justify-content:space-around;}}
</style>
<div class="t_wrap">
<div class="t_badge"><div class="dot"></div><span>শিক্ষকদের জন্য বিশেষভাবে তৈরি</span></div>
<p class="title">১ ক্লিকে <span>প্রশ্ন, শীট, সাজেশন</span> ও<br>অনলাইন পরীক্ষা তৈরির সফটওয়্যার!</p>
<p class="sub">শুধু প্রশ্ন সিলেক্ট করুন — <b>প্রশ্নপত্র অটোমেটিক তৈরি!</b></p>
<div class="marquee-wrap">
<!-- Row 1 (6 items × 2 for seamless loop) -->
<div class="marquee-row r1">
<!-- set 1 -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4z"/></svg></div><span class="ft">প্রশ্ন এডিট করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><span class="ft">জলছাপ দেয়া যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2"/></svg></div><span class="ft">ঠিকানা যুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 20h14"/></svg></div><span class="ft">Logo, Motto যুক্ত হবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><span class="ft">অটো প্রতিষ্ঠানের নাম</span></div>
<div class="feat"><div class="fi" style="background:rgba(128,222,234,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80deea" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><span class="ft">অটো সময়, পূর্ণমান</span></div>
<!-- set 2 (duplicate) -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4z"/></svg></div><span class="ft">প্রশ্ন এডিট করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><span class="ft">জলছাপ দেয়া যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2"/></svg></div><span class="ft">ঠিকানা যুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 20h14"/></svg></div><span class="ft">Logo, Motto যুক্ত হবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><span class="ft">অটো প্রতিষ্ঠানের নাম</span></div>
<div class="feat"><div class="fi" style="background:rgba(128,222,234,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80deea" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><span class="ft">অটো সময়, পূর্ণমান</span></div>
</div>
<!-- Row 2 (6 items × 2 for seamless loop, slightly different speed) -->
<div class="marquee-row r2">
<!-- set 1 -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><span class="ft">অটো নির্দেশনা (এডিটযোগ্য)</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div><span class="ft">অটো বিষয় ও অধ্যায়</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,138,128,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8a80" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.2" fill="#ff8a80" stroke="none"/><circle cx="15" cy="11" r="1.2" fill="#ff8a80" stroke="none"/></svg></div><span class="ft">OMR সংযুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/></svg></div><span class="ft">ফন্ট, কলাম, ডিভাইডার</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg></div><span class="ft">প্রশ্ন/অপশন স্টাইল পরিবর্তন</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="ft">সেট কোড, বিষয় কোড</span></div>
<!-- set 2 (duplicate) -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><span class="ft">অটো নির্দেশনা (এডিটযোগ্য)</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div><span class="ft">অটো বিষয় ও অধ্যায়</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,138,128,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8a80" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.2" fill="#ff8a80" stroke="none"/><circle cx="15" cy="11" r="1.2" fill="#ff8a80" stroke="none"/></svg></div><span class="ft">OMR সংযুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/></svg></div><span class="ft">ফন্ট, কলাম, ডিভাইডার</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg></div><span class="ft">প্রশ্ন/অপশন স্টাইল পরিবর্তন</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="ft">সেট কোড, বিষয় কোড</span></div>
</div>
</div>
<div class="cta">
<a href="https://sattacademy.com/e-question-builder" class="btn-y">এখনই শুরু করুন</a>
<a href="https://sattacademy.com/e-question-builder#question-list-section" class="btn-w">ডেমো দেখুন</a>
<div class="stats d-none d-md-flex">
<div class="stat"><div class="n">৫০,০০০+</div><div class="l">শিক্ষক</div></div>
<div class="stat"><div class="n">৩০ লক্ষ+</div><div class="l">প্রশ্নপত্র</div></div>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="md:col-span-1">
<div
class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-800 p-4 shadow-xs font-sans text-zinc-800 dark:text-zinc-200">
<div class="mb-10">
<!-- Title -->
<div class="mb-3">
<h3 class="text-gray-900 dark:text-gray-100 font-bold text-sm uppercase tracking-wide">
Related Question
</h3>
</div>
<!-- Divider -->
<div class="mb-4 h-px bg-gray-200 dark:bg-zinc-700"></div>
<!-- List -->
<div class="space-y-2 overflow-x-auto">
<div class="mb-1.5">
<a href="https://sattacademy.com/question/html-46167"
class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
HTML
(পূর্ণরূপ লিখুন)
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/question/html-25169"
class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
<p>HTML</p>
(পূর্ণরূপ লিখুন)
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/question/html%E0%A6%8F%E0%A6%B0-%E0%A6%AA%E0%A7%82%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%B0%E0%A7%82%E0%A6%AA-%E0%A6%B2%E0%A6%BF%E0%A6%96%E0%A7%81%E0%A6%A8"
class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
<p>'HTML'এর পূর্ণরূপ লিখুন।</p>
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/question/html-%E0%A6%AA%E0%A7%82%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%B0%E0%A7%82%E0%A6%AA-%E0%A6%95%E0%A7%80"
class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
HTML পূর্ণরূপ কী?
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/question/html-50631"
class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
HTML
(পূর্ণরূপ লিখুন)
</a>
</div>
</div>
</div>
<a href="https://sattacademy.com/e-question-builder"
class="block p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-dashed border-blue-200 dark:border-blue-800 hover:shadow-md transition-all duration-200 mb-4">
<div class="text-blue-800 dark:text-blue-200">
<span class="font-semibold text-lg">মাত্র ১৫ পয়সায় প্রশ্নপত্র</span>
<div class="text-blue-600 dark:text-blue-400 font-medium mt-1">
১ ক্লিকে প্রশ্ন, শীট, সাজেশন তৈরি করুন আজই
</div>
</div>
</a>
<style>
.ep {
background: linear-gradient(135deg, #1565c0 0%, #1e88e5 55%, #29b6f6 100%);
border-radius: 12px;
padding: clamp(16px, 4vw, 24px) clamp(14px, 4vw, 24px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
gap: 12px;
}
.ep-title {
color: #fff;
font-size: clamp(16px, 4.5vw, 22px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.3px;
}
.ep-sub {
color: rgba(255, 255, 255, 0.8);
font-size: clamp(11px, 2.8vw, 13px);
margin-top: -4px;
}
.ep-cta {
background: #43a047;
color: #fff;
border: none;
border-radius: 30px;
padding: 10px 28px;
font-size: clamp(12px, 3vw, 14px);
font-weight: 700;
cursor: pointer;
letter-spacing: 0.2px;
}
.ep-stats {
display: flex;
align-items: center;
gap: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 30px;
padding: 6px 14px;
}
.ep-stat {
display: flex;
align-items: center;
gap: 5px;
}
.ep-stat svg {
flex-shrink: 0;
}
.ep-stat span {
font-size: clamp(10px, 2.5vw, 12px);
color: #fff;
}
.ep-divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.25);
}
</style>
<div class="ep">
<p class="ep-title">Complete Exam<br>Preparation</p>
<p class="ep-sub">Learn, practice, analyse and improve</p>
<div style="display: flex; gap: 12px;">
<a href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Download SATT Academy app from Google Play">
<img src="/satt_logo/appstore.svg" alt="App Store" style="width: 120px; height: auto; cursor: pointer;">
</a>
<a href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Download SATT Academy app from Google Play">
<img src="/satt_logo/playstore.svg" alt="Play Store" style="width: 120px; height: auto; cursor: pointer;">
</a>
</div>
<div class="ep-stats">
<div class="ep-stat">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
<span>1M+ downloads</span>
</div>
<div class="ep-divider"></div>
<div class="ep-stat">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
<span>4.6 · 8k+ Reviews</span>
</div>
</div>
</div> </div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TKRYEG0LTD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-TKRYEG0LTD');
</script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
window.addEventListener('load', function() {
google.accounts.id.initialize({
client_id: "628877956961-qhkeatldt9371l65e3drolrv3a2t19uv.apps.googleusercontent.com",
callback: handleCredentialResponse,
auto_select: false,
cancel_on_tap_outside: false,
context: 'signin',
});
google.accounts.id.prompt();
});
async function handleCredentialResponse(response) {
try {
const res = await fetch('/google-login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
},
body: JSON.stringify({
credential: response.credential
}),
});
const data = await res.json();
if (data.success) {
window.location.href = '/';
} else {
toastr.error('Login failed. Please try again.');
}
} catch (err) {
console.error('Google login error:', err);
toastr.error('Something went wrong.');
}
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const isBot = /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
if(isBot) {
return;
}
if (typeof axios !== 'undefined') {
axios.post('/update-presence').catch(function(err) {
console.warn('Presence update failed:', err);
});
}
});
</script>
<script>
document.querySelectorAll('.pill').forEach(p => {
setTimeout(() => p.classList.add('show'), 50);
});
function showToast(msg) {
const t = document.getElementById('toast');
if (!t) return; // Guard clause
t.textContent = msg;
t.classList.add('show');
clearTimeout(window._tt);
window._tt = setTimeout(() => t.classList.remove('show'), 2200);
}
function addRipple(btn) {
const r = document.createElement('span');
r.className = 'ripple';
btn.appendChild(r);
setTimeout(() => r.remove(), 500);
}
// Safely attach listeners using Optional Chaining or If checks
const mcqBtn = document.getElementById('mcqBtn');
if (mcqBtn) {
mcqBtn.addEventListener('click', function () {
addRipple(this);
showToast('199 টি MCQ লোড হচ্ছে...');
});
}
const cqBtn = document.getElementById('cqBtn');
if (cqBtn) {
cqBtn.addEventListener('click', function () {
addRipple(this);
showToast('55টি CQ লোড হচ্ছে...');
});
}
const pracBtn = document.getElementById('pracBtn');
if (pracBtn) {
pracBtn.addEventListener('click', function () {
showToast('Practice শুরু হচ্ছে!');
});
}
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<!-- Global Functions -->
<script>
function toggleMobileSidebar() {
var s = document.getElementById('mobile-sidebar');
if (s) s.classList.toggle('open');
}
function toggleTheme() {
var html = document.documentElement;
var isDark = html.classList.contains('dark');
var next = isDark ? 'light' : 'dark';
html.classList.toggle('dark', next === 'dark');
html.classList.toggle('light', next === 'light');
localStorage.setItem('theme', next);
}
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('click', function (e) {
var s = document.getElementById('mobile-sidebar');
var btn = document.querySelector('[onclick="toggleMobileSidebar()"]');
if (s && s.classList.contains('open')) {
if (!s.contains(e.target) && (!btn || !btn.contains(e.target))) {
s.classList.remove('open');
}
}
});
});
</script>
<!-- Mobile Sidebar -->
<script src="https://sattacademy.com/js/inspect.js" defer></script>
<script type="text/javascript">
// Apply Copy limit
document.addEventListener('DOMContentLoaded', () => {
const dailyCopyLimit = 50; // Daily copy limit
const copyCountKey = 'dcc'; // Daily copy count key
const lastResetKey = 'dcc_lrt'; // Last reset time key
// Helper function to reset the copy count daily
const resetCopyCountIfNeeded = () => {
const now = new Date();
const today = now.toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
const lastReset = localStorage.getItem(lastResetKey);
if (lastReset !== today) {
localStorage.setItem(copyCountKey, 0); // Reset count
localStorage.setItem(lastResetKey, today); // Update reset time
}
};
resetCopyCountIfNeeded();
// Copy event listener
document.addEventListener('copy', (e) => {
e.preventDefault();
const selection = document.getSelection();
if (selection.toString().length === 0) {
return;
}
let currentCount = parseInt(localStorage.getItem(copyCountKey)) || 0;
if (currentCount >= dailyCopyLimit) {
Swal.fire({
icon: 'error',
title: 'Copy Limit Exceeded',
text: `You have reached the daily copy limit of ${dailyCopyLimit}. Please come back tomorrow!`,
});
return;
}
// Append additional text to copied content
const additionalText =
"\n\nCopied from SATT ACADEMY. Visit us at: https://sattacademy.com";
const modifiedText = selection + additionalText;
e.clipboardData.setData('text/plain', modifiedText);
// Increment copy count
currentCount++;
localStorage.setItem(copyCountKey, currentCount);
if (currentCount % 10 === 0) {
alert(
`You have used ${currentCount} out of ${dailyCopyLimit} copies available today.`
);
}
});
});
</script> </body>
</html>
