Membuat Box Testimonial Elegan dengan CSS

Membuat Box Testimonial Elegan dengan CSS

—

by

Webbiz.ID
in

Berikut adalah contoh Membuat 3 Box Testimonial Elegan dengan CSS dan HTML.

HTML
<!DOCTYPE html>
<html>
   <head>
      <title>Testimonial</title>
      <style>
         .testimonial-container {
         display: flex;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         }
         .testimonial-box {
         width: 300px;
         padding: 20px;
         margin: 20px;
         background-color: #f2f2f2;
         border-radius: 10px;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
         .testimonial-box img {
         width: 80px;
         height: 80px;
         border-radius: 50%;
         margin-bottom: 10px;
         }
         .testimonial-box h3 {
         font-size: 18px;
         margin-bottom: 10px;
         }
         .testimonial-box p {
         font-size: 14px;
         color: #666;
         }
      </style>
   </head>
   <body>
      <div class="testimonial-container">
         <div class="testimonial-box">
            <img src="avatar1.jpg" alt="Avatar 1">
            <h3>John Doe</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae justo ac nunc lacinia lacinia. Nulla facilisi.</p>
         </div>
         <div class="testimonial-box">
            <img src="avatar2.jpg" alt="Avatar 2">
            <h3>Jane Smith</h3>
            <p>Ut euismod, nisl id tincidunt lacinia, nunc nunc tincidunt nunc, id lacinia nunc nunc id nunc.</p>
         </div>
         <div class="testimonial-box">
            <img src="avatar2.jpg" alt="Avatar 3">
            <h3>David Johnson</h3>
            <p>Aliquam erat volutpat. Sed euismod, nisl id tincidunt lacinia, nunc nunc tincidunt nunc, id lacinia nunc nunc id nunc.</p>
         </div>
      </div>
   </body>
</html>
HTML

Anda dapat mengganti avatar1.jpg, avatar2.jpg, dan avatar3.jpg dengan gambar avatar yang sesuai.

See the Pen Testimonials CSS by WebbizID (@De-Orchids) on CodePen.

Semoga contoh kode di atas dapat membantu Anda dalam membuat 3 box testimonial elegan menggunakan CSS dan HTML.

Artikel Terbaru ⭐