کیوں تیار کرسکتا ہو: اشارتی جوائنل

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

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

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>کریس فاکس.</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;

}