কম্পিউটার

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


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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin:20px;
   }
   .card {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      width: 40%;
      max-width: 300px;
      background-color: rgb(56, 185, 185);
   }
   .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   }
   .Designation {
      padding: 2px 16px;
      background-color: rgb(107, 43, 167);
      color:white;
   }
   .card img{
      width: 300px;
      height: 250px;
   }
</style>
</head>
<body>
<h1>Card Example</h1>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
<div class="Designation">
<h3>Britney Smith</h3>
<p>Senior Designer</p>
</div>
</div>
</body>
</html>

আউটপুট

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

তৈরি করবে

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


  1. কিভাবে CSS দিয়ে একটি ফ্লিপ কার্ড তৈরি করবেন?

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

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

  4. কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল কলাম কার্ড তৈরি করবেন?