দুটি ফিক্সড পজিশন ডিভ ব্যবহার করে স্ক্রিনকে ৫০/৫০ ভাগ করে دوটি প্যানেল তৈরি করা যায়।
উদাহরণ: স্প্লিট স্ক্রিন
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial; color: white; }
h1{ padding:20px; }
.left,.right { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; }
.left { left: 0; background-color: rgb(36, 0, 95); }
.right { right: 0; background-color: rgb(56, 1, 44); }
.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.centered img { width: 150px; border-radius: 50%; }
</style>
</head>
<body>
<div class="left"><h1>বাম পাশে কিছু র্যান্ডম টেক্সট</h1></div>
<div class="right"><h1>ডান পাশে কিছু র্যান্ডম টেক্সট</h1></div>
</body>
</html>
কোড ব্যাখ্যা
- position: fixed; height: 100%; width: 50%: প্রতিটি প্যানেল ভিউপোর্টের আধা প্রস্থ এবং পুরো উচ্চতা কভার করে।
- .left { left: 0 } / .right { right: 0 }: বাম ও ডানে ফিক্সড।
- z-index: 1: কন্টেন্টের উপরে রাখে।
সতর্কতা
ফিক্সড পজিশনিং ব্যবহার করলে কন্টেন্ট স্ক্রল করলে প্যানেলগুলো স্থির থাকবে। পূর্ণ পেজ লেআউটের জন্য `float` বা `flex`/`grid` ব্যবহার করুন।
