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>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
