Di bawah ini kita akan mempelajari cara membuat testimonial responsif dengan CSS.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { border: 2px solid #ccc; background-color: #eee; border-radius: 5px; padding: 16px; margin: 16px 0 } .container::after { content: ""; clear: both; display: table; } .container img { float: left; margin-right: 20px; border-radius: 50%; } .container span { font-size: 20px; margin-right: 15px; } @media (max-width: 500px) { .container { text-align: center; } .container img { margin: auto; float: none; display: block; } } </style> </head> <body> <h2>Responsive Testimonials</h2> <p> Ubah ukuran jendela browser untuk melihat efeknya.</p> <div class="container"> <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar" style="width:90px"> <p><span>Evan John.</span> Owner okey.</p> <p>Website ini memang yang terbaik.</p> </div> <div class="container"> <img src="https://dosenit.com/wp-content/uploads/2021/02/images.png" alt="Avatar" style="width:90px"> <p><span>Marianna marianne.</span> Leader dokey.</p> <p>Website ini membantu ku!.</p> </div> </body> </html>
Cara Gaya Testimoni
Langkah 1) Tambahkan HTML:
Contoh
<div class="container"> <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar" style="width:90px"> <p><span>Evan John.</span> Owner okey.</p> <p>Website ini memang yang terbaik.</p> </div> <div class="container"> <img src="https://dosenit.com/wp-content/uploads/2021/02/images.png" alt="Avatar" style="width:90px"> <p><span>Marianna marianne.</span> Leader dokey.</p> <p>Website ini membantu ku!.</p> </div>
Langkah 2) Tambahkan CSS:
Contoh
/* Style container dengan tepi bulat, latar belakang abu-abu dan beberapa padding dan margin */ .container { border: 2px solid #ccc; background-color: #eee; border-radius: 5px; padding: 16px; margin: 16px 0; } /* Hapus float setelah container */ .container::after { content: ""; clear: both; display: table; } /* Gambar melakukan float di dalam container ke kiri. Tambahkan margin kanan, dan beri gaya gambar sebagai lingkaran*/ .container img { float: left; margin-right: 20px; border-radius: 50%; } /* Tingkatkan ukuran font elemen span */ .container span { font-size: 20px; margin-right: 15px; } /* Tambahkan kueri media untuk responsivitas. Ini akan memusatkan teks dan gambar di dalam container */ @media (max-width: 500px) { .container { text-align: center; } .container img { margin: auto; float: none; display: block; } }