কম্পিউটার

কিভাবে 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;
   }
   .testimonialContainer {
      border: 2px solid rgba(0, 0, 0, 0.363);
      background-color: rgb(207, 235, 218);
      border-radius: 5px;
      padding: 16px;
      margin: 16px 0;
   }
   .profilePic {
      width: 100px;
      height: 100px;
   }
   .testimonialContainer::after {
      content: "";
      clear: both;
      display: table;
   }
   .testimonialContainer img {
      float: left;
      margin-right: 20px;
      border-radius: 50%;
   }
   .testimonialContainer span {
      font-size: 24px;
      font-weight: 500;
      margin-right: 15px;
      color: purple;
   }
   .testimonialContainer p {
      font-size: 18px;
      font-style: oblique;
   }
   @media (max-width: 500px) {
      .testimonialContainer {
         text-align: center;
      }
      .testimonialContainer img {
         margin: auto;
         float: none;
         display: block;
      }
   }
</style>
</head>
<body>
<h1>Responsive Testimonials Example</h1>
<div class="testimonialContainer">
<img class="profilePic" src="https://images.pexels.com/photos/614810/pexels-photo614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<span>James Anderson</span>
<p>Shawn is a hard working and comitted individual</p>
</div>
<div class="testimonialContainer">
<img class="profilePic" src="https://images.pexels.com/photos/2128807/pexels-photo2128807.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<span>Steve Boulder</span>
<p>Shawn is great at managing people</p>
</div>
</body>
</html>

আউটপুট

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

তৈরি করবে

কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল প্রশংসাপত্র তৈরি করবেন?


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

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

  3. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ব্লগ লেআউট তৈরি করবেন?

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