কম্পিউটার

কিভাবে CSS দিয়ে একটি স্প্লিট স্ক্রিন (50/50) তৈরি করবেন?


CSS দিয়ে একটি স্প্লিট স্ক্রিন তৈরি করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!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>Some random text on the left</h1>
</div>
<div class="right">
<h1>Some random text on the right</h1>
</div>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে একটি স্প্লিট স্ক্রিন (50/50) তৈরি করবেন?


  1. কিভাবে CSS দিয়ে কার্ড তৈরি করবেন?

  2. কিভাবে CSS দিয়ে একটি কুপন তৈরি করবেন?

  3. কিভাবে CSS দিয়ে তীর তৈরি করবেন?

  4. কিভাবে CSS দিয়ে একটি স্প্লিট স্ক্রিন (50/50) তৈরি করবেন?