چگونه ایجاد کنید: نظرات مشتری

چگونه سبک نقد مشتری را تنظیم کنیم

مرحله اول - اضافه کردن HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>کریس فoks.</span> مدیرعامل مدارس قوی.</p>
  <p>بیل گیتس ما را از یک فاجعه وب نجات داد.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>ریبکا فлекс.</span> مدیرعامل شرکت.</p>
  <p>هیچ کسی بهتر از بیل گیتس نیست.</p>
</div>

مرحله دوم - اضافه کردن CSS:

/* با استفاده از حاشیه‌های گرد، پس‌زمینه خاکستری و برخی حاشیه‌های داخلی و خارجی، سبک قالب را تنظیم کنید */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
display: block;
/* شناور کردن داخل قالب را در قالب بعدی تمیز کنید */
.container::after {
  content: "";
  clear: both;
  display: table;
display: block;
/* تصویر داخل قالب را به چپ شناور کنید. به تصویر حاشیه خارجی اضافه کنید و سبک تصویر را به شکل دایره‌ای تنظیم کنید */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
display: block;
/* افزایش اندازه فونت عنصر span */
.container span {
  font-size: 20px;
  margin-right: 15px;
display: block;
/* اضافه کردن معیار رسانه برای پیاده‌سازی طرح‌بندی پاسخگو. این باعث می‌شود که متن و تصاویر در داخل قالب به وسط قرار گیرند */
@media (max-width: 500px) {
  .container {
    text-align: center;
  display: block;
  .container img {
    margin: auto;
    float: none;
    float: none;
  display: block;
display: block;

}