چگونه ایجاد کنیم: صفحه معرفی تیم

چگونه صفحه معرفی تیم را ایجاد کنیم

ابتداءً - إضافة HTML:

<div class="row">
  <دیوی کلاس="کولمن">
    <دیوی کلاس="کارڈ">
      <img src="img1.jpg" alt="Jane" style="width:100%">
      <دیوی کلاس="کنٹینر">
        <h2>Bill Gates</h2>
        <p class="title">CEO & Founder</p>
        <پائیدان>کچھ متن جو میرا وصف کرتا ہے لورم اپسوم اپسوم لورم.</پائیدان>
        <پائیدان>example@example.com</پائیدان>
        <پائیدان><بٹن کلاس="بٹن">کنٹیکٹ</بٹن></پائیدان>
      </div>
    </div>
  </div>
  <دیوی کلاس="کولمن">
    <دیوی کلاس="کارڈ">
      <img src="img2.jpg" alt="Mike" style="width:100%">
      <دیوی کلاس="کنٹینر">
        <ایچ2>ایلون ماسک</ایچ2>
        <پائیدان کلاس="تیلٹل">آرٹ ڈائریکٹر</پائیدان>
        <پائیدان>کچھ متن جو میرا وصف کرتا ہے لورم اپسوم اپسوم لورم.</پائیدان>
        <پائیدان>example@example.com</پائیدان>
        <پائیدان><بٹن کلاس="بٹن">کنٹیکٹ</بٹن></پائیدان>
      </div>
    </div>
  </div>
  <دیوی کلاس="کولمن">
    <دیوی کلاس="کارڈ">
      <ایمگ سورس="img3.jpg" الٹ="جان" اسٹائل="کثیرتی:100%">
      <دیوی کلاس="کنٹینر">
        <ایچ2>استیو جابز</ایچ2>
        <پائیدان کلاس="تیلٹل">ڈیزائنر</پائیدان>
        <پائیدان>کچھ متن جو میرا وصف کرتا ہے لورم اپسوم اپسوم لورم.</پائیدان>
        <پائیدان>example@example.com</پائیدان>
        <پائیدان><بٹن کلاس="بٹن">کنٹیکٹ</بٹن></پائیدان>
      </div>
    </div>
  </div>
</div>

دوسرا قدم - سی ایس ایس اضافہ کریں:

/* پارو پارو تین کلومن */
.کولمن {
  فلوٹ: لین;
  کثیرتی: 33.3%;
  مارگ-بنیادی: 16پایس;
  پیدائشنگ: 0 8پایس;
}
/* چھوٹی اسکرین پر، کلومن کو سینک سینک دکھائیں، نہ کہ پارو پارو */
@میڈیا سکرین اینڈ (مکس-وائڈ: 650پایس) {
  .کولمن {
    کثیرتی: 100%;
    ڈسپلے: بلوک;
  }
}
/* کارڈ کا اثر پیدا کریں */
.کارڈ {
  بکس-شادی: 0 4پایس 8پایس 0 راگوبا(0, 0, 0, 0.2);
}
/* کنٹینر کے اندر کچھ کچھ بائیں داخلی مارگ */
.کنٹینر {
  پیدائشنگ: 0 16پایس;
}
/* کُل فلاٹ کا خاتمہ کریں */
.کنٹینر::اُن، .رو:اُن {
  کنٹینٹ: "";
  کلیئر: بلا;
  ڈسپلے: تیبل;
}
.تیلٹل {
  رنگ: گری;
}
.بٹن {
  بوردر: نہیں;
  آؤٹلائن: 0;
  ڈسپلے: انلائن بلوک;
  پیدائشنگ: 8پایس;
  رنگ: وائٹ;
  بگهی-رنگ: #000;
  تکس-الین: مرکز;
  کرسار: pointer;
  کثیرتی: 100%;
}
.بٹن:هور {
  background-color: #555;
}

آزمایش کنید