কম্পিউটার

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


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:25px;
   }
   .chip {
      display: inline-block;
      padding: 0 25px;
      height: 50px;
      font-size: 20px;
      font-weight: bold;
      line-height: 50px;
      border-radius: 25px;
      background-color: #6a0074;
      color: white;
   }
   .chip img {
      float: left;
      margin: 0 10px 0 -25px;
      height: 50px;
      width: 50px;
      border-radius: 50%;
   }
</style>
</head>
<body>
<h1>Contact chip Example</h1>
<div class="chip">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909__340.png">
James Anderson
</div>
<div class="chip">
<img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
Britney Smith
</div>
</body>
</html>

আউটপুট

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

তৈরি করবে

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


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

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

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

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